:root{
  --navy:#1B2A41;
  --manila:#E3D9C4;
  --oxide:#9A3B2E;
  --paper:#FAF9F5;

  --bg:var(--paper);
  --bg-alt:#F1EEE5;
  --fg:var(--navy);
  --fg-soft:#4A5768;
  --rule:#D4CEBE;
  --card:#FFFFFF;

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  /* Special Elite - a DISTRESSED typewriter face, ink-on-paper rather than a
     clean "code" mono. Courier New is the fallback and is what shows during the
     swap, so the layout barely moves when the webfont lands.

     Two things to know before changing anything that uses it:
       - It ships ONE weight (400). Every `font-weight:700` below is therefore
         SYNTHETIC. That was checked against real 400 side by side and the
         synthetic bold is clearly better - at 400 the nav and filters wash out.
         It does not smear, because the face is small-text-friendly to begin with.
       - It is PROPORTIONAL, not truly monospaced, despite being a typewriter
         face. Nothing here relies on a fixed advance (the memo's To/From/Re
         column is a <dl> grid), but do not assume character-cell alignment. */
  --mono:'Special Elite','Courier New','Nimbus Mono PS',Courier,monospace;

  --gut:clamp(20px,5vw,64px);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --bg:#131C28; --bg-alt:#0E1620; --fg:#E9E4D7;
    --fg-soft:#A3AEBD; --rule:#2C3A4C; --card:#1B2634;
  }
}
:root[data-theme="dark"]{
  --bg:#131C28; --bg-alt:#0E1620; --fg:#E9E4D7;
  --fg-soft:#A3AEBD; --rule:#2C3A4C; --card:#1B2634;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--oxide);outline-offset:3px}

/* masthead */
.mast{position:sticky;top:0;z-index:50;background:var(--navy);
  padding-top:env(safe-area-inset-top,0px);border-bottom:3px solid var(--oxide)}
.mast-in{max-width:1180px;margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;cursor:pointer}
/* Logo images carry width/height attributes and fixed CSS heights so they
   reserve their space before loading - a masthead that resizes on image load
   is the classic layout-shift source. */
.brand-mark{display:block;flex:none;height:27px;width:auto}
.brand-lines{display:block}
.brand-word{display:block;height:15px;width:auto}
.brand-sub{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.11em;color:#95A3B7;
  text-transform:uppercase;margin-top:5px;line-height:1;display:block}
/* Below ~430px the wordmark plus the tagline crowd the nav onto a third line.
   The mark and wordmark still identify the site, so the tagline goes. */
@media(max-width:430px){.brand-sub{display:none}}
.nav{display:flex;gap:4px}
.nav a{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:none;border:0;cursor:pointer;color:#A7B4C6;padding:8px 12px;border-radius:2px;
  text-decoration:none;display:block}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:var(--navy);background:var(--manila)}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}

