@font-face { font-family: TiljaFigtree; src: url("/assets/Figtree-latin.9e299415cead36fe.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: TiljaFraunces; src: url("/assets/Fraunces-latin.217b028c65b46646.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }


:root {
  
  --site-paper: #ffffff;
  --site-stone: #f7f3ec;
  --site-night: #0d1a31;
  --site-night-deep: #071023;
  
  --site-ink: #17231e;
  --site-muted: #56645c;
  --site-leaf: #184c3a;
  --site-on-night: #fbf8f2;
  --site-on-night-muted: rgb(251 248 242 / 76%);
  
  --site-blossom: #f18ead;
  --site-blossom-hover: #ec7aa0;
  --site-rose: #934260;
  --site-lamp: #f6c46a;
  --site-sand: #f1e6d3;
  --site-line: #e6e0d6;
  --site-focus: #3f5fbf;
  
  --site-waiting: #9b5c0a;
  --site-waiting-bg: #fff3d6;
  --site-done: #1e6b4d;
  --site-done-bg: #e7f3ec;
  --site-board: #934260;
  --site-board-bg: #faeaf0;
  
  --site-info: #315ca8;
  --site-info-bg: #eaf1fb;

  
  --site-serif: TiljaFraunces, Fraunces, Georgia, serif;
  --site-sans: TiljaFigtree, Figtree, "Segoe UI", system-ui, sans-serif;
  --t-display: clamp(2.75rem, 1.4rem + 3.8vw, 5.25rem);
  --t-h2: clamp(2rem, 1.55rem + 1.5vw, 3rem);
  --t-h3: 1.25rem;
  --t-lead: clamp(1.125rem, 1.02rem + .3vw, 1.3125rem);
  --t-body: 1rem;
  --t-small: .875rem;

  
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section: var(--s-10);
  --gutter: clamp(1.25rem, 4.4vw, 5rem);
  --page: 76rem;
  --header-h: 4.5rem;

  
  --r-card: .5rem;
  --r-media: 1.25rem;
  --r-pill: 999px;
  --shadow-lift: 0 1px 2px rgb(23 35 30 / 6%), 0 .75rem 1.75rem rgb(23 35 30 / 9%);
  --shadow-float: 0 1.5rem 4rem rgb(7 16 35 / 28%);

  
  --ease: cubic-bezier(.2, .7, .2, 1);
  --m-fast: 180ms;
  --m-base: 400ms;
  --m-slow: 900ms;
}
@media (min-width: 100em) { :root { --page: 84rem; } }
@media (min-width: 120em) { :root { --page: 92rem; } }
@media (max-width: 64em) { :root { --section: var(--s-9); } }
@media (max-width: 40em) { :root { --section: var(--s-8); } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body.site { margin: 0; background: var(--site-paper); color: var(--site-muted); font: 400 var(--t-body)/1.6 var(--site-sans); }
:where(.site) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
:where(.site) :where(ul, ol) { padding: 0; list-style: none; }
:where(.site) img { display: block; max-width: 100%; }
:where(.site) a { color: inherit; text-decoration: none; }
:where(.site) button { font: inherit; color: inherit; cursor: pointer; }
.site :focus-visible { outline: 3px solid var(--site-focus); outline-offset: 4px; border-radius: 4px; }
.site ::selection { background: var(--site-board-bg); color: var(--site-leaf); }

.wrap { width: min(var(--page), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

.display, .site h1, .site h2 { font-family: var(--site-serif); font-weight: 600; color: var(--site-leaf); letter-spacing: -.015em; text-wrap: balance; font-variation-settings: "SOFT" 50, "WONK" 0; }
.display { font-size: var(--t-display); line-height: 1.04; }
.site h2 { font-size: var(--t-h2); line-height: 1.1; }
.site h3 { font: 600 var(--t-h3)/1.3 var(--site-sans); color: var(--site-ink); letter-spacing: -.005em; }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 44ch; text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.45; }


.heading > .lead { margin-top: var(--s-4); }
.heading + * { margin-top: 2.5rem; }


.section { padding-block: var(--section); }
.on-paper { background: var(--site-paper); }
.on-stone { background: var(--site-stone); }
.on-night { background: var(--site-night); color: var(--site-on-night-muted); }
.on-night h2, .on-night .display, .on-night h3 { color: var(--site-on-night); }
.on-night :focus-visible { outline-color: var(--site-on-night); }


@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { transition: opacity var(--m-base) var(--ease), transform var(--m-base) var(--ease); }
  .js [data-reveal]:not([data-shown]) { opacity: 0; transform: translateY(12px); }
}



.site-header { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--header-h); display: flex; align-items: center; color: var(--site-ink); font-weight: 500; transition: color var(--m-base) var(--ease); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(255 255 255 / 82%); box-shadow: 0 1px 0 rgb(23 35 30 / 8%); transition: background var(--m-base) var(--ease), opacity var(--m-base) var(--ease); }
@supports (backdrop-filter: blur(1px)) { .site-header::before { background: rgb(255 255 255 / 68%); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); } }
.site-header[data-tone="dark"] { color: var(--site-on-night); }
.site-header[data-tone="dark"]::before { background: rgb(10 20 38 / 50%); box-shadow: 0 1px 0 rgb(255 255 255 / 8%); }
.site-header:not([data-scrolled])::before { opacity: 0; }
.site-header :focus-visible { outline-color: currentColor; }
.header-inner { display: flex; align-items: center; gap: var(--s-6); }
.brand { display: grid; flex-shrink: 0; }
.brand img { grid-area: 1 / 1; width: 7.5rem; height: auto; transition: opacity var(--m-base) var(--ease); }
.brand-dark, [data-tone="dark"] .brand-light { opacity: 0; }
[data-tone="dark"] .brand-dark { opacity: 1; }
.main-nav { display: flex; align-items: center; gap: var(--s-6); margin-inline: auto; }
.main-nav > a, .nav-menu > summary, .sign-in { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .375rem; }
.main-nav > a:hover, .sign-in:hover, .nav-menu > summary:hover { text-decoration: underline; text-underline-offset: .3em; }
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.chev { width: 1rem; height: 1rem; transition: rotate var(--m-fast) var(--ease); }
.nav-menu[open] .chev { rotate: 180deg; }
.nav-panel { position: absolute; top: calc(100% + .5rem); left: -1rem; width: 21rem; display: grid; padding: var(--s-2); border-radius: var(--r-card); background: var(--site-paper); color: var(--site-ink); box-shadow: var(--shadow-float); }
.nav-panel a { display: grid; gap: .125rem; padding: var(--s-3) var(--s-4); border-radius: var(--r-card); }
.nav-panel a:hover { background: var(--site-stone); }
.nav-panel span { font-weight: 600; }
.nav-panel small { font-size: var(--t-small); font-weight: 400; color: var(--site-muted); }
.account-nav { display: flex; align-items: center; gap: var(--s-5); }
.button.button-small { min-height: 2.5rem; padding: .5rem 1.25rem; font-size: var(--t-small); }
@media (max-width: 56em) { .main-nav, .sign-in { display: none; } .account-nav { margin-left: auto; } }

