/* East Seat. Palette: mist (page), bone (surfaces), bottle (ink), lacquer (the East dot, alerts), brass (rules). */
:root{
  --mist:#E6EEE8; --bone:#FBFAF4; --bottle:#12372E; --bottle-2:#1D4A3E; --lacquer:#C8372D; --brass:#A8873F;
  --line:rgba(18,55,46,.2); --soft:rgba(18,55,46,.72);
  --display:"Besley",Georgia,"Times New Roman",serif; --text:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:74rem; --pad:clamp(1.1rem,4vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--mist);color:var(--bottle);font:400 1.0625rem/1.55 var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.012em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.2vw,4.5rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
p{margin:0 0 1em;max-width:62ch}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--bone);padding:.6rem 1rem;z-index:10}
.skip:focus{left:.5rem;top:.5rem}
.fine{font-size:.875rem;color:var(--soft)}
.lede{font-size:1.2rem;line-height:1.45}
.status{min-height:1.5em;font-size:.95rem;margin:.6rem 0 0}
.status[data-kind="error"]{color:#9B2219}
.hp{position:absolute;left:-999px;width:1px;height:1px;opacity:0}

/* buttons and fields */
.button{display:inline-block;background:var(--bottle);color:var(--bone);font:600 1rem/1 var(--text);padding:.95em 1.45em;border:0;border-radius:6px;cursor:pointer;text-decoration:none}
.button:hover{background:var(--bottle-2)}
.button[disabled]{opacity:.55;cursor:default}
.button.wide{width:100%;text-align:center}
.link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
label{display:block;font-weight:600;font-size:.95rem;margin:0 0 .35rem}
input,textarea{width:100%;font:inherit;color:inherit;background:var(--bone);border:1.5px solid var(--bottle);border-radius:6px;padding:.75em .85em}
.field-row{display:flex;gap:.6rem;flex-wrap:wrap}
.field-row input{flex:1 1 16rem}
.stack{display:grid;gap:.4rem;max-width:34rem}
.stack label{margin-top:.8rem}
.stack .button{margin-top:1.2rem;justify-self:start}

/* header */
.site-header{display:flex;align-items:center;gap:1.5rem;max-width:var(--wrap);margin:0 auto;padding:1.1rem var(--pad)}
.brand,.footer-brand{display:inline-flex;align-items:center;gap:.55rem;font:700 1.35rem/1 var(--display);text-decoration:none;letter-spacing:-.01em}
.site-header nav{display:flex;gap:1.4rem;margin-left:auto}
.site-header nav a{text-decoration:none;font-weight:500}
.site-header nav a:hover{text-decoration:underline}
.cart-button{font:600 1rem/1 var(--text);color:inherit;background:transparent;border:1.5px solid var(--bottle);border-radius:6px;padding:.6em .9em;cursor:pointer}
.cart-count{display:inline-block;min-width:1.5em;text-align:center;background:var(--lacquer);color:#fff;border-radius:1em;padding:.15em .4em;margin-left:.25em;font-size:.85em}
.cart-count[data-empty]{background:transparent;color:inherit}

/* hero: the table from above */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:end;max-width:var(--wrap);margin:0 auto;padding:clamp(1rem,4vw,3rem) var(--pad) clamp(3rem,7vw,6rem)}
.hero-copy{padding-bottom:3.4rem}
.hero-price{display:inline-block;margin-left:.9rem;color:var(--soft)}
.table{margin:0}
.table-top{position:relative;aspect-ratio:1;background:#CDB893;border-radius:14px;padding:9%}
.table-top img{width:100%;height:100%;border-radius:2.2%;box-shadow:0 .7rem 1.4rem rgba(40,28,8,.28);transition:opacity .25s}
.table-top img[data-swapping]{opacity:0}
.walls{position:absolute;inset:9%;width:82%;height:82%}
.tile{fill:#FBF8EE;stroke:#CFC7B2;stroke-width:3;filter:drop-shadow(5px 9px 0 rgba(0,0,0,.2))}
@media (prefers-reduced-motion:no-preference){
  .tile{opacity:0;animation:deal .32s ease-out var(--d) forwards}
  @keyframes deal{from{opacity:0;transform:translateY(-46px)}to{opacity:1;transform:none}}
}
.table figcaption{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.9rem;font:500 1.15rem/1.2 var(--display)}
.swatches{display:flex;gap:.5rem}
.swatch{width:2rem;height:2rem;border-radius:50%;background:var(--c);border:1.5px solid var(--bottle);cursor:pointer;padding:0}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--mist),0 0 0 4.5px var(--bottle)}

/* collection */
.collection{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) clamp(3rem,7vw,6rem)}
.section-lede{color:var(--soft);margin-bottom:2rem}
.mats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3.5vw,3rem) clamp(1rem,2.5vw,2.2rem)}
.mat a{display:block;text-decoration:none}
.mat img{width:100%;aspect-ratio:1;border-radius:10px;box-shadow:0 .35rem .9rem rgba(18,55,46,.16);transition:transform .2s}
.mat a:hover img{transform:translateY(-4px)}
.mat-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem;font:500 1.25rem/1.2 var(--display)}
.mat-price{font:500 1rem/1 var(--text)}
.mat-short{display:block;color:var(--soft);font-size:.95rem;margin-top:.25rem}

