/* ============================================================
   W. W. Corless Jr. — Author Station
   Concept: a systems engineer's manifest / service logbook.
   Deep ink-navy field, parchment reading surfaces, brass beacon,
   oxblood status marks. Designations (TC·I …) are real structure.
   ============================================================ */

:root{
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --wide:'Archivo Expanded','Archivo',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --void:#0E1A2B;      /* page field           */
  --void-2:#13233A;    /* raised panel         */
  --void-3:#0A1421;    /* footer / deep        */
  --hair:#2A3F58;      /* rules on dark        */
  --mist:#CBD3DE;      /* primary text         */
  --mist-dim:#8B9AAE;  /* secondary / meta     */
  --near-white:#EAF0F7;

  --bone:#ECE4D3;      /* parchment surface    */
  --ink:#1B1811;       /* text on parchment    */
  --ink-dim:#5A5140;

  --brass:#CE9A4E;     /* beacon / accent      */
  --brass-lift:#DCAF67;
  --oxblood:#B0433A;   /* status stamp         */

  --band-fantasy:#B24A3A;
  --band-spec:#3E7CA6;
  --band-real:#BE8B44;

  --shell:1080px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--void);
  background-image:
    linear-gradient(rgba(203,211,222,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(203,211,222,.032) 1px,transparent 1px);
  background-size:34px 34px;
  color:var(--mist);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:var(--brass);}
::selection{background:var(--brass);color:var(--void);}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}

.shell{max-width:var(--shell);margin:0 auto;padding:0 28px;}

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

.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(14,26,43,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hair);
}
.header-inner{
  max-width:var(--shell);margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--mist);}
.brand i{width:10px;height:10px;background:var(--brass);transform:rotate(45deg);flex-shrink:0;}
.brand span{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;}

.site-nav{display:flex;gap:30px;}
.site-nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--mist-dim);padding:4px 0;transition:color .14s;
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--mist);}
.site-nav a[aria-current="page"]{color:var(--brass);box-shadow:inset 0 -2px 0 var(--brass);}

.nav-toggle{position:absolute;opacity:0;pointer-events:none;}
.nav-burger{display:none;font-size:20px;line-height:1;color:var(--brass);cursor:pointer;user-select:none;}

@media(max-width:640px){
  .nav-burger{display:block;}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--void);border-bottom:1px solid var(--hair);
  }
  .site-nav a{padding:16px 28px;border-top:1px solid var(--hair);}
  .nav-toggle:checked ~ .site-nav{display:flex;}
}

/* ---------- shared bits ---------- */

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brass);margin:0 0 22px;
}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.65em;padding:14px 22px;
  text-decoration:none;border:1px solid var(--brass);color:var(--brass);
  background:transparent;border-radius:1px;
  transition:background .15s,color .15s,border-color .15s;
}
.btn:hover,.btn:focus-visible{background:var(--brass);color:var(--void);}
.btn-solid{background:var(--brass);color:var(--void);}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--brass-lift);border-color:var(--brass-lift);}

.stamp{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oxblood);border:1.5px solid var(--oxblood);padding:4px 8px;border-radius:1px;
  transform:rotate(-2.5deg);white-space:nowrap;
}

.on-bone{background:var(--bone);color:var(--ink);border-top:3px solid var(--brass);border-radius:2px;}
.on-bone .btn{border-color:var(--ink);color:var(--ink);}
.on-bone .btn:hover,.on-bone .btn:focus-visible{background:var(--ink);color:var(--bone);}
.on-bone .btn-solid{background:var(--ink);color:var(--bone);border-color:var(--ink);}
.on-bone .btn-solid:hover,.on-bone .btn-solid:focus-visible{background:#2e2a20;border-color:#2e2a20;}

/* band edge colours */
.band-fantasy{--band:var(--band-fantasy);}
.band-spec{--band:var(--band-spec);}
.band-real{--band:var(--band-real);}

/* ---------- home: station identifier ---------- */

.identifier{padding-top:52px;padding-bottom:40px;}
.identifier h1{
  font-family:var(--wide);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.3rem,6vw,4.1rem);line-height:.98;letter-spacing:-.005em;
  color:var(--near-white);margin:0;
}
.identifier .lede{
  font-family:var(--serif);font-size:1.12rem;line-height:1.55;
  color:var(--mist);max-width:54ch;margin:24px 0 0;
}

