/* ============================================================================
   newmedley.com — THEME: "ANALOGUE FUTURE"
   ----------------------------------------------------------------------------
   A PROPOSAL. Home page only, pending approval. The default remains theme.css.

   The brief: retro-cool that winds up looking futuristic. 1984, Blade Runner
   billboards, dystopian signage. The trap in that brief is cosplay — neon
   gradients and scanlines pasted over a SaaS page, which reads as a filter, not
   a design.

   So this commits to a specific artefact instead: a PUBLIC NOTICE from a future
   that already had its industrial age. Amber phosphor on near-black, the palette
   of a vacuum-fluorescent display. Type set like municipal signage — condensed,
   uppercase, registered with a serial number. The layout is a form you are being
   handed, not a landing page selling to you.

   Why it fits rather than decorates: the company's actual argument is refusal.
   Where your work lives, what it may not do, what we decline to claim. Institutional
   type is the honest voice for refusal — and turning our own restraint into
   dystopian signage is a joke the reader is in on, not one played on them.

   Legibility is not sacrificed for atmosphere. Body copy stays in a humanist face
   at a real reading measure; the retro-futurism lives in the CHROME — masthead,
   rules, labels, the scanline — never in the paragraphs.
   ============================================================================ */

:root{
  --void:#07090b;          /* not pure black; a CRT never is */
  --panel:#0d1114;
  --phos:#ffb547;          /* amber phosphor */
  --phos-dim:#8a6326;
  --ice:#7fd4d0;           /* the one cold accent, used sparingly */
  --ink:#dfe4e2;
  --dim:#7b8785;
  --rule:#1b2226;
  --alarm:#e0533d;
  --measure:34rem;
  --sans:"Helvetica Neue",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cond:"Oswald","Arial Narrow","Helvetica Neue Condensed",var(--sans);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
/* Single-theme by design: a dystopian notice does not have a light mode. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--ink);
  font:1.0625rem/1.7 var(--serif);
  background-image:
    radial-gradient(120% 80% at 50% -20%, rgba(255,181,71,.09), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}

.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}

/* ── MASTHEAD: a sign bolted to a wall, not a hero ─────────────────────────── */
header.mast{border-bottom:1px solid var(--rule);background:linear-gradient(180deg,rgba(255,181,71,.05),transparent)}
.mast .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;padding-block:1.5rem}
.brand{
  font:600 1.55rem/1 var(--cond);letter-spacing:.22em;text-transform:uppercase;
  color:var(--phos);text-decoration:none;text-shadow:0 0 22px rgba(255,181,71,.35);
}
.brand span{color:var(--ice);text-shadow:0 0 22px rgba(127,212,208,.3)}
.tag{
  font:.7rem/1.5 var(--mono);color:var(--phos-dim);letter-spacing:.2em;text-transform:uppercase;
}

/* ── TRACK LISTING: a directory board ──────────────────────────────────────── */
nav.tracks{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:5;
           background:rgba(7,9,11,.93);backdrop-filter:blur(6px)}
nav.tracks .wrap{display:flex;gap:1.6rem;overflow-x:auto;padding-block:.75rem;scrollbar-width:none}
nav.tracks .wrap::-webkit-scrollbar{display:none}
nav.tracks a{
  font:.72rem/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;white-space:nowrap;padding-block:.3rem;
  border-bottom:2px solid transparent;transition:color .15s
}
nav.tracks a:hover{color:var(--phos)}
nav.tracks a.on{color:var(--phos);border-bottom-color:var(--phos)}

main{padding-block:3.5rem 4rem}
main .wrap{max-width:calc(var(--measure) + 4rem)}

/* ── THE NOTICE ────────────────────────────────────────────────────────────── */
h1{
  font:500 clamp(2rem,5.6vw,3.4rem)/1.05 var(--cond);
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
  margin:0 0 1.4rem;text-wrap:balance;
}
h1::after{
  content:"";display:block;width:5rem;height:3px;margin-top:1.1rem;
  background:var(--phos);box-shadow:0 0 16px rgba(255,181,71,.5)
}
h2{
  font:500 .84rem/1.4 var(--cond);letter-spacing:.2em;text-transform:uppercase;
  color:var(--phos);margin:3.2rem 0 .9rem;
}
h3{font:600 1rem/1.45 var(--sans);margin:2rem 0 .5rem;color:var(--ink)}
p{margin:0 0 1.1rem;max-width:var(--measure);color:var(--ink)}
strong{color:#fff;font-weight:600}
em{color:var(--ice);font-style:italic}
a{color:var(--ice);text-underline-offset:.2em;text-decoration-thickness:.06em}
a:hover{color:var(--phos)}
ul{margin:0 0 1.1rem;padding-left:0;max-width:var(--measure);list-style:none}
li{margin-bottom:.55rem;padding-left:1.4rem;position:relative}
li::before{content:"—";position:absolute;left:0;color:var(--phos-dim)}
hr{border:0;border-top:1px solid var(--rule);margin:3rem 0}
code{font:.85em/1 var(--mono);color:var(--phos);background:rgba(255,181,71,.07);
     padding:.12em .38em;border:1px solid rgba(255,181,71,.18)}

/* The one-sentence thesis, set as the notice it is. */
blockquote{
  margin:2rem 0;padding:1.3rem 1.5rem;max-width:var(--measure);
  background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--phos);
  color:var(--ink);font:400 1.14rem/1.6 var(--serif);
  box-shadow:inset 0 0 40px rgba(255,181,71,.045)
}
blockquote p{margin-bottom:.7rem}
blockquote p:last-child{margin-bottom:0}