.menu-mobile { display: none; position: relative; }
.menu-mobile > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.5rem; }
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 1.25rem; height: 2px; border-radius: 2px; background: currentColor; transition: rotate var(--m-fast) var(--ease), translate var(--m-fast) var(--ease), opacity var(--m-fast) var(--ease); }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { translate: 0 -.4rem; } .menu-icon::after { translate: 0 .4rem; }
.menu-mobile[open] .menu-icon { background: transparent; }
.menu-mobile[open] .menu-icon::before { translate: 0; rotate: 45deg; } .menu-mobile[open] .menu-icon::after { translate: 0; rotate: -45deg; }
.menu-panel { position: absolute; top: calc(100% + .5rem); right: -.5rem; width: min(18rem, calc(100vw - 2rem)); display: grid; padding: var(--s-2); border-radius: var(--r-card); background: var(--site-paper); color: var(--site-ink); box-shadow: var(--shadow-float); }
.menu-panel a { padding: var(--s-3) var(--s-4); border-radius: var(--r-card); font-weight: 500; }
.menu-panel a:hover { background: var(--site-stone); }
@media (max-width: 56em) { .menu-mobile { display: block; } }


.film-dialog { padding: 0; border: 0; background: transparent; width: min(72rem, calc(100vw - 2rem)); }
.film-dialog::backdrop, .preview-dialog::backdrop { background: rgb(7 16 35 / 70%); backdrop-filter: blur(8px); }
.film-dialog video { display: block; width: 100%; border-radius: var(--r-media); background: var(--site-night); box-shadow: var(--shadow-float); }
.film-dialog .close, .preview-dialog .close { display: block; margin: 0 0 .75rem auto; border: 0; border-radius: var(--r-pill); padding: .5rem 1rem; background: var(--site-paper); font-weight: 600; color: var(--site-ink); }
.preview-dialog { width: min(28rem, calc(100vw - 2rem)); padding: var(--s-5) var(--s-6) var(--s-6); border: 0; border-radius: var(--r-card); background: var(--site-paper); color: var(--site-ink); box-shadow: var(--shadow-float); }
.preview-dialog .close { background: var(--site-stone); margin-right: calc(-1 * var(--s-3)); }
.preview-dialog h2 { font: 600 var(--t-h3)/1.3 var(--site-sans); color: var(--site-ink); }
.preview-dialog p { margin-top: var(--s-3); }