/* ---------- home: the manifest (signature) ---------- */

.manifest{padding-top:16px;padding-bottom:40px;}
.manifest-bar{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 22px;
  padding-bottom:14px;border-bottom:1px solid var(--hair);
}
.manifest-bar h2{
  font-family:var(--wide);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:1rem;color:var(--mist);margin:0;
}
.manifest-count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mist-dim);}
.manifest-key{
  margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist-dim);
}
.manifest-key span{display:inline-flex;align-items:center;gap:6px;}
.manifest-key i{width:8px;height:8px;border-radius:50%;background:#556;}
.k-fantasy i{background:var(--band-fantasy);}
.k-spec i{background:var(--band-spec);}
.k-real i{background:var(--band-real);}

.manifest-head,
.manifest-row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 210px 96px;
  gap:16px;align-items:center;
}
.manifest-head{
  padding:12px 14px;border-left:3px solid transparent;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist-dim);
}
.manifest-list{display:flex;flex-direction:column;}
.manifest-row{
  padding:14px;text-decoration:none;color:var(--mist);
  border-left:3px solid var(--band,#3a4a5e);
  border-bottom:1px solid var(--hair);
  transition:background .14s;
}
.manifest-row:hover,.manifest-row:focus-visible{background:var(--void-2);}
.m-desig{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--brass);}
.m-title{font-family:var(--serif);font-size:1.06rem;color:var(--near-white);}
.m-series{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mist-dim);}
.m-status{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-dim);text-align:right;}

.manifest-cta{padding:28px 0 6px;}

/* ---------- home: cover plates (scrolling gallery, top band) ---------- */

.covers{
  padding:22px 0 24px;
  background:var(--void-3);
  border-bottom:1px solid var(--hair);
}
.covers-eyebrow{
  max-width:var(--shell);margin:0 auto 14px;padding:0 28px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mist-dim);
}
.covers-mask{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.covers-track{display:flex;gap:16px;width:max-content;animation:marquee 90s linear infinite;}
.covers-track a,.covers-track span{display:block;flex:0 0 auto;font-size:0;}
.covers-track img{
  display:block;width:148px;height:222px;object-fit:cover;
  border:1px solid var(--hair);box-shadow:3px 3px 0 rgba(0,0,0,.32);background:var(--void-2);
  transition:transform .15s;
}
.covers-track a:hover img,.covers-track a:focus-visible img{transform:translateY(-4px);}
.covers-mask:hover .covers-track,.covers-mask:focus-within .covers-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(max-width:640px){
  .covers-track img{width:104px;height:156px;}
}
@media(prefers-reduced-motion:reduce){
  .covers-mask{overflow-x:auto;}
  .covers-track{animation:none;}
}

@media(max-width:720px){
  .manifest-head{display:none;}
  .manifest-row{
    grid-template-columns:52px minmax(0,1fr) auto;
    grid-template-areas:"d t s" "d y y";
    row-gap:4px;column-gap:14px;
  }
  .m-desig{grid-area:d;align-self:start;}
  .m-title{grid-area:t;}
  .m-status{grid-area:s;}
  .m-series{grid-area:y;}
}

/* ---------- home: field note ---------- */

.fieldnote{padding-top:38px;padding-bottom:78px;}
.fieldnote-card{max-width:820px;padding:34px 38px;display:flex;gap:30px;align-items:flex-start;}
.fieldnote-portrait{margin:0;flex-shrink:0;width:124px;}
.fieldnote-portrait img{
  width:124px;aspect-ratio:4/5;object-fit:cover;
  border:1px solid var(--ink-dim);box-shadow:5px 5px 0 rgba(27,24,17,.14);
}
.fieldnote-portrait figcaption{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin-top:9px;
}
.fieldnote-body{min-width:0;}
.fieldnote-card .tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);display:block;margin-bottom:12px;
}
.fieldnote-card p{font-family:var(--serif);font-size:1.06rem;line-height:1.62;margin:0;}
.fieldnote-card a{color:var(--oxblood);text-underline-offset:3px;text-decoration-thickness:1px;}
@media(max-width:560px){
  .fieldnote-card{flex-direction:column;gap:20px;}
}

