/* Layout: a broadsheet printed on blood red. Beige is the ink: hairline rules, full-width beige banner blocks with oversize red type, sharp-cornered photographs, one orange stamp accent. */
:root{
  color-scheme:dark;
  --blood:#720808;
  --blood-deep:#560506;
  --ink:#efd9b9;
  --ink-soft:rgba(239,217,185,.74);
  --rule:rgba(239,217,185,.42);
  --ember:#e34726;
  --display:"New York",ui-serif,"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Inconsolata","Courier Prime",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,3vw,43px);
  --wide:1440px;
  --gap:clamp(43px,7vw,115px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blood);color:var(--ink);font-family:var(--body);font-weight:400;font-size:16px;line-height:1.5;overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:.9;letter-spacing:-.035em}
h1 em,h2 em,h3 em{font-style:normal;color:inherit}
.fit{white-space:nowrap;text-wrap:nowrap;display:block;max-width:100%}
p{margin:0}
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mark{height:30px;width:auto;aspect-ratio:1396/1240;flex:none;overflow:visible;display:block;fill:none;stroke:currentColor;stroke-width:42;stroke-linecap:round;stroke-linejoin:round}
.mark circle{fill:currentColor;stroke:none}

/* header bar */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--blood);border-bottom:1px solid var(--ink)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:10px}
.nav .where{font-size:14px;color:var(--ink-soft)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav nav{display:flex;gap:clamp(12px,2vw,28px);justify-content:flex-end;align-items:center}
.nav nav a{white-space:nowrap;font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(max-width:820px){.nav nav a:not(.go){display:none}}
#box .head h2.box-title{font-family:var(--display);font-weight:500;font-size:clamp(68px,12.5vw,210px);line-height:.84;letter-spacing:-.045em;margin:0;text-wrap:initial}
.box-title span{color:#e34726}
#box .head{grid-template-columns:1fr;align-items:start}
#box .head p{max-width:52ch;font-size:17px}

.btn{display:inline-flex;align-items:center;font-family:var(--body);font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--blood);padding:13px 22px;border-radius:3px;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--blood)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}

/* hero: the slideshow is the banner, text sits on it */
.hero{position:relative;height:min(88vh,60vw);min-height:560px;overflow:hidden;border-bottom:1px solid var(--ink);background:var(--blood-deep)}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;opacity:0;transition:opacity 1.2s ease}
.slides img.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(70,4,5,.95) 0,rgba(70,4,5,.72) 30%,rgba(70,4,5,0) 68%);pointer-events:none}
.now{position:absolute;z-index:2;top:16px;left:var(--gutter);background:var(--ink);color:var(--blood);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:3px}
.hero-text{position:absolute;z-index:2;left:0;right:0;bottom:clamp(20px,3.4vw,48px)}
.hero-text .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(14px,1.6vw,22px) clamp(18px,4vw,58px);align-items:end}
.hero h1{font-size:clamp(28px,4.4vw,76px);line-height:.98;letter-spacing:-.025em;max-width:26ch;grid-column:1/-1}
.hero-side{display:flex;flex-direction:column;gap:20px;min-width:0}
.hero-side p{max-width:40ch}
@media(max-width:860px){.hero-text .wrap{grid-template-columns:1fr}.hero{height:86vh}}

/* display banner block */
.banner{background:var(--ink);color:var(--blood);overflow:hidden;text-align:center;border-bottom:1px solid var(--ink)}
.banner span{display:block;font-family:var(--display);font-size:8.8vw;line-height:.9;letter-spacing:-.05em;text-transform:uppercase;white-space:nowrap;padding-block:.09em .05em;font-weight:700}

section{padding-block:var(--gap)}
.head{display:grid;grid-template-columns:1.6fr 1fr;gap:16px clamp(18px,4vw,58px);align-items:end;margin-bottom:clamp(28px,4vw,58px);padding-bottom:22px;border-bottom:1px solid var(--rule)}
.head h2{font-size:clamp(44px,8vw,122px);line-height:.82}
.head p{color:var(--ink-soft);max-width:44ch}
@media(max-width:860px){.head{grid-template-columns:1fr}}

