/* ============================================================
   ANDY QUINN — author site
   Deliberately not the Quinlan site. That one is a reference
   shelf: Palatino, Charter, mono instrumentation, brass on a
   night sky, because its subject is measurement. This is trade
   fiction, so the vocabulary is a paperback's — high-contrast
   Baskerville display over a plain sans, and a dusk-over-water
   hero taken from the covers rather than a star field.
   ============================================================ */

:root{
  --font-display: Baskerville, "Baskerville Old Face", "Hoefler Text", "Libre Baskerville", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-meta: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --paper:        #f3f1ec;
  --paper-raised: #ffffff;
  --text:         #1e1c19;
  --text-soft:    rgba(30,28,25,0.66);
  --text-faint:   rgba(30,28,25,0.42);
  --line:         rgba(30,28,25,0.14);
  --line-soft:    rgba(30,28,25,0.07);

  /* Theme-independent on purpose. The hero is a dusk horizon and the cover
     wells matte artwork; both stay dark in either theme, so they take these
     and never var(--text)/var(--paper). Defined once, never in a theme block. */
  --dusk-high:  #1b2430;
  --dusk-mid:   #4a3a35;
  --dusk-low:   #8a5f3c;
  --well:       #16181a;
  --on-dusk:    #f6f2ea;
  --on-dusk-soft: rgba(246,242,234,0.74);

  /* One accent per series, lifted off its own cover artwork.
     Quiet Trades: the light under the door. Slack Water: canal green
     against a dusk sky. Salt Choir: deep water and the Ring's gold. */
  --qt:        #a97a1e;
  --qt-soft:   rgba(169,122,30,0.13);
  --swc:       #4a7350;
  --swc-spark: #b9713a;
  --swc-soft:  rgba(74,115,80,0.13);
  --sc:        #1c6b66;
  --sc-spark:  #bd8f2c;
  --sc-soft:   rgba(28,107,102,0.13);

  --shadow: 0 1px 2px rgba(30,28,25,0.07), 0 14px 30px -18px rgba(30,28,25,0.4);
  --radius: 3px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:        #14150f;
    --paper-raised: #1c1e18;
    --text:         #ece9e1;
    --text-soft:    rgba(236,233,225,0.68);
    --text-faint:   rgba(236,233,225,0.44);
    --line:         rgba(236,233,225,0.15);
    --line-soft:    rgba(236,233,225,0.08);

    --qt:        #d9a842;
    --qt-soft:   rgba(217,168,66,0.15);
    --swc:       #86ad88;
    --swc-spark: #dd9c6b;
    --swc-soft:  rgba(134,173,136,0.15);
    --sc:        #5aa9a1;
    --sc-spark:  #e0b757;
    --sc-soft:   rgba(90,169,161,0.15);

    --shadow: 0 1px 2px rgba(0,0,0,0.34), 0 18px 34px -18px rgba(0,0,0,0.66);
  }
}

:root[data-theme="dark"]{
  --paper:        #14150f;
  --paper-raised: #1c1e18;
  --text:         #ece9e1;
  --text-soft:    rgba(236,233,225,0.68);
  --text-faint:   rgba(236,233,225,0.44);
  --line:         rgba(236,233,225,0.15);
  --line-soft:    rgba(236,233,225,0.08);
  --qt:        #d9a842;
  --qt-soft:   rgba(217,168,66,0.15);
  --swc:       #86ad88;
  --swc-spark: #dd9c6b;
  --swc-soft:  rgba(134,173,136,0.15);
  --sc:        #5aa9a1;
  --sc-spark:  #e0b757;
  --sc-soft:   rgba(90,169,161,0.15);
  --shadow: 0 1px 2px rgba(0,0,0,0.34), 0 18px 34px -18px rgba(0,0,0,0.66);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.64;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; text-wrap:balance; margin:0; }
p{ margin:0; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--qt); outline-offset:3px; }

.container{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* ---------- top nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:64px; }
.wordmark{
  font-family:var(--font-meta); font-weight:700; font-size:0.82rem;
  letter-spacing:0.22em; text-transform:uppercase; text-decoration:none; flex:none;
}
.nav-links{ display:flex; gap:1.9rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; font-family:var(--font-meta); font-size:0.78rem;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--text-soft);
  padding:0.4rem 0; border-bottom:1px solid transparent;
  transition:color 0.15s ease, border-color 0.15s ease;
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--text); border-color:currentColor; }

/* ---------- hero ---------- */
/* Dusk over water: the sky band of the Slack Water covers, the warm low
   light of a Quiet Trades doorway, and the deep water the Salt Choir sinks
   into — one gradient that all three series can stand in front of. */