.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 3rem; padding: .75rem 1.75rem; border: 0; border-radius: var(--r-pill); font: 640 1rem/1.2 var(--site-sans); transition: transform var(--m-fast) var(--ease), box-shadow var(--m-fast) var(--ease), background var(--m-fast) var(--ease); }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--site-blossom); color: var(--site-ink); box-shadow: 0 .625rem 1.5rem rgb(147 66 96 / 22%); }
.button-primary:hover { box-shadow: 0 .875rem 2rem rgb(147 66 96 / 30%); }
.button-glass { color: var(--site-ink); background: rgb(241 230 211 / 90%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%); padding-block: .375rem; padding-left: .375rem; }
@supports (backdrop-filter: blur(1px)) { .button-glass { background: rgb(241 230 211 / 78%); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } }
.button-glass .play { width: 2.25rem; height: 2.25rem; }


.play { display: inline-grid; place-items: center; flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--site-ink); color: var(--site-paper); transition: transform var(--m-fast) var(--ease); }
.play svg { width: 42%; height: 42%; margin-left: 8%; fill: currentColor; }
.length { font-size: var(--t-small); font-weight: 500; opacity: .75; }


.film { display: grid; gap: var(--s-3); text-align: left; background: none; border: 0; padding: 0; width: 100%; }
.film-media { position: relative; overflow: hidden; border-radius: var(--r-media); aspect-ratio: 16 / 10; background: var(--site-stone); }
.film-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--m-slow) var(--ease); }
.film-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(7 16 35 / 28%)); }
.film-media .play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; background: rgb(255 255 255 / 92%); color: var(--site-ink); box-shadow: 0 .5rem 1.5rem rgb(7 16 35 / 22%); }
.film-media .length { position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 1; padding: .125rem .5rem; border-radius: var(--r-pill); background: rgb(7 16 35 / 55%); color: var(--site-on-night); opacity: 1; }
.film:hover .film-media img { transform: scale(1.03); }
.film:hover .play { transform: scale(1.06); }
.film-title { font: 600 1rem/1.35 var(--site-sans); color: var(--site-ink); }
.film-title .length { margin-left: .375rem; color: var(--site-muted); }
.film-inline { max-width: 20rem; }


.page-link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; color: var(--site-ink); font-weight: 560; text-decoration: underline; text-decoration-color: rgb(23 35 30 / 25%); text-underline-offset: .3em; transition: text-decoration-color var(--m-fast); }
.page-link svg { width: 1.125rem; height: 1.125rem; transition: translate var(--m-fast) var(--ease); }
.page-link:hover { text-decoration-color: currentColor; }
.page-link:hover svg { translate: 3px 0; }
.on-night .page-link { color: var(--site-on-night); text-decoration-color: rgb(251 248 242 / 35%); }

