/* ORU — design system.
   Ink, bone, one crimson facet. High-contrast didone display against a quiet
   grotesque. Space is the luxury; nothing shouts. */

:root{
  --ink:#101010;
  --ink-soft:#2A2724;
  --smoke:#6B665D;
  --bone:#EDEAE3;
  --paper:#F7F5F0;
  --line:#D8D3C8;
  --line-dark:#332F2A;
  --crimson:#A8232A;
  --measure:62ch;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;
  font-weight:350;
  line-height:1.7;
  letter-spacing:.005em;
  padding-bottom:66px;
}
@media (min-width:800px){body{font-size:17px;padding-bottom:0}}

img,svg{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--crimson);outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:120;background:var(--ink);color:var(--paper);padding:12px 18px}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 22px}
@media (min-width:900px){.wrap{padding:0 48px}}
.narrow{max-width:760px}

/* ───── type ───── */
h1,h2,h3,.display{
  font-family:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  font-weight:400;
  font-optical-sizing:auto;
  letter-spacing:-.015em;
  line-height:1.02;
  margin:0 0 .45em;
}
h1{font-size:clamp(3rem,11vw,7.5rem)}
h2{font-size:clamp(2.1rem,5.6vw,4rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.15}
p{margin:0 0 1.15em;max-width:var(--measure)}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.65;color:var(--ink-soft);font-weight:300}
.tag,.eyebrow{
  font-family:"Archivo",sans-serif;
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--smoke);
  margin:0 0 1.6rem;
}
.quiet{color:var(--smoke);font-size:.92rem}
.serif-note{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.35;font-style:italic;font-weight:400;max-width:24ch}

/* ───── header ───── */
.site-head{
  display:flex;align-items:center;gap:22px;
  padding:26px 0 22px;
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bone) 88%,transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.site-head.scrolled{border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:.9rem;letter-spacing:.42em;font-weight:400}
.brand svg{width:32px}
.site-nav{margin-left:auto;display:flex;gap:26px;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase}
.site-nav a{text-decoration:none;position:relative;padding-bottom:3px;color:var(--ink-soft)}
.site-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.site-nav a:hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
@media (max-width:640px){.site-nav{gap:16px;font-size:.72rem}.site-nav .hide-xs{display:none}}

