/* Shared look for the public pages.
   White sheet, black ink, one grotesk. Small uppercase navigation, hairline modules with grey label bars,
   soft pills for actions. The garment drawings are the only imagery. */
:root{
  --bg:#ffffff; --sheet:#ffffff; --fog:#f2f2f0; --fog2:#e9e9e6; --ink:#000000; --mid:#5e5e5e; --ash:#a8a8a6; --line:#e4e4e2;
  --seam:#3d5afe; --cons:#b5452e;
  --f:'Archivo','Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000; --sheet:#000000; --fog:#141414; --fog2:#1f1f1f; --ink:#f5f5f3; --mid:#a3a3a0; --ash:#5c5c5a; --line:#262626;
  --seam:#8c9cff; --cons:#e38a73; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --sheet:#000000; --fog:#141414; --fog2:#1f1f1f; --ink:#f5f5f3; --mid:#a3a3a0; --ash:#5c5c5a; --line:#262626;
  --seam:#8c9cff; --cons:#e38a73; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--f);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}
.caps{font-size:11.5px;font-weight:500;line-height:1.2;text-transform:uppercase;letter-spacing:.01em}
.dim{color:var(--ash)}
.mid{color:var(--mid)}

/* announcement */
.note-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--ink);padding:9px 12px}
.note-bar p{grid-column:2;margin:0;text-align:center}
.note-bar button{grid-column:3;justify-self:end;background:none;border:0;color:inherit;cursor:pointer;padding:0}

/* header */
.hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 12px;position:sticky;top:0;z-index:20;background:var(--bg)}
.hdr .l,.hdr .r{display:flex;gap:22px;align-items:center}
.hdr .r{justify-self:end}
.hdr .brand{font-size:13px;font-weight:600;letter-spacing:-.01em;text-transform:none}
.hdr nav{display:flex;gap:22px}
.hdr a:hover,.hdr a[aria-current]{color:var(--ash)}
.hdr a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 15px;border-radius:999px;border:0;background:var(--fog);color:var(--ink);font:500 13px/1 var(--f);cursor:pointer;white-space:nowrap}
.pill:hover{background:var(--fog2)}
.pill.ink{background:var(--ink);color:var(--bg)}
.pill.ink:hover{opacity:.82}
.pill.lg{height:42px;padding:0 22px;font-size:14px}
.theme-toggle{height:32px!important;border-radius:999px!important;border:0!important;background:var(--fog)!important;padding:0 13px!important;font:500 11.5px/1 var(--f)!important;letter-spacing:.01em!important}
.theme-toggle:hover{background:var(--fog2)!important}

/* modules with grey label bars */
.mods{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding:0 8px}
.mod{background:var(--sheet);min-width:0;display:flex;flex-direction:column}
.mod > .bar{background:var(--fog);padding:7px 10px;display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:500}
.mod > .bar span:last-child{color:var(--mid);font-weight:400}
.mod > .in{padding:12px 10px 16px;flex:1}
.mod p{margin:0 0 10px;max-width:46ch}
.mod p:last-child{margin-bottom:0}
.mod.black > .bar{background:var(--ink);color:var(--bg)}
.mod.black > .bar span:last-child{color:var(--bg)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list li span:last-child{color:var(--mid);text-align:right}
.ok{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2e8b57;margin-right:7px;vertical-align:1px}
.ok.w{background:#c9900c}

/* garment drawings */
.onbody{display:block;width:100%;height:100%}
.onbody path,.onbody ellipse,.onbody circle{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.onbody .fs{fill:none;stroke:var(--ash);stroke-width:.8px}
.onbody .fu{fill:var(--sheet);stroke:var(--ash);stroke-width:.8px}
.onbody .fg,.onbody .fh{fill:var(--sheet);stroke:var(--ink);stroke-width:1.1px}
.onbody .fd{fill:none;stroke:var(--ink);stroke-width:.7px}
.onbody .fb{fill:var(--sheet);stroke:var(--ink);stroke-width:.7px}
.tile .onbody .fg,.tile .onbody .fh,.tile .onbody .fu,.tile .onbody .fb{fill:var(--fog)}
.views{display:grid;grid-template-columns:1fr 1fr;gap:4px;height:100%}
.views figure{margin:0;display:flex;flex-direction:column;min-height:0;min-width:0}
.views svg{flex:1;min-height:0}
.views figcaption{text-align:center;font-size:11.5px;font-weight:500;text-transform:uppercase;color:var(--ash);padding-top:4px}
.pv path{fill:none;stroke:var(--ink);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.pv path.gd{stroke:var(--line);stroke-width:1px}
.pv path.sa{stroke:var(--seam);stroke-width:.8px;stroke-dasharray:4 3}
.pv path.mk{stroke:var(--cons);stroke-width:.9px}
.pv path.gr{stroke:var(--ash);stroke-width:.8px}
.pv text{font-family:var(--f);font-weight:600;fill:var(--mid);text-transform:uppercase}

/* footer */
.ftr{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;padding:56px 12px 14px}
.ftr nav{display:flex;gap:22px;flex-wrap:wrap}
.ftr .r{justify-self:end}

@media (max-width:860px){
  .hdr{grid-template-columns:1fr auto;padding:12px}
  .hdr nav.mainnav{display:none}
  .hdr .r{gap:8px}
  .mods{grid-template-columns:minmax(0,1fr)}
  .mods > .mod{grid-column:1/-1!important}
  .ftr{grid-template-columns:1fr;gap:10px}
  .ftr .r{justify-self:start}
  .theme-toggle .theme-label{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
