/* ============================================================
   UNIT-07 — base: tokens, page furniture, content column
   ============================================================ */

:root{
  /* backdrop */
  --tan:        #d8c5a4;
  --tan-deep:   #c3ae8c;
  --tan-shade:  #b49f7e;

  /* chassis */
  --rust:       #b8492a;
  --rust-lo:    #8d3419;
  --rust-hi:    #d4663c;
  --steel:      #4b4f53;
  --steel-lo:   #2c2f32;
  --steel-hi:   #7d8489;
  --steel-edge: #9aa2a8;

  /* ink */
  --ink:        #222426;
  --ink-2:      #3c4045;
  --ink-soft:   #5d6268;
  --paper:      #efe6d4;

  /* accents */
  --red:        #c23127;
  --red-hi:     #e0554a;

  /* display (swapped by MODE) */
  --lcd-bg:     #f0a323;
  --lcd-bg-2:   #e2911a;
  --lcd-ink:    #33200a;
  --lcd-dim:    rgba(51,32,10,.45);
  --lcd-glow:   rgba(255,171,52,.55);

  --fx: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --fb: 'Barlow', system-ui, sans-serif;
  --fm: 'Share Tech Mono', ui-monospace, monospace;

  --rail: 1180px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  margin:0;
  font-family:var(--fb);
  font-size:16.5px;
  line-height:1.62;
  color:var(--ink);
  background:var(--tan-deep);
  -webkit-font-smoothing:antialiased;
}

/* The page wash sits on its own fixed layer rather than using
   background-attachment:fixed, which iOS handles badly: it repaints oddly
   during scroll and is a second cause of the backdrop appearing to shift.
   A fixed element is composited predictably on every browser we care about. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, #e3d2b3 0%, var(--tan) 46%, var(--tan-deep) 100%);
}

/* procedural film grain over the whole page */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9000;
  opacity:.26; mix-blend-mode:multiply;
  /* iOS Safari and Edge defer compositing a large fixed element that carries a
     blend mode until something forces a repaint. The first scroll was doing
     that, so the grain appeared to switch on partway down the page. Promoting
     it to its own layer up front makes it paint with everything else. */
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:min(var(--rail),calc(100% - 44px)); margin-inline:auto; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:fixed; top:8px; left:-999px; z-index:9999;
  background:var(--ink); color:var(--paper); padding:10px 16px;
  font-family:var(--fx); letter-spacing:.08em; text-decoration:none;
}
.skip:focus{ left:8px; }

:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; }

/* ---------------- header ---------------- */

.site-head{
  position:sticky; top:0; z-index:200;
  background:linear-gradient(180deg,#2b2e31 0%,#212426 100%);
  border-bottom:2px solid #15171a;
  box-shadow:0 6px 22px rgba(30,20,10,.28);
}
.head-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:58px; }

.head-id{ display:flex; align-items:baseline; gap:10px; min-width:0; }
/* a link on every page, the home page included — a self-link there is what
   people expect from a wordmark, and it doubles as 'back to the top' */