/* ───── buttons ───── */
.btn{
  display:inline-block;position:relative;overflow:hidden;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);
  padding:17px 38px;
  font:inherit;font-size:.82rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;border-radius:0;
  transition:background .5s var(--ease),color .5s var(--ease);
}
.btn:hover{background:transparent;color:var(--ink)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-quiet:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:transparent;color:var(--paper)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.link-under{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .4s var(--ease)}
.link-under:hover{border-color:var(--ink)}

/* ───── reveal ───── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ───── hero ───── */
.hero{padding:6vh 0 12vh}
@media (min-width:900px){.hero{padding:10vh 0 16vh}}
.hero-grid{display:grid;gap:48px;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.08fr .92fr;gap:80px}}
.hero h1{margin-bottom:.3em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-mark{position:relative;padding:10% 8%}
.hero-mark svg{display:block;width:100%;max-width:420px;margin:0 auto}
.hero-rule{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:28px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
@media (prefers-reduced-motion:no-preference){
  .hero-mark svg polygon{animation:unfold 1.5s var(--ease) both}
  .hero-mark svg polygon:nth-child(3){animation-delay:.14s}
  .hero-mark svg polygon:nth-child(4){animation-delay:.28s}
  .hero-mark svg polygon:nth-child(5){animation-delay:.42s}
  @keyframes unfold{from{opacity:0;transform:translateY(14px) rotate(-2deg);transform-origin:52% 40%}to{opacity:1;transform:none}}
}

/* ───── sections ───── */
section{padding:14vh 0}
@media (max-width:700px){section{padding:10vh 0}}
.section-head{margin-bottom:6vh;max-width:900px}
.section-head .lede{margin-top:1.2rem}
hr.rule{border:0;height:1px;background:var(--line);margin:0}

/* editorial statement band */
.band{background:var(--ink);color:var(--paper)}
.band h2,.band h3{color:var(--paper)}
.band .lede,.band p{color:#C9C4B9}
.band .tag,.band .eyebrow{color:#8A847A}
.band .link-under{border-color:var(--line-dark)}
.band .link-under:hover{border-color:var(--paper)}
.band .spec th,.band .spec td{border-color:var(--line-dark)}
.band .spec th{color:#8A847A}

/* ───── product grid ───── */
.grid{display:grid;gap:2px}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.grid{grid-template-columns:repeat(4,1fr)}}
.grid.two{grid-template-columns:1fr}
@media (min-width:760px){.grid.two{grid-template-columns:1fr 1fr;gap:2px}}

.card{display:block;text-decoration:none;background:var(--paper);position:relative;overflow:hidden}
.card figure{margin:0;overflow:hidden;background:#fff;aspect-ratio:4/5}
.card figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease),filter 1.4s var(--ease)}
.card:hover figure img{transform:scale(1.045)}
.card-body{padding:26px 26px 34px;display:flex;flex-direction:column;gap:6px}
.card h3{margin:0;font-size:1.35rem}
.card .meta{margin:0;font-size:.85rem;color:var(--smoke);letter-spacing:.02em}
.card .price{margin:10px 0 0;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase}
.card .edition{position:absolute;top:18px;left:18px;background:var(--paper);padding:7px 12px;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}

/* ───── editorial pairs ───── */
.split{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:90px}.split.wide-left{grid-template-columns:1.2fr .8fr}}
.split figure{margin:0;background:#fff;overflow:hidden}
.split figure img{display:block;width:100%}

/* numbered craft steps */
.steps{counter-reset:s;display:grid;gap:2px;margin-top:2vh}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--paper);padding:38px 32px 44px}
.band .step{background:#191715}
.step h3{margin:0 0 12px;font-size:1.2rem}
.step h3::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  display:block;font-family:"Archivo",sans-serif;font-size:.68rem;
  letter-spacing:.28em;color:var(--crimson);margin-bottom:16px;
}
.step p{margin:0;font-size:.94rem;color:var(--smoke)}
.band .step p{color:#9A948A}

/* ───── faq ───── */
.faq{max-width:840px}
.faq details{border-top:1px solid var(--line);padding:26px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;font-family:"Bodoni Moda",Georgia,serif;font-size:1.25rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--smoke);font-family:"Archivo",sans-serif;font-size:1rem;flex:none}
.faq details[open] summary::after{content:"—"}
.faq p{margin:18px 0 0;color:var(--ink-soft);font-size:.98rem}

/* ───── product page ───── */
.crumbs{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);padding:28px 0 0}
.crumbs a{text-decoration:none;color:var(--smoke)}
.crumbs a:hover{color:var(--ink)}
.pdp{display:grid;gap:40px;padding:5vh 0 12vh}
@media (min-width:960px){.pdp{grid-template-columns:1.15fr .85fr;gap:80px;align-items:start}}
.pdp-figure{display:grid;gap:2px}
.pdp-figure img{display:block;width:100%;background:#fff}
@media (min-width:960px){.pdp-col{position:sticky;top:110px}}
.pdp h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:.15em}
.pdp .price{font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2.2rem}

.sizes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0;border:0}
.sizes legend{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);padding:0;margin-bottom:14px}
.size{position:relative}
.size input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.size span{display:block;min-width:58px;text-align:center;padding:13px 10px;border:1px solid var(--line);background:transparent;font-size:.85rem;letter-spacing:.1em;transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.size input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.size input:hover+span{border-color:var(--ink)}
.size input:focus-visible+span{outline:1.5px solid var(--crimson);outline-offset:3px}
.err{color:var(--crimson);font-size:.86rem;margin:14px 0 0;min-height:1.3em}

.spec{width:100%;border-collapse:collapse;margin-top:6px;font-size:.92rem}
.spec th,.spec td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-weight:400;width:38%;color:var(--smoke);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding-right:20px}

.assurances{display:grid;gap:2px;margin-top:2vh}
@media (min-width:760px){.assurances{grid-template-columns:repeat(3,1fr)}}
.assurance{background:var(--paper);padding:34px 30px}
.assurance h3{font-size:1.1rem;margin:0 0 10px}
.assurance p{margin:0;font-size:.92rem;color:var(--smoke)}