.text-link { color: var(--site-rose); text-decoration: underline; text-underline-offset: .2em; }
.on-night .text-link { color: var(--site-blossom); }


.label { display: inline-flex; align-items: center; gap: var(--s-3); padding: .5rem 1.125rem .5rem .875rem; border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 600; color: var(--site-on-night); background: rgb(0 0 0 / 22%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%); }
@supports (backdrop-filter: blur(1px)) { .label { background: rgb(0 0 0 / 12%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
.label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--site-lamp); box-shadow: 0 0 .625rem rgb(246 196 106 / 80%); }


.card { background: var(--site-paper); border: 1px solid var(--site-line); border-radius: var(--r-card); box-shadow: var(--shadow-lift); padding: var(--s-5); color: var(--site-ink); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--site-line); font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); font-weight: 500; color: var(--site-muted); }
.status::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; }
.status-ready { color: var(--site-board); }
.status-waiting { color: var(--site-waiting); }
.status-done { color: var(--site-done); }
.card p { color: var(--site-muted); }
.card .source { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-card); background: var(--site-stone); font-size: var(--t-small); }
.card .source strong { display: block; color: var(--site-ink); font-weight: 600; }




.hero { position: relative; isolation: isolate; min-height: max(36rem, 100svh); display: grid; place-items: center; text-align: center; color: var(--site-on-night); padding-block: var(--s-10); }
.hero-photo { position: absolute; inset: 0; z-index: -1; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 16 34 / 30%), rgb(8 16 34 / 38%)); }
.hero .display { color: var(--site-on-night); margin-top: var(--s-6); }
.hero .lead { margin: var(--s-6) auto 0; color: rgb(251 248 242 / 92%); }
.hero .actions { justify-content: center; margin-top: var(--s-7); }


.scene-track { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: center; }
.scene-left { display: grid; align-content: center; gap: var(--s-4); }
.scene-left .heading + * { margin-top: 0; }
.scene-steps { position: relative; display: grid; gap: var(--s-1); }
.scene-steps::before { content: ""; position: absolute; left: 1.25rem; top: 1.5rem; bottom: 1.5rem; width: 1px; background: var(--site-line); }
.step { position: relative; opacity: .45; transition: opacity var(--m-base) var(--ease); }
.step:hover { opacity: .8; }
.step-button { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-5); width: 100%; padding: var(--s-1) 0; border: 0; background: none; text-align: left; }
.step-title { display: block; font: 600 var(--t-h3)/1.3 var(--site-sans); color: var(--site-ink); }
.step-body { display: block; margin-top: var(--s-1); max-width: 36ch; }
.step[data-active] { opacity: 1; }
.step-number { position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--site-paper); box-shadow: inset 0 0 0 1px var(--site-line); font: 600 var(--t-body)/1 var(--site-sans); color: var(--site-leaf); transition: background var(--m-base) var(--ease), color var(--m-base) var(--ease), box-shadow var(--m-base) var(--ease); }
.step[data-active] .step-number { background: var(--site-leaf); color: var(--site-paper); box-shadow: 0 0 0 .375rem rgb(24 76 58 / 10%); }

.scene-stage { position: relative; display: grid; align-items: center; min-height: clamp(26rem, 60svh, 30rem); border-radius: var(--r-media); overflow: hidden; isolation: isolate; background: var(--site-stone); box-shadow: 0 2rem 4rem -1.5rem rgb(23 35 30 / 25%); }
.scene-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; z-index: -2; transition: filter var(--m-slow) var(--ease), scale var(--m-slow) var(--ease); }
.scene-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(247 243 236 / 72%); opacity: 0; transition: opacity var(--m-slow) var(--ease); }
.scene-stage:is([data-step="2"], [data-step="3"])::after { opacity: 1; }
.scene-stage:is([data-step="2"], [data-step="3"]) .scene-photo { filter: blur(3px) saturate(.8); scale: 1.05; }


