/* ===== FX template intensity (one place). Used by .fx-poster / .fx-photo in fx.css. Change here, every image or video follows. ===== */
:root{
  --fx-dot-pitch:14px;      /* halftone grid spacing (one grid for the whole poster) */
  --fx-dot-angle:135deg;    /* direction the dots GROW toward: 135deg = bottom-right corner is biggest, top-left smallest */
  --fx-dot-hi:.93;          /* level at the big end (bigger = bigger dots in the corner) */
  --fx-dot-end:44%;         /* where along the diagonal the dots have shrunk to nothing (everything before it, the top-left, has none) */
  --fx-dot-gate:.3;        /* level below which no dot exists; leave as is unless --fx-dot-bright changes */
  --fx-dot-sharp:14;        /* dot edge crispness */
  --fx-dot-bright:.54;     /* shifts the threshold: raise = bigger dots everywhere */
  --fx-dot-a:.9;           /* overall dot strength */
  --fx-edge-pitch:15px;     /* edge dots (where the picture scatters into paper): spacing */
  --fx-edge-r:4.4px;        /* edge dots: radius */
  --fx-edge-h:clamp(170px,26.7vw,420px);   /* height of the brush edge strip */
  --fx-grain:.26;           /* film grain */
  --fx-fade:.075;           /* lifted blacks (faded look) */
  --fx-fade-rgb:62,54,46;
  --fx-warm:.14;            /* warm cast (sepia amount) */
  --fx-contrast:1.03;
  --fx-sat:.94;
  --fx-vignette:.36;        /* corner darkening */
  --fx-scrim-rgb:26,25,22;  /* soft shade behind the text block */
  --fx-scrim-a:.42;
  --fx-topshade:.97;        /* dark gradient at the top that holds the logo */
}
/* Odd Studio site v2 — shared base: tokens, header, buttons, footer. Tokens carried over from the existing Shops page. */
:root{
  --paper:#F7F4EE; --ink:#1A1916; --mut:#8A857A; --line:#E2DDD2;
  --ac:#8A5A2B; --ac-dk:#6f4721;
  --head:'Anton',Impact,'Arial Narrow',sans-serif;   /* headings (Li chose Anton) */
  --serif:var(--head);
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(16px,4vw,56px);
  --pad:96px;
  /* type ladder (SPEC 9.1): only these sizes */
  --t-poster:clamp(48px,6vw,88px); --t-block:clamp(32px,3.6vw,52px); --t-sub:24px; --t-lead:20px; --t-body:17px; --t-small:14px;
}
@media (max-width:640px){:root{--t-lead:18px;--t-body:16px;--pad:64px}}
h1,h2,h3,h4{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.95;text-wrap:balance}
.nocaps{text-transform:none!important;letter-spacing:0!important;line-height:1.05!important}
p,li,dd{text-wrap:pretty}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.lock{overflow:hidden}
[id]{scroll-margin-top:88px}
.fx-photo{background:#e9e3d8}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
small,.small{font-size:var(--t-small)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}

/* buttons: one filled, one underlined */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border:0;border-radius:2px;background:var(--ink);color:var(--paper);
  font:500 16px/1 var(--sans);cursor:pointer;text-align:center;gap:.3em;transition:background .2s}
