/* One Room Co. shared styles. Quiet editorial storefront. Neutral chrome, photos carry the color, uppercase tracked labels and text-link calls to action */
:root{
  --bg:#FFFFFF; --soft:#F5F3EF; --line:#DEDAD2;
  --ink:#1A1A18; --muted:#6E6A62;
  --promo-bg:#DCE2D3; --promo-ink:#1A1A18;
  --serif:"Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:96px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.65;margin:0}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
.label{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.muted{color:var(--muted)}
.tlink{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.tlink:hover{opacity:.7}
.btn{display:block;width:100%;text-align:center;font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;background:var(--bg);color:var(--ink);border:1px solid var(--ink);padding:18px 24px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--soft)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#33322e}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn-row .btn{width:auto;flex:1 1 200px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* promo bar and header */
.promo{background:var(--promo-bg);color:var(--promo-ink);text-align:center;padding:10px 16px}
.promo a{color:inherit}
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10}
header .wrap{display:grid;grid-template-columns:1fr auto 1fr;column-gap:28px;align-items:center;padding-block:18px}
.nav{display:flex;gap:24px;white-space:nowrap}
.nav a{text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:currentColor}
.mark{font-family:var(--serif);font-size:26px;letter-spacing:.14em;text-transform:uppercase;text-align:center;white-space:nowrap;text-decoration:none}
header .right{justify-self:end}
.menu-btn{display:none;background:none;border:0;padding:6px 0;cursor:pointer;color:var(--ink)}
.menu-panel{border-top:1px solid var(--line);background:var(--bg)}
.menu-panel a{display:block;padding:16px 24px;border-bottom:1px solid var(--line);text-decoration:none}
.menu-panel a[aria-current=page]{background:var(--soft)}

/* photo modules */
.slot{position:relative;display:block;overflow:hidden;background-size:cover;background-position:center;background-color:var(--soft);color:#fff}
.slot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0) 55%);pointer-events:none}
.slot.plain::after{display:none}
.slot .over{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:32px;display:flex;flex-direction:column;gap:14px}
.slot .over .links{display:flex;flex-wrap:wrap;gap:22px}
.r-1{aspect-ratio:1/1}.r-3x4{aspect-ratio:3/4}.r-4x3{aspect-ratio:4/3}
.hero{width:100%;height:min(56.25vw,80vh);min-height:420px}
.hero::after{background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.18) 60%,rgba(0,0,0,.05)),linear-gradient(to right,rgba(0,0,0,.25),rgba(0,0,0,0) 55%)}
.hero h1{font-size:clamp(34px,5vw,64px);color:#fff;max-width:14ch}
.teaser{aspect-ratio:16/6}
.teaser::after{background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.2) 70%),linear-gradient(to right,rgba(0,0,0,.3),rgba(0,0,0,0) 60%)}
.teaser h2{font-size:clamp(28px,3vw,40px);color:#fff}

section{padding-block:96px}
.tight{padding-top:0}
.center{text-align:center;max-width:640px;margin:0 auto}
.center h2{font-size:clamp(32px,4vw,48px);margin-top:14px}
.center p{margin-top:16px;color:var(--muted)}
.center .btn{display:inline-block;width:auto;min-width:260px;margin-top:28px}

/* page heading for inner pages */
.page-head{padding-block:64px 40px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(40px,5.5vw,68px);margin-top:12px}
.page-head .sub{color:var(--muted);margin-top:16px;max-width:58ch;font-size:16px}
.crumb{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted)}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline;text-underline-offset:4px}

/* home steps and why */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px;border-top:1px solid var(--line);padding-top:40px}
.steps h3{font-size:26px;margin-top:10px}
.steps p{color:var(--muted);margin-top:8px}
.more{text-align:center;margin-top:48px}
.why{background:var(--soft)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px}
.why-grid h3{font-size:24px}
.why-grid p{color:var(--muted);margin-top:8px}

/* feature row (home and dark academia) */
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.feature h2{font-size:clamp(34px,3.8vw,50px);margin-top:10px}
.feature .price{font-size:18px;font-weight:400;margin-top:12px}
.feature .desc{color:var(--muted);margin-top:18px;max-width:46ch}
.price .rv{color:var(--muted);font-size:14px;margin-left:10px}

/* shop */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 32px;margin-top:56px}
.box-card .slot{aspect-ratio:4/5}
.box-card .meta{margin-top:20px}
.box-card h2{font-size:clamp(30px,3vw,40px);margin-top:8px}
.box-card .price{font-size:17px;font-weight:400;margin-top:8px}
.box-card .desc{color:var(--muted);margin-top:12px;max-width:46ch}
.box-card .btn-row{margin-top:22px}
.badge{display:inline-block;border:1px solid var(--ink);padding:4px 10px}
.note-line{color:var(--muted);text-align:center;margin-top:56px;font-size:14px}