/* brand palette themes: each section takes one swatch from the logo sheet */
.t-maroon{--blood:#720808;--blood-deep:#5c0506;--ink:#eed9b9;--ink-soft:rgba(238,217,185,.76);--rule:rgba(238,217,185,.34);--acc:#eed9b9}
.t-beige{--blood:#eed9b9;--blood-deep:#e4cba5;--ink:#720808;--ink-soft:rgba(114,8,8,.78);--rule:rgba(114,8,8,.3);--acc:#e34726}
.t-orange{--blood:#e34726;--blood-deep:#cf3c1d;--ink:#720808;--ink-soft:rgba(114,8,8,.85);--rule:rgba(114,8,8,.35);--acc:#720808}
.t-black{--blood:#021410;--blood-deep:#0a221c;--ink:#eed9b9;--ink-soft:rgba(238,217,185,.72);--rule:rgba(238,217,185,.26);--acc:#e34726}
.t-grey{--blood:#838485;--blood-deep:#77787a;--ink:#eed9b9;--ink-soft:#eed9b9;--rule:rgba(238,217,185,.45);--acc:#eed9b9}
.t-grey .bio .copy p{text-shadow:0 1px 1px rgba(2,20,16,.18)}
.t-silver{--blood:#b3b2b6;--blood-deep:#a5a4a8;--ink:#021410;--ink-soft:rgba(2,20,16,.8);--rule:rgba(2,20,16,.28);--acc:#720808}
[class*="t-"]{background:var(--blood);color:var(--ink)}
[class*="t-"] .count-big span{color:var(--acc)}
.t-grey h2,.t-grey .bio .copy p:first-child::first-letter{color:var(--acc)}
.t-black .banner-txt,.banner.t-black{color:var(--acc)}
.banner.t-orange,.banner.t-black{background:var(--blood);color:var(--acc);border-bottom:0}
.t-black .label,.t-orange .label{color:var(--acc)}
.t-beige .btn,.t-silver .btn{letter-spacing:.1em}
.t-black .badge{color:#eed9b9}

/* side tabs: slide in from the left while their section is on screen */
.side-tab{position:fixed;left:0;top:calc(env(safe-area-inset-top,0px) + 50vh);z-index:15;transform:translate(-105%,-50%);transition:transform .6s cubic-bezier(.2,.8,.2,1);
  background:var(--tb);color:var(--tf);font-family:var(--body);font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:14px 22px 14px 18px;border-radius:0 28px 28px 0;box-shadow:0 6px 24px rgba(2,20,16,.28);pointer-events:none;white-space:nowrap}
.side-tab:not(.on){transition-duration:.25s}
.side-tab.on{transform:translate(0,-50%)}
@media(max-width:700px){.side-tab{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-105%);font-size:11px;padding:10px 16px 10px 12px}.side-tab.on{transform:none}}

/* headings removed: let the remaining blocks take the full row */

/* blurred hearts behind the gift finder */
#finder{position:relative;overflow:hidden}
#finder>.wrap{position:relative;z-index:1}
.hearts{position:absolute;inset:0;pointer-events:none;z-index:0}
.heart{position:absolute;transform:rotate(var(--r));animation:drift ease-in-out infinite alternate}
@media(max-width:700px){.heart:nth-child(10){display:none}}
@keyframes drift{from{transform:translateY(0) rotate(var(--r))}to{transform:translateY(-22px) rotate(calc(var(--r) + 6deg))}}

/* gift finder card in beige */
.result .frame{width:100%;margin-inline:0;border-radius:6px}
#quiz.card{--blood:#eed9b9;--blood-deep:#eed9b9;--ink:#720808;--ink-soft:rgba(114,8,8,.8);--rule:rgba(114,8,8,.28);background:#eed9b9;color:#720808;border-color:rgba(114,8,8,.35);box-shadow:0 18px 50px rgba(2,20,16,.18)}

.ticker{background:#021410;color:#eed9b9;overflow:hidden;white-space:nowrap;font-size:13px;letter-spacing:.06em;padding-block:9px;border-bottom:1px solid rgba(238,217,185,.18)}
.ticker .track{display:inline-flex;align-items:center;gap:40px;padding-left:40px;animation:tick 38s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker .sep{color:#e34726}
.ticker .off{background:#e34726;color:#eed9b9;padding:2px 9px;border-radius:3px;font-weight:500}
@keyframes tick{to{transform:translateX(-50%)}}

/* wooden box section */
.box-end{display:flex;justify-content:center;margin-top:clamp(28px,4vw,52px)}
.box-left{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,32px);min-width:0}
.box-left .box-main{max-height:none}
.box-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}

.box-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(12px,2vw,28px)}
.box-grid>*{min-width:0}
.box-grid img{width:100%;height:100%;object-fit:cover;display:block}
.box-main{aspect-ratio:3/4;max-height:88vh}
.box-side{display:grid;grid-template-rows:1fr 1fr;gap:clamp(12px,2vw,28px);min-height:0}
.box-side img{min-height:0}
.box-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:28px;padding-top:22px;border-top:1px solid var(--rule)}
.count-big{display:flex;align-items:baseline;gap:12px}
.count-big span{font-family:var(--display);font-size:clamp(64px,9vw,140px);line-height:.8;letter-spacing:-.05em}
.count-big small{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.box-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14px}
.box-facts li::before{content:"— "}
@media(max-width:760px){.box-grid{grid-template-columns:1fr}.box-main{aspect-ratio:4/5}.box-side{grid-template-rows:none;grid-template-columns:1fr 1fr}.box-side img{aspect-ratio:3/4}}

/* stage */
.frame{position:relative;aspect-ratio:3/2;max-width:100%;margin-inline:auto;background:var(--blood-deep);overflow:hidden}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.frame img.on{opacity:1}
.stage{position:relative}
.stage .frame{cursor:zoom-in}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:50px;border-radius:3px;border:1px solid var(--blood);background:var(--ink);color:var(--blood);font-size:22px;cursor:pointer;display:grid;place-items:center}
.arrow:hover{background:var(--blood);color:var(--ink);border-color:var(--ink)}
.arrow.prev{left:12px}.arrow.next{right:12px}
.info{display:grid;grid-template-columns:1fr auto;gap:18px 40px;align-items:end;margin-top:22px}
.info h3{font-size:clamp(40px,6.4vw,96px);line-height:.86;margin-block:10px 14px}
.info p{color:var(--ink-soft);max-width:54ch}
.info-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.count{font-size:18px;font-variant-numeric:tabular-nums}
@media(max-width:760px){.info{grid-template-columns:1fr}.arrow{width:42px;height:42px}}
.views{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.views button{padding:0;width:76px;height:76px;border:1px solid var(--rule);border-radius:0;background:none;cursor:pointer;overflow:hidden;opacity:.6}
.views button img{width:100%;height:100%;object-fit:cover;display:block}
.views button:hover,.views button[aria-current="true"]{opacity:1}
.views button[aria-current="true"]{border-color:var(--ink);outline:1px solid var(--ink)}

/* print index: project grid cards */
.index-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:var(--gap);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.index-head h3{font-size:clamp(30px,4vw,56px)}
.thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,58px) clamp(16px,3vw,43px);margin-top:28px}
.thumbs button{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-width:0}
.thumbs .pic{display:block;aspect-ratio:3/2;overflow:hidden;width:100%}
.thumbs .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.thumbs button:hover .pic img{transform:scale(1.03)}
.thumbs .t{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.05;margin-top:4px}
.badge{flex:none;white-space:nowrap;font-family:var(--body);font-size:12px;letter-spacing:.06em;background:var(--ember);color:var(--ink);padding:2px 6px;border-radius:3px}
.thumbs .d{color:var(--ink-soft);max-width:48ch}
.thumbs .by{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.thumbs button[aria-current="true"] .t{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media(max-width:700px){.thumbs{grid-template-columns:1fr}}

/* quiz */
.quiz-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,65px);align-items:start}
.quiz-grid>*{min-width:0}
@media(max-width:900px){.quiz-grid{grid-template-columns:1fr}}
.quiz-note{display:flex;flex-direction:column;gap:14px}
.quiz-note h3{font-size:clamp(34px,4.6vw,65px);line-height:.91}
.quiz-note p{color:var(--ink-soft);max-width:44ch}
.card{border:1px solid var(--ink);border-radius:11.5px;padding:clamp(20px,3vw,36px);background:var(--blood-deep);min-height:420px;display:flex;flex-direction:column;gap:22px}
.dots{display:flex;gap:7px}
.dots i{height:2px;flex:1;background:var(--rule)}
.dots i.done{background:var(--ink)}
.card h3{font-size:clamp(30px,3.6vw,50px);line-height:.95}
.opts{display:grid;gap:10px}
.opts button{font-family:var(--body);font-size:16px;text-align:left;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:3px;padding:15px 18px;cursor:pointer;transition:background .15s,color .15s}
.opts button:hover{background:var(--ink);color:var(--blood)}
.back{align-self:flex-start;margin-top:auto;background:none;border:0;color:var(--ink);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 0}
.result{display:flex;flex-direction:column;gap:18px;animation:rise .5s ease}
.result h3{font-size:clamp(40px,5vw,72px);line-height:.86}
.result p{color:var(--ink-soft)}
.also button{background:none;border:0;color:var(--ink);font:inherit;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
@keyframes rise{from{transform:translateY(12px);opacity:.3}to{transform:none;opacity:1}}

/* story */
.bio{display:grid;grid-template-columns:1fr;gap:clamp(24px,5vw,65px);align-items:start}
.bio>*{min-width:0}
.bio .copy{display:flex;flex-direction:column;gap:20px}
.bio .copy p{max-width:62ch;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.bio .copy p:first-child::first-letter{font-family:var(--display);font-size:86px;line-height:.75;float:left;padding:8px 10px 0 0;color:var(--ink)}
.cloth{display:flex;flex-direction:column;gap:18px}
.cloth .label{color:var(--acc)}
.cloth p{max-width:52ch;color:var(--ink-soft)}
.cloth .cloth-lead{font-family:var(--display);font-size:clamp(28px,3.2vw,46px);line-height:1.05;letter-spacing:-.02em;color:var(--acc);max-width:20ch}
.cloth-facts{margin:8px 0 0;display:grid;gap:0}
.cloth-facts div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding-block:14px;border-top:1px solid var(--rule)}
.cloth-facts dt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding-top:3px}
.cloth-facts dd{margin:0;color:var(--ink-soft)}
.bio .copy p.for-all{margin-top:8px;font-family:var(--display);font-size:clamp(32px,4.6vw,72px);line-height:1.05;letter-spacing:-.02em;color:var(--acc);max-width:22ch;text-wrap:balance}
@media(max-width:860px){.bio{grid-template-columns:1fr!important}}
.bio h2{font-size:clamp(40px,6vw,92px);line-height:.86}
@media(max-width:860px){.bio{grid-template-columns:1fr}}
.stamp{width:220px;max-width:100%;padding:22px 18px 16px;background:var(--blood-deep);color:var(--ink);border-radius:11.5px;outline:2px dashed var(--ink);outline-offset:-7px;transform:rotate(-4deg);display:flex;flex-direction:column;gap:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.stamp .mark{height:80px;width:90px;color:var(--ember);align-self:center}
.stamp div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--rule);padding-top:6px}
.look{columns:3;column-gap:clamp(14px,2.4vw,36px);margin-top:var(--gap);padding-top:28px;border-top:1px solid var(--ink)}
.look button{display:block;width:100%;padding:0;margin:0 0 clamp(18px,2.6vw,36px);border:0;background:none;color:var(--ink);cursor:zoom-in;break-inside:avoid;font-family:var(--display);font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em;text-align:left}
.look img{display:block;width:100%;height:auto;margin-bottom:10px}
.look button:hover img{opacity:.9}
@media(max-width:820px){.look{columns:2}}

/* order: inverted block */
#order .wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(16px,2vw,24px) clamp(24px,5vw,65px);align-items:end}
#order .wrap>*{min-width:0}
#order h2{font-size:clamp(56px,12vw,202px);line-height:.78;letter-spacing:-.05em}
#order .side{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.steps{list-style:none;padding:0;margin:0;counter-reset:s;width:100%}
.steps li{counter-increment:s;border-top:1px solid var(--rule);padding-block:8px}
.steps li::before{content:counter(s) ". "}
.wa-num{font-size:22px;user-select:all}
@media(max-width:860px){#order .wrap{grid-template-columns:1fr}}
footer{padding-block:22px;font-size:14px;color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.ig{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid #eed9b9;border-radius:28px;color:#eed9b9;text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;transition:background .2s,color .2s}
.ig:hover{background:#eed9b9;color:#021410}
.ig svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.ig .dot{fill:currentColor;stroke:none}
.sign{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,56px)}
.founders{display:flex;flex-direction:column;gap:10px}
.founders .label{color:var(--ink)}
.bio .copy .founders p.names{margin:0;font-family:var(--display);font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);max-width:none}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(50,3,4,.97);display:grid;place-items:center;padding:16px;cursor:zoom-out}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;background:var(--ink);color:var(--blood);border:0;width:44px;height:44px;border-radius:3px;font-size:20px;cursor:pointer}
body.locked{overflow:hidden;height:100%}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}
@media(max-width:600px){body.admin-bar .nav{top:0}}