a.head-id{ text-decoration:none; }
a.head-id:hover .head-name{ color:#fff; }
a.head-id:hover .head-sub{ color:#b4bbc1; }
.head-name,.head-sub{ transition:color .18s; }
.head-mark{
  width:11px; height:11px; border-radius:2px; background:var(--rust);
  box-shadow:0 0 0 2px rgba(255,255,255,.12) inset, 0 0 12px rgba(200,80,40,.7);
  align-self:center; flex:none;
  animation:pulseMark 2.6s var(--ease) infinite;
}
@keyframes pulseMark{ 0%,100%{opacity:1} 50%{opacity:.35} }

.head-name{ font-family:var(--fx); font-weight:700; font-size:21px; letter-spacing:.1em; color:var(--paper); white-space:nowrap; }
.head-sub{
  font-family:var(--fm); font-size:11px; letter-spacing:.14em; color:#8e959b;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.head-tools{ display:flex; align-items:center; gap:12px; flex:none; }
.head-nav{ display:flex; align-items:center; gap:8px; }
.tool{
  /* explicit height + line-height:1 — <button> does not inherit the body's
     line-height but <a> does, which otherwise makes them different heights */
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:30px; padding:0 11px; line-height:1;
  font-family:var(--fm); font-size:11px; letter-spacing:.1em;
  color:#9aa2a8; background:#191c1e; border:1px solid #3a3f43;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:color .18s, border-color .18s, background .18s;
}
.tool:hover{ color:var(--paper); border-color:#5d6469; }
.tool[aria-current="page"]{
  color:#f3d9a9; border-color:#6a4a2a; background:rgba(184,73,42,.22);
}
.tool-dot{ width:7px; height:7px; border-radius:50%; background:#4a5054; transition:background .2s, box-shadow .2s; }
.tool[aria-pressed="true"] .tool-dot{ background:#5ad07a; box-shadow:0 0 9px rgba(90,208,122,.85); }

/* ---------------- console layout ---------------- */

.console{
  display:grid;
  grid-template-columns:minmax(262px,394px) minmax(0,1fr);
  gap:56px;
  /* keep the space below the columns small: every pixel here is a pixel the
     pinned unit gets shoved upwards by at the end of the page */
  padding:52px 0 24px;
  /* the left column must stretch to the full row height, otherwise the sticky
     device has no travel room and scrolls away with the content */
  align-items:stretch;
}
.device-col{ position:relative; }
.device-stick{ position:sticky; top:96px; will-change:transform; }


.device-hint{
  margin:22px 4px 0; text-align:center;
  font-family:var(--fm); font-size:11.5px; line-height:1.9;
  letter-spacing:.06em; color:#6d5c44;
}
.device-hint b{ color:var(--rust-lo); font-weight:400; }

/* ---- condensed readout: stands in for the unit once it scrolls away ---- */

.minibar{ display:none; }

@media (max-width:980px){
  .minibar{
    position:fixed; top:58px; left:0; right:0; z-index:150;
    display:flex; align-items:center; gap:12px;
    width:100%; padding:9px 16px; border:0; border-bottom:2px solid var(--rust-lo);
    background:linear-gradient(180deg,var(--lcd-bg),var(--lcd-bg-2));
    color:var(--lcd-ink); font-family:var(--fm); font-size:12px; letter-spacing:.08em;
    text-align:left; cursor:pointer; overflow:hidden;
    box-shadow:0 8px 18px rgba(40,25,10,.3);
    transform:translateY(-140%); transition:transform .32s var(--ease);
  }
  .minibar::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.22;
    background:repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);
  }
  .minibar.show{ transform:none; }
  body[data-power="off"] .minibar{ transform:translateY(-140%); }
  .mb-name{ flex:1; text-transform:uppercase; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .mb-sig{ letter-spacing:-.06em; opacity:.8; }
  .mb-up{ font-size:14px; opacity:.7; }
  .dead-band{ top:104px; }
}

/* ---------------- content ---------------- */

.feed{ padding-top:6px; }

.dead-band[hidden]{ display:none; }
.dead-band{
  position:sticky; top:74px; z-index:60;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:#26140f; border-left:4px solid var(--red);
  color:#f0d4c6; padding:13px 18px; margin-bottom:26px;
  box-shadow:0 10px 26px rgba(40,20,10,.3);
}
.dead-band p{ margin:0; font-family:var(--fm); font-size:12.5px; letter-spacing:.04em; }
.dead-band b{ color:#ffb08f; font-weight:400; }
.dead-dot{
  width:9px; height:9px; border-radius:50%; background:var(--red);
  box-shadow:0 0 10px var(--red); animation:pulseMark 1s steps(2) infinite; flex:none;
}
.dead-btn{
  margin-left:auto; font-family:var(--fx); font-weight:600; font-size:12px; letter-spacing:.12em;
  background:transparent; color:#ffb08f; padding:6px 12px; cursor:pointer;
  border:1px solid #7d3a28; border-bottom:3px solid #5e2a1d; border-radius:0;
  transition:background .18s,color .18s;
}
.dead-btn:hover{ background:var(--red); color:#fff; }

.chan{ margin-bottom:78px; scroll-margin-top:96px; }
.chan:last-child{ margin-bottom:24px; }

.chan-head{ display:flex; align-items:flex-start; gap:18px; margin-bottom:22px; }
.chan-no{
  font-family:var(--fx); font-weight:700; font-size:34px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(141,52,25,.6);
  padding-top:4px; flex:none;
}
.chan-title{
  font-family:var(--fx); font-weight:700; font-size:clamp(30px,4.2vw,46px);
  line-height:1; letter-spacing:.005em; margin:0 0 6px;
  text-transform:uppercase; color:var(--ink);
}
.chan-kicker{
  margin:0; font-family:var(--fm); font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:#8a7457;
}
.chan-head::after{
  content:''; flex:1; height:1px; margin-top:22px;
  background:repeating-linear-gradient(90deg,rgba(90,70,45,.45) 0 6px,transparent 6px 12px);
}

.panel{
  background:linear-gradient(170deg,#2f3336 0%,#26292c 100%);
  color:#ddd6c8; padding:30px 32px; position:relative;
  border-top:3px solid var(--rust);
  box-shadow:0 16px 34px rgba(50,32,16,.22);
}
.panel::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(103deg,transparent 0 38%,rgba(255,255,255,.035) 38.4%,transparent 39%),
    linear-gradient(97deg,transparent 0 71%,rgba(255,255,255,.028) 71.3%,transparent 72%);
}
.panel p{ margin:0 0 14px; }
.panel p:last-child{ margin-bottom:0; }

.lede{ font-size:19px; line-height:1.55; color:#f1e8d6; }

.chan-title .tint{ color:var(--rust); }
.chan-sub{ margin:-4px 0 24px; font-size:17px; line-height:1.6; color:var(--ink-2); max-width:64ch; }

.eyebrow{
  margin:0 0 9px; font-family:var(--fm); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rust-lo);
}

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; }
/* two classes, so it beats the .cta rule that is declared further down */
.cta.cta--ghost{
  background:transparent; color:#e8dcc6;
  border:1px solid #6a6f74; border-bottom:3px solid #575d61;
  box-shadow:none;
}
.cta.cta--ghost:hover{ background:rgba(255,255,255,.07); color:#fff; }
.cta.cta--ghost:active{ transform:translateY(2px); box-shadow:none; }

.card-link{
  display:inline-block; font-family:var(--fm); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rust-lo);
  text-decoration:none; border-bottom:1px solid rgba(141,52,25,.35); padding-bottom:2px;
  transition:color .18s, border-color .18s;
}
.card-link:hover{ color:var(--rust); border-bottom-color:var(--rust); }

/* photographs sit in a frame, slightly knocked back so they belong on the tan */
.shot{ position:relative; overflow:hidden; background:#2a2d30; }
.shot img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) contrast(1.03);
}

/* ---- services ---- */

/* the feed column is narrow (the unit owns the left third), so secondary cards
   keep a slim picture beside the text and the lead card runs its image full width */
.svc{
  display:grid; grid-template-columns:250px 1fr;
  background:rgba(255,252,244,.5); border:1px solid rgba(120,95,60,.3);
  margin-bottom:14px;
}
.svc .shot{ border-right:1px solid rgba(120,95,60,.3); min-height:100%; }
.svc-body{ padding:20px 22px; }
.svc-body h3{
  font-family:var(--fx); font-weight:700; font-size:20px;
  text-transform:uppercase; letter-spacing:.03em; margin:0 0 9px;
}
.svc-body p{ margin:0 0 14px; color:var(--ink-2); font-size:15.5px; }
.svc-body p a{ color:var(--rust-lo); }

.svc--lead{ grid-template-columns:1fr; border-left:3px solid var(--rust); margin-bottom:14px; }
.svc--lead .shot{
  border-right:0; border-bottom:1px solid rgba(120,95,60,.3);
  /*aspect-ratio:2.5/1; RL change makes section two main images taller*/  
  min-height:0;
}
.svc--lead .svc-body{ padding:26px 28px; }
.svc--lead .svc-body h3{ font-size:30px; margin-bottom:12px; }

.also{
  display:flex; align-items:center; gap:14px; margin:30px 0 16px;
  font-family:var(--fm); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#8a7457;
}
.also::before,.also::after{
  content:''; flex:1; height:1px;
  background:repeating-linear-gradient(90deg,rgba(90,70,45,.45) 0 6px,transparent 6px 12px);
}
/*.svc-grid{ display:grid; gap:14px; } BUDD 7 RL change */

/* ---- AI systems ---- */

.unit{
  display:grid; grid-template-columns:250px 1fr;
  background:rgba(255,252,244,.5); border:1px solid rgba(120,95,60,.3);
  border-left:3px solid var(--steel); margin-bottom:14px;
}
/* Natasha and Ruby read as a matched pair, so the two cards share a height
   rather than one being 50px shorter because her write-up is shorter.
   grid-auto-rows:1fr sizes every row to the tallest, so this holds if either
   write-up is rewritten — no fixed height to go stale. Only above the 620px
   stacking breakpoint; below it the cards go full width one after another and
   a shared height would just be dead space. */
.units{ display:grid; gap:14px; }
.units .unit{ margin-bottom:0; }
@media (min-width:621px){
  .units{ grid-auto-rows:1fr; }
  /* with the extra height, push the link to the foot of the shorter card so
     the two "read more" links line up instead of floating mid-card */
  .units .unit-body{ display:flex; flex-direction:column; }
  .units .unit-body > p{ flex:1 0 auto; }
  .units .unit-body > .card-link{ margin-top:auto; align-self:flex-start; }
}

.unit .shot{ border-right:1px solid rgba(120,95,60,.3); min-height:100%; }
.unit-body{ padding:22px 24px; }
.unit-body > p{ margin:0 0 14px; color:var(--ink-2); font-size:15.5px; }
.unit-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.avatar{
  width:46px; height:46px; flex:none; border-radius:50%; overflow:hidden;
  border:2px solid rgba(120,95,60,.4);
}
.avatar img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.unit-id{ min-width:0; }
.unit-name{
  margin:0; font-family:var(--fx); font-weight:700; font-size:21px;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.1;
}
.unit-role{
  margin:0; font-family:var(--fm); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#8a7457;
}
.live{
  margin-left:auto; flex:none; font-family:var(--fm); font-size:9.5px;
  letter-spacing:.14em; color:#2c6535; border:1px solid rgba(44,101,53,.45);
  background:rgba(125,212,106,.18); padding:4px 8px;
}

/* ---- FAQ accordion ---- */

/* two question sets, one visible at a time */
.faq-tabs{ display:flex; flex-wrap:wrap; gap:3px; margin-bottom:14px; }
.faq-tab{
  flex:1 1 220px; cursor:pointer; padding:13px 16px; text-align:left;
  font-family:var(--fx); font-weight:700; font-size:13.5px; letter-spacing:.09em;
  text-transform:uppercase; color:#6d6256;
  background:rgba(255,252,244,.44);
  border:1px solid rgba(120,95,60,.3); border-bottom:3px solid rgba(120,95,60,.32);
  border-radius:0;
  transition:background .2s, color .2s, border-color .2s;
}
.faq-tab i{
  font-style:normal; font-family:var(--fm); font-size:10px;
  letter-spacing:.08em; opacity:.6; margin-left:6px;
}
.faq-tab:hover{ background:rgba(255,253,247,.75); color:var(--ink); }
.faq-tab[aria-selected="true"]{
  color:#fff3e6; background:var(--rust);
  border-color:var(--rust); border-bottom-color:var(--rust-lo);
}
.faq-tab[aria-selected="true"] i{ opacity:.75; }
.faq-list[hidden]{ display:none; }

.faq-list{ display:grid; gap:10px; }
.faq-item{
  background:rgba(255,252,244,.5); border:1px solid rgba(120,95,60,.3);
  border-left:3px solid var(--steel);
  transition:border-left-color .25s, background .25s;
}
.faq-item.open{ border-left-color:var(--rust); background:rgba(255,253,247,.8); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--fx); font-weight:700; font-size:17px; line-height:1.25;
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink);
  transition:color .2s;
}
.faq-q:hover{ color:var(--rust-lo); }
.faq-item.open .faq-q{ color:var(--rust-lo); }
.faq-ico{
  position:relative; flex:none; width:24px; height:24px;
  border:1px solid rgba(120,95,60,.45); background:rgba(255,255,255,.4);
  transition:background .25s, border-color .25s;
}
.faq-ico::before,.faq-ico::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--rust);
  transition:transform .3s var(--ease), background .25s;
}
.faq-ico::before{ width:11px; height:2px; margin:-1px 0 0 -5.5px; }
.faq-ico::after{ width:2px; height:11px; margin:-5.5px 0 0 -1px; }
.faq-item.open .faq-ico{ background:var(--rust); border-color:var(--rust); }
.faq-item.open .faq-ico::before,
.faq-item.open .faq-ico::after{ background:#fff5ec; }
.faq-item.open .faq-ico::after{ transform:scaleY(0); }

.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s ease; }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{
  margin:0 20px; padding:14px 0 18px; font-size:15.5px; color:var(--ink-2);
  border-top:1px solid rgba(120,95,60,.3);
}
.faq-foot{ margin:18px 0 0; }

/* ---- process ---- */

.rungs{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
/* the timing/commitment strip sits under the copy, not beside it — the feed
   column is too narrow to give the description a readable measure otherwise */
.rung{
  display:grid; grid-template-columns:auto 1fr; gap:16px 20px; align-items:start;
  background:rgba(255,252,244,.5); border:1px solid rgba(120,95,60,.3);
  border-left:3px solid var(--rust); padding:22px 24px;
}
.rung-no{
  font-family:var(--fx); font-weight:700; font-size:24px; color:var(--rust);
  border:2px solid rgba(184,73,42,.35); width:46px; height:36px;
  display:grid; place-items:center;
}
.rung-main h3{
  font-family:var(--fx); font-weight:700; font-size:22px;
  text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px;
}
.rung-main p{ margin:0; color:var(--ink-2); font-size:15.5px; }
.rung-meta{
  grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:14px 22px;
  border-top:1px dashed rgba(120,95,60,.4); padding-top:15px;
}

/* steps where the two services diverge carry a track each, side by side */
.rung-tracks{
  grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:0 20px;
  border-top:1px dashed rgba(120,95,60,.4); padding-top:16px;
}
.track{ display:grid; gap:9px; align-content:start; }
.track + .track{ border-left:1px dashed rgba(120,95,60,.38); padding-left:20px; }
.track-tag{
  margin:0; justify-self:start; padding:3px 9px;
  font-family:var(--fm); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#fff3e6; background:var(--rust);
}
.track-tag--web{ background:var(--steel); }
.track-body{ margin:0; font-size:15px; line-height:1.65; color:var(--ink-2); }
.track-meta{ margin:0; display:grid; gap:2px; }
.track-meta b{
  font-family:var(--fx); font-weight:700; font-size:14.5px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
}
.track-meta span{
  font-family:var(--fm); font-size:10.5px; letter-spacing:.05em;
  line-height:1.55; color:#8a7457;
}
.track-meta .rm-lab{
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rust-lo);
}
.rm-when,.rm-cost{ margin:0; display:grid; gap:3px; }
.rm-when b,.rm-cost b{
  font-family:var(--fx); font-weight:700; font-size:15px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
}
.rm-when span,.rm-cost span{
  font-family:var(--fm); font-size:10.5px; letter-spacing:.05em;
  line-height:1.55; color:#8a7457;
}
.rm-lab{
  font-family:var(--fm); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rust-lo);
}