.letter { position: absolute; z-index: 2; width: min(15rem, 34%); padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + .25rem); border-radius: var(--r-card); background: var(--site-paper); box-shadow: 0 1rem 2rem -.5rem rgb(23 35 30 / 28%); color: var(--site-ink); font-size: var(--t-small); line-height: 1.45; transform-origin: 0 0; opacity: 0; transform: translate(40%, -10%) scale(.7) rotate(var(--rot, 0deg)); transition: transform 1100ms var(--ease), opacity 600ms var(--ease); transition-delay: calc(var(--i) * 280ms), calc(var(--i) * 280ms); }
.letter::before { content: ""; position: absolute; left: 0; top: var(--s-3); bottom: var(--s-3); width: 3px; border-radius: 3px; background: var(--site-blossom); }
.letter .from { display: block; font-weight: 600; color: var(--site-muted); }
.letter::before { transition: opacity 300ms var(--ease); }
:is([data-step="2"], [data-step="3"]) .letter, :is([data-step="2"], [data-step="3"]) .letter .from { color: transparent; }
:is([data-step="2"], [data-step="3"]) .letter::before { opacity: 0; }
:is([data-step="2"], [data-step="3"]) .letter .from { transition: color 300ms var(--ease) calc(var(--i) * 110ms); }
.letter:nth-of-type(1) { left: 5%; top: 6%; --rot: -5deg; }
.letter:nth-of-type(2) { left: 37%; top: 4%; --rot: 4deg; }
.letter:nth-of-type(3) { left: 61%; top: 13%; --rot: -3deg; }
.letter:nth-of-type(4) { left: 9%; top: 38%; --rot: 3deg; }
.letter:nth-of-type(5) { left: 44%; top: 40%; --rot: -4deg; }
.letter:nth-of-type(6) { left: 16%; top: 70%; --rot: -2deg; }
.letter:nth-of-type(7) { left: 58%; top: 70%; --rot: 5deg; }
[data-step="1"] .letter { opacity: 1; transform: rotate(var(--rot)); }
:is([data-step="2"], [data-step="3"]) .letter { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--sx, .5), var(--sy, .5)); transition: transform 1300ms var(--ease), opacity 400ms var(--ease), color 300ms var(--ease); transition-delay: calc(var(--i) * 110ms), calc(var(--i) * 110ms + 1250ms), calc(var(--i) * 110ms); }


.board { position: relative; margin: var(--s-5); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-5); align-items: stretch; }
.cases, .reply { border-radius: .75rem; background: var(--site-paper); box-shadow: 0 1.5rem 3.5rem -1rem rgb(23 35 30 / 30%), 0 0 0 1px rgb(23 35 30 / 6%); }
.cases-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--site-line); font-weight: 600; color: var(--site-ink); opacity: 0; transition: opacity var(--m-base) var(--ease); }
.cases-head img { width: 1.25rem; height: 1.25rem; }
.cases-count { margin-left: auto; font-size: var(--t-small); font-weight: 500; color: var(--site-muted); }
.cases { background: transparent; box-shadow: none; display: grid; grid-template-rows: auto 1fr; }
.cases ul { padding: var(--s-2); display: grid; grid-auto-rows: 1fr; }
.case { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: .125rem; min-height: 4.25rem; align-content: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-card); opacity: 0; translate: 0 .5rem; transition: opacity var(--m-base) var(--ease), translate var(--m-base) var(--ease), background var(--m-base) var(--ease); }
.case + .case { box-shadow: 0 -1px 0 var(--site-line); }
.case-name { font-weight: 600; color: var(--site-ink); }
.case-name { grid-area: 1 / 1; }
.case-meta { grid-area: 1 / 2; display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--t-small); color: var(--site-muted); }
.case-meta svg { width: .875rem; height: .875rem; }
.case .status { grid-area: 2 / 1 / 3 / 3; }
.case .status { font-size: var(--t-small); }
.case.is-selected { background: var(--site-board-bg); }
.case-sent, .reply-sent { display: none !important; }