.note{background:var(--paper);padding:30px 32px}
.note p{margin:0;color:var(--ink-soft)}
.band .note{background:#191715}

/* ───── forms ───── */
label.field{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);margin:0 0 10px}
input[type=email],input[type=text],textarea{
  width:100%;max-width:440px;font:inherit;font-size:1rem;
  padding:15px 0;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--ink);border-radius:0;
}
.band input[type=email]{color:var(--paper);border-bottom-color:var(--line-dark)}
input:focus{outline:0;border-bottom-color:var(--crimson)}
.consent{display:flex;gap:12px;align-items:flex-start;max-width:440px;margin:22px 0 26px;font-size:.84rem;color:var(--smoke);line-height:1.55}
.consent input{margin-top:4px;width:17px;height:17px;flex:none;accent-color:var(--crimson)}

/* ───── footer ───── */
.site-foot{background:var(--ink);color:#9A948A;padding:12vh 0 40px;font-size:.88rem}
.site-foot .mark-lg{width:54px;margin-bottom:40px}
.foot-cols{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.site-foot h2{font-family:"Archivo",sans-serif;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:#6B665D;margin:0 0 18px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:11px}
.site-foot a{text-decoration:none;color:#C9C4B9;transition:color .4s var(--ease)}
.site-foot a:hover{color:var(--paper)}
.legal-line{margin-top:60px;padding-top:26px;border-top:1px solid var(--line-dark);font-size:.76rem;letter-spacing:.06em;color:#6B665D;max-width:none}

/* ───── sticky mobile cta ───── */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;gap:14px;align-items:center;
  padding:11px 16px;background:var(--paper);border-top:1px solid var(--line);
}
.sticky-cta .btn{flex:1;text-align:center;padding:14px 12px;font-size:.72rem}
.sticky-cta span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
@media (min-width:800px){.sticky-cta{display:none}}

/* ───── cookie ───── */
.cookie{
  position:fixed;left:14px;right:14px;bottom:82px;z-index:90;
  background:var(--ink);color:#C9C4B9;padding:26px;font-size:.86rem;
}
@media (min-width:800px){.cookie{left:auto;right:28px;bottom:28px;max-width:400px}}
.cookie p{margin:0 0 20px;max-width:none}
.cookie a{color:var(--paper)}
.cookie-row{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:12px 20px;font-size:.7rem}
.cookie .btn-no{background:transparent;color:#C9C4B9;border-color:var(--line-dark)}
.cookie .btn-no:hover{background:transparent;border-color:var(--paper);color:var(--paper)}

[hidden]{display:none !important}

/* ───── bag ───── */
.bag-list{list-style:none;margin:0 0 8px;padding:0}
.bag-row{
  display:grid;gap:10px 18px;align-items:center;
  grid-template-columns:1fr auto;
  padding:24px 0;border-bottom:1px solid var(--line);
}
@media (min-width:720px){
  .bag-row{grid-template-columns:1fr auto auto auto;gap:28px}
}
.bag-item{display:flex;flex-direction:column;gap:4px;min-width:0}
.bag-name{font-family:"Bodoni Moda",Georgia,serif;font-size:1.25rem;line-height:1.2}
.bag-size{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);justify-self:start}
.qty-btn{
  appearance:none;background:transparent;border:0;cursor:pointer;
  font:inherit;font-size:1rem;line-height:1;color:var(--ink);
  padding:11px 15px;transition:background .3s var(--ease),color .3s var(--ease);
}
.qty-btn:hover{background:var(--ink);color:var(--paper)}
.qty-n{min-width:2.2rem;text-align:center;font-size:.95rem;font-variant-numeric:tabular-nums}
.bag-price{font-size:.95rem;font-variant-numeric:tabular-nums;justify-self:end}
.bag-remove{
  appearance:none;background:transparent;border:0;cursor:pointer;padding:0;
  font:inherit;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--smoke);border-bottom:1px solid transparent;justify-self:end;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.bag-remove:hover{color:var(--crimson);border-bottom-color:var(--crimson)}
.bag-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:26px 0 34px;padding-top:4px;max-width:none;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
}
.bag-total span:last-child{font-size:1.35rem;letter-spacing:0;font-variant-numeric:tabular-nums;text-transform:none}