/* ---------- interior page head ---------- */

.page-head{padding-top:66px;padding-bottom:6px;}
.page-head h1{
  font-family:var(--wide);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.1rem);line-height:1;color:var(--near-white);margin:0;
}
.page-head .sub{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist-dim);margin:16px 0 0;
}

/* ---------- books: ledger ---------- */

.ledger{
  display:grid;grid-template-columns:212px minmax(0,1fr);gap:52px;
  padding-top:40px;padding-bottom:84px;
}
.series-rail{position:sticky;top:88px;align-self:start;}
.series-rail h2{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist-dim);margin:0 0 14px;
}
.series-rail a{
  display:flex;justify-content:space-between;gap:10px;padding:9px 0;
  font-family:var(--serif);font-size:.95rem;color:var(--mist);text-decoration:none;
  border-bottom:1px solid var(--hair);transition:color .14s;
}
.series-rail a:hover,.series-rail a:focus-visible{color:var(--brass);}
.series-rail a b{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--mist-dim);}

.series-block{margin-bottom:54px;scroll-margin-top:96px;}
.series-block h2{
  font-family:var(--wide);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:1.15rem;color:var(--near-white);margin:0 0 4px;
}
.series-meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin:0 0 22px;
}

.entry{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;
  background:var(--void-2);border-left:3px solid var(--band,#3a4a5e);
  padding:24px;margin-bottom:18px;position:relative;scroll-margin-top:96px;
}
.entry-cover{
  width:150px;aspect-ratio:2/3;object-fit:cover;
  border:1px solid var(--hair);box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
.entry-body{min-width:0;padding-right:84px;}
.entry .code{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;color:var(--brass);}
.entry .bookline{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist-dim);margin:6px 0 10px;
}
.entry h3{
  font-family:var(--serif);font-weight:600;font-size:1.32rem;line-height:1.2;
  color:var(--near-white);margin:0 0 12px;
}
.genre-badge{
  display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);border:1px solid var(--hair);padding:4px 8px;border-radius:1px;margin-bottom:14px;
}
.entry .blurb{font-family:var(--serif);font-size:1rem;line-height:1.6;color:var(--mist);margin:0 0 18px;}
.entry .btn{font-size:11px;padding:11px 18px;}
.entry .stamp{position:absolute;top:20px;right:20px;}

@media(max-width:900px){
  .ledger{grid-template-columns:1fr;gap:26px;}
  .series-rail{position:static;}
  .series-rail nav{display:flex;flex-wrap:wrap;gap:8px;}
  .series-rail a{border:1px solid var(--hair);border-radius:1px;padding:8px 12px;}
  .series-rail a b{display:none;}
}
@media(max-width:520px){
  .entry{grid-template-columns:1fr;gap:18px;}
  .entry-body{padding-right:0;}
  .entry-cover{width:140px;}
  .entry .stamp{position:static;display:inline-block;margin-bottom:12px;transform:rotate(-2.5deg);}
}

/* ---------- about: service record ---------- */