.panel--cta{ text-align:center; }

/* Page buttons: square, flat colour, a slightly darker bottom border.
   Rounded corners and gradients belong to the hardware only — the radio's
   keys and the chat handset — so the two read as different kinds of object. */
.cta{
  display:inline-block; margin:8px 0 14px;
  font-family:var(--fx); font-weight:700; font-size:17px; letter-spacing:.14em;
  background:var(--rust); color:#fff3e6; text-decoration:none;
  padding:14px 34px; border:0; border-bottom:3px solid var(--rust-lo);
  border-radius:0; position:relative;
  box-shadow:0 10px 22px rgba(0,0,0,.26);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
  cursor:pointer;   /* .cta is used on <button> as well as on links */
}
.cta:hover{ background:var(--rust-hi); }
.cta:active{ transform:translateY(2px); box-shadow:0 5px 12px rgba(0,0,0,.26); }
.fineprint{ font-family:var(--fm); font-size:11px; letter-spacing:.1em; color:#8d949a; }
.fineprint a{ color:#d9b98a; text-decoration:underline; text-decoration-color:rgba(217,185,138,.4); }
.fineprint a:hover{ color:var(--lcd-bg); }

/* ---------------- enquiry form ---------------- */

.rig{
  display:grid; grid-template-columns:1fr 1fr; gap:17px 18px;
  text-align:left; margin:28px 0 22px;
}
.rig[hidden]{ display:none; }
.fld{ display:flex; flex-direction:column; gap:7px; min-width:0; border:0; margin:0; padding:0; }
.fld--full{ grid-column:1 / -1; }

.fld > label,.fld > legend{
  font-family:var(--fm); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#9aa2a8; padding:0;
}
.fld > label b{ color:var(--rust-hi); font-weight:400; }

.rig input[type="text"],.rig input[type="email"],.rig select,.rig textarea{
  width:100%; font-family:var(--fb); font-size:15px; color:#f1e8d6;
  background:#1b1e21; border:1px solid #3d4245; border-radius:0;
  padding:11px 13px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.rig ::placeholder{ color:#6b7278; opacity:1; }
.rig input:focus,.rig select:focus,.rig textarea:focus{
  outline:none; background:#202428; border-color:var(--rust);
  box-shadow:0 0 0 1px var(--rust), 0 0 16px rgba(240,163,35,.16);
}
.rig textarea{ min-height:124px; resize:vertical; line-height:1.55; }

.rig select{
  appearance:none; cursor:pointer; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa2a8' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:11px;
}
.rig select option{ background:#1b1e21; color:#f1e8d6; }

/* checkboxes: a lit cell in the amber of the current phosphor mode */
.box-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:11px 18px; margin-top:4px; }
.box{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  font-family:var(--fb); font-size:14.5px; line-height:1.35; color:#ddd6c8;
}
.box input{
  appearance:none; flex:none; width:17px; height:17px; margin:0; cursor:pointer;
  background:#1b1e21; border:1px solid #4d5459;
  display:grid; place-items:center;
  transition:border-color .16s, background .16s;
}
.box input::after{
  content:''; width:9px; height:9px; background:var(--lcd-bg);
  transform:scale(0); transition:transform .16s var(--ease);
}
.box input:checked{ border-color:var(--rust); background:#241a14; }
.box input:checked::after{ transform:scale(1); }
.box:hover input{ border-color:#6f767b; }

.cta--send{ grid-column:1 / -1; justify-self:center; cursor:pointer; margin-top:6px; }
.cta--send:disabled{ opacity:.55; cursor:wait; transform:none; }

.form-state{ text-align:left; padding:18px 20px; margin:26px 0 0; border-left:3px solid; }
.form-state[hidden]{ display:none; }
.form-state h3{
  font-family:var(--fx); font-weight:700; font-size:20px; letter-spacing:.04em;
  text-transform:uppercase; margin:0 0 6px;
}
.form-state p{ margin:0; font-size:15px; }
.form-state--ok{ background:rgba(125,212,106,.1); border-color:#5fbd4e; }
.form-state--ok h3{ color:#9be089; }
.form-state--err{ background:rgba(194,49,39,.13); border-color:var(--red); }
.form-state--err h3{ color:#ff9d8f; }
.form-state a{ color:#ffb08f; }

@media (max-width:620px){
  .rig{ grid-template-columns:1fr; }
  .cta--send{ width:100%; }

  /* the picture goes above the words once the column is too narrow to share */
  .svc,.unit{ grid-template-columns:1fr; }
  .svc .shot,.unit .shot{ border-right:0; border-bottom:1px solid rgba(120,95,60,.3); aspect-ratio:16/9; min-height:0; }
  .svc--lead .shot{ aspect-ratio:16/9; }
  .svc--lead .svc-body h3{ font-size:25px; }
  .rung-meta{ grid-template-columns:1fr; }
  /* the two tracks stack rather than squeeze into half a narrow column */
  .rung-tracks{ grid-template-columns:1fr; gap:16px; }
  .track + .track{
    border-left:0; padding-left:0;
    border-top:1px dashed rgba(120,95,60,.38); padding-top:16px;
  }
  .btn-row .cta{ width:100%; text-align:center; }
}

/* ---------------- comm link: Natasha ---------------- */

.comm{
  position:fixed; right:20px; z-index:400;
  /* --cookie-h is measured in JS and is 0 once the notice is dismissed */
  bottom:calc(20px + var(--cookie-h, 0px));
  width:min(386px,calc(100vw - 40px));
}
.comm[hidden]{ display:none; }

.comm-box{
  display:flex; flex-direction:column;
  max-height:min(624px,calc(100vh - 110px));
  border-radius:14px; overflow:hidden;
  background:linear-gradient(176deg,#4b5155 0%,#3a3f43 7%,#2b2f32 42%,#23272a 100%);
  box-shadow:0 26px 60px rgba(30,18,8,.5), inset 0 2px 0 rgba(255,255,255,.18);
}

.comm-head{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:13px 14px 13px 16px;
  background:linear-gradient(180deg,#3c4144,#2d3134);
  border-bottom:2px solid #15171a;
}
.comm-av{
  width:38px; height:38px; flex:none; border-radius:50%; overflow:hidden;
  border:2px solid var(--lcd-bg); box-shadow:0 0 10px var(--lcd-glow);
  transition:border-color .4s, box-shadow .4s;
}
.comm-av img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.comm-id{ flex:1; min-width:0; }
.comm-name{
  margin:0; font-family:var(--fx); font-weight:700; font-size:18px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--paper); line-height:1.15;
}
.comm-role{
  margin:0; display:flex; align-items:center; gap:6px;
  font-family:var(--fm); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#98a0a6;
}
.comm-dot{
  width:7px; height:7px; flex:none; border-radius:50%;
  background:#5ad07a; box-shadow:0 0 8px rgba(90,208,122,.9);
}
.comm-end{
  flex:none; font-family:var(--fx); font-weight:700; font-size:11px; letter-spacing:.12em;
  color:#fff1ea; cursor:pointer; padding:8px 12px;
  background:var(--red); border:0; border-bottom:3px solid #6e1a13; border-radius:0;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.comm-end:hover{ background:var(--red-hi); }
.comm-end:active{ transform:translateY(2px); box-shadow:0 2px 6px rgba(0,0,0,.4); }

.comm-log{
  flex:1; min-height:170px; overflow-y:auto;
  padding:16px 16px 8px; display:flex; flex-direction:column; gap:13px;
  background:#1b1e21;
  background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
}
.msg{ max-width:88%; }
.msg-who{
  margin:0 0 4px; font-family:var(--fm); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase;
}
.msg-body{ margin:0; font-size:14.5px; line-height:1.55; padding:10px 12px; white-space:pre-wrap; }

.msg--bot .msg-who{ color:var(--lcd-bg); }
.msg--bot .msg-body{
  color:#f3ecdd; border-left:2px solid var(--lcd-bg);
  background:rgba(240,163,35,.1);
  background:color-mix(in srgb, var(--lcd-bg) 12%, transparent);
}
.msg--you{ align-self:flex-end; }
.msg--you .msg-who{ color:#8d949a; text-align:right; }
.msg--you .msg-body{ color:#ddd6c8; background:#2f3336; border-right:2px solid #6a7176; }
.msg--sys .msg-who{ color:#ff9d8f; }
.msg--sys .msg-body{ color:#f0d4c6; background:rgba(194,49,39,.15); border-left:2px solid var(--red); }
.msg--wait .msg-who{ color:var(--lcd-bg); }
.msg--wait .msg-body{
  background:none; padding:2px 0; color:var(--lcd-bg);
  font-family:var(--fm); font-size:12px; letter-spacing:.14em;
}

.comm-bar{
  display:flex; align-items:flex-end; gap:9px;
  padding:12px 14px; background:#23272a; border-top:1px solid #3a3f43;
}
.comm-bar textarea{
  flex:1; resize:none; max-height:112px; width:100%;
  font-family:var(--fb); font-size:14.5px; line-height:1.5; color:#f1e8d6;
  background:#15181a; border:1px solid #3d4245; padding:10px 12px;
  transition:border-color .18s, box-shadow .18s;
}
.comm-bar textarea::placeholder{ color:#6b7278; }
.comm-bar textarea:focus{
  outline:none; border-color:var(--rust);
  box-shadow:0 0 0 1px var(--rust), 0 0 14px rgba(240,163,35,.15);
}
.comm-send{
  flex:none; font-family:var(--fx); font-weight:700; font-size:12px; letter-spacing:.1em;
  color:#e9e5dd; cursor:pointer; padding:11px 14px;
  background:#41464a; border:0; border-bottom:3px solid #191c1e; border-radius:0;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.comm-send:hover:not(:disabled){ background:#4e5559; }
.comm-send:disabled{ opacity:.45; cursor:default; }
.comm-send:not(:disabled):active{ transform:translateY(2px); box-shadow:0 2px 6px rgba(0,0,0,.4); }

.comm-foot{
  margin:0; padding:9px 14px 12px; background:#1b1e21; text-align:center;
  font-family:var(--fm); font-size:9.5px; letter-spacing:.07em; color:#767d83;
}
.comm-foot a{ color:#d9b98a; text-decoration:underline; }

@media (max-width:620px){
  /* full screen, but stop short of the notice rather than covering it */
  .comm{ inset:0 0 var(--cookie-h, 0px) 0; width:auto; }
  .comm-box{ height:100%; max-height:none; border-radius:0; }
}

/* ---------------- archives ---------------- */

.arc{ padding:52px 0 40px; }

/* comms strip: the radio's stand-in on pages that do not carry the unit */
.strip{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 20px; margin:0 0 34px;
  background:linear-gradient(180deg,#2f3437,#23272a);
  border-top:3px solid var(--rust);
  box-shadow:0 14px 30px rgba(50,32,16,.2);
}
.strip-led{
  width:9px; height:9px; flex:none; border-radius:2px;
  background:var(--lcd-bg); box-shadow:0 0 10px var(--lcd-glow);
}
.strip-read{
  flex:1; min-width:190px; margin:0;
  font-family:var(--fm); font-size:12px; letter-spacing:.11em; color:var(--lcd-bg);
}
.strip-sub{
  display:block; margin-top:4px;
  font-size:10.5px; letter-spacing:.12em; color:#98a0a6;
}
.strip-call{
  flex:none; font-family:var(--fx); font-weight:700; font-size:12.5px; letter-spacing:.12em;
  color:#fff3e6; cursor:pointer; padding:11px 18px;
  background:var(--rust); border:0; border-bottom:3px solid var(--rust-lo); border-radius:0;
  transition:transform .12s var(--ease), background .2s;
}
.strip-call:hover{ background:var(--rust-hi); }
.strip-call:active{ transform:translateY(2px); }

.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(318px,1fr)); gap:36px; }
.post{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:rgba(255,252,244,.5);
  border:1px solid rgba(120,95,60,.3); border-left:3px solid var(--steel);
  transition:border-left-color .25s, background .25s;
}
.post:hover{ border-left-color:var(--rust); background:rgba(255,253,247,.82); }

/* ---------------- archive: the band scan ----------------
   Cards arrive as if stations are being tuned in. Every rule below is scoped
   to .post-grid.tuning, a class archive.js adds only once it knows it can
   finish the job — no JS, no IntersectionObserver or reduced motion means the
   class never lands and the cards render normally. Nothing here can hide
   content on its own.

   Only opacity, transform and filter are animated, so nothing reflows and the
   grid never shifts under the reader. */

.post{ position:relative; overflow:hidden; }

.post-grid.tuning .post{ opacity:0; transform:translateY(16px); }

.post-grid.tuning .post.lock{
  animation:postLock .58s var(--ease) forwards;
  will-change:opacity, transform;
}
@keyframes postLock{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* the picture resolving out of a blown-out monochrome signal into the
   resting .shot treatment */
.post-grid.tuning .post .shot img{ filter:saturate(0) contrast(1.9) brightness(1.22); }
.post-grid.tuning .post.lock .shot img{ animation:postResolve .72s var(--ease) .05s forwards; }
@keyframes postResolve{
  from{ filter:saturate(0) contrast(1.9) brightness(1.22); }
  55% { filter:saturate(.5) contrast(1.22) brightness(1.06); }
  to  { filter:saturate(.9) contrast(1.03); }
}

/* static clearing off the picture — the same turbulence as the page grain,
   stepped rather than smooth so it reads as interference, not a fade */
.post .shot::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.post-grid.tuning .post.lock .shot::after{ animation:postStatic .46s steps(5) forwards; }
@keyframes postStatic{ from{ opacity:.5; } to{ opacity:0; } }

/* the amber scanline. A full-card overlay carrying a 2px line at its middle,
   translated -50% to 50% — percentages resolve against the card's own height,
   so the sweep works at any card size without measuring anything in JS. */
.post-grid.tuning .post.lock::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg,
    transparent 0 calc(50% - 1px),
    var(--lcd-bg) calc(50% - 1px) calc(50% + 1px),
    transparent calc(50% + 1px) 100%);
  animation:postSweep .58s var(--ease) forwards;
}
@keyframes postSweep{
  from{ transform:translateY(-50%); opacity:0; }
  22% { opacity:.85; }
  78% { opacity:.85; }
  to  { transform:translateY(50%); opacity:0; }
}

/* the left border flicks to rust as the station locks, then settles to steel */
.post-grid.tuning .post.lock{ animation:postLock .58s var(--ease) forwards, postEdge .9s var(--ease) forwards; }
@keyframes postEdge{
  0%  { border-left-color:var(--steel); }
  35% { border-left-color:var(--rust); }
  100%{ border-left-color:var(--steel); }
}

@media (prefers-reduced-motion: reduce){
  /* belt and braces — archive.js already returns early, but if .tuning ever
     lands some other way the cards must still be visible and still */
  .post-grid.tuning .post{ opacity:1; transform:none; animation:none; }
  .post-grid.tuning .post .shot img{ filter:saturate(.9) contrast(1.03); }
  .post-grid.tuning .post.lock::after,
  .post-grid.tuning .post.lock .shot::after{ display:none; }
}
.post .shot{ display:block; aspect-ratio:16/9; border-bottom:1px solid rgba(120,95,60,.3); }
.post-body{ display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.post-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.post-tags span{
  font-family:var(--fm); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#5d6268; border:1px solid rgba(120,95,60,.42); padding:3px 7px;
  background:rgba(255,255,255,.35);
}
.post-by{
  margin:0 0 9px; font-family:var(--fm); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:#8a7457;
}
.post h2{
  margin:0 0 10px; font-family:var(--fx); font-weight:700; font-size:20px;
  line-height:1.16; letter-spacing:.02em; text-transform:uppercase; color:var(--ink);
}
.post-body > p{ margin:0 0 15px; font-size:14.5px; color:var(--ink-2); flex:1; }
.post-more{
  font-family:var(--fm); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--rust-lo);
}
.post:hover .post-more{ color:var(--rust); }

@media (max-width:560px){
  .arc{ padding-top:30px; }
  .strip{ padding:13px 16px; }
  .strip-call{ width:100%; }
}

/* ---------------- article pages ---------------- */

.wrap--read{ width:min(772px,calc(100% - 44px)); }
.art{ padding:40px 0 48px; }

.crumbs{
  margin:0 0 20px; font-family:var(--fm); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#8a7457;
}
.crumbs a{ color:var(--rust-lo); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs i{ font-style:normal; opacity:.45; margin:0 7px; }

.art-head{ margin-bottom:24px; }
.art-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.art-tags span{
  font-family:var(--fm); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#5d6268; border:1px solid rgba(120,95,60,.42); padding:3px 7px;
  background:rgba(255,255,255,.35);
}
.art-head h1{
  margin:14px 0 16px; font-family:var(--fx); font-weight:700;
  font-size:clamp(29px,4.8vw,46px); line-height:1.06; letter-spacing:.01em;
  text-transform:uppercase; color:var(--ink);
}
.art-head h1 span{ display:block; color:var(--rust); }
.art-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 9px;
  font-family:var(--fm); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#8a7457;
}
.art-meta i{ font-style:normal; opacity:.45; }

.art-shot{ margin:0 0 28px; }
.art-shot .shot{ display:block; aspect-ratio:16/9; border:1px solid rgba(120,95,60,.35); }

.art-body{
  background:rgba(255,252,244,.62);
  border:1px solid rgba(120,95,60,.3); border-top:3px solid var(--rust);
  padding:32px 36px 36px;
}
.art-body > p{ margin:0 0 20px; font-size:17.5px; line-height:1.75; color:var(--ink-2); }
.art-body h2{
  margin:36px 0 15px; padding-top:17px;
  border-top:1px dashed rgba(120,95,60,.42);
  font-family:var(--fx); font-weight:700; font-size:26px; line-height:1.15;
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
}
.art-body > *:first-child{ margin-top:0; }
.art-body h2:first-child{ border-top:0; padding-top:0; }
.art-body a{ color:var(--rust-lo); text-decoration:underline; text-decoration-color:rgba(141,52,25,.4); }
.art-body a:hover{ color:var(--rust); }
.art-body strong{ color:var(--ink); font-weight:600; }
.art-body img{ max-width:100%; height:auto; }
.art-body figure{ margin:28px 0; }
.art-body figure img{ display:block; width:100%; border:1px solid rgba(120,95,60,.35); }
.art-body figcaption{
  margin-top:9px; font-family:var(--fm); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:#8a7457; line-height:1.6;
}

/* in-body components carried over from the old posts */
.pull-quote{
  margin:28px 0; padding:20px 24px; color:#ddd6c8;
  background:linear-gradient(170deg,#2f3336,#26292c);
  border-left:3px solid var(--lcd-bg);
}
.pull-quote p{ margin:0 0 12px; font-size:16.5px; line-height:1.65; }
.pull-quote p:last-child{ margin-bottom:0; }

.highlight-box{
  margin:26px 0; padding:18px 22px;
  background:rgba(240,163,35,.13); border-left:3px solid var(--lcd-bg);
}
.highlight-box p{ margin:0 0 12px; font-size:16.5px; line-height:1.7; }
.highlight-box p:last-child{ margin-bottom:0; }

/* quoted source: rust rule on the paper, mono attribution */
.art-body blockquote{
  margin:26px 0; padding:4px 0 4px 22px;
  border-left:3px solid var(--rust);
}
.art-body blockquote p{
  margin:0 0 10px; font-size:19px; line-height:1.6;
  font-style:italic; color:var(--ink);
}
.art-body blockquote cite{
  display:block; font-family:var(--fm); font-style:normal; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#8a7457;
}
.art-body blockquote cite em{ font-style:normal; }

.prompt-block,.prompt-box{
  margin:26px 0; padding:18px 20px; color:#e7dfd0; background:#1b1e21;
  border-left:3px solid var(--steel);
  font-family:var(--fm); font-size:13.5px; line-height:1.75;
}
.prompt-label,.prompt-box-label{
  display:block; margin-bottom:11px; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lcd-bg);
}
.prompt-block a,.prompt-box a{ color:var(--lcd-bg); }

.move-list{ margin:26px 0; display:grid; gap:12px; }
.move-item{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  background:rgba(255,255,255,.42); border:1px solid rgba(120,95,60,.3); padding:16px 18px;
}
.move-num{
  font-family:var(--fx); font-weight:700; font-size:21px; color:var(--rust);
  border:2px solid rgba(184,73,42,.35); width:40px; height:32px;
  display:grid; place-items:center;
}
.move-item p{ margin:0; font-size:16px; line-height:1.7; }

.img-pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0; }
.img-pair figure{ margin:0; }

.instagram-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:10px; margin:26px 0;
}
.instagram-grid img{ display:block; width:100%; border:1px solid rgba(120,95,60,.35); }

.file-compare{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin:26px 0; padding:16px 18px; background:#1b1e21;
  border-left:3px solid var(--steel);
}
.file-compare .old,.file-compare .new{ font-family:var(--fm); font-size:13px; padding:8px 12px; }
.file-compare .old{ color:#9aa2a8; background:#23272a; text-decoration:line-through; }
.file-compare .new{ color:var(--lcd-bg); background:rgba(240,163,35,.13); }
.file-compare .arrow{
  font-family:var(--fm); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#8a7457;
}

.art-cta{
  margin-top:28px; padding:30px 32px; text-align:center; color:#ddd6c8;
  background:linear-gradient(170deg,#2f3336,#26292c); border-top:3px solid var(--rust);
}
.art-cta h2{
  margin:0 0 12px; font-family:var(--fx); font-weight:700; font-size:26px;
  letter-spacing:.03em; text-transform:uppercase; color:#f1e8d6;
}
.art-cta p{ margin:0 0 18px; }
.art-back{ margin:26px 0 0; }

@media (max-width:560px){
  .art{ padding-top:26px; }
  .art-body{ padding:24px 20px 26px; }
  .art-body > p{ font-size:16.5px; }
  .art-body h2{ font-size:22px; }
  .img-pair{ grid-template-columns:1fr; }
  .move-item{ gap:12px; padding:14px; }
}

/* ---------------- privacy policy ---------------- */

.policy-updated{
  display:inline-block; margin:0 0 6px;
  font-family:var(--fm); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#8a7457; background:rgba(255,255,255,.35);
  border:1px solid rgba(120,95,60,.42); padding:5px 10px;
}
.policy-block h2{
  margin:0 0 14px; font-family:var(--fx); font-weight:700; font-size:23px;
  line-height:1.15; letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
}
.policy-block p{ margin:0 0 17px; font-size:16.5px; line-height:1.75; color:var(--ink-2); }
.policy-block p:last-child{ margin-bottom:0; }
.policy-block ul{ margin:0 0 17px; padding-left:20px; }
.policy-block li{
  margin-bottom:9px; font-size:16.5px; line-height:1.7; color:var(--ink-2);
  padding-left:4px;
}
.policy-block li::marker{ color:var(--rust); }
.policy-block strong{ color:var(--ink); font-weight:600; }
.policy-divider{
  border:0; border-top:1px dashed rgba(120,95,60,.42); margin:28px 0;
}
.policy-contact-link{
  color:var(--rust-lo); text-decoration:underline;
  text-decoration-color:rgba(141,52,25,.4);
}
.policy-contact-link:hover{ color:var(--rust); }

@media (max-width:560px){
  .policy-block h2{ font-size:20px; }
  .policy-block p,.policy-block li{ font-size:16px; }
}

/* ---------------- 404: a dead frequency ---------------- */

.e404{ padding:54px 0 66px; }

.e404-screen{
  position:relative; overflow:hidden;
  max-width:548px; margin:0 auto 26px; padding:24px 28px 22px;
  color:var(--lcd-ink); font-family:var(--fm);
  background:linear-gradient(170deg,var(--lcd-bg),var(--lcd-bg-2));
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.32),
    inset 0 14px 28px rgba(0,0,0,.18),
    0 0 34px var(--lcd-glow),
    0 20px 40px rgba(50,32,16,.28);
}
.e4-head{
  margin:0 0 13px; padding-bottom:11px; font-size:13.5px; letter-spacing:.06em;
  border-bottom:2px solid var(--lcd-ink);
}
.e4-row{ margin:0 0 6px; font-size:13px; letter-spacing:.04em; }
.e4-code{
  margin:10px 0 0; text-align:right; font-family:var(--fx); font-weight:700;
  font-size:clamp(64px,13vw,96px); line-height:.86; letter-spacing:.03em;
}
.e4-static{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
.e4-scan{
  position:absolute; inset:0; pointer-events:none; opacity:.3;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);
}

.e404-body{ max-width:640px; margin:0 auto; text-align:center; }
.e404-body .eyebrow{ color:var(--lcd-bg); }
.e404-body h1{
  margin:0 0 14px; font-family:var(--fx); font-weight:700;
  font-size:clamp(27px,4.4vw,40px); line-height:1.1;
  letter-spacing:.02em; text-transform:uppercase; color:#f1e8d6;
}
.e404-body .btn-row{ justify-content:center; margin-top:22px; }

@media (max-width:560px){
  .e404{ padding:32px 0 44px; }
  .e404-screen{ padding:20px 20px 18px; }
}

/* ---------------- cookie notice ---------------- */

/* display:flex would beat the UA's [hidden]{display:none}, so state it first */
.cookie[hidden]{ display:none; }
.cookie{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:13px 22px;
  background:linear-gradient(180deg,#2f3437 0%,#23272a 100%);
  border-top:2px solid var(--rust);
  box-shadow:0 -10px 30px rgba(30,18,8,.4);
}
.cookie-led{
  width:9px; height:9px; flex:none; border-radius:2px;
  background:var(--lcd-bg); box-shadow:0 0 10px var(--lcd-glow);
  transition:background .4s, box-shadow .4s;
}
.cookie-txt{
  flex:1; min-width:210px; margin:0;
  font-family:var(--fm); font-size:11.5px; line-height:1.7; letter-spacing:.04em;
  color:#a9b0b6;
}
.cookie-txt b{
  margin-right:10px; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lcd-bg);
}
.cookie-txt a{ color:#d9b98a; text-decoration:underline; text-decoration-color:rgba(217,185,138,.4); }
.cookie-txt a:hover{ color:var(--lcd-bg); }
.cookie-ok{
  flex:none; font-family:var(--fx); font-weight:700; font-size:12px; letter-spacing:.12em;
  color:#e9e5dd; cursor:pointer; padding:11px 20px;
  background:#41464a; border:0; border-bottom:3px solid #191c1e; border-radius:0;
  box-shadow:0 5px 12px rgba(0,0,0,.38);
  transition:transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.cookie-ok:hover{ background:#4e5559; }
.cookie-ok:active{ transform:translateY(2px); box-shadow:0 2px 7px rgba(0,0,0,.38); }

/* Refusing has to be as easy as accepting, so this is the same size and shape
   as .cookie-ok — outlined rather than filled, not smaller or tucked away. */
.cookie-no{
  flex:none; font-family:var(--fx); font-weight:700; font-size:12px; letter-spacing:.12em;
  color:#cfd4d8; cursor:pointer;
  /* 1px off the top padding pays for the top border .cookie-ok does not carry,
     so both buttons end up exactly the same height */
  padding:10px 19px 11px;
  background:none; border:1px solid #5a6167; border-bottom:3px solid #4a5156; border-radius:0;
  transition:background .2s, color .2s, border-color .2s;
}
.cookie-no:hover{ background:#343a3e; color:#e9e5dd; border-color:#6d757b; }
.cookie-no:active{ transform:translateY(2px); }

@media (max-width:560px){
  .cookie{ padding:12px 16px; gap:10px; }
  .cookie-ok, .cookie-no{ flex:1 1 calc(50% - 5px); }
}

/* ---------------- footer ---------------- */

.site-foot{
  background:#212426; color:#7f868c; border-top:2px solid #15171a;
  /* clear the fixed notice so the footer is never buried under it */
  padding:22px 0 calc(22px + var(--cookie-h, 0px));
}
.foot-inner{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.site-foot p{ margin:0; font-family:var(--fm); font-size:11px; letter-spacing:.1em; }
.site-foot a{ color:#d9b98a; text-decoration:underline; text-decoration-color:rgba(217,185,138,.4); }
.site-foot a:hover{ color:var(--lcd-bg); }

/* ---------------- power-off state ---------------- */

body[data-power="off"] .feed,
body[data-power="off"] .device-hint{ filter:grayscale(.85) contrast(.85) brightness(.9); opacity:.5; transition:filter .5s, opacity .5s; }
.feed,.device-hint{ transition:filter .5s, opacity .5s; }

/* ---------------- responsive ---------------- */

@media (max-width:980px){
  .console{ grid-template-columns:1fr; gap:34px; padding-top:34px; }
  .device-stick{ position:static; display:flex; flex-direction:column; align-items:center; }
  .device-hint{ max-width:420px; }
  .head-sub{ display:none; }
}
@media (max-width:560px){
  .wrap{ width:calc(100% - 28px); }
  /* three controls plus the wordmark is tight on a phone — shrink the chrome
     rather than letting the brand name wrap */
  .head-inner{ gap:10px; }
  .head-id{ gap:8px; }
  .head-name{ font-size:18px; }
  .head-tools{ gap:8px; }
  .head-nav{ gap:6px; }
  .tool{ font-size:10px; height:26px; padding:0 8px; letter-spacing:.08em; }
  .chan-head{ gap:12px; }
  .chan-no{ font-size:26px; }
  .panel{ padding:24px 20px; }
  .spec th{ width:auto; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .head-mark,.dead-dot{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* ---- AI image disclosure (EU AI Act Art. 50) ----
   add <span class="ai-tag" aria-hidden="true">AI-generated image</span> inside any .shot
   holding an AI image; the alt text carries the disclosure for screen readers */
.ai-tag{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-family:'Share Tech Mono', monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; line-height:1;
  color:#f3ede2; background:rgba(20,22,24,.72);
  padding:5px 8px; border-radius:3px; pointer-events:none;
}