.btn:hover{background:var(--ac)}
.btn:active{background:var(--ac-dk)}
.btn.light{background:var(--paper);color:var(--ink)}
.btn.light:hover{background:var(--ac);color:var(--paper)}
.tlink{font:500 16px/1.4 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s;cursor:pointer;background:none;border:0;color:inherit}
.tlink:hover{color:var(--ac)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
@media (max-width:640px){.cta .btn{width:100%}}
.price-big{font:400 var(--t-block)/1 var(--head);color:var(--ac);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.price-big small{font:400 var(--t-small)/1 var(--sans);color:var(--mut);letter-spacing:0;margin-left:8px}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:30;color:var(--ink);border-bottom:1px solid transparent;transition:background .3s,color .3s,border-color .3s}
.top.solid{background:var(--paper);border-color:var(--line)}
.top.onhero{color:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:8px;font:400 22px/1 var(--head);letter-spacing:.04em;text-transform:uppercase}
.logo .dot{flex:none;width:12px;height:12px;border-radius:50%;background:#C2410C}
.menu{display:flex;align-items:center;gap:32px;font-size:15px}
.menu a{opacity:.8;transition:opacity .2s}
.menu a:hover,.menu a[aria-current]{opacity:1}
.menu a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.burger{display:none;background:none;border:0;color:inherit;width:48px;height:48px;cursor:pointer;margin-right:-12px}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;margin:6px auto;transition:transform .25s,opacity .25s}
@media (max-width:860px){
  .burger{display:block}
  .menu{position:fixed;inset:68px 0 0 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);color:var(--ink);padding:12px var(--gut);
    font:400 28px/1 var(--head);text-transform:uppercase;letter-spacing:.03em;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s;overflow:auto}
  .menu a{opacity:1;padding:20px 0;border-bottom:1px solid var(--line)}
  .top.open{background:var(--paper);color:var(--ink)}
  .top.open .menu{visibility:visible;opacity:1}
  .top.open .burger span:first-child{transform:translateY(3.7px) rotate(45deg)}
  .top.open .burger span:last-child{transform:translateY(-3.7px) rotate(-45deg)}
}

/* closing block + footer */
.closing{padding-block:var(--pad)}
.closing h2{font-size:var(--t-block);max-width:16em}
.closing p{margin-top:24px;font-size:var(--t-lead);color:#4a4740;max-width:38ch;text-wrap:balance}
.mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:24px;font-size:var(--t-body)}
.mailrow a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mailrow button{font:500 var(--t-small)/1 var(--sans);color:var(--mut)}
.note{font-size:var(--t-small);color:var(--mut);margin-top:16px;max-width:60ch}
footer{border-top:1px solid var(--line);padding:64px 0 40px;font-size:var(--t-small);color:var(--mut)}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:28px 48px}
footer .tag{font:400 var(--t-lead)/1.4 var(--sans);color:var(--ink);margin-bottom:16px}
footer .fl{display:flex;gap:6px 22px;flex-wrap:wrap}
footer a{transition:color .2s}footer a:hover{color:var(--ink)}
footer .copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}
@media (max-width:640px){footer .wrap{grid-template-columns:1fr}}

/* images fade in (only images; text is never hidden) */
html.js .rv{opacity:0;transition:opacity .8s ease-out}
html.js .rv.in{opacity:1}
.rv img{transform:scale(1.03);transition:transform .8s ease-out}
.rv.in img{transform:scale(1)}
.ln{display:block}