/* product */
.prod{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.gallery .wide{grid-column:1/-1}
.info{position:sticky;top:110px}
.info h1{font-size:clamp(36px,3.8vw,50px);margin-top:10px}
.info .price{font-size:18px;font-weight:400;margin-top:12px}
.info .desc{color:var(--muted);margin-top:18px}
.contents{list-style:none;padding:0;margin:28px 0;border-top:1px solid var(--line)}
.contents li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.contents li span:last-child{color:var(--muted);white-space:nowrap}
.contents li.grp{display:block;font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:22px 0 8px}
.fine{font-size:13px;color:var(--muted);margin-top:14px;text-align:center}

/* what's in the box tiles */
.pool{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 16px;margin-top:56px}
.cat{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.cat-img{display:block;aspect-ratio:3/4;background-size:cover;background-position:center;background-color:var(--soft);transition:opacity .2s}
.cat:hover .cat-img{opacity:.85}
.cat-cap{font-size:14px}
.cat-cap span{display:block;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:3px}

/* how it works, in depth */
.hiw-steps{list-style:none;padding:0;margin:0}
.hiw-step{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding-block:56px;border-bottom:1px solid var(--line)}
.hiw-step:nth-child(even) .hiw-img{order:2}
.hiw-img{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--soft)}
.hiw-num{font-family:var(--serif);font-size:56px;line-height:1;color:var(--muted)}
.hiw-step h2{font-size:clamp(30px,3.2vw,42px);margin-top:10px}
.hiw-step p{color:var(--muted);margin-top:14px;max-width:48ch}
.hiw-step .tlink{display:inline-block;margin-top:22px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.two-col h2{font-size:clamp(30px,3.4vw,44px);margin-top:12px}
.two-col p{color:var(--muted);margin-top:14px}

/* form */
.join{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.join h1{font-size:clamp(36px,4.4vw,56px);margin-top:12px}
.join .lead{color:var(--muted);margin-top:16px;max-width:40ch}
form{display:flex;flex-direction:column;gap:30px}
.field{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0}
.field>label,.field>legend{font:500 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:0}
input[type=email],input[type=text],select{font:300 16px var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0;width:100%}
select{appearance:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips label{font-size:13px;border:1px solid var(--line);padding:10px 16px;cursor:pointer;position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label:has(input:checked){border-color:var(--ink);background:var(--soft);font-weight:500}
.chips label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.err{color:#A3261C;font-size:14px}
.done h2{font-size:34px}
.done p{color:var(--muted);margin-top:10px}

/* faq */
.faq{max-width:760px;margin:0 auto}
details{border-bottom:1px solid var(--line);padding:22px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-size:17px;font-weight:400}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:300}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted);margin-top:12px;max-width:62ch}
.contact{background:var(--soft);text-align:center;padding:56px 24px;margin-top:72px}
.contact h2{font-size:clamp(30px,3.4vw,42px);margin-top:10px}
.contact p{color:var(--muted);margin-top:12px}
.contact a.mail{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--line);padding-block:48px;font-size:13px;color:var(--muted)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot .mark{text-align:left;font-size:20px;color:var(--ink)}
.foot ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot .credit{margin-top:12px}

/* category pages inside a box page */
.cp{padding-block:40px 96px}
.cp-head{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-top:36px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.cp-head h1{font-size:clamp(38px,5vw,60px);margin-top:10px}
.cp-head .sub{color:var(--muted);margin-top:14px;max-width:52ch}
.cp-head .cp-note{color:var(--muted);font-size:12px;margin-top:8px}
.cp-get{border:1px solid var(--ink);padding:18px 22px;text-align:center;min-width:180px}
.cp-get b{display:block;font:400 30px/1.1 var(--serif);margin-top:6px}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:28px 14px;margin-top:40px}
.cp-grid figure{margin:0}
.cp-grid .ph{aspect-ratio:1/1;background-size:cover;background-position:center;background-color:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;border:1px dashed var(--line)}
.cp-grid.card .ph{aspect-ratio:3/4}
.cp-grid .ph.has{border:0}
.cp-grid.few{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 20px;max-width:960px}
.cp-grid.few figcaption{font-size:12px}
.cp-grid figcaption{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.cp-secret{text-align:center;max-width:520px;margin:56px auto 0}
.cp-secret .ph{aspect-ratio:3/2;background-size:cover;background-position:center;margin-bottom:24px}
.cp-secret p{color:var(--muted)}
.cp-cta{max-width:420px;margin:64px auto 0;text-align:center}
.cp-nav{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}

@media (max-width:900px){
  header .wrap{column-gap:12px}
  .nav{display:none}
  .menu-btn{display:block;justify-self:start}
  .mark{font-size:19px}
  .hero{height:auto;min-height:0;aspect-ratio:1/1}
  .teaser{aspect-ratio:3/2}
  .prod,.join,.feature,.two-col,.hiw-step{grid-template-columns:1fr;gap:32px}
  .hiw-step:nth-child(even) .hiw-img{order:0}
  .info{position:static}
  .steps,.why-grid{grid-template-columns:1fr;gap:32px}
  .pool{grid-template-columns:repeat(2,1fr)}
  .shop-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  section{padding-block:64px}
  .page-head{padding-block:40px 28px}
  .slot .over{padding:22px}
  .cp-head{grid-template-columns:1fr;gap:20px}.cp-get{justify-self:start}
}
@media (max-width:600px){
  .cp-grid{grid-template-columns:repeat(3,1fr);gap:16px 8px}
  .cp-grid.few{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .cp-grid figcaption{font-size:10px;letter-spacing:.1em}
  .mark{font-size:16px;letter-spacing:.1em}
}

a.slot{text-decoration:none}