/* working-history.html page stylesheet. Extracted verbatim from the page inline style block; linked at the same
   position in <head> (after hero.css, before motion.css) so the cascade order is unchanged. */
/* Working History — the eight hand-built websites, on the same dark/gold monograph system as About, Stories and the
   Register. Scoped under .wh. The page's own honesty is kept as written ("not recorded" stays "not recorded"; context about
   the web's eras is labelled as context). No drones; the only motion is the shared fade-and-rise reveal (script-added, off
   under reduced motion) and hover states. The interactive pieces the stripped scripts used to drive (Grid/Filmstrip,
   the strata jump buttons, the decade chips, the period-size live previews) are restored below. */
:root{ --rule:#4d4635; }
.wh{ max-width:1360px; margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1 }
/* Spectrum wash: the Archive Scale colour bar (--pigment-strip) as a soft glow behind the top of the page.
   It stays off the text: at 1440px+ it sits in the right-hand margin, clear of the title (which ends near x=1154
   at 1440); below that, where the title spans the width, it is a short band above the first line. */
.wh::before{ content:''; position:absolute; top:0; left:0; right:0; height:160px; z-index:-1;
  background:var(--pigment-strip, none) 100% 0 / 138.5% 100% no-repeat; filter:blur(36px); opacity:.3;
  mix-blend-mode:screen; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);
  animation:heroSpectrumIn 1.6s ease-out both }
@media(min-width:1440px){
  .wh::before{ left:84%; height:520px; opacity:.35;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 100%),linear-gradient(to right,transparent 0%,#000 40%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,#000 0%,transparent 100%),linear-gradient(to right,transparent 0%,#000 40%);
    mask-composite:intersect }
}
@keyframes heroSpectrumIn{ from{opacity:0} to{opacity:.35} }
@media (prefers-reduced-motion:reduce){ .wh::before{ animation:none } }
/* Closeup legibility (1440px+, where the closeup shows): full strength in the left margin (ending a little before the text
   column), ghosted behind the text column and fading out to its right, so no page text sits on a bright image at any scroll position. The strip is
   shifted 20% off-screen, so a screen x maps to (x + 20% of the strip width) along the image. --wx is the text
   column's left edge in that space: the column starts at max(90px, 50vw - 630px). */
