/* skin.css — malayadiego (Malaya & Diego). Site 5: Filipiniana heritage. lab/docs/SITE5-PLAN.md §5.

   The four loud axes: the abanico (a folded fan in the corner that opens into the pages) · five pages, the
   weight in the rites · the capiz screen (the couple behind two sliding leaves of capiz) · the parallel text
   (in Both, each paragraph and its translation side by side, like a bilingual missal, wherever the column is
   wide enough; under each other where it is not).
   Palette: piña ivory, narra for the ink, capiz pearl, a sampaguita-leaf green; a gold thread for ornament only.
   Type: Cormorant Garamond for the names, the headings and the gloss (its italic is the translation's voice),
   EB Garamond for reading, both self-hosted (OFL, demo/assets/type/).

   §1 tokens · §2 base · §3 frame, type, buttons · §4 the gloss and the parallel text · §5 the design-study tab
   · §6 the language · §7 the abanico · §8 the cover · §9 the cover's sections · §10 inner pages · §11 the
   story · §12 the rites · §13 details · §14 the reply · §15 the page turn and the foot · §16 motion */

@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/type/cormorant-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/type/cormorant-garamond-400i.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/type/eb-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/type/eb-garamond-600.woff2") format("woff2");
}

/* §1 · tokens */
[data-skin="malayadiego"] {
  --pina: #f5efe3;           /* piña ivory: the page */
  --pina-2: #ece3d2;         /* a card */
  --pina-3: #e0d4bd;
  --sheet: #fbf8f1;          /* a letter: whiter than the page */
  --narra: #3a2618;          /* the ink */
  --narra-2: #5c4232;        /* quieter text, the gloss */
  --wood: #6b4a33;           /* the window's frame, the sill */
  --line: #d6c9b1;
  --pearl: #ece8e0;          /* capiz */
  --pearl-2: #d9d2c4;
  --leaf: #2f4a2c;           /* the sampaguita leaf: the accent, for text too */
  --leaf-soft: #7d9570;      /* lines and marks only */
  --leaf-mid: #66805c;       /* large numerals: 3.7:1 on --pina */
  --thread: #a7834a;         /* gold thread: ornament only, never text */

  --bg: var(--pina);
  --bg-raised: var(--pina-2);
  --ink: var(--narra);
  --muted: var(--narra-2);
  --rule: var(--line);
  --accent: var(--leaf);
  --accent-soft: rgb(47 74 44 / .1);
  --field: #fdfbf6;

  --display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: .875rem;
  --step-0: 1.125rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  --step-4: clamp(2.8rem, 1.8rem + 4.6vw, 5.4rem);
  --step-5: clamp(3.4rem, 2rem + 7vw, 7.4rem);

  --radius: 3px;
  --radius-card: 4px;
  --rule-w: 1px;
  --gap: 1rem;
  --margin: clamp(1rem, 5vw, 3rem);
  --module: clamp(3.5rem, 8vw, 6.5rem);
  --fan-r: 300px;            /* the open fan's radius */
  --motion-fast: 220ms;
  --motion-slow: 700ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.16, .84, .24, 1);
  --a-reveal-dur: 1000ms;
  --a-reveal-ease: var(--ease-soft);
  --a-rise-y: 14px;
}
@media (min-width: 64em) { [data-skin="malayadiego"] { --fan-r: 380px; } }

/* §2 · base. Both html and body clip sideways (DECISIONS.md, the iPhone stand-in). */
html[data-skin="malayadiego"] { overflow-x: clip; background: var(--pina); color-scheme: light; scroll-padding-bottom: 6rem; }
[data-skin="malayadiego"] body {
  background: var(--pina); color: var(--ink);
  font: var(--step-0)/1.6 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
[data-skin="malayadiego"] a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--leaf-soft); }
[data-skin="malayadiego"] a:hover { color: var(--leaf); text-decoration-color: currentColor; }
[data-skin="malayadiego"] main img { background: var(--pina-3); }
[data-skin="malayadiego"] :focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
.wsd-skip { background: var(--narra); color: var(--pina); border-radius: var(--radius); }
.nw { white-space: nowrap; }
.amp { font-style: italic; color: var(--leaf); }
.kicker, .label {
  font: 600 .78rem/1.4 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--leaf);
}
.label { color: var(--narra-2); letter-spacing: .14em; }
.lede { font-size: var(--step-1); line-height: 1.55; max-width: 34em; }
.hint { font-size: var(--step--1); line-height: 1.5; color: var(--narra-2); font-family: var(--ui); }