.scroll{overflow-x:auto;margin:0 0 1.6rem;border:1px solid var(--rule)}
table{border-collapse:collapse;font:.88rem/1.5 var(--sans);min-width:100%;background:var(--panel)}
th,td{text-align:left;padding:.6rem .85rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:500 .68rem/1.4 var(--cond);letter-spacing:.16em;text-transform:uppercase;
   color:var(--phos-dim);background:rgba(255,181,71,.04)}
tr:last-child td{border-bottom:0}

/* ── FOOTER: the stamp at the bottom of the form ───────────────────────────── */
footer{border-top:1px solid var(--rule);padding-block:2.2rem 3.5rem;
       font:.82rem/1.7 var(--sans);color:var(--dim);
       background:linear-gradient(0deg,rgba(255,181,71,.035),transparent)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:space-between}
footer a{color:var(--dim)}
footer a:hover{color:var(--phos)}
.src{font:.68rem/1.6 var(--mono);color:var(--phos-dim);letter-spacing:.08em;opacity:.8}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:640px){
  .brand{font-size:1.25rem;letter-spacing:.16em}
  body{background-image:radial-gradient(120% 80% at 50% -20%, rgba(255,181,71,.08), transparent 60%)}
}

/* ============================================================================
   THE MECHANISM — motion that means something
   ----------------------------------------------------------------------------
   Every moving thing here states a fact the copy also states. The gear idles
   because the system is idle. The agents pulse OUT OF PHASE because they are
   separate parts, not one blob. The carriage runs left to right once, because a
   project has a direction. Decoration that agrees with the argument.

   All of it collapses under prefers-reduced-motion: the diagram still reads,
   it simply stops moving. A page that is unusable without animation is a page
   that excluded someone to look busy.
   ============================================================================ */

.mech{margin:2.5rem 0 3.5rem;padding:1.8rem 0 1.4rem;border-top:1px solid var(--rule);
      border-bottom:1px solid var(--rule);background:
      radial-gradient(80% 120% at 22% 50%, rgba(255,181,71,.05), transparent 65%)}
.mech-stage{display:flex;gap:2.5rem;align-items:center;flex-wrap:wrap}

/* ── gear ─────────────────────────────────────────────────────────────────── */
.gear-btn{background:none;border:0;padding:0;cursor:pointer;display:flex;
          flex-direction:column;align-items:center;gap:.6rem;color:inherit}
.gear{width:118px;height:118px;overflow:visible}
.gear .tooth,.gear .hub{fill:var(--phos-dim)}
.gear .ring{fill:none;stroke:var(--phos);stroke-width:2.5;opacity:.85}
.gear .ring.thin{stroke:var(--phos-dim);stroke-width:1.2;stroke-dasharray:5 7}
.gear .hub{fill:var(--phos);filter:drop-shadow(0 0 10px rgba(255,181,71,.6))}
.gear-spin{transform-origin:60px 60px;animation:turn 24s linear infinite}
.gear-btn:hover .gear-spin{animation-duration:5s}
.gear-btn.engaged .gear-spin{animation-duration:2.2s}
.gear .pulse{fill:none;stroke:var(--phos);stroke-width:1;opacity:0;
             transform-origin:60px 60px;animation:breathe 3.4s ease-out infinite}
.gear-btn:focus-visible{outline:2px solid var(--ice);outline-offset:8px}
.gear-label{font:500 .68rem/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;
            color:var(--phos-dim)}
.gear-btn:hover .gear-label,.gear-btn.engaged .gear-label{color:var(--phos)}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes breathe{0%{opacity:.5;transform:scale(.86)}70%,100%{opacity:0;transform:scale(1.2)}}

/* ── agents: separate parts, deliberately out of phase ────────────────────── */
.agents{flex:1;min-width:260px}
.stave{width:100%;max-width:340px;height:auto}
.staveline{stroke:var(--rule);stroke-width:1}
.node circle{fill:var(--ice);opacity:.9}
.node .halo{fill:none;stroke:var(--ice);stroke-width:1.5;transform-origin:center;
            animation:wait 4.5s ease-out infinite}
