/* Home + detail-page templates (Holiday, Personal, In-house). Type ladder + spacing from DESIGN_SPEC 9. */
.sec{padding-block:var(--pad)}
.blk{font-size:var(--t-block);margin-bottom:40px;max-width:18em}
.lead{font-size:var(--t-lead);line-height:1.5;color:#4a4740;max-width:38ch;text-wrap:balance}

/* ----- Holiday page: Christmas skin (Li 10-27). Pine green ground, cream text, candle gold for prices and buttons,
   cranberry red on hover. Colours taken from the storybook illustrations. Only token overrides + the few hard-coded greys. ----- */
body.theme-xmas{--paper:#1E2A24;--ink:#F4ECDD;--mut:#A79D88;--line:#34423A;--ac:#D3A174;--ac-dk:#B9854F;--xmas-red:#A8322A;--txt2:#CFC5B2;background:var(--paper);color:var(--ink)}
.theme-xmas .lead,.theme-xmas .closing p,.theme-xmas .card p,.theme-xmas .two .body,.theme-xmas .tags span,.theme-xmas .hl p,.theme-xmas .tier .desc,.theme-xmas .faq details p{color:var(--txt2)}
.theme-xmas .top.solid{background:rgb(30,42,36)}
.theme-xmas .fx-photo,.theme-xmas .shot{background:#2B3A32}
.theme-xmas .btn{background:var(--ac);color:var(--paper)}
.theme-xmas .btn:hover{background:var(--xmas-red);color:var(--ink)}
.theme-xmas .btn:active{background:#8C2A22}
.theme-xmas .logo .dot{background:#C23B2C}

/* ----- poster (FX template: fx.css) ----- */
.poster{height:100svh;min-height:540px;max-height:1100px;color:#fff}
.poster-copy{position:absolute;z-index:5;left:0;right:0;bottom:calc(var(--fx-edge-h) * .55 + 64px)}
.poster-copy h1{font-size:var(--t-poster);max-width:40vw}
.poster-copy p{margin-top:24px;max-width:min(38ch,40vw);text-wrap:balance;font-size:var(--t-lead);line-height:1.5;color:rgba(255,255,255,.85)}
.poster-copy .cta{margin-top:40px}
.poster-copy .tlink{color:#fff;font-size:16px}
/* Li 10-27: the four products roll through the poster text (site.js). All slides share one grid cell, so the block is as tall as the
   longest one and every slide sits on the same bottom line; the visible one rolls up and out, the next rolls in from below. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pslides{display:grid}
.pslide{grid-area:1/1;align-self:end;transform:translateY(14px);opacity:0;visibility:hidden}
.pslide.on{transform:none;opacity:1;visibility:visible;transition:opacity .5s linear .24s,transform .6s cubic-bezier(.2,.7,.2,1) .24s,visibility 0s .24s}
.pslide.out{transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .26s linear,transform .26s ease-in,visibility 0s .26s}
.poster-copy .ph{margin:0;font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.95;text-wrap:balance;font-size:var(--t-poster);max-width:40vw;color:#fff}
@media (prefers-reduced-motion:reduce){.pslide{transition:none}}
@media (max-width:860px){.poster-copy h1,.poster-copy p,.poster-copy .ph{max-width:none}.poster-copy{bottom:calc(var(--fx-edge-h) * .55 + 79px)}.poster-copy .cta{margin-top:36px}.poster-copy p{margin-top:16px}}

/* ----- rolling ad lines: one sentence at a time ----- */
/* Li 10-26: stroke removed, just the rolling line in open space; gap poster -> line = line -> cards (128px desktop, 88px phone; the cards section adds its own 96/64 top padding) */
.rollzone{padding-block:128px 32px;margin:0 auto;position:relative;z-index:1}
.organic{position:relative;--fs:clamp(22px,2.2vw,32px);height:calc(var(--fs) * 1.5);}
.reel{position:absolute;left:0;right:0;top:50%;--r:calc(var(--fs) * 1.5);height:var(--r);margin-top:calc(var(--r) * -.5 - 1%);overflow:hidden}
.track{position:absolute;left:0;right:0;top:0;transform:translateY(calc(var(--i,0) * var(--r) * -1));transition:transform .9s cubic-bezier(.65,0,.2,1)}
.track.snap{transition:none}
.track.mv{animation:blur .9s ease-in-out}
@keyframes blur{50%{filter:blur(1.6px)}}
.track p{height:var(--r);display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;font:400 var(--fs)/1.1 var(--head);letter-spacing:.01em;text-transform:none}
@media (max-width:640px){
  .rollzone{padding-block:88px 24px}
  .organic{--fs:20px}
}
@media (prefers-reduced-motion:reduce){.track{transition:none}}

/* ----- product cards ----- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px}
.card{display:block}
.card .pic{aspect-ratio:4/5;overflow:hidden}
.card .pic img{transition:filter .4s}
.card:hover .pic img{filter:brightness(1.07) contrast(var(--fx-contrast)) saturate(var(--fx-sat)) sepia(var(--fx-warm))}
.card h3{font-size:var(--t-sub);margin:16px 0 8px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1px;transition:text-decoration-color .2s}
.card:hover h3{text-decoration-color:currentColor}
.card p{font-size:var(--t-body);line-height:1.5;color:#4a4740}
.card .from{margin-top:16px;font-size:var(--t-small);color:var(--mut)}
.card .from b{font:400 var(--t-sub)/1 var(--head);color:var(--ac);margin-left:8px;font-variant-numeric:tabular-nums}
@media (max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
/* phone: keep 2 across so the four services fit in about one screen */
@media (max-width:560px){.cards{gap:32px 16px}.card h3{margin:12px 0 4px}.card p{font-size:14px}.card .from{margin-top:8px}}
/* 10-28: three services on the home page (In-house hidden). Phone: one per row, landscape crop, so no orphan card */
.cards.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.cards.c3{grid-template-columns:1fr}.cards.c3 .pic{aspect-ratio:3/2}}

/* ----- showcase ----- */
.show{aspect-ratio:16/9;background:#2a2620}
.show img,.show video{position:absolute;inset:0;opacity:0;transition:opacity .35s linear}
.show img.on{opacity:1}.show video{opacity:1}
.cap{margin-top:16px;font-size:var(--t-small);color:var(--mut)}
@media (max-width:640px){.show{aspect-ratio:9/16;max-height:78svh}}

/* ----- order + owner ----- */
.two{display:grid;grid-template-columns:1fr 1.2fr;gap:40px clamp(24px,6vw,96px);align-items:start}
.two h2{font-size:var(--t-block)}
.two .body p+p{margin-top:16px}
.two .body{color:#4a4740;max-width:60ch}
.shot{margin-top:40px;aspect-ratio:16/10;overflow:hidden;background:#e9e3d8}
.owner .pic{aspect-ratio:4/5;overflow:hidden}
.hsteps-sec h2{font-size:var(--t-block)}
.hs-note{margin-top:40px;font-size:var(--t-small);color:var(--mut);max-width:60ch}
@media (max-width:760px){.two,.owner{grid-template-columns:1fr}.owner .pic{aspect-ratio:3/2}}

/* ----- detail pages ----- */
.d-hero{min-height:80svh;padding-top:128px;padding-bottom:var(--pad);display:grid;grid-template-columns:1.05fr 1fr;gap:40px clamp(24px,6vw,96px);align-items:center}
.d-hero h1{font-size:var(--t-poster);max-width:9em}
.d-hero .lead{margin-top:24px}
.d-hero .cta{margin-top:40px}
.d-hero .pic{aspect-ratio:4/5;max-height:74svh;width:100%;justify-self:end;overflow:hidden}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tags span{font-size:var(--t-small);border:1px solid var(--line);border-radius:2px;padding:8px 16px;color:#4a4740}
@media (max-width:860px){.d-hero{grid-template-columns:1fr;min-height:0;padding-top:96px}.d-hero .pic{order:-1;aspect-ratio:4/5;max-height:none}}   /* 11-09: 4:5 like desktop; the posters are made 4:5, 4:3 cut them */

.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid var(--ink);padding-top:24px}
.hl h3{font-size:var(--t-sub);margin-bottom:16px}
.hl p{font-size:var(--t-body);color:#4a4740}
@media (max-width:760px){.hl{grid-template-columns:1fr;gap:40px}}

.cases{display:grid;gap:64px}
.case{display:grid;grid-template-columns:1fr 2fr;gap:24px clamp(16px,3vw,40px);align-items:end}
.case .side{position:relative;overflow:hidden}
.case .a .side{aspect-ratio:3/4}.case .b .side{aspect-ratio:1}
.case small{display:block;margin-bottom:8px;color:var(--mut)}
/* send / get lists above each picture (Holiday): label, then one item per line on hairlines */
.kit{margin-bottom:16px}
.kit small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.kit ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kit li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.kit li i{font-style:normal;color:var(--ac)}
@media (max-width:640px){.case{grid-template-columns:1fr}.case .a{max-width:55%}}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:40px}
.strip div{aspect-ratio:1;overflow:hidden}
@media (max-width:640px){.strip{grid-template-columns:repeat(3,1fr)}}

.tiers{display:grid;grid-template-columns:repeat(var(--n,3),1fr);column-gap:48px;border-top:1px solid var(--ink)}
.tier{padding:24px 0;display:flex;flex-direction:column;gap:8px;position:relative}
.tier+.tier::before{content:'';position:absolute;left:-24px;top:0;bottom:0;border-left:1px solid var(--line)}
/* Li 10-28: show every picture whole, never cut at the edges. Equal columns (gap, not padding), one 4:3 frame, the picture fitted inside */
.tier-media{aspect-ratio:4/3;margin-bottom:16px;display:flex;align-items:center;justify-content:center;position:relative}
.tier-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.theme-xmas .ph-box{background:repeating-linear-gradient(135deg,#26332C 0 14px,#2B3A32 14px 28px);color:var(--mut)}
.tier h3{font-size:var(--t-sub)}
.tier .desc{font-size:var(--t-body);color:#4a4740;flex:1;margin-top:8px}
.tier .tlink{align-self:flex-start;margin-top:16px}
.pre{font-size:var(--t-body);margin-bottom:24px}
/* phone (Li 10-28: no long stacks): the options sit side by side and swipe, the next one peeking in */
@media (max-width:760px){
  .tiers{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;margin-right:calc(-1 * var(--gut,16px));scrollbar-width:none}
  .tiers::-webkit-scrollbar{display:none}
  .tier{flex:0 0 78%;scroll-snap-align:start;padding:24px 20px 24px 0}.tier+.tier{padding-left:20px}.tier+.tier::before{left:0}}

.facts{border-top:1px solid var(--ink)}
.facts div{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:8px 40px;padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--t-body)}
.facts dt{color:var(--mut)}.facts dd{margin:0}
@media (max-width:560px){.facts div{grid-template-columns:1fr;gap:0}}

.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:24px;font:500 var(--t-lead)/1.3 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mut);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:#4a4740;max-width:60ch;font-size:var(--t-body)}
/* ----- Holiday: story picker + page-by-page reader (Li 10-27; site.js) -----
   Picker: five quiet rows on one rule line; the open one is full strength with a short accent bar, the rest step back.
   Reader: the page is the hero (a printed sheet with a soft drop), the text sits beside it like the facing page of a book. */
.stpick{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.st{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:14px;align-items:center;padding:14px 12px 14px 0;border-bottom:1px solid var(--line);position:relative;opacity:.55;transition:opacity .25s}
.st:hover,.st.on{opacity:1}
.st::before{content:"";position:absolute;left:-20px;top:50%;width:2px;height:0;background:var(--ac);transform:translateY(-50%);transition:height .3s cubic-bezier(.4,0,.2,1)}
.st.on::before{height:40px}
.st:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.st img{width:48px;height:48px;flex:none;object-fit:cover;border-radius:2px}
.st span{display:flex;flex-direction:column}
.st b{display:block;font-weight:500;font-size:15px;line-height:1.3;text-wrap:balance}
.st small{order:-1;display:block;margin-bottom:3px;font-size:12px;letter-spacing:.04em;color:var(--mut);white-space:nowrap}   /* look + who first */
/* the page never grows past the screen: page + controls fit in one view on a laptop */
.reader{--pg:min(600px,calc(100svh - 300px));display:grid;grid-template-columns:minmax(280px,var(--pg)) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:40px}
/* e-book (Li 10-27: no pill buttons): you turn by touching the page itself. Left third = back, right two thirds = forward,
   a soft arrow shows at that edge on hover (always faintly on touch screens). A thin progress line under the page, like a reader app. */
.rd-book{position:relative}
.rd-pic{aspect-ratio:1;border-radius:2px;overflow:hidden;position:relative;background:var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 40px 80px -40px rgba(0,0,0,.65)}
.rd-pic::after{content:"";position:absolute;inset:0;pointer-events:none;   /* spine: a faint fold shadow on the left, so it reads as a page in a book */
  background:linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.06) 2.5%,transparent 7%)}
.rd-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.rd-pic.turn img{opacity:0;transform:translateX(var(--dir,16px))}
.rd-zone{all:unset;position:absolute;top:0;bottom:44px;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rd-zone.rd-prev{left:0;width:33%;justify-content:flex-start;padding-left:14px}
.rd-zone.rd-next{right:0;width:67%;justify-content:flex-end;padding-right:14px}
.rd-zone[disabled]{cursor:default}
.rd-zone svg{width:44px;height:44px;padding:12px;box-sizing:border-box;border-radius:50%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  background:rgba(20,19,17,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transform:translateX(var(--nudge,0));transition:opacity .25s,transform .25s}
.rd-prev svg{--nudge:6px}.rd-next svg{--nudge:-6px}
.rd-book:hover .rd-zone:not([disabled]) svg{opacity:.55;transform:none}
.rd-book .rd-zone:not([disabled]):hover svg{opacity:1}
.rd-zone:focus-visible svg{opacity:1;outline:2px solid var(--ac);outline-offset:2px}
@media (hover:none){.rd-zone:not([disabled]) svg{opacity:.5;transform:none;width:36px;height:36px;padding:9px}}
.rd-prog{display:flex;align-items:center;gap:16px;height:44px}
.rd-bar{flex:1;display:flex;gap:4px}
.rd-bar i{flex:1;height:2px;background:var(--line);transition:background .3s}
.rd-bar i.on{background:var(--ac)}
.rd-count{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.rd-premise{font-size:var(--t-small);color:var(--mut);max-width:34ch;text-wrap:balance}
.rd-text{margin-top:32px;font-size:clamp(22px,2vw,28px);line-height:1.4;min-height:calc(4 * 1.4em);max-width:22ch;text-wrap:pretty;transition:opacity .3s}
.reader.turning .rd-text{opacity:0}
.rd-text mark,.reader .note mark{background:none;color:var(--ac);font-style:normal}
.rd-more{all:unset;cursor:pointer;margin-top:24px;color:var(--ac);font-size:var(--t-body);border-bottom:1px solid currentColor;padding-bottom:2px;align-self:flex-start}
.rd-more[hidden]{display:none}
.rd-more:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.rd-side{display:flex;flex-direction:column}
.reader .note{margin-top:32px}
@media (prefers-reduced-motion:reduce){.rd-pic img,.rd-text,.st::before,.rd-zone svg{transition:none}}
/* what each price includes (Holiday tiers) */
.tier .inc{list-style:none;margin:0;padding:0}
.tier .inc li{padding:7px 0 7px 18px;position:relative;font-size:15px;line-height:1.4;border-bottom:1px solid var(--line)}
.tier .inc li:last-child{border-bottom:0}
.tier .inc li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--ac)}
.tier .price-big{white-space:nowrap}

/* Six looks: the photo we got, the same girl in the chosen look, and the list of looks. Hover or tap a look to switch. */
.looks{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) minmax(0,1.1fr);gap:clamp(20px,3vw,48px);align-items:end}
.lk-src small{display:block;margin-bottom:8px;color:var(--mut);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.lk-src img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;display:block}
.lk-view{position:relative;aspect-ratio:3/4;border-radius:2px;overflow:hidden;background:var(--line);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.lk-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.lk-view img.on{opacity:1}
.lk-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.lk{all:unset;box-sizing:border-box;cursor:pointer;padding:14px 0 14px 20px;border-bottom:1px solid var(--line);position:relative;opacity:.5;transition:opacity .2s}
.lk::before{content:"";position:absolute;left:0;top:50%;width:8px;height:2px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.lk:hover,.lk.on{opacity:1}.lk.on::before{transform:none}
.lk:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.lk b{display:block;font-weight:500;font-size:17px}
.lk small{display:block;margin-top:2px;font-size:13px;color:var(--mut)}
@media (max-width:860px){
  .looks{grid-template-columns:1fr 2fr;align-items:start}
  .lk-list{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;border:0;gap:8px}
  .lk{padding:8px 14px;border:1px solid var(--line);border-radius:20px}
  .lk::before,.lk small{display:none}
  .lk b{font-size:14px}
}

/* Holiday module 4 (photo in -> book out): two parts under one heading */
.cases:has(.scase){display:block}
.csub{font-size:var(--t-sub);margin:56px 0 24px}
.scase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:clamp(24px,3vw,48px);margin-top:32px;align-items:start}
.sc-in .side{aspect-ratio:3/4;overflow:hidden;border-radius:2px}
.sc-in .side img{width:100%;height:100%;object-fit:cover;display:block}
.sc-out .reader{margin-top:24px;--pg:min(520px,calc(100svh - 300px));grid-template-columns:minmax(260px,var(--pg)) minmax(0,1fr);gap:clamp(24px,3.5vw,56px)}
.sc-out .rd-text{font-size:clamp(20px,1.7vw,25px)}
.kit mark{background:none;color:var(--ac)}
@media (max-width:860px){.scase{grid-template-columns:1fr}.sc-in{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}}

.sc-note{margin-top:16px}
.note mark{background:none;color:var(--ac)}
/* entry to the five ready-made stories (Li 10-27: not laid out on the page, they open in a dialog) */
.stmore{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-top:clamp(56px,7vw,96px);padding-top:32px;border-top:1px solid var(--line)}
.stmore .csub{margin:0 0 8px}
.stmore p{color:var(--txt2,var(--mut));font-size:var(--t-body);max-width:46ch}
.stdlg{width:min(1240px,calc(100vw - 48px));height:min(860px,calc(100svh - 48px));max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:4px;
  background:var(--paper);color:var(--ink);box-shadow:0 40px 120px -20px rgba(0,0,0,.7);overflow:hidden}
.stdlg[open]{display:flex;flex-direction:column;animation:sd-in .3s cubic-bezier(.2,.7,.2,1)}
.stdlg::backdrop{background:rgba(8,12,10,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@keyframes sd-in{from{opacity:0;transform:translateY(12px)}}
html:has(.stdlg[open]){overflow:hidden}
.sd-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 16px 40px;border-bottom:1px solid var(--line);flex:none}
.sd-top h3{font-size:var(--t-sub,22px)}
.sd-x{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.sd-x:hover{background:var(--line)}.sd-x:focus-visible{outline:2px solid var(--ac)}
.sd-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.sd-body{flex:1;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;padding:32px 40px;overflow:auto}
.sd-body .stpick{align-self:start;padding-left:20px;margin-left:-20px;border-top:0}
.sd-main{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-content:start}
.sd-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:end}
.sd-head>*{grid-column:1}
.sd-from{grid-column:2;grid-row:1/5;align-self:end;margin:0;width:88px}
.sd-from img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;display:block}
.sd-from figcaption{margin-top:6px;font-size:11px;letter-spacing:.06em;color:var(--mut);white-space:nowrap}
/* PLACEHOLDER page: a story whose pictures are not made yet */
.rd-pic img[hidden]{display:none}
.rd-pic[data-ph]{background:repeating-linear-gradient(135deg,#26332D 0 18px,#22302A 18px 36px)}
.rd-pic[data-ph]::before{content:attr(data-ph);white-space:pre;position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:13px;letter-spacing:.06em;color:var(--mut)}
.sd-meta{color:var(--mut);font-size:13px;letter-spacing:.04em}
.sd-title{font-size:clamp(28px,2.6vw,40px);margin-top:4px;line-height:1.1}
.sd-prem{margin-top:12px;font-size:var(--t-body);max-width:52ch}
.sd-send{margin-top:8px;font-size:15px;color:var(--mut);max-width:60ch}
.sd-send b{font-weight:500;color:var(--ink);margin-right:6px}
.stdlg .reader{--pg:min(480px,calc(100svh - 400px));margin-top:8px;grid-template-columns:minmax(240px,var(--pg)) minmax(0,1fr);gap:clamp(24px,3.5vw,56px)}
.stdlg .rd-text{margin-top:0;font-size:clamp(20px,1.7vw,25px)}
@media (max-width:1000px){
  .stdlg{width:100vw;height:100svh;border-radius:0}
  .sd-top{padding:8px 8px 8px var(--gut)}
  /* phone: title bar and story strip stay put, only the chosen story scrolls */
  .sd-body{display:flex;flex-direction:column;gap:0;padding:0;overflow:clip}
  .sd-main{flex:1;min-height:0;overflow-x:clip;overflow-y:auto;padding:20px var(--gut) 32px}
  .sd-body .stpick{flex:none;align-self:stretch;min-width:0;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);gap:20px;scrollbar-width:none;
    margin:0;padding:8px var(--gut) 0;border-bottom:1px solid var(--line)}
  .sd-body .stpick::-webkit-scrollbar{display:none}
  .sd-body .st{flex:0 0 auto;max-width:240px;scroll-snap-align:start;border-bottom:0;padding:8px 0 12px}
  .st::before{left:0;top:auto;bottom:-1px;transform:none;height:2px;width:0;transition:width .3s}
  .st.on::before{height:2px;width:100%}
  .sd-head{grid-template-columns:minmax(0,1fr) 64px;column-gap:16px}
  .sd-from{width:64px}.sd-from figcaption{display:none}
}
@media (max-width:760px){
  /* phone: tap or swipe the page; the text sits right under it */
  .reader,.sc-out .reader,.stdlg .reader{grid-template-columns:1fr;gap:8px;margin-top:24px}
  .stdlg .rd-text{font-size:19px}
  .rd-text{font-size:21px;min-height:calc(3 * 1.4em);max-width:none;margin-top:4px}
  .rd-premise{display:none}
  .reader .note{margin-top:20px}
}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.shots div{aspect-ratio:16/10;overflow:hidden}
@media (max-width:560px){.shots{grid-template-columns:1fr}}


/* Li 10-27: "You send / You get" columns lined up: the two lists share one row, and the photo and the story page both start on the next row at the same top edge */
@media (min-width:861px){
  .scase{grid-template-rows:auto auto;row-gap:24px}
  .sc-in,.sc-out{display:contents}
  .sc-in>:first-child{grid-column:1;grid-row:1;align-self:start}
  .sc-in>.side{grid-column:1;grid-row:2;align-self:start}
  .sc-out>:first-child{grid-column:2;grid-row:1;align-self:start}
  .sc-out>.reader{grid-column:2;grid-row:2;margin-top:0;align-self:start}
}

/* case switcher (Personal): one case at a time */
.cases:has(.cswitch){display:block}
.cs-tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:32px;overflow-x:auto;scrollbar-width:none}
.cs-t{all:unset;cursor:pointer;padding:12px 0;position:relative;opacity:.5;font-size:var(--t-body);white-space:nowrap;transition:opacity .2s}
.cs-t:hover,.cs-t.on{opacity:1}
.cs-t.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ac)}
.cs-t:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.cs-tabs.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.cswitch .case[hidden]{display:none}
/* ----- legal pages (terms / privacy / refund) ----- */
.legal{max-width:760px;padding-top:calc(var(--pad) + 40px);padding-bottom:var(--pad)}
.legal h1{font-size:var(--t-block)}
.legal .upd{margin-top:12px;font-size:var(--t-small);color:var(--mut)}
.legal .intro{margin-top:32px;font-size:var(--t-lead);line-height:1.5;color:#4a4740}
.legal h2{font:500 var(--t-lead)/1.3 var(--sans);text-transform:none;letter-spacing:0;margin:48px 0 12px}
.legal p,.legal li{line-height:1.65;color:#4a4740}
.legal p+p,.legal p+ul,.legal ul+p{margin-top:12px}
.legal ul{padding-left:1.2em;list-style:disc}.legal li+li{margin-top:8px}
.legal a{text-decoration:underline;text-underline-offset:3px}

/* ----- Shops (10-28 redesign): results with the photo the brand sent in the corner ----- */
.sentin{position:absolute;left:12px;bottom:12px;width:30%;max-width:140px;aspect-ratio:3/4;border:4px solid #fff;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:3}
.sentin img{width:100%;height:100%;object-fit:cover;filter:none}
.sentin em{position:absolute;left:0;top:0;background:#fff;color:#1d1b17;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;font-style:normal;padding:4px 8px}
.hc-in{position:relative;height:100%}.hc-in>img{width:100%;height:100%;object-fit:cover}
.wcase{display:block}
.wdesc{font-size:var(--t-lead);line-height:1.5;color:#4a4740;max-width:52ch;margin-bottom:32px}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wshot{position:relative;aspect-ratio:4/5;overflow:hidden;margin:0}
.wshot>img{width:100%;height:100%;object-fit:cover}
/* Li 11-07: six-image sets and one model across five products */
.wset{font:500 var(--t-lead)/1.3 var(--sans);text-transform:none;letter-spacing:0;margin:0 0 16px}
.wgrid+.wset{margin-top:48px}
.wgrid.w5{grid-template-columns:repeat(5,1fr)}
.wgrid.w4{grid-template-columns:repeat(4,1fr)}
.wtag{position:absolute;right:8px;bottom:8px;z-index:3;background:rgba(255,255,255,.92);color:#1d1b17;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px}
@media (max-width:760px){.wgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:calc(-1 * var(--gut,16px));padding-right:var(--gut,16px);scrollbar-width:none}
  .wshot{flex:0 0 78%;scroll-snap-align:start}}
.hpane{display:block}
.stmore2{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:var(--t-body);color:var(--txt2,#4a4740)}
.stmore2 .tlink{margin-left:8px}

/* ----- home (10-28 redesign): product bar under the poster, one row per service ----- */
.pbar{display:flex;gap:32px;margin-top:48px;border-top:1px solid rgba(255,255,255,.3);max-width:560px}
.pb{position:relative;padding-top:12px;color:rgba(255,255,255,.6);display:flex;flex-direction:column;gap:2px;transition:color .2s}
.pb b{font-weight:500;font-size:15px}.pb small{font-size:13px}
.pb i{position:absolute;left:0;top:-1px;height:2px;width:0;background:#fff}
.pb.on{color:#fff}.pb.on i{width:100%;transition:width 4.5s linear}
.pb:hover{color:#fff}
.blk-h{font-size:var(--t-block);margin-bottom:56px}
.svcs{display:grid;gap:96px}
.svc{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.svc:nth-child(2){grid-template-columns:1fr 1.1fr}   /* mirrored row: text column stays the same width as the other two */
.svc:nth-child(2) .svc-pic{order:2}
.svc-pic{position:relative;display:block;aspect-ratio:4/5;overflow:hidden}
.svc-pic>img{width:100%;height:100%;object-fit:cover}
.svc-txt h3{font-size:var(--t-block);margin-bottom:16px}
.svc-txt>p{font-size:var(--t-lead);line-height:1.5;color:#4a4740;max-width:34ch}
.svc-txt .cta{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
/* Li 11-07: what each service sells, as small pictures with small prices. Tiles keep the picture's own shape: portraits 3:4, Holiday mockups 4:3 */
.offer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:28px;margin:32px 0 36px}
.offer:has(+.extra){margin-bottom:28px}
.mi{display:block;color:inherit;text-decoration:none;min-width:0}
.mi-pic{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--line);border-radius:2px}
.mi-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mi:hover .mi-pic img{transform:scale(1.03)}
.mi-pic.quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.mi-pic.quad img{min-width:0;min-height:0}
.mi-pic .play{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center}
.mi-pic .play::after{content:'';border-left:11px solid #1d1b17;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.mi b{display:block;margin-top:12px;font-weight:500;font-size:15px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi>span{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--mut)}
.mi span em{font-style:normal}
.extra{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:-8px 0 36px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.extra b{font-weight:500;font-size:15px;line-height:20px}
.extra>span{font-size:13px;line-height:18px;color:var(--mut);white-space:nowrap}
.extra:hover b{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.pbar{gap:20px;margin-top:28px}.svcs{gap:72px}.svc,.svc:nth-child(2){grid-template-columns:1fr;gap:24px}.svc:nth-child(2) .svc-pic{order:0}.blk-h{margin-bottom:40px}
  .offer{column-gap:10px;row-gap:20px;margin:24px 0 28px}.offer.wide{column-gap:10px}
  .mi b{font-size:13px;line-height:18px;margin-top:8px}.mi>span{font-size:12px;line-height:16px;margin-top:2px}.mi span em{display:none}.extra{margin-bottom:28px}}
.pb{all:unset;cursor:pointer;position:relative;padding-top:12px;color:rgba(255,255,255,.6);display:flex;flex-direction:column;gap:2px;transition:color .2s}.pb:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ----- one full film per page, with sound (Li 10-28). site.js .film-box ----- */
.film-txt p{font-size:var(--t-lead);line-height:1.5;color:var(--txt2,#4a4740);max-width:52ch;margin:-16px 0 32px}
.film-box{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111}
.film-box>img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.film-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.film-play{all:unset;cursor:pointer;position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s}
.film-play svg{width:34px;height:34px;fill:#1d1b17;margin-left:5px}
.film-play:hover{transform:scale(1.06)}.film-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.film-box.playing>img,.film-box.playing .film-play{opacity:0;pointer-events:none}
.film-box.film-none::after{content:"The film is on its way.";position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(20,19,17,.85);color:#fff;font-size:var(--t-small);padding:8px 16px}
.film.tall{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,96px);align-items:center}
.film.tall .film-box{aspect-ratio:9/16;height:min(80svh,760px)}
@media (max-width:760px){.film-play{width:68px;height:68px;margin:-34px 0 0 -34px}.film-play svg{width:26px;height:26px}
  .film.tall{grid-template-columns:1fr}.film.tall .film-box{height:auto;width:100%;max-height:80svh}}

/* ----- Personal formats (Li 10-28): start from one picture; a row of tabs, one format at a time ----- */
.tiers:has(.fmt){display:block;border-top:0;overflow:visible;margin-right:0}
.cswitch.fmt .cs-tabs{gap:24px}
.cswitch.fmt .cs-t small{margin-left:8px;color:var(--ac);font-variant-numeric:tabular-nums}
.fm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.fm-pic{aspect-ratio:3/4;max-height:620px;overflow:hidden}
.fm-pic>img,.fm-quad img{width:100%;height:100%;object-fit:cover;display:block}
.fm-pic .film-box{aspect-ratio:auto;height:100%}
.fm-quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:100%}
.fm-quad img{min-height:0}
.fm-txt{display:flex;flex-direction:column;gap:12px;max-width:44ch}
.fm-txt h3{font:400 var(--t-block)/1 var(--head);text-transform:uppercase}
.fm-txt .desc{font-size:var(--t-lead);color:#4a4740}
.fm .inc{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.fm .inc li{padding:10px 0 10px 18px;position:relative;font-size:var(--t-body);border-bottom:1px solid var(--line)}
.fm .inc li::before{content:"";position:absolute;left:0;top:19px;width:6px;height:6px;border-radius:50%;background:var(--ac)}
.fm .cta{margin-top:16px}
@media (max-width:760px){.fm{grid-template-columns:1fr;gap:24px}.fm-pic{aspect-ratio:auto;height:min(80vw,360px);max-height:none}.fm-txt h3{font-size:var(--t-sub)}.fm-txt .desc{font-size:var(--t-body)}}

/* product details (Li 10-28): what you get, the look, length, files; hero shows three rows, the format panes show all */
.spec{margin:16px 0 0;border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.spec dt{font-size:var(--t-small);color:var(--mut);padding-top:2px}
.spec dd{margin:0;font-size:var(--t-body);line-height:1.45;color:var(--ink)}
.hc-spec{max-width:46ch;margin-top:20px}
.hc-spec>div{padding:8px 0}
.hc-spec dd{font-size:15px}
.spec-more{margin-top:14px;font-size:var(--t-small);color:var(--mut)}
.spec-more .tlink{font-size:inherit}
@media (max-width:760px){.spec>div{grid-template-columns:6em 1fr;gap:12px}}
/* details inside the narrow price columns (Holiday, Shops) */
.tier .tspec{margin-top:12px}
.tier .tspec>div{grid-template-columns:5.6em 1fr;gap:10px;padding:8px 0}
.tier .tspec dd{font-size:15px}
.tier .desc>p{margin:0}

/* Holiday stand-ins (Li 10-28): same frame as the product shots, laid out on a paper panel instead of cut */
.pnl{position:absolute;inset:0;background:var(--ink);border-radius:2px;display:grid;place-items:center;overflow:hidden}
.stk8{grid-template-columns:repeat(4,1fr);gap:5% 4%;padding:6% 6%;align-content:center}
.stk8 img{width:100%;aspect-ratio:1;object-fit:cover;border:3px solid #fff;border-radius:14%;box-shadow:0 2px 5px rgba(40,30,20,.28);transform:rotate(-4deg)}
.stk8 img:nth-child(even){transform:rotate(3deg)}.stk8 img:nth-child(3n){transform:rotate(-1deg)}
/* hero frame is 4:5 (4:3 on phones): 3 + 3 + 2 centred, every sticker inside the frame */
.hc-p .stk8{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:5% 4%;padding:6%}
.hc-p .stk8 img{width:27%;height:auto;aspect-ratio:1;object-fit:cover}
@media (max-width:860px){.hc-p .stk8{gap:5% 3%;padding:5% 8%}.hc-p .stk8 img{width:20%}}
.vphone .ph{height:90%;aspect-ratio:9/17;background:#111;border:4px solid #1b1b1b;border-radius:14px;box-shadow:0 6px 18px rgba(40,30,20,.35);position:relative;display:grid;place-items:center;overflow:hidden}
.vphone .ph img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;position:relative}
.vphone .ph img.blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(10px) brightness(.75);transform:scale(1.15)}
.vphone .bar{position:absolute;left:10%;right:10%;bottom:7%;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.vphone .bar b{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:2px;background:var(--xmas-red)}
.vphone .bar b::after{content:'';position:absolute;right:-4px;top:-3px;width:9px;height:9px;border-radius:50%;background:#fff}/* five options in a row (Holiday, Li 10-28): the label sits above its line, the columns are too narrow for two */
.tiers[style*="--n:5"]{column-gap:36px}
.tiers[style*="--n:5"] .tier+.tier::before{left:-18px}
.tiers[style*="--n:5"] .tspec>div{grid-template-columns:1fr;gap:2px}
/* Li 11-09: every hero picture fills the same 4:5 frame on all pages (was contain: each Holiday slide showed a different size) */
/* the Holiday hero pictures are made 4:5 (assets/story/hero45-…), so nothing is cropped */

/* Li 11-07: carousel heroes: the picture starts level with the headline (it was centred on the tallest slide, leaving a gap above) */
.hcar .hc-pics{align-self:start}
@media (max-width:860px){.hcar .hc-pics{align-self:auto}}
/* 11-13: Holiday and Shops headlines run long ("Your loved ones, in a Christmas video."): a wider copy column so no word sits on a line alone, same font size */
@media (min-width:861px){.hcar.wide{grid-template-columns:1.4fr 1fr;column-gap:clamp(24px,4vw,56px)}}
/* 11-13: hero headlines 1.12, not .95 (1.05 still looked touching): in Anton a comma drops .12em below the baseline and touched the capitals of the next line */
h1,.hc-s .h1,.poster-copy .ph{line-height:1.12}
/* 11-13 copy pro: the Holiday video headline is exactly two lines ("Your loved ones," / "in a Christmas video."); line 2 is 8.87em, wider than the column, so this one headline is sized to its column, never above normal */
.hc-fit{container-type:inline-size}
.hc-fit h1,.hc-fit .h1{font-size:min(var(--t-poster),11.2cqi);max-width:none}


/* Li 11-07: Hats and glassware tab: square tiles, so landscape scenes are not cut down to 4:5 */
.wshot.sq{aspect-ratio:1/1}

/* Li 11-07: Shops "Choose your model": three choices side by side */
.mc-lead{max-width:60ch;color:var(--mut);margin:-8px 0 28px}
.mchoice{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
.mc-studio .mc-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mc-studio .mc-head .mc-tag{margin:0}
.mc-studio>p{max-width:70ch}
.mc-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px}
.mc-row figure{margin:0}
.mc-row img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;display:block}
.mc-row figcaption{font-size:13px;color:var(--mut);margin-top:8px;line-height:1.35}
.mc-row figcaption b{display:block;color:var(--ink);font-weight:500;font-size:16px}
.mc-pics.mc-nf{grid-template-columns:repeat(3,1fr)}
.mc-pics.mc-nf img{aspect-ratio:3/4;object-position:50% 15%}
@media (max-width:860px){.mc-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.mc-row figure{scroll-snap-align:start}}
.mc{border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:10px}
.mc h3{font-size:20px;font-weight:500}
.mc-tag{font-size:13px;color:var(--ac);margin-top:-6px}
.mc-fit,.mc-cap{font-size:14px;color:var(--mut)}
.mc-pics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.mc-pics figure{margin:0}
.mc-pics img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 25%;display:block}
.mc-pics figcaption{font-size:13px;color:var(--mut);margin-top:6px;line-height:1.35}
.mc-pics figcaption b{display:block;color:var(--ink);font-weight:500;font-size:15px}
.mc-steps{margin:4px 0 0;padding-left:20px;display:grid;gap:8px;font-size:15px}
.mc-steps b{font-weight:500}
.mc .tlink{margin-top:auto;align-self:flex-start}
@media (max-width:860px){.mchoice{grid-template-columns:1fr}}

/* Li 11-08: two pictures per product, two products per row */
.wpairs{display:grid;grid-template-columns:1fr 1fr;gap:48px 32px}
.wpairs .wgrid+.wset{margin-top:0}
.wgrid.w2{grid-template-columns:1fr 1fr}
.wpairs .sentin{width:34%}
@media (max-width:760px){.wpairs{grid-template-columns:1fr;gap:36px}}

/* Li 11-08: Holiday shows all six looks, not only watercolor */
.sx{padding-bottom:var(--pad)}
.sx-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:8px}
.sx-t{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;align-content:start}
.sx-pic{display:block;aspect-ratio:1;overflow:hidden;border-radius:2px;margin-bottom:8px;background:var(--line)}
.sx-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.sx-t:hover .sx-pic img{transform:scale(1.04)}
.sx-t:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.sx-t b{font:400 var(--t-sub)/1.1 var(--head);text-transform:uppercase;letter-spacing:.02em}
.sx-t small{font-size:var(--t-small);color:var(--mut)}
@media (max-width:900px){.sx-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.sx-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.rd-sty{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rd-sty small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-right:8px}
.rs{all:unset;box-sizing:border-box;cursor:pointer;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:var(--t-small);transition:border-color .15s}
.rs:hover{border-color:currentColor}
.rs.on{border-color:currentColor;background:rgba(255,255,255,.08)}
.rs:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.lk-pane{margin-top:var(--pad);padding-top:32px;border-top:1px solid var(--line)}
.cs-sub{font:400 var(--t-sub)/1.2 var(--head);text-transform:uppercase;letter-spacing:.02em;margin-bottom:24px}

/* Li 11-10: Personal "Any look you want" - the looks we take, a pick opens large with "Order in this look" */
/* one full-width strip that drifts on its own (site.js); drag with a mouse, swipe with a finger */
.plk{padding-bottom:var(--pad)}
/* 11-10: the heading row sits on the same 3-column grid as the selling points above (.hl): heading over columns 1-2,
   the line in column 3 under "Ready in 3 days", bottoms lined up; same text style as .hl p */
/* 11-10 Li: a dark band sits right on top of the strip, ink on the left fading to nothing on the right, the text inside it */
.lk-band{background:linear-gradient(90deg,var(--ink) 0,var(--ink) 30%,rgba(26,25,23,.6) 60%,transparent 100%)}
/* 11-10 Li: bolder type - a huge outlined count beside a poster-size two-line heading, all on the dark part */
/* 11-10 Li: heading spread across the full screen width; the text runs the opposite gradient (light on the dark side, dark on the light side) */
.lk-band{background:linear-gradient(90deg,var(--ink) 0,var(--ink) 38%,var(--paper) 72%,var(--paper) 100%)}
.lk-head{padding:clamp(28px,3vw,44px) clamp(16px,2.2vw,32px) clamp(24px,2.6vw,38px)}
/* 11-10 Li: back to the site heading size; heading and line one long row, same treatment */
.lk-row{display:flex;align-items:baseline;gap:.28em;white-space:nowrap;font:400 clamp(24px,3.6vw,52px)/1.05 var(--head);text-transform:uppercase;letter-spacing:.02em;
  background:linear-gradient(90deg,var(--paper) 0,var(--paper) 40%,var(--ink) 70%,var(--ink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lk-row h2,.lk-row p{margin:0;font:inherit;letter-spacing:inherit;color:transparent}
.lk-row i{font-style:normal}
/* phone: its own layout - the heading on top, the list on a smaller line underneath, all on the dark part */
@media (max-width:760px){.lk-band{background:var(--ink)}
  /* phone layout of its own: two lines, each sized to fill the screen width exactly - a solid block of type */
  .lk-row{display:block;background:none;white-space:nowrap}
  .lk-row h2,.lk-row p{text-align:justify;text-align-last:justify;text-wrap:nowrap}
  .lk-row h2{font-size:calc((100vw - 32px) / 8);line-height:.95;color:var(--paper)}
  .lk-row p{margin-top:8px;font-size:calc((100vw - 32px) / 17.4);line-height:1;color:rgba(247,244,238,.6)}
  .lk-row p i:first-child{display:none}}
.lk-strip{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;margin-top:0;touch-action:pan-x pan-y}
.lk-strip::-webkit-scrollbar{display:none}
.lk-strip.drag{cursor:grabbing}
.lk-track{display:flex;gap:0;width:max-content}   /* Li 11-10: no white gaps, the pictures butt together */
.lk-t{all:unset;box-sizing:border-box;flex:0 0 auto;width:clamp(150px,17vw,260px);cursor:pointer;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none}
.lk-strip.drag .lk-t{cursor:grabbing}
.lk-t img{width:100%;aspect-ratio:1;object-fit:cover;display:block;pointer-events:none;transition:transform .5s ease}
.lk-t:hover img{transform:scale(1.04)}
.lk-t span{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;font-size:var(--t-small);color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.lk-t:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.lkdlg{width:min(720px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);margin:auto;padding:0;border:0;border-radius:4px;background:var(--paper);overflow:auto}
.lkdlg[open]{animation:sd-in .3s cubic-bezier(.2,.7,.2,1)}
.lkdlg::backdrop{background:rgba(8,12,10,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html:has(.lkdlg[open]){overflow:hidden}
.lk-big{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.lk-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px}
.lk-name{font:400 var(--t-sub)/1.1 var(--head);text-transform:uppercase;letter-spacing:.02em}
.lk-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font-size:26px;line-height:1;cursor:pointer}
.lk-x:hover{background:var(--paper)}
@media (max-width:560px){.lk-foot{flex-direction:column;align-items:stretch}.lk-foot .btn{width:100%}}

/* 11-10 Li: Personal cases showed a cropped, filtered picture. Illustrations now show whole and in true colour:
   send / get in two equal columns, each picture at its own shape (only Personal cases have no .fx-photo here). */
/* 11-10 Li 「你为什么把网页版的展示页改了」: desktop back to the earlier layout (small photo left, large result right,
   bottom-aligned); the result frame is 4:5 instead of square so the picture shows (almost) whole. Phone layout below unchanged. */
.case .b .side:not(.fx-photo){aspect-ratio:4/5}
.case .b .side:not(.fx-photo) img{display:block;width:100%;height:100%;object-fit:cover}
/* 11-10 Li 「为什么都是偏左 / 比例不是之前的样子」: desktop exactly the old 1fr 2fr across the full width; result frame
   10:11 (almost the old square) so the cat's ears and the boy stay in. */
@media (min-width:641px){.case .b .side:not(.fx-photo){aspect-ratio:10/11}}
@media (max-width:640px){.case:has(.b .side:not(.fx-photo)){grid-template-columns:1fr}}

/* 11-10 Li: on a phone the format pane needed scrolling up and down. Phone layout of its own: a small picture beside
   name / price / one line, the details in tight rows underneath, the button last - one format fits one screen. */
@media (max-width:760px){
  .fm{grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:6px;align-items:start}
  .fm-pic{grid-column:1;grid-row:1/4;width:118px;height:158px;aspect-ratio:auto}
  .fm-quad{gap:3px}
  .fm-pic .film-play{width:40px;height:40px;margin:-20px 0 0 -20px}.fm-pic .film-play svg{width:16px;height:16px}
  .fm-txt{display:contents}
  .fm-txt h3{grid-column:2;font-size:var(--t-sub);line-height:1}
  .fm-txt .price-big{grid-column:2;font-size:34px;line-height:1}
  .fm-txt .desc{grid-column:2;font-size:15px;line-height:1.4;margin:0}
  .fm-txt .spec,.fm-txt .cta,.fm-txt .spec-more,.fm-txt .inc{grid-column:1/-1}
  .fm-txt .spec{margin-top:10px}
  .fm-txt .spec>div{grid-template-columns:6.2em 1fr;gap:10px;padding:7px 0}
  .fm-txt .spec dt{font-size:13px}.fm-txt .spec dd{font-size:15px;line-height:1.35}
  .fm-txt .cta{margin-top:12px}.fm-txt .cta .btn{width:100%;text-align:center}
  .fm-txt .spec-more{margin:8px 0 0;font-size:14px}}
/* 11-10: the same format tabs on Shops and Holiday */
.theme-xmas .fm-txt .desc{color:var(--txt2)}
@media (max-width:760px){.fm-pic .sentin{display:none}}
/* 11-10 Li: Personal cases on a phone were hard to compare (photo, list, then the result far below).
   Phone: the photo and the result side by side at the top, the two lists underneath. */
@media (max-width:640px){
  .case:has(.b .side:not(.fx-photo)){grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto auto auto auto;column-gap:10px;row-gap:6px;align-items:end}
  .case:has(.b .side:not(.fx-photo)) .a,.case:has(.b .side:not(.fx-photo)) .b{display:contents}
  .case:has(.b .side:not(.fx-photo)) .a>small{grid-column:1;grid-row:1}
  .case:has(.b .side:not(.fx-photo)) .a>.side{grid-column:1;grid-row:2}
  .case:has(.b .side:not(.fx-photo)) .b>small{grid-column:2;grid-row:1}
  .case:has(.b .side:not(.fx-photo)) .b>.side{grid-column:2;grid-row:2}
  .case:has(.b .side:not(.fx-photo)) small{margin-bottom:2px;font-size:13px}
  .case:has(.b .side:not(.fx-photo)) .a>.kit{grid-column:1/-1;grid-row:3;margin:14px 0 0}
  .case:has(.b .side:not(.fx-photo)) .b>.kit{grid-column:1/-1;grid-row:4;margin:0}
  .case:has(.b .side:not(.fx-photo)) .kit li{padding:7px 0;font-size:14px}
  .case:has(.b .side:not(.fx-photo)) .b>.kit ul{border-top:0}}

/* 11-10 Li: the light/dark switch fell on CHARACTERS. Band and text now follow the text itself (not the screen), so on
   every width the words before stay light on dark and the switch happens on the dot after CHARACTERS. */
@media (min-width:761px){
  .lk-band{background:none;overflow:hidden}
  .lk-head{width:max-content;
    background:linear-gradient(90deg,var(--ink) 0,var(--ink) 38%,rgba(26,25,23,.86) 56%,rgba(26,25,23,.62) 76%,rgba(26,25,23,.3) 84%,transparent 96%)}
  .lk-row{width:max-content;
    background:linear-gradient(90deg,var(--paper) 0,var(--paper) 76.6%,var(--ink) 79.4%,var(--ink) 100%);-webkit-background-clip:text;background-clip:text}}

/* 11-10 Li picked option C for Personal, Holiday and Shops: the looks band + strip is the whole first screen, the hero
   carousel follows. One component (build_v2.looks_poster); per heading, --sw is where light turns dark (the last dot) and
   --k1/--k2 size the two phone lines to the screen width. Colors come from tokens so the Holiday skin flips them. */
.plk.lkposter{margin-top:69px;height:calc(100svh - 69px);min-height:480px;display:flex;flex-direction:column;padding-bottom:0}
.plk.lkposter .lk-head{padding-block:clamp(36px,5vh,64px)}
.plk.lkposter .lk-strip{flex:1;min-height:0;display:flex}
.plk.lkposter .lk-track{height:100%}
.plk.lkposter .lk-t{width:auto;height:100%;aspect-ratio:1}
.plk.lkposter .lk-t img{height:100%;width:100%}
.plk.lkposter.lk-tall .lk-t{aspect-ratio:3/4}
.plk.lkposter.lk-tall .lk-t img{aspect-ratio:3/4}
.plk.lkposter+.d-hero{padding-top:56px}
.lk-tall .lkdlg{width:min(520px,calc(100vw - 32px))}
.lk-tall .lk-big{aspect-ratio:3/4}
.plk.lkposter .lk-t.st-open span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .lk-row h2{font-size:calc((100vw - 32px) / var(--k1,8))}
  .lk-row p{font-size:calc((100vw - 32px) / var(--k2,17.4));color:color-mix(in srgb,var(--paper) 60%,transparent)}}
@media (min-width:761px){
  .lk-head{background:linear-gradient(90deg,var(--ink) 0,var(--ink) 38%,color-mix(in srgb,var(--ink) 86%,transparent) 56%,color-mix(in srgb,var(--ink) 62%,transparent) 76%,color-mix(in srgb,var(--ink) 30%,transparent) 84%,transparent 96%)}
  .lk-row{background:linear-gradient(90deg,var(--paper) 0,var(--paper) calc(var(--sw,77%) - 1.4%),var(--ink) calc(var(--sw,77%) + 1.4%),var(--ink) 100%);-webkit-background-clip:text;background-clip:text}}
/* 11-10 Li: "the text gradient is too abrupt". The band now fades on an eased curve, and the text turns from light to dark
   over the whole gap around the last dot (--ga..--gb, measured per heading) in small steps, so no letter is cut in two. */
@media (min-width:761px){
  .lk-head{background:linear-gradient(90deg,var(--ink) 0,var(--ink) 34%,
    color-mix(in srgb,var(--ink) 96%,transparent) 44%,color-mix(in srgb,var(--ink) 88%,transparent) 52%,
    color-mix(in srgb,var(--ink) 76%,transparent) 60%,color-mix(in srgb,var(--ink) 62%,transparent) 68%,
    color-mix(in srgb,var(--ink) 46%,transparent) 76%,color-mix(in srgb,var(--ink) 28%,transparent) 84%,
    color-mix(in srgb,var(--ink) 14%,transparent) 90%,color-mix(in srgb,var(--ink) 4%,transparent) 96%,transparent 100%)}
  .lk-row{--w:calc(var(--gb,79.5%) - var(--ga,76.5%));
    background:linear-gradient(90deg,var(--paper) 0,var(--paper) var(--ga,76.5%),
      color-mix(in srgb,var(--paper) 90%,var(--ink)) calc(var(--ga,76.5%) + var(--w) * .15),
      color-mix(in srgb,var(--paper) 70%,var(--ink)) calc(var(--ga,76.5%) + var(--w) * .32),
      color-mix(in srgb,var(--paper) 50%,var(--ink)) calc(var(--ga,76.5%) + var(--w) * .5),
      color-mix(in srgb,var(--paper) 30%,var(--ink)) calc(var(--ga,76.5%) + var(--w) * .68),
      color-mix(in srgb,var(--paper) 10%,var(--ink)) calc(var(--ga,76.5%) + var(--w) * .85),
      var(--ink) var(--gb,79.5%),var(--ink) 100%);-webkit-background-clip:text;background-clip:text}}
/* 11-10: the last dot sits where light turns dark and went grey-on-grey; the dots take the logo's accent color instead */
.lk-row p i{color:var(--ac)}

/* 11-10 Li: "the brown dots don't look good". No colored mark: each dot is the same color as the words beside it, only
   much lighter (the last one sits in the turn, so it takes the dark side's color). Overrides the accent rule above. */
.lk-row p i{color:color-mix(in srgb,var(--paper) 38%,transparent)}
.lk-row p i:last-of-type{color:color-mix(in srgb,var(--ink) 30%,transparent)}
@media (max-width:760px){.lk-row p i,.lk-row p i:last-of-type{color:color-mix(in srgb,var(--paper) 28%,transparent)}}
/* 11-13 (coordinator, Li's partner): the title must stay readable. On a computer the band is now one solid --ink block
   and the whole line one solid --paper color, as on the phone; the fade and the light-to-dark text are gone. Tokens only, so
   the Holiday skin still flips them. */
@media (min-width:761px){
  .lk-band{background:var(--ink)}
  .lk-head{background:none}
  .lk-row{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--paper)}
  .lk-row h2,.lk-row p{color:var(--paper)}
  .lk-row p i,.lk-row p i:last-of-type{color:color-mix(in srgb,var(--paper) 38%,transparent)}}
/* 11-10 Li: Holiday strip mixes square book pages with 9:16 film stills (each tile sets its own aspect-ratio inline);
   a film still opens in a tall plain view that fits the screen */
.lkdlg.tallpic{width:min(480px,calc((100svh - 120px) * .5625),calc(100vw - 32px))}
.lkdlg.tallpic .lk-big{aspect-ratio:9/16}
.lk-go[hidden]{display:none}
/* 11-10: on the Holiday skin --ink is cream, so the close mark vanished on its white circle */
.lk-x{color:#1A1917}

/* 11-10 Li: Shops strip to the Personal standard - square tiles of one size; the enlarged view still shows the whole 3:4 picture */
.plk.lkposter.lk-tall.lk-sq .lk-t,.plk.lkposter.lk-tall.lk-sq .lk-t img{aspect-ratio:1}

/* 11-10: a wide 16:9 film frame (Holiday strip, the Santa hug) opens wide */
.lkdlg.widepic{width:min(960px,calc(100vw - 32px))}
.lkdlg.widepic .lk-big{aspect-ratio:auto;height:auto}

/* ===== 11-10 Contact page (Li: its own page, a short letter, then a form) ===== */
.ct .ct-letter{margin-top:32px;display:grid;gap:18px;max-width:62ch;font-size:var(--t-body);line-height:1.65;color:#3a3832}
.ct .ct-letter p{margin:0}
.ct .chips{display:flex;flex-wrap:wrap;gap:10px}
.ct .chip{display:inline-flex;position:relative;cursor:pointer}
.ct .chip input{position:absolute;opacity:0;pointer-events:none}
.ct .chip span{display:inline-block;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:var(--t-small);color:var(--ink);transition:border-color .15s,background .15s}
.ct .chip:hover span{border-color:var(--ink)}
.ct .chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.ct .chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.ct .flabel small{color:var(--mut)}
.ct-done{margin-top:64px;border-top:1px solid var(--ink);padding-top:24px;outline:0}
.ct-done h2{font-size:var(--t-sub)}
.ct-done p{margin-top:12px;color:#3a3832;max-width:60ch}
.ct-direct{margin-top:80px;border-top:1px solid var(--line);padding-top:32px}
.ct-direct h2{font-size:var(--t-sub)}
.ct-social{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:20px;font-size:var(--t-body)}
.ct-social a[href]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ct-social .ph-social{color:#c0392b;border:1px dashed #c0392b;padding:4px 10px;border-radius:2px;cursor:help}
/* 11-10 topics grouped by page (Li: every product, not five) */
.ct .ct-groups{display:grid;gap:14px}
.ct .ct-g{display:grid;grid-template-columns:96px 1fr;align-items:start;gap:12px}
.ct .ct-g>b{font-weight:500;font-size:var(--t-small);color:var(--mut);padding-top:10px}
@media (max-width:640px){.ct .ct-g{grid-template-columns:1fr;gap:8px}.ct .ct-g>b{padding-top:0}}

/* 11-10 Li: three films per product page, side by side; a swipe row on phones */
.films3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:start}
.films3 .f3-item{margin:0}
.films3 .film-box{aspect-ratio:auto}
.films3 .film-play{width:64px;height:64px;margin:-32px 0 0 -32px}.films3 .film-play svg{width:24px;height:24px;margin-left:4px}
.films3 figcaption{margin-top:10px;font-size:var(--t-small);color:var(--mut)}
.films3 .film-box.film-none::after{white-space:nowrap}
@media (max-width:760px){
  .films3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(-1 * var(--gut,16px));padding:0 var(--gut,16px);scrollbar-width:none}
  .films3::-webkit-scrollbar{display:none}
  .films3 .f3-item{flex:0 0 78%;scroll-snap-align:center}
  .films3 .film-play{width:56px;height:56px;margin:-28px 0 0 -28px}}

/* ----- 11-10 Custom AI page (text only), home monthly-content block, Holiday Lunar New Year block ----- */
.ca-hero{grid-template-columns:1fr;min-height:62svh;align-items:end}
.ca-hero h1{max-width:10em}
.ca-hero .lead{max-width:36em}
.ca-pipes{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ca-p{display:grid;grid-template-columns:4em 1.1fr 1.4fr;gap:16px clamp(24px,4vw,64px);padding:32px 0;border-bottom:1px solid var(--line);align-items:start}
.ca-n{font-size:var(--t-small);color:var(--mut);padding-top:6px;font-variant-numeric:tabular-nums}
.ca-pt h3{font-size:var(--t-sub);margin-bottom:12px}
.ca-pt p{font-size:var(--t-body);color:#4a4740;max-width:26em}
.ca-io{margin:0}
.ca-io div{display:grid;grid-template-columns:7em 1fr;gap:8px 24px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.ca-io div:last-child{border-bottom:0}
.ca-io dt{color:var(--mut)}.ca-io dd{margin:0}
@media (max-width:760px){.ca-hero{min-height:0}.ca-p{grid-template-columns:2.6em 1fr;padding:24px 0}.ca-io{grid-column:2}.ca-io div{grid-template-columns:5.6em 1fr;gap:6px 16px}}
.monthly{display:grid;grid-template-columns:1fr 1.1fr;gap:32px clamp(32px,6vw,96px);border-top:1px solid var(--ink);padding-top:32px;align-items:start}
.monthly h2{font-size:var(--t-block);max-width:12em}
.monthly p{font-size:var(--t-body);color:#4a4740;max-width:32em}
.monthly ul{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.monthly li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.monthly .cta{margin-top:32px}
@media (max-width:760px){.monthly{grid-template-columns:1fr}}
.cny{border-top:1px solid var(--ink);padding-top:32px;display:grid;grid-template-columns:1fr 1.1fr;gap:24px clamp(32px,6vw,96px);align-items:start}
.cny h2{font-size:var(--t-block);max-width:12em}
.cny p{font-size:var(--t-body);max-width:32em}
.cny .cta{margin-top:24px}
@media (max-width:760px){.cny{grid-template-columns:1fr}}
.films3.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc((100% - clamp(12px,2vw,24px)) * 2 / 3 + clamp(12px,2vw,24px) / 2)}
@media (max-width:760px){.films3.n2{max-width:none}}
.films3.n1{grid-template-columns:minmax(0,1fr);max-width:360px}   /* Li 11-12: a single film, not stretched */
@media (max-width:760px){.films3.n1{display:grid;margin:0;padding:0;max-width:78%}}
/* 11-10 Li: Lunar New Year block lists what is coming; Personal "For your channel" (self-media offer) */
.cny-list{margin:20px 0 0;border-top:1px solid var(--line,rgba(0,0,0,.15))}
.cny-list div{display:grid;grid-template-columns:11em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line,rgba(0,0,0,.15))}
.cny-list dt{font-weight:500}.cny-list dd{margin:0;color:var(--mut)}
.cny-note{margin-top:14px;color:var(--mut)}
.ch{display:grid;grid-template-columns:1.2fr 1fr;gap:24px clamp(32px,6vw,96px);align-items:start;margin-top:24px}
.ch-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ch-pics img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.ch-list{margin:0;border-top:1px solid var(--ink)}
.ch-list div{padding:14px 0;border-bottom:1px solid var(--line,rgba(0,0,0,.15))}
.ch-list dt{display:flex;justify-content:space-between;gap:12px;font-weight:500}
.ch-list dt b{font-weight:500}
.ch-list dd{margin:4px 0 0;color:var(--mut)}
@media (max-width:760px){.ch{grid-template-columns:1fr}.cny-list div{grid-template-columns:1fr;gap:2px}}
/* 11-10 Li: home below the poster = one line on who we are + three doors (each with a sent -> result picture) */
.home-sum{padding-top:clamp(56px,8vw,112px)}
.home-state{font:400 clamp(28px,3.4vw,48px)/1.1 var(--head);text-transform:uppercase;letter-spacing:.02em;max-width:22em;margin:0 0 clamp(32px,5vw,56px)}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px)}
.door{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none}
.door-pic{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--line);margin-bottom:6px}
.door-pic>img{width:100%;height:100%;object-fit:cover;display:block}
.door-quad{display:grid;grid-template-columns:1fr 1fr;gap:4px;height:100%}
.door-quad img{width:100%;height:100%;object-fit:cover;display:block}
.door small{color:var(--mut);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.door h3{font-size:clamp(26px,2.6vw,36px)}
.door p{max-width:26em}
.door-go{margin-top:auto;padding-top:4px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.door:hover h3{color:var(--ac)}
@media (max-width:760px){.doors{grid-template-columns:1fr;gap:40px}}
/* 11-10 Li 「Custom AI 格式有点丑」: hero = text + one photo turned into four outputs; pipelines as picture cards */
.ca-hero{grid-template-columns:1fr 1fr;min-height:0;align-items:center;gap:clamp(32px,5vw,80px)}
.ca-quad{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ca-o{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;background:#1d1b17}
.ca-o>img,.ca-post img,.ca-cpic>img{width:100%;height:100%;object-fit:cover;display:block}
.ca-o figcaption{position:absolute;left:0;top:0;background:var(--paper);color:var(--ink);font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px}
.ca-quad .sentin{left:calc(50% - 15%);top:calc(50% - 20%);bottom:auto;width:30%;max-width:120px}
.ca-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(247,244,238,.92)}
.ca-play::after{content:'';position:absolute;left:22px;top:17px;border-left:16px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent}
.ca-voice{width:100%;height:100%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;background:#1d1b17;padding:16px}
.ca-wave{width:80%;height:auto;fill:var(--paper);margin-bottom:12px}
.ca-voice span{color:var(--paper);border:1px solid rgba(247,244,238,.5);font:500 12px/1 var(--sans);padding:6px 9px;letter-spacing:.06em}
.ca-post{position:relative;width:100%;height:100%}
.ca-post b{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;color:#fff;font:500 13px var(--sans);background:linear-gradient(transparent,rgba(0,0,0,.55))}
.ca-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.ca-card{display:flex;flex-direction:column;gap:8px}
.ca-cpic{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1d1b17;margin-bottom:8px}
.ca-card .ca-n{font-size:13px;color:var(--mut);padding:0}
.ca-card h3{font-size:clamp(24px,2.2vw,32px)}
.ca-card p{color:#4a4740;font-size:15px;line-height:1.5}
.ca-card .ca-io{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:14px;color:var(--mut)}
.ca-card .ca-io span:first-child::before{content:'In  ';color:var(--ink);font-weight:500}
.ca-card .ca-io span:last-child::before{content:'Out  ';color:var(--ink);font-weight:500}
.ca-run{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ca-run li{display:grid;grid-template-columns:16em 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.ca-run b{font-weight:500}.ca-run span{color:#4a4740}
.ca-talk{font-size:.55em;color:var(--ink)}
@media (max-width:900px){.ca-cards{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.ca-hero{grid-template-columns:1fr}.ca-run li{grid-template-columns:1fr;gap:4px}}
@media (max-width:480px){.ca-cards{grid-template-columns:1fr}}
.ca-o{aspect-ratio:4/5}
.ca-o figcaption{z-index:2}
.ca-voice{flex-direction:column;flex-wrap:nowrap;align-items:center}
.ca-voice .ca-langs{display:flex;gap:8px}
/* labels on the outer corners so the Sent picture in the middle never covers one */
.ca-quad .ca-o:nth-child(2) figcaption{left:auto;right:0}
.ca-quad .ca-o:nth-child(3) figcaption{top:auto;bottom:0}
.ca-quad .ca-o:nth-child(4) figcaption{left:auto;right:0;top:auto;bottom:0}
/* 11-10 polish: home */
.door-quad{position:relative}
.door-tag{position:absolute;left:10px;bottom:10px;background:rgba(20,19,17,.82);color:#fff;font-size:12px;letter-spacing:.04em;padding:6px 10px}
.films3.fit .film-box video{object-fit:cover}
/* Li 11-11: page films play in a pop-up at their own shape (site.js .fmdlg) */
.fmdlg{padding:0;border:0;margin:auto;background:#000;max-width:none;max-height:none;overflow:visible;opacity:0;transition:opacity .25s}
.fmdlg.ready{opacity:1}
.fmdlg::backdrop{background:rgba(8,12,10,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.fmdlg video{display:block;width:auto;height:auto;max-width:min(calc(100vw - 32px),var(--nw,100vw));max-height:min(calc(100svh - 32px),70svh);background:#000}
.fmdlg .lk-x{z-index:1}
html:has(.fmdlg[open]){overflow:hidden}
.films3.fit .film-box>img{object-position:50% 30%}
a.film-box.loop{display:block}.films3 figcaption a{color:inherit;text-decoration:none}.films3 figcaption a:hover{text-decoration:underline}   /* Li 11-12: home loop films link to their page */
.films3 figcaption{margin-top:10px;font-size:var(--t-small);color:var(--mut)}
/* 11-10 polish: on a phone the four pipeline cards stack, so their pictures go wide and short */
@media (max-width:480px){.ca-cpic{aspect-ratio:4/3}.ca-cpic>img{object-position:50% 25%}}
/* Li 11-12: order page, storybook + video -> whole set hint */
.uphint{margin-top:10px}.uphint button.tlink{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:359px){.poster-copy .ph{font-size:13.5vw}}   /* 11-13: at 320 the 48px floor pushes "NO PHOTOSHOOT." (kept together) past the edge */
.hubdemo{padding-bottom:var(--pad)}.hubdemo .hubv{display:block;width:100%;max-width:960px;margin:0 auto;height:auto;aspect-ratio:16/10;background:#e9e7e1;border:1px solid var(--line)}   /* 11-13 Li: Hub screen recording on Custom AI */