/* §3 · frame, type, buttons */
.wrap { width: min(100% - 2 * var(--margin), 66rem); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--margin), 76rem); }
.section { padding-block: var(--module); position: relative; }
.band-title { font: 400 var(--step-3)/1.06 var(--display); color: var(--narra); text-wrap: balance; margin-top: .3rem; }
.links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.1rem; align-items: center; }
.more { font: 600 .95rem/1.3 var(--ui); display: inline-flex; align-items: center; min-height: 44px; }
.more::after { content: "→"; margin-left: .45em; color: var(--leaf); display: inline-block; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.5rem;
  border: 1px solid var(--narra); border-radius: 2px;
  background: transparent; color: var(--narra);
  font: 600 .95rem/1.15 var(--ui); letter-spacing: .03em; text-decoration: none; text-align: center;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
[data-skin="malayadiego"] a.btn { text-decoration: none; }
.btn:hover, [data-skin="malayadiego"] a.btn:hover { background: var(--narra); color: var(--pina); }
.btn--solid, [data-skin="malayadiego"] a.btn--solid { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.btn--solid:hover, [data-skin="malayadiego"] a.btn--solid:hover { background: var(--narra); border-color: var(--narra); color: #fff; }
.btn--quiet { border-color: var(--line); }
.panel { background: var(--pina-2); border-radius: var(--radius-card); padding: clamp(1.25rem, 4vw, 2.25rem); }
/* the ornaments: generated art, never text */
.orn { position: absolute; pointer-events: none; background: center / contain no-repeat; }
.orn--abanico { background-image: url("../assets/malayadiego/orn-abanico.webp"); }
.orn--capiz { background-image: url("../assets/malayadiego/orn-capiz.webp"); }
.orn--calado { background-image: url("../assets/malayadiego/orn-calado.webp"); }
.orn--sampaguita { background-image: url("../assets/malayadiego/orn-sampaguita.webp"); }

/* §4 · the gloss and the parallel text (i18n.js, Both). The lead language is the large voice; the other is
   its translation, in the italic, quieter. Under each other by default; side by side where a .par column is
   wide enough (a container query, so the same paragraph pairs up in a wide header and stacks in a card). */
.wsd-gloss { display: block; font-family: var(--display); font-style: italic; font-weight: 400; color: var(--narra-2); font-size: 1.06em; line-height: 1.45; margin-top: .25em; }
.kicker .wsd-gloss, .label .wsd-gloss { text-transform: none; letter-spacing: .02em; font-size: 1.25em; margin-top: 0; }
.ch-when .wsd-gloss, .day-venue .wsd-gloss, .sill-where .wsd-gloss { text-transform: none; letter-spacing: .02em; font-size: 1.3em; margin-top: 0; }
.band-title .wsd-gloss, .head-title .wsd-gloss, .ch-title .wsd-gloss { font-size: .52em; line-height: 1.25; margin-top: .4em; }
.btn[data-glossed] { flex-direction: column; gap: 0; padding-block: .45rem; }
.btn .wsd-gloss { font-size: .98rem; margin: 0; color: inherit; opacity: .85; }
.more .wsd-gloss { display: inline; margin: 0 0 0 .5em; }
.par { container-type: inline-size; }
@container (min-width: 36rem) {
  .par p[data-glossed], .par h3[data-glossed] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4cqi, 3rem); max-width: none;
  }
  .par p[data-glossed] > .wsd-gloss, .par h3[data-glossed] > .wsd-gloss {
    margin-top: 0; padding-left: clamp(1.5rem, 4cqi, 3rem); margin-left: calc(-1 * clamp(1.5rem, 4cqi, 3rem) / 2);
    border-left: 1px solid var(--line);
  }
}

/* §5 · the design-study tab, top left */
.study { position: fixed; z-index: 41; left: max(1rem, env(safe-area-inset-left)); top: 1rem; max-width: calc(100vw - 2rem); }
.study-tab, .demo-btn {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .95rem;
  border: 1px solid var(--line); border-radius: 999px; background: rgb(251 248 241 / .94);
  font: 600 .8rem/1 var(--ui); color: var(--narra); letter-spacing: .04em;
}
.study-tab:hover, .demo-btn:hover { border-color: var(--leaf); }
.study-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--leaf); }
.study-panel {
  margin-top: .5rem; width: min(24rem, calc(100vw - 2rem)); padding: 1rem 1.1rem; display: grid; gap: .7rem;
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 12px 30px rgb(58 38 24 / .14);
}
.study-panel p { font: var(--step--1)/1.55 var(--ui); }
.study-ctl { display: flex; flex-wrap: wrap; gap: .5rem; }

