/* Artie — Weddings. Its own room: the cream pages of the wedding pricelist,
   EB Garamond set large and slow, ARTIE's hand-lettered caps for the one big line (the main site's faces), one ink, photographs doing
   the talking, and a sealed letter to close. Nothing shared with artie.css. */
:root {
  --paper: #F4EFDF;  /* lighter than the main site's paper, same stock */
  --grain: url("tex/paper-fibre.webp") 0 0 / 512px;  /* the main site's fibre paper (tools/tex.ps1), on lighter stock */
  --ink: #2B2621;   /* on paper 14:1 */
  --soft: #6A6056;  /* on paper 6.1:1 */
  --line: rgb(43 38 33 / .16);
  --display: "Tenor Sans", Optima, Candara, serif;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --pad: clamp(20px, 5vw, 80px);
  --slow: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  /* viewer.css, in this room: photographs come into focus instead of developing; a warm dark surround, wax-red marker */
  --reveal: focus;
  --v-bg: #1D1916;
  --v-fg: #F4EFDF;
  --v-dim: rgb(244 239 223 / .62);
  --v-line: rgb(244 239 223 / .3);
  --v-mark: #C2473B;
  --v-lock: #C2473B;
  --v-count: italic 400 16px/1 var(--serif);
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .45s ease both out; }
::view-transition-new(root) { animation: .6s var(--slow) both in; } /* the page can't be touched while this runs, so it stays short */
@keyframes out { to { opacity: 0; } }
@keyframes in { from { opacity: 0; transform: scale(1.025); } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font: 400 19px/1.55 var(--serif); font-synthesis: none; font-kerning: normal; font-feature-settings: "kern", "liga", "onum"; color: var(--ink); background: var(--grain), var(--paper); background-blend-mode: multiply; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
h1, h2, p { text-wrap: pretty; font-weight: 400; }
em { font-style: italic; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the hidden <defs> sheet and screen-reader-only text */
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* header */
.top { display: flex; justify-content: space-between; align-items: center; padding: 28px var(--pad); }
.home { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.home svg { height: 52px; width: auto; aspect-ratio: 466 / 680; fill: currentColor; filter: url(#print); }
.home span { font: italic 400 26px/1 var(--serif); }
.top nav { display: flex; gap: 28px; font: 400 12px var(--display); letter-spacing: .2em; text-transform: uppercase; }
.top nav a { text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.top nav a:hover { border-color: currentColor; }
.top nav a { position: relative; }
.top nav a::before { content: ""; position: absolute; inset: -13px -7px; } /* small caps, finger-sized target */

/* opening: blur, then focus */
.open { padding: clamp(40px, 8vw, 120px) var(--pad) 0; }
.open .big { font: 400 clamp(34px, 5.4vw, 84px)/1.08 var(--display); text-transform: uppercase; letter-spacing: .07em; max-width: 13em; filter: url(#hand-l); }
.open .focus { margin: 28px 0 clamp(48px, 7vw, 96px) auto; width: fit-content; font: italic 400 clamp(24px, 2.4vw, 34px)/1.2 var(--serif); color: var(--soft); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vw, 16px); }
.pair figure { aspect-ratio: 4 / 5; overflow: hidden; }

/* chapters, in the order they happen */
.lead { padding: clamp(96px, 14vw, 200px) var(--pad) clamp(48px, 7vw, 96px); text-align: center; font: italic 400 clamp(30px, 3.4vw, 50px)/1.15 var(--serif); }
.lead p { max-width: 17em; margin: 0 auto; }
.ch { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: center; padding: clamp(40px, 6vw, 80px) var(--pad); border-top: 1px solid var(--line); margin: 0 var(--pad); padding-left: 0; padding-right: 0; }
.ch.flip { grid-template-columns: 1fr 1.45fr; }
.ch.flip > figure { order: 2; }
.ch > figure { overflow: hidden; }
.ch > figure.wide { aspect-ratio: 3 / 2; }
.ch > figure.tall { aspect-ratio: 4 / 5; max-height: 86svh; }
.ch h2 { font: 400 clamp(38px, 4.4vw, 68px)/1.02 var(--serif); letter-spacing: -.01em; margin-bottom: 20px; }
.ch p { max-width: 26em; font-size: clamp(19px, 1.4vw, 21px); }
.ch p + p { margin-top: 12px; color: var(--soft); }
.ch .also { margin-top: 32px; width: 62%; aspect-ratio: 4 / 5; overflow: hidden; rotate: -1deg;
  --h: 14px; padding: 9px; background: #FBF7EC; /* a postage stamp: paper border, perforated edge */
  -webkit-mask: radial-gradient(circle, #0000 3.4px, #000 4px) calc(var(--h) / -2) calc(var(--h) / -2) / var(--h) var(--h) round,
                linear-gradient(#000 0 0) center / calc(100% - var(--h)) calc(100% - var(--h)) no-repeat;
          mask: radial-gradient(circle, #0000 3.4px, #000 4px) calc(var(--h) / -2) calc(var(--h) / -2) / var(--h) var(--h) round,
                linear-gradient(#000 0 0) center / calc(100% - var(--h)) calc(100% - var(--h)) no-repeat; }
.ch .also.wide { width: 80%; aspect-ratio: 3 / 2; }

/* afterwards */
.after { position: relative; display: grid; place-items: center; min-height: 92svh; margin-top: clamp(48px, 8vw, 120px); color: var(--paper); text-align: center; overflow: hidden; background: #4a3a30; }
.after img { position: absolute; inset: 0; }
.after::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(30 22 18 / .36); }
.after div { position: relative; z-index: 2; padding: var(--pad); }
.after h2 { font: italic 400 clamp(44px, 6.4vw, 100px)/1 var(--serif); letter-spacing: -.01em; }
.after p { max-width: 27em; margin: 24px auto 0; font-size: clamp(19px, 1.45vw, 22px); }

/* what couples ask before they write: the answers they'd otherwise have to find on the main site */
.qa { padding: clamp(80px, 11vw, 160px) var(--pad) 0; }
.qa h2 { text-align: center; font: italic 400 clamp(30px, 3.2vw, 46px)/1.15 var(--serif); margin-bottom: clamp(32px, 4vw, 56px); }
.qa .qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 36px clamp(28px, 4vw, 64px); max-width: 72rem; margin: 0 auto; }
.qa .qs div { padding-top: 18px; border-top: 1px solid var(--line); }
.qa h3 { margin-bottom: 8px; font: 400 clamp(23px, 1.9vw, 27px)/1.2 var(--serif); }
.qa p { color: var(--soft); max-width: 30em; }

/* guides to read before enquiring */
.reads { padding: clamp(80px, 11vw, 160px) var(--pad) 0; text-align: center; }
.reads h2 { font: italic 400 clamp(30px, 3.2vw, 46px)/1.15 var(--serif); }
.reads ul { list-style: none; display: grid; gap: 12px; margin-top: 26px; }
.reads a { font-size: clamp(19px, 1.5vw, 22px); text-decoration-color: var(--line); text-underline-offset: 5px; }
.reads a:hover { text-decoration-color: currentColor; }

/* enquire */
.ask { position: relative; padding: clamp(80px, 12vw, 180px) var(--pad); display: grid; justify-items: center; text-align: center; }
.reads + .ask { padding-top: clamp(64px, 8vw, 120px); }
.letter { width: min(94vw, 680px); height: auto; }
.ask h2 { margin-top: clamp(28px, 4vw, 52px); font: 400 clamp(24px, 2.8vw, 40px)/1.2 var(--display); text-transform: uppercase; max-width: 20em; margin-inline: auto; letter-spacing: .09em; filter: url(#hand); }
.ask > p { margin-top: 16px; color: var(--soft); font-size: clamp(19px, 1.45vw, 21px); }
.ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.ways a { text-decoration: none; padding: 15px 26px; border: 1px solid var(--ink); border-radius: 99px; font: 400 12px var(--display); letter-spacing: .2em; text-transform: uppercase; transition: background-color .2s var(--ease-out), color .2s var(--ease-out), scale .16s var(--ease-out); }
.ways a:first-child, .ways a:hover { background: var(--ink); color: var(--paper); }
.ways a:first-child:hover { background: #4A4038; border-color: #4A4038; } /* stays filled: a hollow pill read as disabled */
.ways a:active { scale: .97; }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 var(--pad); padding: 28px 0 36px; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); }
.foot svg { height: clamp(84px, 8vw, 110px); width: auto; aspect-ratio: 562 / 755; fill: var(--ink); filter: url(#print); }
.foot a { color: var(--ink); }

/* slow reveal: each line arrives once, on its own clock, as it comes into view (artie.js adds .reveal and .in);
   without the script everything is simply there */
.reveal .rise { transition: opacity 1s var(--slow), translate 1s var(--slow), rotate 1.2s var(--slow), scale 1.2s var(--slow); }
.reveal .rise:not(.in) { opacity: 0; translate: 0 18px; }
.reveal .letter.rise:not(.in) { translate: 0 80px; rotate: 5deg; scale: .94; } /* the letter is posted */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-new(root) { animation-name: out; animation-direction: reverse; }
  .reveal .rise:not(.in) { translate: none; rotate: none; scale: none; }
}

/* alive: the letter is posted, photographs drift */
.ch figure { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ch figure:not(.also) img { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes drift { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.02) translateY(3%); } }
  }
  /* the first line is printed as the room opens, on a clock: it's on screen from the start, so a scrubbed version would sit half-printed */
  .open .big { animation: press 1.2s var(--slow) .15s both; }
  @keyframes press { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
}

@media (max-width: 820px) {
  .top { flex-wrap: wrap; gap: 10px 16px; } /* "Pernikahan" plus the language switch can outgrow a phone: the nav drops a line instead of overflowing */
  .top nav { margin-left: auto; gap: 14px; letter-spacing: .12em; }
  .top nav a:nth-child(2) { display: none; } /* the journal waits in the footer; "Artie" stays, it's the only way back to the main site up here */
  .home svg { height: 44px; }
  .home span { font-size: 20px; }
  .open .big { filter: url(#hand); }
  .ask h2 { filter: url(#hand-s); }
  .open .focus { margin-left: 0; }
  .ch, .ch.flip { grid-template-columns: 1fr; }
  .ch.flip > figure { order: 0; }
  .ch .also, .ch .also.wide { width: 100%; }
  .foot { flex-direction: column; align-items: flex-start; }
}