.hero{
  background:
    radial-gradient(ellipse 70% 60% at 78% 108%, rgba(189,143,44,0.30), transparent 62%),
    linear-gradient(178deg, var(--dusk-high) 0%, var(--dusk-mid) 58%, var(--dusk-low) 100%);
  color:var(--on-dusk);
  padding:5.5rem 0 0;
  position:relative;
  overflow:hidden;
}
/* The waterline. A single hard edge low in the hero, with the reeds implied
   by a repeating gradient rather than an image — it has to survive at any
   width, and a raster horizon would not. */
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:74px;
  background:
    repeating-linear-gradient(88deg, rgba(24,38,30,0.55) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(38,58,46,0.85), rgba(20,30,24,0.98));
  border-top:1px solid rgba(246,242,234,0.18);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:1; padding-bottom:5.6rem; }
.eyebrow{
  font-family:var(--font-meta); font-size:0.74rem; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(246,242,234,0.72); margin-bottom:1.1rem; display:block;
}
.hero h1{
  font-size:clamp(2.8rem, 7vw, 4.6rem); line-height:1.02; letter-spacing:0.005em;
  color:var(--on-dusk);
}
.hero .dek{
  font-family:var(--font-display); font-size:clamp(1.15rem, 2.2vw, 1.42rem); line-height:1.5;
  color:var(--on-dusk-soft); max-width:34ch; margin-top:1.2rem;
}
.hero-count{
  display:flex; flex-wrap:wrap; gap:0 2.4rem; margin-top:2.4rem;
  font-family:var(--font-meta); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(246,242,234,0.6);
}
.hero-count strong{ color:var(--on-dusk); font-weight:600; }

/* ---------- the three registers ----------
   The site's one structural device, and the counterpart to the Quinlan
   site's deep-time ruler. These three books share no world, no name and
   no reader; what they share is that each is built on a rule its author
   agreed to before chapter one. So the strip states the rule, not the plot. */