/* specs band */
.specs{background:var(--bottle);color:var(--bone);padding:clamp(3rem,7vw,5.5rem) var(--pad)}
.specs h2,.specs dl{max-width:calc(var(--wrap) - 2*var(--pad));margin-left:auto;margin-right:auto}
.specs dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0 2.5rem;margin-top:2rem;margin-bottom:0}
@media (min-width:64rem){.specs dl{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 1.8rem}}
.specs dl div{border-top:1px solid var(--brass);padding:1rem 0 1.6rem}
dt{font:500 1.15rem/1.2 var(--display);margin-bottom:.3rem}
dd{margin:0}

/* story and signup */
.story{max-width:var(--wrap);margin:0 auto;padding:clamp(3rem,7vw,6rem) var(--pad)}
.story-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);font-size:1.15rem}
.signup{background:var(--bone);border-top:1px solid var(--line);padding:clamp(2.5rem,6vw,4.5rem) var(--pad)}
.signup>*{max-width:40rem;margin-left:auto;margin-right:auto}
.signup h2{font-size:clamp(1.5rem,2.6vw,2rem)}

/* product page */
.crumbs{max-width:var(--wrap);margin:0 auto;padding:.5rem var(--pad) 0;font-size:.95rem;color:var(--soft)}
.product{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,5vw,4.5rem);max-width:var(--wrap);margin:0 auto;padding:1.5rem var(--pad) clamp(3rem,7vw,6rem);align-items:start}
.gallery>img{width:100%;aspect-ratio:1;border-radius:12px;box-shadow:0 .5rem 1.2rem rgba(18,55,46,.18)}
.thumbs{display:flex;gap:.7rem;margin:.9rem 0}
.thumbs button{padding:0;border:1.5px solid transparent;border-radius:8px;background:none;cursor:pointer;width:5.2rem}
.thumbs button[aria-pressed="true"]{border-color:var(--bottle)}
.thumbs img{border-radius:6px}
.buy h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.price{font:500 1.5rem/1.2 var(--display);margin-bottom:1.2rem}
.price span{font:400 1rem/1 var(--text);color:var(--soft);margin-left:.6rem}
.buy .button{margin-top:.6rem}
.lead-time{margin-top:.2rem;font-weight:500}
.details{margin:1.6rem 0 1rem}
.details div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;border-top:1px solid var(--line);padding:.7rem 0}
.details dt{font:600 .95rem/1.5 var(--text);margin:0}
.reviews{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 4rem}
.reviews ul{list-style:none;padding:0;display:grid;gap:1.5rem}

/* prose pages */
.prose{max-width:46rem;margin:0 auto;padding:clamp(1.5rem,5vw,3.5rem) var(--pad) clamp(3rem,7vw,6rem)}
.prose h1{margin-bottom:.7em}
.prose h2{font-size:1.45rem;margin-top:2em}
.prose li{margin-bottom:.5em;max-width:62ch}

/* footer */
.site-footer{background:var(--bottle);color:var(--bone);padding:clamp(2.5rem,6vw,4rem) var(--pad) 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;max-width:calc(var(--wrap) - 2*var(--pad));margin:0 auto 2.5rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;align-content:start}
.site-footer .fine{color:rgba(251,250,244,.7);max-width:calc(var(--wrap) - 2*var(--pad));margin:0 auto;border-top:1px solid rgba(251,250,244,.25);padding-top:1.2rem}
.footer-brand{margin-bottom:.8rem}

/* cart */
.cart{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(27rem,100vw);max-width:none;border:0;padding:1.4rem;background:var(--bone);color:var(--bottle);box-shadow:-1rem 0 3rem rgba(0,0,0,.2)}
.cart::backdrop{background:rgba(18,55,46,.45)}
.cart-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:.8rem}
.cart-head h2{font-size:1.6rem;margin:0}
.line{display:grid;grid-template-columns:4.5rem 1fr auto;gap:.9rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.line img{border-radius:6px}
.line-name{font:500 1.1rem/1.2 var(--display)}
.qty{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem}
.qty button{width:1.9rem;height:1.9rem;border:1.5px solid var(--bottle);border-radius:5px;background:none;color:inherit;font:600 1rem/1 var(--text);cursor:pointer}
.cart-total{display:flex;justify-content:space-between;font-size:1.2rem;margin:1.2rem 0 .4rem;max-width:none}
.cart-empty{padding:2rem 0}

@media (max-width:52rem){
  .hero,.product,.story-cols{grid-template-columns:1fr}
  .hero-copy{padding-bottom:0}
  .mats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div{grid-column:1/-1}
  .site-header{gap:.9rem;flex-wrap:wrap}
  .site-header nav{gap:1rem;order:3;width:100%;margin:0}
  .cart-button{margin-left:auto}
}
@media (max-width:30rem){
  .hero-price{display:block;margin:.8rem 0 0}
  .mat-line{font-size:1.05rem;flex-direction:column;gap:.2rem}
}