.node.n2 .halo{animation-delay:.9s}  .node.n3 .halo{animation-delay:1.8s}
.node.n4 .halo{animation-delay:2.7s} .node.n5 .halo{animation-delay:3.6s}
.node.n2 circle{fill:var(--phos)}    .node.n4 circle{fill:var(--phos)}
.node.n2 .halo{stroke:var(--phos)}   .node.n4 .halo{stroke:var(--phos)}
@keyframes wait{0%{opacity:.8;transform:scale(1)}60%,100%{opacity:0;transform:scale(2.6)}}
.agents-cap{font:.78rem/1.6 var(--sans);color:var(--dim);margin-top:.7rem;max-width:32rem}

/* ── the journey ──────────────────────────────────────────────────────────── */
.journey{margin-top:1.8rem;opacity:0;transform:translateY(-6px);
         transition:opacity .3s ease,transform .3s ease}
.journey.run{opacity:1;transform:none}
.track{width:100%;height:auto}
.rail{stroke:var(--rule);stroke-width:2}
.rail.lit{stroke:var(--phos);stroke-width:2;stroke-dasharray:680;stroke-dashoffset:680}
.journey.run .rail.lit{animation:draw 2.6s ease-out forwards}
.station circle{fill:var(--void);stroke:var(--phos-dim);stroke-width:2}
.station .ping{fill:none;stroke:var(--phos);transform-origin:center;opacity:0}
.journey.run .s1 .ping{animation:ping .8s ease-out .1s}
.journey.run .s2 .ping{animation:ping .8s ease-out .8s}
.journey.run .s3 .ping{animation:ping .8s ease-out 1.5s}
.journey.run .s4 .ping{animation:ping .8s ease-out 2.3s}
.carriage{fill:var(--ice);filter:drop-shadow(0 0 8px rgba(127,212,208,.8))}
.journey.run .carriage{animation:travel 2.6s ease-in-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes travel{to{transform:translateX(680px)}}

.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.1rem;
        list-style:none;padding:0;margin:1.2rem 0 0;counter-reset:st}
.legend li{padding-left:0;position:relative;counter-increment:st}
.legend li::before{content:counter(st,decimal-leading-zero);display:block;
                   font:500 .66rem/1 var(--mono);letter-spacing:.18em;color:var(--phos);
                   margin-bottom:.4rem}
.legend b{display:block;font:500 .82rem/1.3 var(--cond);letter-spacing:.14em;
          text-transform:uppercase;color:var(--ink);margin-bottom:.3rem}
.legend span{font:.82rem/1.55 var(--sans);color:var(--dim)}

@media(prefers-reduced-motion:reduce){
  .gear-spin,.gear .pulse,.node .halo{animation:none!important}
  .journey{opacity:1;transform:none;transition:none}
  .rail.lit{stroke-dashoffset:0}
  .carriage{transform:translateX(680px)}
}
@media(max-width:640px){.mech-stage{gap:1.5rem}.gear{width:90px;height:90px}}

/* ── ROOM TO BREATHE ───────────────────────────────────────────────────────
   The measure was set for a document. This page is a HUB -- it is scanned and
   navigated, not read start to finish -- so it gets a wider frame and more air.
   Prose still caps at a readable line length inside it; widening the container
   is not licence to widen the paragraphs. */
main .wrap{max-width:74rem}
main{padding-block:4.5rem 5rem}
.mech{margin:3.5rem 0 4rem;padding:2.6rem 0 2rem}
.mech-stage{gap:4rem}
h1{max-width:20ch}
.lede p:first-of-type{font-size:1.24rem;line-height:1.62;color:#eef2f0;max-width:40rem}
blockquote{max-width:44rem;padding:1.6rem 1.9rem}
p,ul{max-width:40rem}

/* ── THE HUB: doors, not a list of links ──────────────────────────────────── */
.hub{margin:4rem 0 1rem}
.hub-head{font:500 .74rem/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;
          color:var(--phos-dim);margin-bottom:1.4rem}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
       background:var(--rule);border:1px solid var(--rule)}
.door{display:block;background:var(--void);padding:1.7rem 1.5rem 1.5rem;text-decoration:none;
      position:relative;transition:background .2s;overflow:hidden}
.door:hover{background:var(--panel)}
.door::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
             background:var(--phos);transition:width .35s ease}
.door:hover::after{width:100%}
.door .no{font:500 .64rem/1 var(--mono);letter-spacing:.2em;color:var(--phos);display:block;
          margin-bottom:.9rem}
.door b{display:block;font:500 1.02rem/1.25 var(--cond);letter-spacing:.1em;text-transform:uppercase;
        color:var(--ink);margin-bottom:.5rem}
.door span{display:block;font:.84rem/1.55 var(--sans);color:var(--dim)}
.door .arrow{position:absolute;right:1.3rem;top:1.5rem;color:var(--phos-dim);
             transition:transform .25s,color .25s;font:1rem/1 var(--sans)}
.door:hover .arrow{transform:translateX(4px);color:var(--phos)}
.door.flag b{color:var(--phos)}