/* hero */
.hero{background:var(--navy);color:#fff;padding:clamp(54px,9vw,104px) 0 clamp(64px,10vw,120px)}
.hero-grid{display:grid;gap:clamp(40px,6vw,68px);grid-template-columns:1fr}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.hero h1{font-size:clamp(38px,7.2vw,68px);line-height:.98;margin:0 0 22px;
  font-weight:800;letter-spacing:-.025em}
.hero p{font-size:clamp(17px,2.2vw,20px);color:#BFC9D8;max-width:44ch;margin:0 0 30px;line-height:1.55}
.hero em{font-style:normal;color:var(--manila)}

/* plate */
.plate-set{display:flex;flex-direction:column;align-items:center;width:100%;container-type:inline-size}
.plate{width:100%;aspect-ratio:8/2.05;display:grid;place-items:center;
  padding:0 1.5625%;text-align:center;border-radius:2px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22), 0 3px 9px rgba(0,0,0,.28)}
/* The plate is CSS FINISH + UPLOADED ARTWORK. The PNG is white on
   transparency, so one upload sits correctly on walnut, navy and black - which
   is why the admin inverts black-on-transparent masters at upload time.
   z-index:2 lifts it above the walnut grain pseudo-element. The drop-shadow
   filter (not box-shadow) follows the glyph edges, standing in for the engraved
   bevel the old text rendering faked with text-shadow. */
.plate-art{position:relative;z-index:2;display:block;width:100%;height:auto;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.plate.navy{background:linear-gradient(176deg,#253954,#16223A)}
.plate.black{background:linear-gradient(176deg,#2A2A2A,#121212)}
.plate.walnut{background:#7A5130}
.plate.walnut::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    repeating-linear-gradient(0.6deg,
      rgba(58,34,17,.13) 0px, rgba(58,34,17,.13) 1px,
      rgba(0,0,0,0) 1px, rgba(0,0,0,0) 6px),
    repeating-linear-gradient(179.4deg,
      rgba(168,124,80,.15) 0px, rgba(168,124,80,.15) 2px,
      rgba(0,0,0,0) 2px, rgba(0,0,0,0) 11px),
    repeating-linear-gradient(0.2deg,
      rgba(70,42,22,.10) 0px, rgba(70,42,22,.10) 3px,
      rgba(0,0,0,0) 3px, rgba(0,0,0,0) 19px),
    linear-gradient(96deg,#8A5D38,#6B462A 48%,#7E5333)}
.holder{width:calc(100% + 14px);height:15px;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#E2E4E6 0%,#B9BEC4 38%,#8E959C 62%,#CDD2D7 100%);
  box-shadow:0 5px 12px rgba(0,0,0,.22)}
.hero .plate-set{max-width:430px;margin:0 auto}

/* buttons */
.btn{display:inline-block;text-decoration:none;cursor:pointer;font-family:var(--mono);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:13px 22px;
  border-radius:2px;border:1.5px solid transparent}
.btn-fill{background:var(--manila);color:var(--navy)}
.btn-fill:hover{background:#fff}
.btn-line{border-color:#5A6A80;color:#D3DAE4;background:none}
.btn-line:hover{border-color:var(--manila);color:#fff}
.btn-dark{background:var(--navy);color:#fff}
.btn-row{display:flex;gap:11px;flex-wrap:wrap}

/* memo */
.memo{background:var(--manila);color:#1E1810;font-family:var(--mono);font-size:13.5px;
  line-height:1.75;padding:26px 28px;border-radius:2px;border-left:5px solid var(--oxide);max-width:62ch}
.memo h2{font-family:var(--mono);font-size:13.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 15px}
.memo dl{display:grid;grid-template-columns:auto 1fr;gap:1px 14px;margin:0 0 15px}
.memo dt{opacity:.55}
.memo dd{margin:0}
.memo p{margin:0 0 11px}
.memo p:last-child{margin:0}

/* sections */
.sec{padding:clamp(52px,8vw,92px) 0}
.sec-alt{background:var(--bg-alt)}
.head{font-size:clamp(27px,4.4vw,40px);font-weight:800;letter-spacing:-.02em;margin:0 0 14px;line-height:1.08}
.lede{color:var(--fg-soft);max-width:58ch;margin:0 0 38px;font-size:17px}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 34px}
.filters button{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 15px;border-radius:2px;cursor:pointer;border:1.5px solid var(--rule);
  background:none;color:var(--fg-soft)}
.filters button:hover{border-color:var(--fg-soft);color:var(--fg)}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* grid */
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.item{background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:26px 22px 20px;display:flex;flex-direction:column}
.item .plate-set{margin-bottom:16px}
.swatches{display:flex;gap:7px;margin:0 0 16px}
.swatches button{width:22px;height:22px;border-radius:50%;cursor:pointer;padding:0;
  border:1.5px solid var(--rule);background-size:cover}
.swatches button[aria-pressed="true"]{outline:2px solid var(--oxide);outline-offset:2px}
.sw-walnut{background:linear-gradient(150deg,#8A5D38,#6B462A)}
.sw-navy{background:linear-gradient(150deg,#253954,#16223A)}
.sw-black{background:linear-gradient(150deg,#2A2A2A,#121212)}
.item-foot{margin-top:auto;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.item-art{display:block;text-decoration:none}
/* The plate is artwork now, so the title has to exist as real text somewhere -
   alt text alone would leave the grid with no readable product name. */
.item-title{font-size:15px;font-weight:700;line-height:1.3;margin:0 0 12px}
.item-title a{color:var(--fg);text-decoration:none}
.item-title a:hover{text-decoration:underline;text-underline-offset:2px}

/* ---- product page ---- */
.crumb{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;margin:0 0 26px}
.crumb a{color:var(--fg-soft);text-decoration:none}
.crumb a:hover{color:var(--fg)}
.product{display:grid;gap:34px;align-items:start}
@media(min-width:860px){.product{grid-template-columns:1.05fr .95fr;gap:48px}}
.product-art{position:sticky;top:96px}
@media(max-width:859px){.product-art{position:static}}
.product h1{font-size:clamp(26px,4vw,38px);line-height:1.12;margin:0 0 14px}
.product .specs{margin-top:30px}
.product .item-foot{margin:22px 0 0}
.swatches-lg{margin-top:18px;justify-content:center}
.swatches-lg button{width:30px;height:30px}
.buy{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;padding:9px 13px;border-radius:2px;border:1.5px solid var(--fg);color:var(--fg)}
.buy:hover{background:var(--fg);color:var(--bg)}
.buy.soon{border-style:dashed;opacity:.42;pointer-events:none}

/* specs */
.specs{display:grid;max-width:66ch;border-top:1px solid var(--rule)}
.specs div{display:grid;grid-template-columns:1fr;gap:2px;padding:15px 0;border-bottom:1px solid var(--rule)}
@media(min-width:620px){.specs div{grid-template-columns:200px 1fr;gap:24px;align-items:baseline}}
.specs dt{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-soft)}
.specs dd{margin:0}

.prose{max-width:62ch}
.prose p{margin:0 0 20px}
.prose p:last-child{margin:0}

footer{background:var(--navy);color:#94A2B6;padding:46px 0 34px;font-size:14px}
footer .wrap{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--manila)}
.fine{font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:2}
.foot-logo{display:block;width:190px;height:auto;margin:0 0 12px}