.cases { position: relative; }
.cases::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--site-paper); box-shadow: 0 1.5rem 3.5rem -1rem rgb(23 35 30 / 30%), 0 0 0 1px rgb(23 35 30 / 6%); opacity: 0; transition: opacity var(--m-base) var(--ease); }
:is([data-step="2"], [data-step="3"]) .cases::before { opacity: 1; transition-delay: 300ms; }
:is([data-step="2"], [data-step="3"]) .cases-head { opacity: 1; transition-delay: 300ms; }
:is([data-step="2"], [data-step="3"]) .case { opacity: 1; translate: 0 0; transition-delay: calc(1300ms + var(--r) * 140ms); }

.reply { display: flex; flex-direction: column; padding: var(--s-5); color: var(--site-ink); opacity: 0; translate: 1.5rem 0; transition: opacity var(--m-slow) var(--ease), translate var(--m-slow) var(--ease); }
:is([data-step="2"], [data-step="3"]) .reply { opacity: 1; translate: 0 0; transition-delay: 2000ms; }
.reply-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--site-line); }
.reply-case { display: block; font-size: var(--t-small); color: var(--site-muted); }
.reply-to { display: block; font-weight: 600; }
.reply-head .status { font-size: var(--t-small); white-space: nowrap; }
.reply-thread { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-card); background: var(--site-stone); font-size: var(--t-small); color: var(--site-ink); }
.reply-thread .reply-label { display: block; margin: 0; }
.reply-draft-label { margin-top: var(--s-4); }
.reply-text { margin-top: var(--s-1); color: var(--site-ink); }
.reply-sources { margin-top: auto; padding-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.reply-label { font-size: var(--t-small); color: var(--site-muted); margin-right: var(--s-1); }
.source-chip { padding: .25rem .625rem; border-radius: var(--r-pill); background: var(--site-stone); font-size: var(--t-small); color: var(--site-ink); }
.reply-foot { display: grid; justify-items: end; align-items: center; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--site-line); }
.approve { grid-area: 1 / 1; padding: .625rem 1.25rem; border-radius: var(--r-pill); background: var(--site-blossom); color: var(--site-ink); font-weight: 640; font-size: var(--t-small); box-shadow: 0 .375rem 1rem rgb(147 66 96 / 25%); }
.reply-done { grid-area: 1 / 1; display: inline-flex; opacity: 0; transition: opacity var(--m-base) var(--ease); align-items: center; gap: var(--s-2); color: var(--site-done); font-weight: 600; }
.reply-done svg { width: 1.125rem; height: 1.125rem; }


[data-sent] .approve { animation: press-away 700ms var(--ease) both; }
[data-step="3"]:not([data-sent]) .approve { animation: press 700ms var(--ease) 400ms both; }
@keyframes press { 50% { scale: .9; box-shadow: 0 .125rem .25rem rgb(147 66 96 / 25%); } 100% { scale: .96; } }
@keyframes press-away { from { scale: .96; } to { scale: .96; opacity: 0; } }
[data-sent] .reply-state, [data-sent] .case-state { display: none; }
[data-sent] .reply-sent, [data-sent] .case-sent { display: inline-flex !important; }
[data-sent] .reply-done { opacity: 1; transition-delay: 350ms; }
[data-sent] .case.is-selected { background: var(--site-done-bg); }


.scene-control { justify-self: start; margin-top: calc(-1 * var(--s-2)); display: inline-flex; align-items: center; gap: var(--s-2); margin-left: calc(2.5rem + var(--s-5)); padding: .375rem .875rem; border: 1px solid var(--site-line); border-radius: var(--r-pill); background: var(--site-paper); font-size: var(--t-small); font-weight: 600; color: var(--site-ink); }
.scene-control:hover { border-color: var(--site-muted); }
.scene-control-icon { width: .1875rem; height: .75rem; margin-right: .3125rem; background: currentColor; box-shadow: .3125rem 0 currentColor; }
.scene-control[data-state="replay"] .scene-control-icon { width: .625rem; margin-right: 0; box-shadow: none; clip-path: polygon(0 0, 100% 50%, 0 100%); }