.record{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:38px;
  padding-top:40px;padding-bottom:14px;align-items:start;
}
.record figure{margin:0;}
.record img{
  width:200px;aspect-ratio:4/5;object-fit:cover;
  border:1px solid var(--hair);box-shadow:5px 5px 0 rgba(0,0,0,.35);
}
.record figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist-dim);margin-top:10px;
}
.facts{margin:0;border-top:1px solid var(--hair);}
.facts div{
  display:grid;grid-template-columns:140px 1fr;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.facts dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);line-height:1.5;align-self:start;}
.facts dd{margin:0;font-family:var(--serif);font-size:.98rem;color:var(--mist);}

.prose{max-width:680px;padding:40px 44px;margin:32px 0 84px;}
.prose p{font-family:var(--serif);font-size:1.08rem;line-height:1.7;margin:0 0 1.1em;}
.prose p:last-child{margin-bottom:0;}

@media(max-width:620px){
  .record{grid-template-columns:1fr;gap:24px;}
  .record img{width:170px;}
  .facts div{grid-template-columns:118px 1fr;gap:12px;}
  .prose{padding:30px 24px;}
}

/* ---------- contact: channel ---------- */

.channel{padding:44px 0 96px;max-width:560px;}
.channel-card{padding:38px 40px;}
.channel-card p{font-family:var(--serif);font-size:1.06rem;line-height:1.6;margin:0 0 22px;}
.channel-card .btn-solid{margin:0;}
.channel-card .meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin:24px 0 0;
}

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

.site-footer{background:var(--void-3);border-top:1px solid var(--hair);}
.site-footer .shell{
  padding-top:30px;padding-bottom:30px;
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:baseline;
}
.site-footer p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mist-dim);}
.site-footer a{color:var(--mist-dim);text-decoration:none;}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--brass);}

/* ---------- one orchestrated load ---------- */

@keyframes riseIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.identifier .eyebrow{animation:riseIn .5s ease both;}
.identifier h1{animation:riseIn .6s ease both .06s;}
.identifier .lede{animation:riseIn .6s ease both .14s;}
.manifest-bar{animation:riseIn .5s ease both .2s;}
.manifest-list .manifest-row{animation:riseIn .45s cubic-bezier(.2,.7,.2,1) both;}
.manifest-list .manifest-row:nth-child(1){animation-delay:.24s;}
.manifest-list .manifest-row:nth-child(2){animation-delay:.28s;}
.manifest-list .manifest-row:nth-child(3){animation-delay:.32s;}
.manifest-list .manifest-row:nth-child(4){animation-delay:.36s;}
.manifest-list .manifest-row:nth-child(5){animation-delay:.40s;}
.manifest-list .manifest-row:nth-child(6){animation-delay:.44s;}
.manifest-list .manifest-row:nth-child(7){animation-delay:.48s;}
.manifest-list .manifest-row:nth-child(8){animation-delay:.52s;}
.manifest-list .manifest-row:nth-child(9){animation-delay:.56s;}
.manifest-list .manifest-row:nth-child(10){animation-delay:.60s;}
.manifest-list .manifest-row:nth-child(11){animation-delay:.64s;}
.manifest-list .manifest-row:nth-child(12){animation-delay:.68s;}
.manifest-list .manifest-row:nth-child(13){animation-delay:.72s;}
.manifest-list .manifest-row:nth-child(14){animation-delay:.76s;}
.manifest-list .manifest-row:nth-child(15){animation-delay:.80s;}
.manifest-list .manifest-row:nth-child(16){animation-delay:.84s;}
.manifest-list .manifest-row:nth-child(17){animation-delay:.88s;}
.manifest-list .manifest-row:nth-child(18){animation-delay:.92s;}
.manifest-list .manifest-row:nth-child(19){animation-delay:.96s;}
.manifest-list .manifest-row:nth-child(20){animation-delay:1.00s;}
.manifest-list .manifest-row:nth-child(21){animation-delay:1.04s;}
.manifest-list .manifest-row:nth-child(22){animation-delay:1.08s;}
.manifest-list .manifest-row:nth-child(23){animation-delay:1.12s;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}