/* placeholder review mode: add ?ph to the URL */
body.show-ph [data-ph]{outline:2px dashed #d33;outline-offset:-2px;position:relative}
body.show-ph [data-ph]::before{content:"PLACEHOLDER · " attr(data-ph);position:absolute;z-index:50;left:4px;top:4px;max-width:calc(100% - 8px);background:#d33;color:#fff;font:600 9px/1.3 var(--sans);padding:2px 5px}
.ph-box{display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;width:100%;height:100%;min-height:120px;
  background:repeating-linear-gradient(135deg,#ece6da 0 14px,#e4dccd 14px 28px);color:#7a7263;font:500 13px/1.5 var(--sans)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transition:none}.rv img{transform:none;transition:none}.ln{animation:none}
}
/* short paragraphs: balance so the last line is never one or two stray words */
.note,.faq details p,.two .body p,.tier .desc,.hl p,.card p,.facts dd{text-wrap:balance}

/* shared by every detail page and Shops (moved from pages.css 10-28): hero carousel + module 5 "what we need / how it works" */
/* Holiday hero carousel (Li 10-27): storybook, postcard, video. Slides share one grid cell, so the height never jumps. */
.hcar>*,.hc-copy>*{min-width:0}   /* a sideways-scrolling tab row must not widen the column */
.hc-slides{display:grid}
.hc-s{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.hc-s.on{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s}
.hc-s .h1{font-size:var(--t-poster);max-width:9em}
.hc-tabs{display:flex;gap:28px;margin-top:56px;border-top:1px solid var(--line)}
.hc-t{all:unset;cursor:pointer;position:relative;padding:14px 0 0;opacity:.5;transition:opacity .25s}
.hc-t:hover,.hc-t.on{opacity:1}
.hc-t:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
.hc-t b{display:block;font-weight:500;font-size:15px}
.hc-t small{display:block;margin-top:2px;font-size:13px;color:var(--ac)}
.hc-t i{position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--ac)}
.hc-t.on i{animation:hc-fill var(--hc-ms,5000ms) linear forwards}
.hcar.paused .hc-t.on i{animation-play-state:paused}
@keyframes hc-fill{to{width:100%}}
.hc-pics{position:relative}
.hc-p{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hc-p.on{opacity:1}
.hc-p>*{width:100%;height:100%}
.hc-p img{object-fit:cover;display:block}
@media (max-width:860px){.hc-copy{display:flex;flex-direction:column}.hc-tabs{order:-1;margin:0 0 28px;gap:24px;overflow-x:auto;scrollbar-width:none}.hc-t{flex:none;white-space:nowrap}}   /* phone: the three choices sit right under the picture, on the first screen */
@media (prefers-reduced-motion:reduce){.hc-s,.hc-p{transition:none}.hc-t.on i{animation:none;width:100%}}
/* Holiday module 5 (Li 10-28: say exactly what the customer sends and how the back-and-forth goes) */
.howto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);margin:8px 0 clamp(48px,6vw,80px)}
.howto h3{font-size:var(--t-sub);margin-bottom:16px}
.howto ul,.howto ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.howto li{padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--t-body);line-height:1.5;color:var(--txt2,var(--mut))}
.howto li b{font-weight:500;color:var(--ink)}
.ht-steps ol{counter-reset:st}
.ht-steps li{counter-increment:st;position:relative;padding-left:2.2em}
.ht-steps li::before{content:counter(st);position:absolute;left:0;top:14px;color:var(--ac);font-variant-numeric:tabular-nums}
.ht-steps li b{display:block}
@media (max-width:860px){.howto{grid-template-columns:1fr}}

/* four steps in a row: home page and the detail pages' module 5 (phone: 2 x 2). Colors from tokens so the Christmas skin works */
.hsteps{list-style:none;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;margin-top:40px}
.hsteps li{counter-increment:s;border-top:1px solid var(--ink);padding-top:16px;line-height:1.5}
.hsteps li::before{content:'Step ' counter(s);display:block;font:500 14px/1 var(--sans);color:var(--mut);margin-bottom:12px}
.hsteps b{display:block;font:400 var(--t-sub)/1.15 var(--head);text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.hsteps span{color:var(--txt2,#4a4740);font-size:var(--t-body)}
@media (max-width:760px){.hsteps{grid-template-columns:1fr 1fr}.hsteps span{font-size:14px}}
/* module 5, short form (Li 10-28): what you send in one line, four steps, everything else folded */
.ht-send{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.ht-send small{font-size:var(--t-small);color:var(--mut);margin-right:8px}
.ht-send span{border:1px solid var(--line);padding:8px 14px;font-size:var(--t-small);color:var(--ink)}
.ht-more{margin-top:48px;border-top:1px solid var(--line)}
.ht-more>summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;font:500 var(--t-body)/1.3 var(--sans);color:var(--ink)}
.ht-more>summary::-webkit-details-marker{display:none}
.ht-more>summary::after{content:"+";color:var(--mut);transition:transform .3s}
.ht-more[open]>summary::after{transform:rotate(45deg)}
.ht-more .howto{margin-top:16px}
span.nw.nw.nw{all:unset;white-space:nowrap}   /* 11-13: "15-second", "8-page" never break at the hyphen (copy_layer_typo.py); all:unset + the repeated class beat rules like ".tags span" so it never looks like a chip */
.was{margin-left:.35em;font-size:.6em;font-weight:400;color:var(--mut);text-decoration:line-through;text-decoration-thickness:1px}.was-note{font-size:var(--t-small);color:var(--mut);margin-top:8px}   /* 11-13 Li: Trial $19 first order, regular $29 */