@media (max-width: 56em), (prefers-reduced-motion: reduce) {
  .scene-track { grid-template-columns: 1fr; gap: var(--s-6); }
  .scene-stage { height: auto; padding: var(--s-4); }
  .scene-control { display: none; }
  .scene-stage::after { opacity: 1; }
  .scene-left { display: contents; }
  .scene-stage { order: 1; }
  .scene-steps { order: 2; gap: var(--s-6); }
  .scene-steps::before { display: none; }
  .step { opacity: 1; }
  .step-button { pointer-events: none; }
  .step .step-number { background: var(--site-leaf); color: var(--site-paper); }
  .board { margin: 0; grid-template-columns: 1fr; }
  .letter { display: none; }
  .scene-stage *, .scene-stage *::before, .scene-stage *::after { transition: none !important; animation: none !important; }
  [data-sent] .approve { visibility: hidden; }
}
.reply-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-4); row-gap: .125rem; }
.reply-head > div { display: contents; }
.reply-head .reply-case { grid-area: 1 / 1; }
.reply-head .status { grid-area: 1 / 2; }
.reply-head .reply-to { grid-area: 2 / 1 / 3 / 3; }


.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s-8); }
.split-text > .film { margin-top: var(--s-6); }
.split-text > .page-link { margin-top: var(--s-4); }
.split-text > .actions { margin-top: var(--s-5); }
.panel { padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: var(--r-media); background: var(--site-paper); }
.on-paper .panel { background: var(--site-stone); }
@media (max-width: 56em) { .split { grid-template-columns: 1fr; gap: var(--s-7); } }

.panel-photo { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1.25rem, 4vw, 3.5rem); background: var(--site-stone); }
.panel-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.panel-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgb(247 243 236 / 10%), rgb(23 35 30 / 18%)); }
.evidence { position: relative; display: grid; gap: var(--s-4); max-width: 30rem; margin-inline: auto; }
.reply-card { position: relative; z-index: 1; }
.card-head > div { display: grid; }
.card-kicker { font-size: var(--t-small); font-weight: 500; color: var(--site-muted); }
.card .card-text { margin-top: var(--s-4); color: var(--site-ink); }
.card-foot { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--site-line); font-size: var(--t-small); }
.note { position: relative; width: min(17rem, 80%); padding: var(--s-3) var(--s-4); border-radius: var(--r-card); background: var(--site-paper); box-shadow: 0 .75rem 1.5rem -.5rem rgb(23 35 30 / 30%); color: var(--site-ink); font-size: var(--t-small); line-height: 1.45; }
.note-kind { display: block; font-weight: 600; color: var(--site-muted); }
.note-message { justify-self: start; rotate: -3deg; margin-bottom: calc(-1 * var(--s-3)); margin-left: calc(-1 * var(--s-5)); z-index: 2; }
.note-agreement { justify-self: end; rotate: 2.5deg; margin-top: calc(-1 * var(--s-3)); margin-right: calc(-1 * var(--s-5)); z-index: 2; }
.note::before { content: ""; position: absolute; top: -.375rem; left: 50%; width: .75rem; height: .75rem; translate: -50% 0; border-radius: 50%; background: var(--site-blossom); box-shadow: 0 .125rem .25rem rgb(0 0 0 / 25%); }
@media (max-width: 40em) { .note-message, .note-agreement { margin-inline: 0; } }


.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
.tile { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-3); }
.tile h3 { margin-top: var(--s-2); }
.tile .page-link { margin-top: var(--s-1); justify-self: start; }
@media (max-width: 68em) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36em) { .tiles { grid-template-columns: 1fr; } }


