/* ═══════════════════════════════════════════════════
   hudsoncw — Register home                 /home.css
   (child theme root — enqueued by hcw_home_assets)

   Palette — Luther's, three colors only:
     paper  #F9F0E0   ground
     wine   #54002E   ink. 13.1:1 on paper — all resting text
     red    #FD2601   live. 3.4:1 on paper — large type and
                      graphic elements ONLY. Never small
                      resting text; it marks active states.

   Type — MDIO, four faces, roles assigned not decorated:
     Regular          the record. Every resting text.
     Italic           annotation and aside — the kind
                      prefix, the source file, the state
                      of the count, the colophon's second
                      clause. Never a title, never a
                      paragraph: at 9–12px mono, italic is
                      a texture, not a reading face.
     Semibold         open / live only. A row opens, a pill
                      goes live, the type thickens. Mono
                      advance widths are identical across
                      weights, so nothing reflows.
     Semibold Italic  held in reserve — the flagged file on
                      an open row.
   ═══════════════════════════════════════════════════ */

/* ── MDIO ──────────────────────────────────────────
   Declared here, not inherited from the child
   style.css, so home.css stands on its own if
   'understrap-child-styles' ever leaves the enqueue
   allowlist. Duplicate @font-face blocks are harmless
   — the browser resolves to one download per face.
   ────────────────────────────────────────────────── */