@media(min-width:1440px){
  html body .corner-closeup img{
    --wx:calc(max(90px, 50vw - 630px) + clamp(480px,34vw,700px) * .2);
    -webkit-mask-image:linear-gradient(to right,#000 min(calc(var(--wx) - 66px),55%),rgba(0,0,0,.28) min(calc(var(--wx) - 10px),80%),transparent 100%);
    mask-image:linear-gradient(to right,#000 min(calc(var(--wx) - 66px),55%),rgba(0,0,0,.28) min(calc(var(--wx) - 10px),80%),transparent 100%) }
}
.wh main{ padding-bottom:96px }
.wh main > *{ max-width:1180px }
.wh .mono,.wh .breadcrumb,.wh .eyebrow{ font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey) }
.wh .eyebrow{ color:var(--accent); display:block; margin:0 0 12px }
.wh a:focus-visible,.wh button:focus-visible,.wh [role="button"]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.wh .breadcrumb{ padding-top:88px; margin:0 0 28px }
.wh .breadcrumb a{ color:var(--grey); text-decoration:none; border-bottom:1px solid transparent }
.wh .breadcrumb a:hover{ color:var(--accent); border-bottom-color:var(--accent) }

/* hero */
.hero{ padding:8px 0 56px; border-bottom:1px solid var(--rule) }
.hero .chip{ display:inline-block; padding:4px 10px; border:1px solid var(--rule); background:#201f21; color:#e9c176 }
.hero h1{ font-family:Newsreader,Georgia,serif; font-weight:300; font-size:clamp(38px,6.4vw,76px); line-height:1.02; letter-spacing:-.02em; color:var(--ink); margin:18px 0 14px; max-width:14em }
.hero h1 em{ font-style:italic; font-weight:400; color:#f2ca50 }
.hero .sub{ font-family:Newsreader,Georgia,serif; font-size:clamp(20px,2.2vw,26px); line-height:1.4; color:#d0c5af; margin:0 0 30px; max-width:32em }
.hero .sub b{ font-weight:400; color:#f2ca50 }
.lead{ font-family:'EB Garamond',Georgia,serif; font-size:clamp(20px,1.6vw + .5rem,23px); line-height:1.65; color:#d0c5af; max-width:56ch; margin:0 0 28px }
.legend{ margin:0; max-width:46em; padding:24px clamp(20px,3vw,34px); background:#161618; border:1px solid #2e2e33; border-left:3px solid #f2ca50 }
.legend .mono{ display:block; margin-bottom:10px; color:#f2ca50 }
.legend p{ font-family:Newsreader,Georgia,serif; font-style:italic; font-size:clamp(20px,2.2vw,26px); line-height:1.4; color:var(--ink); margin:0 0 14px }
.legend small{ display:block; font-family:'EB Garamond',Georgia,serif; font-style:normal; font-size:17px; line-height:1.5; color:var(--grey) }

/* section scaffolding */
.wh section.block{ padding:72px 0 0; scroll-margin-top:96px }
.wh h2.title{ font-family:Newsreader,Georgia,serif; font-weight:300; font-size:clamp(30px,4vw,44px); line-height:1.12; letter-spacing:-.015em; color:var(--ink); margin:0 0 14px }
.wh .intro{ font-family:'EB Garamond',Georgia,serif; font-size:19px; line-height:1.65; color:var(--grey); max-width:62ch; margin:0 0 28px }

/* strata: the web's eras. Each is a button that jumps to the matching site(s). */
.strata{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px }
@media(min-width:760px){ .strata{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:1100px){ .strata{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
.strata-layer{ position:relative; display:flex; flex-direction:column; gap:8px; padding:20px 18px; background:#161618; border:1px solid #2e2e33; border-top:3px solid #f2ca50; cursor:pointer; transition:border-color 150ms ease-out,box-shadow 150ms ease-out }
.strata-layer:nth-child(2){ border-top-color:#e9c176 }
.strata-layer:nth-child(3){ border-top-color:#c5a059 }
.strata-layer:nth-child(4){ border-top-color:#99907c }
.strata-layer:nth-child(5){ border-top-color:#6b5834 }
.strata-layer:hover,.strata-layer:focus-visible{ border-color:#c5a059; box-shadow:0 12px 32px rgba(0,0,0,.5) }
.strata-label{ font-family:Newsreader,Georgia,serif; font-size:22px; line-height:1.2; color:#f2ca50 }
.strata-layer p{ font-family:'EB Garamond',Georgia,serif; font-size:17px; line-height:1.5; color:#d0c5af; margin:0 }
.strata-year{ margin-top:auto; padding-top:8px; font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:13px; letter-spacing:.1em; color:var(--grey) }
html .wh .strata a.strata-layer:not(#x){ text-decoration:none; text-align:left; color:inherit; display:flex !important; align-items:stretch !important; justify-content:flex-start !important }
.note-strata{ margin:14px 0 0; font-family:'EB Garamond',Georgia,serif; font-size:16px; color:var(--grey) }

/* context, not the record of what each site was built with */
.context{ margin:36px 0 0; padding:22px 24px; background:#161618; border:1px dashed var(--rule) }
.context .mono{ display:block; margin-bottom:14px; color:#e9c176 }
.marginalia-entry{ display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:6px 20px; padding:14px 0; border-top:1px solid rgba(77,70,53,.6) }
.marginalia-entry:first-of-type{ border-top:0 }
.marginalia-year{ font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:13px; letter-spacing:.08em; color:#f2ca50; padding-top:.3em }
.marginalia-text{ font-family:'EB Garamond',Georgia,serif; font-size:18px; line-height:1.6; color:var(--grey) }
.marginalia-text strong{ color:#d0c5af; font-weight:600 }
@media(max-width:520px){ .marginalia-entry{ grid-template-columns:minmax(0,1fr) } }

/* the eight */
.sites-head{ margin:0 0 28px; scroll-margin-top:96px }
.sites-head .tools{ margin-top:20px }
.tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px }
.decade-spine{ display:flex; gap:8px }
.decade,.layout-btn{ min-height:44px; padding:8px 16px; font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); background:transparent; border:1px solid var(--rule); cursor:pointer; transition:color 150ms ease-out,border-color 150ms ease-out,background-color 150ms ease-out }
/* The page-wide gold button rule at the foot of this stylesheet is !important, so these controls restate their own look. */
html .wh .tools button.decade:not(#x),html .wh .tools button.layout-btn:not(#x){ background:transparent !important; color:var(--grey) !important; border:1px solid var(--rule) !important; padding:8px 16px !important; font-weight:400 !important; box-shadow:none !important }
html .wh .tools button.decade:not(#x):hover,html .wh .tools button.layout-btn:not(#x):hover{ color:#f2ca50 !important; border-color:#c5a059 !important; background:transparent !important }
html .wh .tools button.decade.active:not(#x),html .wh .tools button.layout-btn.active:not(#x){ color:#131315 !important; background:#f2ca50 !important; border-color:#f2ca50 !important }
.sites-layout-toggle{ display:flex }
.sites-layout-toggle .layout-btn + .layout-btn{ margin-left:-1px }
.site-list{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px }
.site{ scroll-margin-top:96px; position:relative; display:grid; grid-template-columns:150px minmax(0,1fr) auto; grid-template-areas:"thumb body open" "frame frame frame"; gap:14px 24px; align-items:start; padding:20px; background:#161618; border:1px solid #2e2e33; transition:border-color 150ms ease-out,box-shadow 150ms ease-out }
.site:hover,.site:focus-within{ border-color:#c5a059; box-shadow:0 12px 32px rgba(0,0,0,.5) }
.site .thumb{ grid-area:thumb; width:150px; height:112px; object-fit:cover; object-position:top; background:#0a0a0c; border:1px solid #2e2e33; box-shadow:inset 0 2px 12px rgba(0,0,0,.95) }
.site .thumb.gen-thumb{ height:150px }
.site > .yr{ position:absolute; top:20px; left:20px; z-index:2; padding:3px 9px; background:#131315; border:1px solid var(--rule); font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; color:#f2ca50 }
.site > div:not(.yr):not(.site-preview-frame){ grid-area:body; min-width:0 }
.site h2{ font-family:Newsreader,Georgia,serif; font-weight:400; font-size:28px; line-height:1.2; color:#f2ca50; margin:0 0 8px; display:flex; align-items:center; gap:12px }
.site-status{ width:10px; height:10px; border-radius:50%; background:#99907c; flex:none }
.site-status.online{ background:#7fbf7f; box-shadow:0 0 0 3px rgba(127,191,127,.18) }
.site .what{ font-family:'EB Garamond',Georgia,serif; font-size:19px; line-height:1.55; color:#d0c5af; margin:0 0 12px; max-width:60ch }
.site dl{ margin:0; font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); line-height:1.7 }
.site dl b{ color:var(--ink); font-weight:500 }
.site .absent{ color:var(--grey); font-style:italic }
.site .why{ display:block; margin-top:6px; text-transform:none; letter-spacing:0; font-family:'EB Garamond',Georgia,serif; font-size:16px; line-height:1.5; font-style:normal; color:var(--grey) }
.site a.open{ grid-area:open; align-self:start; display:inline-flex !important; align-items:center; min-height:44px; padding:10px 18px; font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:#f2ca50; border:1px solid #f2ca50; transition:background-color 150ms ease-out,color 150ms ease-out; white-space:nowrap }
.site a.open:hover{ background:#f2ca50; color:#131315 }
@media(max-width:820px){
  .site{ grid-template-columns:110px minmax(0,1fr); grid-template-areas:"thumb body" "open open" "frame frame" }
  .site .thumb{ width:110px; height:90px }
  .site a.open{ justify-self:start }
}
@media(max-width:520px){
  .site{ grid-template-columns:minmax(0,1fr); grid-template-areas:"thumb" "body" "open" "frame" }
  .site .thumb{ width:100%; height:160px }
  .site > .yr{ top:28px; left:28px }
}

/* live previews: shown at a screen size common in the year the site was built, scaled to fit (script sets the size) */
.site-preview-frame{ grid-area:frame; position:relative; overflow:hidden; max-height:0; opacity:0; border:1px solid var(--rule); transition:max-height 400ms cubic-bezier(.4,0,.2,1),opacity 300ms cubic-bezier(.4,0,.2,1),border-color 300ms ease-out }
.site-preview-frame.active{ margin-top:6px; max-height:var(--frame-h,400px); height:var(--frame-h,400px); opacity:1; border-color:#c5a059 }
.site-preview-frame iframe{ position:absolute; top:0; left:0; border:none; display:block; background:#fff; pointer-events:none }
.site-preview-frame.active:hover iframe{ pointer-events:auto }
@media(hover:none){ .site-preview-frame.active iframe{ pointer-events:auto } }
.site-preview-label{ position:absolute; left:0; bottom:0; z-index:11; padding:6px 12px; background:rgba(19,19,21,.9); color:var(--grey); font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase }
.site-open-full{ position:absolute; top:0; right:0; z-index:11; padding:8px 14px; background:rgba(19,19,21,.92); color:#f2ca50; font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; min-height:44px; display:inline-flex !important; align-items:center }
.site-open-full:hover{ background:#f2ca50; color:#131315 }

/* filmstrip: one horizontal row of cards */
.filmstrip-mode .site-list{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px }
.filmstrip-mode .site{ flex:0 0 min(340px,82vw); scroll-snap-align:start; grid-template-columns:minmax(0,1fr); grid-template-areas:"thumb" "body" "open" }
.filmstrip-mode .site .thumb{ width:100%; height:190px }
.filmstrip-mode .site > .yr{ top:28px; left:28px }
.filmstrip-mode .site-preview-frame{ display:none }

.gen-standfirst{ font-family:'EB Garamond',Georgia,serif; font-size:19px; line-height:1.65; color:var(--grey); max-width:62ch; margin:0 0 24px }
.gen-head{ margin-bottom:8px }

/* records */
.apparatus{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px }
@media(min-width:760px){ .apparatus{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.apparatus-panel{ padding:24px 22px; background:#161618; border:1px solid #2e2e33 }
.apparatus-head{ font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:#e9c176; margin:0 0 14px }
.apparatus-list{ list-style:none; margin:0; padding:0 }
.apparatus-list li{ border-top:1px solid rgba(77,70,53,.6) }
.apparatus-list a{ display:flex !important; align-items:center; min-height:44px; font-family:'EB Garamond',Georgia,serif; font-size:19px; color:#f2ca50; text-decoration:none; transition:color 150ms ease-out }
.apparatus-list a:hover{ color:#ffe088; text-decoration:underline; text-underline-offset:.2em }
.gen-section{ margin-top:0 }

.brand-mark-anchor{
  position:fixed;
  top:calc(100% - 67px);
  left:calc(100% - clamp(16px,4vw,40px) - 27px);
  transform:translate(-50%,-50%);
  z-index:-1;
  pointer-events:none;
  opacity:1
}
@supports selector(:has(a)){
  .brand-mark-anchor{
    opacity:0;transform:translate(-50%,-50%) scale(0);
    transition:opacity 600ms cubic-bezier(.34,1.56,.64,1),transform 600ms cubic-bezier(.34,1.56,.64,1)
  }
  .brand-mark-anchor:has(.jfsn-brand-mark.visible){
    opacity:1;transform:translate(-50%,-50%) scale(1)
  }
}
@media(prefers-reduced-motion:reduce){.brand-mark-anchor{transition:none}}
.jfsn-brand-mark{
  width:clamp(400px,46vw,850px);
  height:auto;
    opacity:1;
  pointer-events:none;
}
.jfsn-brand-mark{--bm-exit:1400px;--bm-range:500vh}
@media(prefers-reduced-motion:reduce){.jfsn-brand-mark{animation:none}}

/* scroll reveal (same rule as index.html): class added by script only, and not at all under reduced motion */
.reveal-elem{ opacity:0; transform:translateY(24px); transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1) }
.reveal-elem.is-visible{ opacity:1; transform:translateY(0) }
@media(prefers-reduced-motion:reduce){
  .strata-layer,.site,.decade,.layout-btn,.site a.open,.site-preview-frame,.apparatus-list a{ transition:none }
}
@view-transition { navigation: auto; }

/* Phase 2: Apply Stitch design system fonts */
body { font-family: 'EB Garamond', 'Georgia', serif !important; }
p { font-family: 'EB Garamond', 'Georgia', serif !important; }
li, blockquote { font-family: 'EB Garamond', 'Georgia', serif !important; }

/* Labels, metadata, accession numbers → JetBrains Mono */
.font-mono { font-family: 'JetBrains Mono', 'Courier New', monospace !important; }
.cmdk-sub { font-family: 'JetBrains Mono', 'Courier New', monospace !important; }
code { font-family: 'JetBrains Mono', 'Courier New', monospace !important; }