.questions { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
.faq details { border-bottom: 1px solid var(--site-line); }
.faq details:first-child { border-top: 1px solid var(--site-line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding-block: var(--s-5); list-style: none; cursor: pointer; font: 600 1.0625rem/1.4 var(--site-sans); color: var(--site-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--site-leaf); transition: rotate var(--m-fast) var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding-bottom: var(--s-5); max-width: 64ch; }
@media (max-width: 56em) { .questions { grid-template-columns: 1fr; gap: var(--s-6); } }


.ending { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--site-night); }
@media (min-width: 56.001em) and (min-height: 36em) { .ending { height: 100svh; } }
.closing { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 0; }
.closing-photo { position: relative; overflow: hidden; min-height: 0; }
.closing-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; }
.closing-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 58%, var(--site-night)); }
.closing-text { align-self: center; padding: clamp(2rem, 6svh, 5rem) var(--gutter) clamp(4rem, 12svh, 8rem) clamp(1.5rem, 5vw, 5rem); }
.closing .display { font-size: clamp(2.5rem, min(5.2vw, 8.6svh), 5.25rem); max-width: 10ch; }
.closing .lead { margin-top: clamp(1rem, 2.6svh, 1.5rem); font-size: clamp(1rem, min(1.3vw, 2.3svh), 1.3125rem); color: var(--site-on-night-muted); }
.closing .actions { margin-top: clamp(1.25rem, 3.6svh, 2.25rem); }
@media (max-width: 56em) {
  .closing { grid-template-columns: 1fr; }
  .closing-photo { height: 50svh; }
  .closing-photo::after { background: linear-gradient(180deg, transparent 55%, var(--site-night)); }
  .closing-text { padding-top: var(--s-4); }
}


.site-footer { position: relative; --sky: clamp(3rem, 7.5vw, 9rem); background: linear-gradient(180deg, var(--site-night) 0, #1b2f55 calc(var(--sky) * .9), var(--site-night-deep) calc(var(--sky) + 1px)); color: var(--site-on-night-muted); padding-block: calc(var(--sky) + clamp(1.25rem, 3svh, 2.25rem)) clamp(1.5rem, 3.5svh, 2.5rem); font-size: .9375rem; }
.skyline { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--sky) + 2px); background: var(--site-night-deep); -webkit-mask: url("/assets/skyline.c7738d22f59abc63.png") center bottom / cover no-repeat; mask: url("/assets/skyline.c7738d22f59abc63.png") center bottom / cover no-repeat; pointer-events: none; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-6) var(--s-8); }
.footer-brand img { width: 7.5rem; height: auto; }

.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(max-content, 12rem)); gap: var(--s-5) clamp(3rem, 6vw, 6rem); }
.footer-nav h3 { margin-bottom: var(--s-2); font: 600 .9375rem/1.4 var(--site-sans); color: var(--site-on-night); }
.footer-nav div { display: grid; align-content: start; gap: .125rem; }
.footer-nav a { padding-block: .25rem; }
.footer-nav a:hover { color: var(--site-on-night); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 40em) { .footer-nav { display: grid; grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site *, .site *::before, .site *::after { transition: none !important; animation: none !important; }
}


.button-primary:hover { background: var(--site-blossom-hover); }
.button:active { transform: translateY(1px); }
.button-glass:hover { background: rgb(241 230 211 / 96%); }
.pcard-button { transition: background var(--m-fast) var(--ease); }
.pcard-button:not([disabled]):hover { background: var(--site-blossom-hover); }
.text-link { transition: text-decoration-thickness var(--m-fast) var(--ease), color var(--m-fast) var(--ease); }
.text-link:hover { text-decoration-thickness: 2px; }
.faq summary { transition: color var(--m-fast) var(--ease); }
.faq summary::after { transition: rotate var(--m-fast) var(--ease), scale var(--m-fast) var(--ease); }
.faq summary:hover { color: var(--site-leaf); }
.faq summary:hover::after { scale: 1.2; }
.step-button .step-title { transition: color var(--m-fast) var(--ease); }
.step-button:hover .step-title { color: var(--site-leaf); }
.step:not([data-active]) .step-button:hover .step-number { box-shadow: inset 0 0 0 1px var(--site-leaf); }
@media (prefers-reduced-motion: reduce) { .button:active { transform: none; } .faq summary:hover::after { scale: none; } }