.registers{ margin-top:3.4rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(246,242,234,0.18); border:1px solid rgba(246,242,234,0.18); border-radius:var(--radius);
  overflow:hidden;
}
.register{
  background:rgba(16,18,20,0.42);
  padding:1.5rem 1.4rem 1.6rem;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:0.55rem;
  transition:background 0.18s ease;
}
.register:hover{ background:rgba(16,18,20,0.62); }
.register .reg-genre{
  font-family:var(--font-meta); font-size:0.68rem; letter-spacing:0.13em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:0.5rem;
}
.register .reg-genre::before{ content:""; width:18px; height:2px; background:currentColor; display:inline-block; flex:none; }
.register h2{ font-size:1.32rem; line-height:1.2; color:var(--on-dusk); }
.register .reg-rule{ font-size:0.92rem; line-height:1.5; color:rgba(246,242,234,0.7); }
.register .reg-state{
  font-family:var(--font-meta); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(246,242,234,0.5); margin-top:auto; padding-top:0.6rem;
}
.register[data-series="qt"]  .reg-genre{ color:#d9a842; }
.register[data-series="swc"] .reg-genre{ color:#9dc09b; }
.register[data-series="sc"]  .reg-genre{ color:#6fbdb4; }

/* ---------- shelves ---------- */
.shelf{ padding:5rem 0; border-bottom:1px solid var(--line-soft); }
.shelf-head{ max-width:780px; margin-bottom:3rem; }
.shelf-kicker{
  font-family:var(--font-meta); font-size:0.72rem; letter-spacing:0.13em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:0.55rem; margin-bottom:0.9rem;
}
.shelf-kicker::before{ content:""; width:22px; height:2px; background:currentColor; display:inline-block; }
.shelf-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom:0.7rem; }
.shelf-head p{ color:var(--text-soft); font-size:1.02rem; max-width:66ch; }

/* The pen name this series is actually sold under — and the reason it is
   set in the same face and size as the rest of the metadata rather than
   shouted: on the shelf, this is the name on the spine, not Andy Quinn. */
.shelf-byline{
  font-family:var(--font-meta); font-size:0.76rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--text-faint);
  margin-bottom:1.1rem;
}
.shelf-byline strong{ font-weight:700; }

#quiet-trades .shelf-kicker, #quiet-trades .shelf-byline strong{ color:var(--qt); }
#slack-water  .shelf-kicker, #slack-water  .shelf-byline strong{ color:var(--swc); }
#salt-choir   .shelf-kicker, #salt-choir   .shelf-byline strong{ color:var(--sc); }

/* ---------- book grid + cards ---------- */
.book-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); gap:2.2rem; }
.book-card{
  display:flex; flex-direction:column; gap:0.85rem;
  opacity:0; transform:translateY(14px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.book-card.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .book-card{ opacity:1; transform:none; } }

.cover{
  position:relative; aspect-ratio:2/3; overflow:hidden;
  box-shadow:var(--shadow); border-radius:2px; background:var(--well);
  /* The Quiet Trades covers are a near-black door in a near-black room, and
     on the dark theme they lose their edge against the page. Outline paints
     over the image, so this holds the trim line where a border would not. */
  outline:1px solid var(--line-soft); outline-offset:-1px;
}
.cover img{ width:100%; height:100%; object-fit:cover; }

/* Books with no artwork yet — Salt Choir 3–5. A typographic plate in the
   series colour, so an unmade cover reads as "not drawn" rather than
   "broken image", and the grid keeps its rhythm. */
.cover.placeholder{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.3rem; color:var(--on-dusk); text-align:center;
}
.cover.placeholder .plate-eyebrow{
  font-family:var(--font-meta); font-size:0.6rem; letter-spacing:0.16em;
  text-transform:uppercase; opacity:0.72;
}
.cover.placeholder h3{ font-size:1.42rem; line-height:1.16; color:var(--on-dusk); }
.cover.placeholder .plate-rule{ width:34px; height:1px; background:currentColor; opacity:0.6; margin:0.7rem auto; }
.cover.placeholder .plate-foot{
  font-family:var(--font-meta); font-size:0.6rem; letter-spacing:0.16em;
  text-transform:uppercase; opacity:0.55;
}
.cover-sc.placeholder{ background:linear-gradient(168deg, #1f5f5c 0%, #123a44 52%, #0b1a22 100%); }

.book-meta{ display:flex; flex-wrap:wrap; gap:0.42rem; align-items:center; }
.chip{
  font-family:var(--font-meta); font-size:0.66rem; letter-spacing:0.05em;
  padding:0.2rem 0.55rem; border-radius:20px; border:1px solid var(--line);
  color:var(--text-soft); white-space:nowrap;
}
/* Status, three states, meant to read at a glance and to be honest about a
   list where nothing is on sale yet:
     drafted   filled in the series colour  — a complete manuscript exists
     drafting  outlined in the series colour — being written now
     designed  plain faint outline           — outlined, not written
   No "published" state, because none of these eighteen is. */
.chip.status{ border-color:transparent; }
.chip.status.status-drafted{ background:var(--line-soft); color:var(--text-soft); }
.chip.status.status-drafting{ background:transparent; border-color:currentColor; }
.chip.status.status-designed{ border-color:var(--line); color:var(--text-faint); background:transparent; }

#quiet-trades .chip.status.status-drafted{ background:var(--qt-soft); color:var(--qt); }
#quiet-trades .chip.status.status-drafting{ color:var(--qt); }
#slack-water  .chip.status.status-drafted{ background:var(--swc-soft); color:var(--swc); }
#slack-water  .chip.status.status-drafting{ color:var(--swc); }
#salt-choir   .chip.status.status-drafted{ background:var(--sc-soft); color:var(--sc); }
#salt-choir   .chip.status.status-drafting{ color:var(--sc); }

.book-card h3.title{ font-size:1.3rem; line-height:1.24; }
.book-card .subtitle{ font-family:var(--font-display); font-style:italic; color:var(--text-soft); font-size:0.96rem; margin-top:0.2rem; }
.book-card .blurb{ font-size:0.92rem; color:var(--text-soft); line-height:1.58; }

/* The Quiet Trades is seven standalones with nothing in common but a shape,
   so each card names the trade it is built on — that is the series, and it
   is the only line on the card doing the work a series number would do. */
.book-card .trade{
  font-family:var(--font-meta); font-size:0.68rem; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--text-faint);
  padding-bottom:0.15rem; border-bottom:1px solid var(--line-soft);
}

/* ---------- about ---------- */
#about{ border-bottom:none; }
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:3.4rem; align-items:start; }
.about-grid p + p{ margin-top:1.1rem; }
.about-grid .lede{ font-family:var(--font-display); font-size:1.24rem; line-height:1.48; color:var(--text); }
.about-grid p{ color:var(--text-soft); }
.names{ border-top:1px solid var(--line); list-style:none; margin:0; padding:0; }
.names li{ display:flex; flex-direction:column; gap:0.15rem; padding:0.85rem 0; border-bottom:1px solid var(--line-soft); }
.names .name{ font-family:var(--font-display); font-size:1.1rem; }
.names .name-for{
  font-family:var(--font-meta); font-size:0.72rem; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--text-faint);
}
.names li[data-series="qt"] .name{ color:var(--qt); }
.names li[data-series="swc"] .name{ color:var(--swc); }
.names li[data-series="sc"] .name{ color:var(--sc); }

/* ---------- footer ---------- */
footer{ padding:3.2rem 0 4rem; border-top:1px solid var(--line-soft); }
footer .container{ display:flex; flex-direction:column; gap:0.6rem; }
footer p{ font-size:0.84rem; color:var(--text-faint); }
footer .colophon{ max-width:62ch; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .registers{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; gap:2.4rem; }
}
@media (max-width:760px){
  .site-nav .container{ height:auto; padding-top:0.7rem; padding-bottom:0.7rem; flex-wrap:wrap; gap:0.6rem 1.2rem; }
  .nav-links{ gap:1.1rem; flex-wrap:wrap; }
  .nav-links a{ font-size:0.7rem; }
  .hero{ padding-top:3.4rem; }
  .hero .container{ padding-bottom:4.4rem; }
  .hero::after{ height:52px; }
  .hero-count{ gap:0.4rem 1.6rem; }
  .shelf{ padding:3.4rem 0; }
  .book-grid{ gap:2rem; }
}