@font-face{
  font-family:'MDIO';
  src:url('https://hudsoncw.com/wp-content/uploads/2026/03/MDIO-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'MDIO';
  src:url('https://hudsoncw.com/wp-content/uploads/2026/03/MDIO-Italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'MDIO';
  src:url('https://hudsoncw.com/wp-content/uploads/2026/03/MDIO-Semibold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'MDIO';
  src:url('https://hudsoncw.com/wp-content/uploads/2026/03/MDIO-SemiboldItalic.woff2') format('woff2');
  font-weight:600;font-style:italic;font-display:swap;
}

:root{
  --paper:#F9F0E0;
  --ink:#54002E;
  --flare:#FD2601;

  --ink-soft:rgba(84,0,46,.74);
  --mute:rgba(84,0,46,.46);
  --rule:rgba(84,0,46,.16);
  --rule-hi:rgba(84,0,46,.50);
  --flare-soft:rgba(253,38,1,.55);

  /* one family, roles by size / weight / slope / tracking / case */
  --type:"MDIO", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --micro:9.5px;

  /* ── the material: Bayer 4×4, wine on paper ── */
  --dither-glass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%2354002E' fill-opacity='.26'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%2354002E' fill-opacity='.26'/%3E%3C/svg%3E");
  --dither-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%2354002E'/%3E%3Crect y='1' width='1' height='1' fill='%23F9F0E0'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23F9F0E0'/%3E%3Crect y='3' width='1' height='1' fill='%23F9F0E0'/%3E%3Crect x='2' y='3' width='1' height='1' fill='%23F9F0E0'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.hcw-home{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--type);font-size:15px;line-height:1.55;
  font-synthesis:none;                 /* never fake a face we ship */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 34px 0}
.micro{
  font-family:var(--type);font-size:var(--micro);font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;color:var(--mute);
}

/* touch ergonomics — every control */
.fore__pill,.row__toggle,.row__visit,.grp__bar,.grp__text a,.port__reset{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ══ MASTHEAD ══════════════════════════════════════ */
.masthead{padding:56px 0 0}
.cycler{position:relative;display:block;width:min(440px,74vw);height:190px}
.cycler img{
  position:absolute;top:50%;left:0;
  transform:translateY(-50%);transform-origin:left center;
  max-width:100%;max-height:190px;width:auto;height:auto;object-fit:contain;
  opacity:0;animation:logoCycle 18s infinite;
}
.cycler img:nth-child(1){animation-delay:0s}
.cycler img:nth-child(2){animation-delay:6s;transform:translateY(-50%) scale(1.4)}
.cycler img:nth-child(3){animation-delay:12s}
@keyframes logoCycle{
  0%{opacity:0} 5.56%{opacity:1} 27.78%{opacity:1} 33.33%{opacity:0} 100%{opacity:0}
}

/* ══ FOREGROUND PILLS ══════════════════════════════
   The anchor carries no visual styling. .fore__skin
   draws border + fill and takes the displacement
   filter alone, so the label stays sharp while the
   shape around it liquefies. On touch the same filter
   runs as a slow ambient drift and swells under a
   press — see home.js.                               */
.fore{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.fore__pill{
  position:relative;display:inline-block;isolation:isolate;
  padding:10px 21px 11px;
  font-size:13.5px;font-weight:400;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);
  transition:color .18s ease;
}
.fore__skin{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  border:1px solid var(--flare);border-radius:999px;
  background-color:transparent;background-image:none;
  background-size:4px 4px;image-rendering:pixelated;
  transition:background-color .18s ease,border-color .18s ease;
  will-change:filter;                  /* keeps the melt off the main raster */
}
.fore__label{position:relative;z-index:1;transition:font-weight .18s ease}

.fore__pill.is-live{color:var(--paper)}
.fore__pill.is-live .fore__label{font-weight:600}  /* semibold holds up on the dither */
.fore__pill.is-live .fore__skin{
  background-image:var(--dither-fill);
  border-color:var(--ink);
}
.fore__pill:focus-visible{outline:none}
.fore__pill:focus-visible .fore__skin{
  outline:1px solid var(--flare);outline-offset:3px;
}

/* ══ FRAME ═════════════════════════════════════════ */
.frame{
  display:grid;grid-template-columns:minmax(0,1fr) 274px;
  gap:0 64px;align-items:start;margin-top:62px;
  animation:settle .4s ease both;
}
@keyframes settle{from{opacity:0}to{opacity:1}}

/* ══ REGISTER ══════════════════════════════════════ */
.reg__eyebrow{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:10px;border-bottom:1px solid var(--ink);
}
/* the count is the one micro that changes state — italic says so */
#count.is-filtered{color:var(--flare);font-style:italic}
.reg__cols{
  display:grid;grid-template-columns:5rem 1.25rem minmax(0,1fr) 8.75rem 4.5rem 1.5rem;
  gap:0 14px;padding:9px 0;border-bottom:1px solid var(--rule);
}
.reg__cols span:first-child{text-align:right}
.reg__list{list-style:none;margin:0;padding:0}

.row{border-bottom:1px solid var(--rule);transition:border-color .18s ease}
.row.is-open{border-bottom-color:var(--rule-hi)}
.row.is-out{display:none}
.row__bar{
  position:relative;display:grid;
  grid-template-columns:5rem 1.25rem minmax(0,1fr) 8.75rem 4.5rem 1.5rem;
  align-items:center;gap:0 14px;padding:17px 0;
}
.row__toggle{
  position:absolute;inset:0;z-index:0;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
}
.row__toggle:focus-visible{outline:1px solid var(--flare);outline-offset:-2px}
.row__code{
  font-size:9.5px;letter-spacing:.09em;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink-soft);
}
/* the kind prefix is a classification, not part of the number */
.row__code i{font-style:italic;color:var(--mute)}
.row__title{
  font-size:15.5px;font-weight:400;letter-spacing:-.005em;color:var(--ink-soft);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .18s ease;
}
.row.is-open .row__title{color:var(--ink);font-weight:600}
.row__genre,.row__visit{
  font-size:var(--micro);letter-spacing:.15em;
  text-transform:uppercase;color:var(--mute);
}
.row__visit{
  position:relative;z-index:1;text-decoration:none;justify-self:start;padding:3px 0;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.row__sign{
  font-size:12px;font-weight:400;color:var(--mute);
  justify-self:end;line-height:1;transition:color .18s ease;
}
.row.is-open .row__sign{color:var(--flare)}
.row__drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
.row.is-open .row__drawer{grid-template-rows:1fr}
.row__drawerInner{overflow:hidden}
.row__note{
  margin:0;padding:0 0 8px calc(5rem + 1.25rem + 28px);
  max-width:50ch;font-size:12.5px;line-height:1.68;color:var(--ink-soft);
  text-wrap:pretty;opacity:0;transition:opacity .2s ease .06s;
}
/* the file line annotates the work rather than describing it */
.row__file{
  margin:0;padding:0 0 22px calc(5rem + 1.25rem + 28px);
  font-size:9px;font-style:italic;font-weight:600;letter-spacing:.1em;color:var(--mute);
  opacity:0;transition:opacity .2s ease .06s;
}
.row.is-open .row__note,.row.is-open .row__file{opacity:1}

.glyph{width:10px;height:10px;display:block;overflow:visible}
.glyph path,.glyph circle,.glyph rect{
  fill:none;stroke:var(--mute);stroke-width:1.3;
  transition:fill .18s ease,stroke .18s ease;
}
.row.is-open .glyph path,.row.is-open .glyph circle,.row.is-open .glyph rect{
  fill:var(--ink);stroke:var(--ink);
}
.grp.is-active .glyph path,.grp.is-active .glyph circle,.grp.is-active .glyph rect{
  fill:var(--flare);stroke:var(--flare);
}

/* ══ PORT WINDOW ═══════════════════════════════════ */
.port{position:sticky;top:34px}
.port__plate{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.port__plate .micro + .micro{font-style:italic}
.port__frame{position:relative}
.port__ticks{
  position:absolute;inset:-7px;
  width:calc(100% + 14px);height:calc(100% + 14px);pointer-events:none;
}
.port__ticks path{stroke:var(--ink);stroke-width:1;fill:none}

.port__case{border:1px solid var(--ink);background:var(--paper)}

/* ── the field ── */
.port__field{border-bottom:1px solid var(--ink)}
.port__field[hidden]{display:none}
.port__canvas{
  display:block;width:100%;height:150px;
  image-rendering:pixelated;background:var(--paper);
}

/* ── signature ─────────────────────────────────────
   What the readout used to spell out in four labelled
   rows: a, b, c, d as unlabelled marks on one rule.
   11px instead of ~46px, and it still tells you the
   form changed. Committed filter turns the marks red,
   same as the ink in the field above.
   ────────────────────────────────────────────────── */
.port__sig{
  position:relative;height:11px;overflow:hidden;
  border-top:1px solid var(--rule);background:var(--paper);
}
.port__sig::before{
  content:"";position:absolute;left:0;right:0;top:6px;height:1px;
  background:var(--rule);
}
.port__mark{
  position:absolute;top:2px;width:1px;height:7px;
  background:var(--ink-soft);transform:translateX(-1px);
  transition:background-color .3s ease;
}
.port__mark:nth-child(2n){top:4px;height:4px}
.port__sig.is-committed .port__mark{background:var(--flare)}

/* glass — light dither so 10px type stays legible */
.port__glass{
  background-image:var(--dither-glass);background-size:4px 4px;
  image-rendering:pixelated;
  padding:18px 22px 22px;
  max-height:min(44vh,282px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(84,0,46,.24) transparent;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
.port__glass::-webkit-scrollbar{width:4px}
.port__glass::-webkit-scrollbar-thumb{background:rgba(84,0,46,.24)}
.port__glass::-webkit-scrollbar-track{background:transparent}

.grp{position:relative;padding-left:16px}
.grp + .grp{margin-top:3px}
.grp::before{
  content:"";position:absolute;left:0;top:11px;
  width:5px;height:1px;background:var(--flare);
  opacity:0;transition:opacity .18s ease;
}
.grp.is-active::before{opacity:1}
.grp__bar{
  width:100%;display:flex;align-items:center;gap:10px;padding:6px 0;
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.grp__name{
  flex:1;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .18s ease;
}
.grp.is-active .grp__name{color:var(--flare);font-style:italic}
.grp__n{font-size:9px;color:var(--mute);font-variant-numeric:tabular-nums}
.grp__sign{font-size:12px;color:var(--mute);width:9px;text-align:center;line-height:1}
.grp.is-open .grp__sign{color:var(--flare)}
.grp__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
.grp.is-open .grp__body{grid-template-rows:1fr}
.grp__bodyInner{overflow:hidden}
.grp__text{margin:0;padding:2px 0 12px 20px;font-size:11.5px;line-height:1.7;color:var(--ink-soft)}
.grp--about{padding-left:0;margin-bottom:14px}
.grp--about .grp__text{padding-left:0}
.grp__text a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-hi)}

.port__reset{
  margin:16px 0 0 16px;padding:0;background:none;border:0;
  font-family:inherit;font-size:var(--micro);font-style:italic;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mute);cursor:pointer;
  border-bottom:1px solid var(--rule-hi);
}
.port__reset[hidden]{display:none}

/* ══ COLOPHON ══════════════════════════════════════ */
.colophon{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  margin-top:96px;padding:14px 0 44px;border-top:1px solid var(--ink);
}
.colophon .micro + .micro{font-style:italic}

:focus-visible{outline:1px solid var(--flare);outline-offset:4px}

/* ══ HOVER — hover-capable devices only ════════════ */
@media (hover:hover){
  .row:hover{border-bottom-color:var(--rule-hi)}
  .row:hover .row__title{color:var(--ink)}
  .row:hover .row__sign{color:var(--flare)}
  .row:hover .glyph path,.row:hover .glyph circle,.row:hover .glyph rect{
    fill:var(--ink);stroke:var(--ink);
  }
  .row__visit:hover{color:var(--flare);border-bottom-color:var(--flare)}
  .grp:hover .grp__name{color:var(--ink)}
  .grp__text a:hover{border-bottom-color:var(--ink)}
  .port__reset:hover{color:var(--flare);border-bottom-color:var(--flare)}
}

@media (prefers-reduced-motion:reduce){
  .hcw-home *{transition:none!important}
  .frame{animation:none}
  .cycler img{animation:none}
  .cycler img:nth-child(1){opacity:1}
}

/* ══ MOBILE ════════════════════════════════════════ */
@media (max-width:840px){
  .wrap{padding:0 22px 0}
  .masthead{padding-top:34px}
  .cycler{width:min(300px,82vw);height:128px}
  .cycler img{max-height:128px}
  .fore{margin-top:20px;gap:9px}
  .fore__pill{padding:10px 17px 11px;font-size:13px}
  .frame{grid-template-columns:minmax(0,1fr);gap:44px;margin-top:44px}
  .port{position:static;order:-1}
  .port__canvas{height:112px}
  .port__glass{
    padding:16px 20px 20px;
    max-height:none;-webkit-mask-image:none;mask-image:none;overflow:visible;
  }
  .grp__bar{padding:10px 0}
  .grp + .grp{margin-top:0}
  .port__reset{padding:8px 0 2px}
  .reg__cols{display:none}
  .row__bar{
    grid-template-columns:1.25rem minmax(0,1fr) 1.5rem;
    grid-template-areas:"glyph code sign" "title title title" "meta meta meta";
    row-gap:7px;padding:16px 0;
  }
  .row__glyphCell{grid-area:glyph}
  .row__code{grid-area:code;text-align:left}
  .row__title{grid-area:title;white-space:normal;font-size:15.5px}
  .row__sign{grid-area:sign;align-self:start}
  .row__meta{grid-area:meta;display:flex;align-items:center;gap:16px;width:100%}
  .row__visit{margin-left:auto;padding:8px 0 8px 12px}
  .row__note,.row__file{padding-left:calc(1.25rem + 11px)}
  .colophon{
    margin-top:64px;
    padding-bottom:calc(36px + env(safe-area-inset-bottom));
  }
}
@media (min-width:841px){ .row__meta{display:contents} }