/* §6 · the language: bottom left on every page, and large on the cover. The pressed one is filled. */
.tongue {
  position: fixed; z-index: 41; left: max(.75rem, env(safe-area-inset-left)); bottom: max(.9rem, env(safe-area-inset-bottom));
  display: flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: rgb(251 248 241 / .95); border: 1px solid var(--line); box-shadow: 0 6px 18px rgb(58 38 24 / .12);
}
.tongue-btn {
  min-height: 44px; min-width: 44px; padding: 0 .8rem; border: 0; border-radius: 999px; background: transparent;
  font: 600 .8rem/1 var(--ui); color: var(--narra); letter-spacing: .04em; cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.tongue-btn:hover { background: var(--pina-2); }
.tongue-btn[aria-pressed="true"] { background: var(--leaf); color: #fff; }
/* the short labels (TL · EN · TL+EN) until the margin beside the 66rem column is wider than the full bar (D6) */
.t-long { display: none; }
@media (min-width: 97.5em) { .t-long { display: inline; } .t-short { display: none; } }
.tongue-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1.6rem; max-width: 40rem; }
.tongue-big .tongue-btn {
  display: grid; gap: .35rem; justify-items: start; text-align: left; padding: .9rem 1rem; border-radius: var(--radius-card);
  border: 1px solid var(--line); background: var(--sheet); min-height: 5.2rem;
}
.tongue-big .tongue-btn b { font: 400 var(--step-2)/1 var(--display); letter-spacing: 0; }
.tongue-big .tongue-btn span { font: 400 .8rem/1.3 var(--ui); color: var(--narra-2); letter-spacing: 0; }
.tongue-big .tongue-btn[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); }
.tongue-big .tongue-btn[aria-pressed="true"] span { color: #e4ecdf; }
@media (max-width: 29.99em) {
  .tongue-big { grid-template-columns: 1fr; }
  .tongue-big .tongue-btn { min-height: 0; grid-template-columns: auto 1fr; align-items: baseline; gap: .8rem; }
}

/* §7 · the abanico (SITE5-PLAN.md §5, the user's pick, 2026-10-13). A folded fan in the bottom-right corner;
   tapped, it opens into a quarter circle, one rib per page, the page you are on embroidered in leaf green.
   Every rib is a wedge (clip-path, so only the wedge takes a tap), its name laid along the rib. The order runs
   from the top: Welcome, Our story, The rites, Details, Reply nearest the thumb. Reduced motion: no fanning. */
.fan-toggle {
  position: fixed; z-index: 44; right: max(.9rem, env(safe-area-inset-right)); bottom: max(.9rem, env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--wood);
  background: var(--narra); display: grid; place-items: center; cursor: pointer;
  /* a pale ring, so the dark fan still reads over the dark foot at the end of every page */
  box-shadow: 0 0 0 2px rgb(245 239 227 / .6), 0 8px 22px rgb(58 38 24 / .3);
}
.fan-folded {
  position: relative; width: 26px; height: 34px; transform: rotate(-20deg); transition: transform .5s var(--ease-soft);
  background: repeating-linear-gradient(90deg, var(--pearl) 0 3px, var(--pina-3) 3px 6px);
  clip-path: polygon(50% 100%, 6% 0, 94% 0);
}
.fan-folded::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--thread); }
.fan-toggle[aria-expanded="true"] .fan-folded { transform: rotate(-45deg) scale(.9); }
.fan-nav {
  position: fixed; z-index: 43; right: 0; bottom: 0; width: var(--fan-r); height: var(--fan-r);
  border-top-left-radius: 100%; overflow: hidden;
  visibility: hidden; pointer-events: none;
  filter: drop-shadow(0 0 1px rgb(58 38 24 / .4));
  transition: visibility 0s linear .45s;
}
.fan-nav[data-open] { visibility: visible; pointer-events: auto; transition: none; }
.fan::before {
  content: ""; position: fixed; inset: 0; z-index: 42; background: rgb(58 38 24 / .38);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.fan:has(.fan-nav[data-open])::before { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.fan-ribs { position: absolute; inset: 0; }
.fan-ribs li { position: absolute; inset: 0; transform-origin: 100% 100%; transition: transform .45s var(--ease-soft); pointer-events: none; }
.fan-nav[data-open] .rib { pointer-events: auto; }
/* closed, every rib folds down onto the last (Reply's): rotated back by its place */
.fan-ribs li:nth-child(1) { transform: rotate(-72deg); }
.fan-ribs li:nth-child(2) { transform: rotate(-54deg); }
.fan-ribs li:nth-child(3) { transform: rotate(-36deg); }
.fan-ribs li:nth-child(4) { transform: rotate(-18deg); }
.fan-nav[data-open] .fan-ribs li { transform: none; }
.fan-nav[data-open] .fan-ribs li:nth-child(1) { transition-delay: .08s; }
.fan-nav[data-open] .fan-ribs li:nth-child(2) { transition-delay: .06s; }
.fan-nav[data-open] .fan-ribs li:nth-child(3) { transition-delay: .04s; }
.fan-nav[data-open] .fan-ribs li:nth-child(4) { transition-delay: .02s; }
/* each rib's wedge is decoration on its <li> (::before the pleated paper, ::after the dark stick along its upper
   edge); the link is the name laid along the rib, a real box at least 44px deep, so a tap, the keyboard and the gate
   all see the same target */
.fan-ribs li::before, .fan-ribs li::after { content: ""; position: absolute; pointer-events: none; }
.fan-ribs li::before {
  inset: 0;
  background:
    repeating-conic-gradient(from 270deg at 100% 100%, rgb(255 255 255 / .35) 0deg 1.2deg, transparent 1.2deg 6deg),
    radial-gradient(circle at 100% 100%, var(--pina-3) 0 22%, var(--pearl) 22.5% 100%);
}
.fan-ribs li:nth-child(odd)::before {
  background:
    repeating-conic-gradient(from 270deg at 100% 100%, rgb(255 255 255 / .35) 0deg 1.2deg, transparent 1.2deg 6deg),
    radial-gradient(circle at 100% 100%, var(--pina-3) 0 22%, var(--pina) 22.5% 100%);
}
.fan-ribs li::after { right: 0; bottom: 0; width: 100%; height: 2px; background: var(--wood); transform-origin: 100% 50%; }
.fan-ribs li:nth-child(1)::before { clip-path: polygon(100% 100%, 69.1% 4.9%, 82.8% -8.7%, 100% 0%); }
.fan-ribs li:nth-child(1)::after { transform: rotate(90deg); }
.fan-ribs li:nth-child(1) .rib { left: 90.6%; top: 40.7%; transform: translate(-50%, -50%) rotate(81deg); }
.fan-ribs li:nth-child(2)::before { clip-path: polygon(100% 100%, 41.2% 19.1%, 50.1% 2%, 69.1% 4.9%); }
.fan-ribs li:nth-child(2)::after { transform: rotate(72deg); }
.fan-ribs li:nth-child(2) .rib { left: 72.8%; top: 46.5%; transform: translate(-50%, -50%) rotate(63deg); }
.fan-ribs li:nth-child(3)::before { clip-path: polygon(100% 100%, 19.1% 41.2%, 22.2% 22.2%, 41.2% 19.1%); }
.fan-ribs li:nth-child(3)::after { transform: rotate(54deg); }
.fan-ribs li:nth-child(3) .rib { left: 57.6%; top: 57.6%; transform: translate(-50%, -50%) rotate(45deg); }
.fan-ribs li:nth-child(4)::before { clip-path: polygon(100% 100%, 4.9% 69.1%, 2% 50.1%, 19.1% 41.2%); }
.fan-ribs li:nth-child(4)::after { transform: rotate(36deg); }
.fan-ribs li:nth-child(4) .rib { left: 46.5%; top: 72.8%; transform: translate(-50%, -50%) rotate(27deg); }
.fan-ribs li:nth-child(5)::before { clip-path: polygon(100% 100%, 0% 100%, -8.7% 82.8%, 4.9% 69.1%); }
.fan-ribs li:nth-child(5)::after { transform: rotate(18deg); }
.fan-ribs li:nth-child(5) .rib { left: 40.7%; top: 90.6%; transform: translate(-50%, -50%) rotate(9deg); }
.rib {
  position: absolute; z-index: 1; display: grid; place-items: center; min-height: 44px; padding: .3rem .7rem;
  white-space: nowrap; text-align: center; text-decoration: none; pointer-events: none;
}
[data-skin="malayadiego"] .rib { text-decoration: none; color: var(--narra); }
.rib-say { display: block; font: 400 1.05rem/1.1 var(--display); letter-spacing: .01em; }
.rib-say .wsd-gloss { font-size: .82rem; margin-top: 0; }
@media (min-width: 64em) { .rib-say { font-size: 1.3rem; } .rib-say .wsd-gloss { font-size: .95rem; } }
[data-skin="malayadiego"] .rib:hover { color: var(--leaf); }
/* the page you are on: embroidered, a running stitch in gold thread along its name */
.fan-ribs li:has(> .rib[aria-current="page"])::before {
  background:
    repeating-conic-gradient(from 270deg at 100% 100%, rgb(255 255 255 / .12) 0deg 1.2deg, transparent 1.2deg 6deg),
    radial-gradient(circle at 100% 100%, #253b23 0 22%, var(--leaf) 22.5% 100%);
}
[data-skin="malayadiego"] .rib[aria-current="page"] { color: #fff; }
.rib[aria-current="page"] .rib-say { border-bottom: 1.5px dashed var(--thread); padding-bottom: .15em; }
.rib[aria-current="page"] .wsd-gloss { color: #dfe8da; }
.rib:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; background: var(--sheet); color: var(--narra); }
/* while the fan is open it is the page: the language bar steps back under the scrim */
html:has(.fan-nav[data-open]) .tongue { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .fan-ribs li, .fan-folded, .fan::before { transition: none; }
}

/* §8 · the cover: the capiz screen. The couple in the patio, seen through two sliding leaves of capiz that
   part on arrival and come to rest stacked at the window's sides, as the real windows do. Under it, the sill. */
.cover { position: relative; }
.window {
  position: relative; height: clamp(17rem, 46svh, 48rem); overflow: hidden;
  background: var(--narra); border-bottom: 14px solid var(--wood);
  box-shadow: inset 0 0 0 8px var(--wood);
}
.window-view, .window-view img { display: block; width: 100%; height: 100%; }
.window-view img { object-fit: cover; object-position: 50% 38%; }
.capiz {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1;
  /* the lattice: narra muntins over pearly panes, each pane a shell catching light at one corner */
  background:
    linear-gradient(90deg, var(--wood) 0 4px, transparent 4px) 0 0 / 52px 52px,
    linear-gradient(var(--wood) 0 4px, transparent 4px) 0 0 / 52px 52px,
    radial-gradient(circle at 34% 30%, rgb(255 255 255 / .62), rgb(242 234 220 / .3) 48%, rgb(206 196 180 / .34) 100%) 0 0 / 52px 52px,
    linear-gradient(135deg, rgb(236 214 220 / .14), rgb(214 230 222 / .12) 50%, rgb(232 222 200 / .14));
  -webkit-backdrop-filter: blur(7px) saturate(.75) brightness(1.1);
  backdrop-filter: blur(7px) saturate(.75) brightness(1.1);
  border: 4px solid var(--wood);
}
.capiz--l { left: 0; animation: capiz-l 2.8s .5s var(--ease-soft) both; }
.capiz--r { right: 0; animation: capiz-r 2.8s .5s var(--ease-soft) both; }
@keyframes capiz-l { from { transform: none; } to { transform: translateX(-76%); } }
@keyframes capiz-r { from { transform: none; } to { transform: translateX(76%); } }
@media (min-width: 64em) {
  .capiz--l { animation-name: capiz-l-wide; }
  .capiz--r { animation-name: capiz-r-wide; }
  @keyframes capiz-l-wide { from { transform: none; } to { transform: translateX(-82%); } }
  @keyframes capiz-r-wide { from { transform: none; } to { transform: translateX(82%); } }
}
/* the light through the capiz, moving slowly across the patio floor: the one ambient surface */
.window-light {
  position: absolute; z-index: 1; left: -20%; right: -20%; bottom: 0; height: 46%; pointer-events: none;
  /* half the lattice it had on the placeholder, and kept off the couple in the middle of the frame (S3) */
  background:
    linear-gradient(90deg, rgb(58 38 24 / .25) 0 5px, transparent 5px) 0 0 / 64px 64px,
    linear-gradient(rgb(58 38 24 / .25) 0 5px, transparent 5px) 0 0 / 64px 64px,
    rgb(255 226 170 / .16);
  -webkit-mask: linear-gradient(90deg, #000 0 24%, transparent 36% 64%, #000 76%), linear-gradient(to top, #000 35%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, #000 0 24%, transparent 36% 64%, #000 76%), linear-gradient(to top, #000 35%, transparent);
  mask-composite: intersect;
  mix-blend-mode: soft-light; transform: skewX(-24deg);
  animation: capiz-light 46s ease-in-out infinite alternate;
}
@keyframes capiz-light { from { translate: -12% 0; } to { translate: 12% 0; } }
@media (prefers-reduced-motion: reduce) {
  .capiz--l { animation: none; transform: translateX(-76%); }
  .capiz--r { animation: none; transform: translateX(76%); }
  .window-light { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 64em) {
  .capiz--l { transform: translateX(-82%); }
  .capiz--r { transform: translateX(82%); }
}
.sill {
  display: grid; justify-items: center; text-align: center; gap: .55rem;
  padding: clamp(1.1rem, 4vw, 2.8rem) var(--margin) clamp(2rem, 6vw, 3.5rem);
  background: linear-gradient(var(--pina-2), var(--pina) 60%);
}
/* a short phone (an iPhone SE's 548px): the window gives up height so Reply stays above the language bar */
@media (max-width: 47.99em) and (max-height: 44em) {
  .window { height: 34svh; border-bottom-width: 10px; }
  .sill { gap: .3rem; padding-top: .7rem; }
  .sill-cta { margin-top: .3rem; }
}
.sill-say { font: italic 400 var(--step-2)/1.2 var(--display); color: var(--narra-2); }
@media (min-width: 48em) { .window { height: clamp(26rem, 66svh, 48rem); } }
/* the tight .95 leading keeps the names one block; the padding gives the y and g descenders (about .12em below the
   line box in Cormorant) room above the place line, in proportion at every size */
.names { font: 400 clamp(3rem, 13vw, 7.4rem)/.95 var(--display); color: var(--narra); letter-spacing: -.01em; text-wrap: balance; padding-bottom: .16em; }
.sill-where { font: 600 .78rem/1.4 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--leaf); }
.sill-date { font-size: var(--step-1); text-wrap: balance; }
.count { font: var(--step--1)/1.5 var(--ui); color: var(--narra-2); }
.count b { font: 400 var(--step-2)/1 var(--body); color: var(--narra); font-variant-numeric: lining-nums; }
.count-after { display: none; }
.count[data-phase="after"] .count-before { display: none; }
.count[data-phase="after"] .count-after { display: inline; }
.sill-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: .6rem; }

/* §9 · the cover's sections */
.tongues { display: grid; justify-items: start; }
.tongues .orn--capiz { right: 0; top: var(--module); width: clamp(5rem, 12vw, 9rem); height: clamp(5rem, 12vw, 9rem); }
/* below 64em the lede runs the full width, so the pane rises beside the kicker and title instead of over the text */
@media (max-width: 63.99em) { .tongues .orn--capiz { top: calc(var(--module) - 1.25rem); width: 3.5rem; height: 3.5rem; } }
/* S9: at a laptop the one pane becomes three, one for each way to read, and the chosen one lights */
.panes { display: none; }
@media (min-width: 64em) {
  .tongues .orn--capiz { display: none; }
  .panes {
    position: absolute; right: 0; top: calc(var(--module) + 1rem); display: flex; gap: .75rem; pointer-events: none;
  }
  .pane { display: grid; gap: .45rem; justify-items: center; font: 600 .72rem/1 var(--ui); letter-spacing: .14em; color: var(--narra-2); }
  .pane i {
    display: block; width: 6.5rem; aspect-ratio: 1; background: url("../assets/malayadiego/orn-capiz.webp") center / contain no-repeat;
    opacity: .38; filter: saturate(.4) brightness(.92); transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease);
  }
  html[data-lang-mode="tl"] .pane--tl i, html[data-lang-mode="en"] .pane--en i, html[data-lang-mode="both"] .pane--both i {
    opacity: 1; filter: drop-shadow(0 0 14px rgb(255 236 190 / .9)) brightness(1.06); transform: translateY(-4px);
  }
  html[data-lang-mode="tl"] .pane--tl, html[data-lang-mode="en"] .pane--en, html[data-lang-mode="both"] .pane--both { color: var(--leaf); }
}
@media (prefers-reduced-motion: reduce) { .pane i { transition: none; } }
.invite { display: grid; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.invite-shot { position: relative; max-width: 26rem; justify-self: center; width: 100%; }
.invite-shot img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 8px solid var(--sheet); box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgb(58 38 24 / .14); }
.invite-shot .orn--sampaguita { left: -1.5rem; bottom: -1.5rem; width: 9rem; height: 6rem; }
.invite-words { display: grid; gap: .9rem; }
.sign { font: italic 400 var(--step-2)/1.25 var(--display); color: var(--leaf); }
@media (min-width: 56em) { .invite { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.three-list { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
.three-list a { display: grid; gap: .3rem; text-decoration: none; }
[data-skin="malayadiego"] .three-list a { text-decoration: none; }
.three-list img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; margin-bottom: .5rem; }
.three-time { font: 400 var(--step-2)/1 var(--body); color: var(--leaf); font-variant-numeric: lining-nums; }
.three-place { font: 400 var(--step-2)/1.1 var(--display); }
.three-what { color: var(--narra-2); }
@media (min-width: 48em) { .three-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offers { display: grid; gap: 2.5rem; }
.offer { display: grid; gap: .7rem; align-content: start; padding-top: 1.4rem; border-top: 1px solid var(--line); }
@media (min-width: 56em) { .offers { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } }

/* §10 · inner pages */
.head { padding-top: clamp(5.5rem, 12vw, 8rem); padding-bottom: clamp(1rem, 3vw, 2rem); display: grid; gap: .7rem; }
.head-title { font: 400 var(--step-4)/1 var(--display); color: var(--narra); }

/* §11 · the story: four chapters, each a picture beside its words and its letters */
.chapters { display: grid; }
.chapter { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.ch-shot img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; max-width: 28rem; border: 8px solid var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.ch-words { display: grid; gap: .8rem; align-content: start; }
.ch-no { font: 400 var(--step-3)/1 var(--body); color: var(--leaf-mid); font-variant-numeric: lining-nums; }
.ch-title { font: 400 var(--step-3)/1.05 var(--display); color: var(--narra); text-wrap: balance; }
.ch-when { font: 600 .78rem/1.4 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--leaf); }
@media (min-width: 56em) {
  .chapter { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .chapter--flip .ch-shot { order: 2; }
  .ch-shot { position: sticky; top: 5rem; }
}
.letter {
  position: relative; display: grid; gap: .5rem; margin-top: .8rem; padding: 1.3rem 1.4rem 1.2rem;
  background: var(--sheet); box-shadow: 0 0 0 1px var(--line), 0 10px 26px rgb(58 38 24 / .08);
  border-top: 3px solid var(--line);
}
.letter--his { transform: rotate(-.5deg); border-top-color: var(--wood); }
.letter--hers { transform: rotate(.5deg); border-top-color: var(--leaf-soft); margin-left: clamp(0rem, 4vw, 2.5rem); }
/* the letter as written is always the large hand, in whichever language its writer used (S1); its translation
   is the small one, at a size a phone can read (S2) */
.letter-body { font: italic 400 var(--step-2)/1.4 var(--display); color: var(--narra); }
.letter-sign { font: italic 400 var(--step-1)/1 var(--display); color: var(--narra-2); text-align: right; }
.letter-tr { display: none; padding-top: .7rem; border-top: 1px dashed var(--line); font: .95rem/1.55 var(--body); color: var(--narra-2); }
html[lang="en"] .letter[lang="tl"] .letter-tr,
html[lang="tl"] .letter[lang="en"] .letter-tr,
html[data-lang-mode="both"] .letter-tr { display: block; }
.letter-tr-label { display: block; margin-bottom: .2rem; font: 600 .7rem/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.letter-pair { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.letter--card { margin-left: 0; text-align: center; }
.letter--card .letter-body { font-size: var(--step-3); line-height: 1.1; }
.next { display: grid; justify-items: center; text-align: center; gap: .8rem; }
.next .orn--calado { left: 0; right: 0; top: 0; height: 2.5rem; }

/* §12 · the rites: the order as numbered cards, the entourage, the day */
.rites-jump { margin-top: .4rem; }
.rites { display: grid; gap: 1px; margin-top: 2rem; background: var(--line); border: 1px solid var(--line); }
.rite { position: relative; display: grid; gap: .55rem; padding: clamp(1.3rem, 3.5vw, 2.2rem) clamp(1.2rem, 4vw, 2.4rem) clamp(1.3rem, 3.5vw, 2.2rem) clamp(4rem, 9vw, 6.5rem); background: var(--pina); }
.rite--sponsor { background: var(--sheet); }
.rite-no { position: absolute; left: clamp(1rem, 3vw, 2rem); top: clamp(1rem, 3vw, 1.8rem); font: 400 var(--step-4)/1 var(--body); color: var(--leaf-mid); font-variant-numeric: lining-nums; }
.rite-name { font: 400 var(--step-2)/1.15 var(--display); color: var(--narra); }
/* the rite objects (batch 3b): above the name on a phone, in the card's top-right corner from 48em */
.rite-orn { display: block; width: 4rem; height: 4rem; background: left center / contain no-repeat; pointer-events: none; }
.rite-orn--coins { background-image: url("../assets/malayadiego/orn-arras.webp"); }
.rite-orn--candle { background-image: url("../assets/malayadiego/orn-candle.webp"); }
.rite-orn--veil { background-image: url("../assets/malayadiego/orn-veil.webp"); }
.rite-orn--cord { background-image: url("../assets/malayadiego/orn-cord.webp"); }
@media (min-width: 48em) {
  .rite--sponsor { padding-right: calc(clamp(1.2rem, 4vw, 2.4rem) + 6.5rem); }
  .rite-orn { position: absolute; right: clamp(1.2rem, 4vw, 2.4rem); top: clamp(1.3rem, 3.5vw, 2.2rem); width: 5.5rem; height: 5.5rem; background-position: center; }
}
.rite-who { font-family: var(--ui); font-size: var(--step--1); color: var(--narra); display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; margin-top: .2rem; }
.rite-who .label { color: var(--leaf); }
.rite-call { font: italic 400 var(--step-1)/1.4 var(--display); color: var(--narra-2); padding-left: .9rem; border-left: 2px solid var(--thread); }
.who .orn--calado { left: 0; right: 0; top: 0; height: 2.5rem; }
.who-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
.who-group { padding: 1.3rem 1.4rem; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.who-group h3 { font: 400 var(--step-2)/1.15 var(--display); color: var(--narra); margin-bottom: .7rem; }
.who-group ul { display: grid; gap: .5rem; }
.who-group li { display: grid; gap: .1rem; }
.who-group .label { font-size: .7rem; }
@media (min-width: 48em) { .who-grid { grid-template-columns: 1fr 1fr; } }
.day-list { display: grid; margin-top: 2rem; border-top: 1px solid var(--line); }
.day-item { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.day-time { font: 400 var(--step-1)/1.3 var(--body); color: var(--leaf); font-variant-numeric: lining-nums; }
.day-what { display: grid; gap: .2rem; }
.day-title { font: 400 var(--step-1)/1.3 var(--display); color: var(--narra); }
.day-venue { font: 600 .74rem/1.4 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--narra-2); }
.day-venue .wsd-gloss { text-transform: none; letter-spacing: 0; font-size: 1.3em; display: inline; margin-left: .4em; }
.day-note { color: var(--narra-2); }
/* the rain plan: a card with a capiz pane, in the reading face, not a footnote (S5) */
.day-rain {
  margin-top: 1.6rem; max-width: 40rem; padding: 1.1rem 1.3rem 1.1rem 5.2rem; min-height: 5rem;
  background: var(--sheet) url("../assets/malayadiego/orn-capiz.webp") 1.2rem 1.1rem / 2.8rem auto no-repeat;
  box-shadow: 0 0 0 1px var(--line); border-left: 3px solid var(--leaf-soft); color: var(--narra);
}
/* the places (S6): where the day moves on, the place's own photograph, in the time column (schedule.js, group "place") */
.day-place { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: 1rem; align-items: center; padding-top: 1.4rem; padding-bottom: .4rem; }
.day-place-photo { width: 6.5rem; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border: 4px solid var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.day-place-words { display: grid; gap: .1rem; }
.day-place-name { font: 600 .78rem/1.4 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--leaf); }
.day-place-name .wsd-gloss { text-transform: none; letter-spacing: 0; font-size: 1.3em; display: inline; margin-left: .4em; }
.day-place-sub { color: var(--narra-2); font-style: italic; font-family: var(--display); font-size: var(--step-1); line-height: 1.3; }
.day-list > .day-place:first-child { padding-top: 1.1rem; }
.day-list > .day-item + .day-place { border-top: 0; }
@media (min-width: 48em) {
  .day-item, .day-place { grid-template-columns: 9rem minmax(0, 1fr); }
  .day-place-photo { width: 9rem; }
}

/* §13 · details */
.house { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.house-shot img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.house-words { display: grid; gap: .8rem; }
@media (min-width: 56em) { .house { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cards { display: grid; gap: 1.2rem; }
.card { position: relative; display: grid; gap: .7rem; align-content: start; padding: clamp(1.3rem, 3.5vw, 2rem); background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.card-h { font: 400 var(--step-2)/1.15 var(--display); color: var(--narra); }
.card .orn--abanico { right: .75rem; top: .75rem; width: 3.5rem; height: 3rem; } /* beside the one-word title, clear of the text */
@media (min-width: 48em) { .cards { grid-template-columns: 1fr 1fr; } .card--wide { grid-column: 1 / -1; } }
/* at a laptop the last three cards run as one row of three, so none sits alone (S8) */
@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards > .card { grid-column: span 3; }
  .cards > .card--wide { grid-column: 1 / -1; }
  .cards > .card:nth-last-child(-n+3) { grid-column: span 2; }
}
/* each swatch's name starts on the same line, glossed or not (S10) */
.swatches { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8rem 1.4rem; margin-top: .4rem; font-family: var(--ui); font-size: var(--step--1); }
.swatches li { display: flex; align-items: flex-start; gap: .5rem; }
.swatches li > span:last-child { padding-top: .15rem; }
.sw { width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(58 38 24 / .2); }
.sw--leaf { background: var(--leaf); } .sw--narra { background: var(--narra); } .sw--pearl { background: var(--pearl-2); } .sw--pina { background: #efe4cc; }

/* §14 · the reply */
.reply { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 56em) { .reply { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.reply-body { display: grid; gap: 1.4rem; }
.band-head { display: grid; gap: .6rem; }
.reply-form { display: grid; gap: 1.3rem; }
.field { display: grid; gap: .45rem; }
.field label, .reply-q { font: 600 1rem/1.4 var(--ui); color: var(--narra); }
.field label .wsd-gloss, .reply-q .wsd-gloss { font-weight: 400; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--field); font: 1rem/1.4 var(--ui); color: var(--narra);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--leaf); outline: none; box-shadow: 0 0 0 1px var(--leaf); }
.reply-ask { display: grid; gap: .6rem; }
.choices { display: grid; gap: .5rem; }
.choice { display: flex; align-items: center; gap: .7rem; min-height: 52px; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); font-family: var(--ui); cursor: pointer; }
.choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--leaf); flex: none; }
.choice:has(input:checked) { border-color: var(--leaf); background: var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--leaf); outline-offset: 2px; }
.plus { display: grid; gap: .6rem; }
.stepper { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.step-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); font-size: 1.3rem; color: var(--narra); cursor: pointer; }
.step-btn:hover { border-color: var(--leaf); }
.step-btn:disabled { opacity: .45; cursor: default; }
.step-out { font: 400 1.7rem/1 var(--body); min-width: 1.5ch; text-align: center; font-variant-numeric: lining-nums; }
.step-label { color: var(--narra-2); font-family: var(--ui); }
.plus-names { display: grid; gap: .8rem; }
.error { padding: .75rem 1rem; border-radius: var(--radius); background: rgb(140 60 40 / .08); border: 1px solid #a5573f; color: #7d3a26; font: 600 .95rem/1.4 var(--ui); }
.confirm { display: grid; gap: .9rem; }
.confirm h2 { font: italic 400 var(--step-3)/1.05 var(--display); color: var(--narra); }
.summary { display: grid; gap: .3rem; font-family: var(--ui); }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; border-bottom: 1px solid var(--line); }
.answer-word { color: var(--leaf); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
@media (min-width: 40em) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: grid; gap: .15rem; }
.stat b { font: 400 var(--step-3)/1 var(--body); color: var(--narra); font-variant-numeric: lining-nums; }
.stat span { font: var(--step--1)/1.35 var(--ui); color: var(--narra-2); }
.reply-shot { position: relative; max-width: 26rem; justify-self: center; width: 100%; }
.reply-shot img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 8px solid var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.reply-shot .orn--sampaguita { right: -1rem; bottom: -1.5rem; width: 9rem; height: 6rem; }

/* §15 · the page turn and the foot */
.turn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-block: var(--module); }
.turn a { display: grid; gap: .3rem; text-decoration: none; min-height: 44px; }
[data-skin="malayadiego"] .turn a { text-decoration: none; }
.turn-next { text-align: right; margin-left: auto; }
.turn-say { font: italic 400 var(--step-2)/1.1 var(--display); color: var(--narra); }
.turn a:hover .turn-say { color: var(--leaf); }
/* the language bar's clearance lives inside the foot, so the dark wood runs to the bottom of every page (D5) */
.foot { padding-block: 2.5rem calc(7.5rem + env(safe-area-inset-bottom)); border-top: 14px solid var(--wood); background: var(--narra); color: #e6dccb; font: var(--step--1)/1.55 var(--ui); }
.foot .wrap { display: grid; gap: .5rem; }
.foot-names { font: italic 400 var(--step-2)/1.1 var(--display); color: #f6efe2; }
.foot-mark { max-width: 44em; color: #f6efe2; }
.foot .wsd-gloss { color: #cfc3ae; }
/* the way back to the studio: the whole line is the link, only "Tell us about it" underlined */
.foot-ask a { text-decoration: none; }
.foot-ask .foot-tell { text-decoration: underline 1px var(--leaf-soft); text-underline-offset: .22em; }
.foot-ask a:hover { color: #fff; }
.foot-ask a:hover .foot-tell { text-decoration-color: currentColor; }
.wsd-mark { display: flex; align-items: center; gap: .5rem; }
.wsd-mark i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--thread); }

/* §16 · motion: the page turn's arrival, gentle */
@media (prefers-reduced-motion: no-preference) {
  html[data-arriving] main { animation: md-in .6s var(--ease-soft) both; }
  html[data-leaving] main { opacity: 0; transition: opacity .26s var(--ease); }
  @keyframes md-in { from { opacity: 0; } to { opacity: 1; } }
}