/* ============================================================
   JoshuaCCarroll.com
   Palette and grain taken from The Bahushnovat cover art.
   Body type is Alegreya, the face the books are typeset in.
   ============================================================ */

:root {
  --paper:        #F4F0E8;
  --paper-2:      #E7E0D2;
  --paper-3:      #FFFFFF;
  --rule:         #DCD4C4;
  --rule-2:       #D6CDB9;
  --ink:          #201D1E;
  --ink-2:        #443F3D;
  --ink-3:        #7A7166;
  --charcoal:     #2E2D2E;
  --on-dark:      #F4F0E8;
  --on-dark-2:    #CFC9BE;
  --on-dark-3:    #8E8884;
  --vermilion:    #C85244;
  --vermilion-d:  #A8402F;
  --on-verm:      #F7F4EE;
  --on-verm-2:    #FBEDE9;

  --disp: "Saira Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body: Alegreya, Georgia, "Times New Roman", serif;
  --ui:   "Alegreya Sans", "Helvetica Neue", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --shell:  1440px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--vermilion-d); text-decoration: none; }
a:hover { color: var(--vermilion); }

:focus-visible {
  outline: 3px solid var(--vermilion);
  outline-offset: 3px;
}
.on-dark :focus-visible, .band-verm :focus-visible { outline-color: var(--on-dark); }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--charcoal); color: var(--on-dark);
  padding: 14px 22px; font-family: var(--ui); font-size: 14px;
}
.skip-link:focus { left: 0; color: var(--on-dark); }

/* ---------- type helpers ---------- */

.disp {
  font-family: var(--disp);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .89;
  letter-spacing: .005em;
  text-wrap: balance;
}

.meta {
  font-family: var(--ui);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 700;
}

/* Respellings are NOT uppercased: the capitals mark the stressed syllable. */
.say {
  font-family: var(--ui);
  letter-spacing: .035em;
  text-transform: none;
}

.eyebrow { font-family: var(--ui); text-transform: uppercase; letter-spacing: .16em;
           font-size: 12px; font-weight: 700; color: var(--vermilion); }
.band-verm .eyebrow { color: var(--charcoal); }

.rule-short { width: 84px; height: 3px; background: var(--vermilion); border: 0; margin: 26px 0 30px; }

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

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

.band { padding-block: clamp(52px, 8vw, 92px); position: relative; overflow: hidden; }
.band-dark  { background: var(--charcoal); color: var(--on-dark-2); }
.band-verm  { background: var(--vermilion); color: var(--on-verm-2); }
.band-paper { background: var(--paper); }
.band-paper2{ background: var(--paper-2); border-top: 1px solid var(--rule-2); }

.band-dark .disp, .band-verm .disp { color: var(--on-dark); }
.band-verm .disp { color: var(--on-verm); }

/* the stipple that runs through the cover art */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .19; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
.glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(200,82,68,.40), rgba(200,82,68,0) 66%);
}

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  position: relative;
}
.split > .c4 { grid-column: span 4; }
.split > .c5 { grid-column: span 5; }
.split > .c6 { grid-column: span 6; }
.split > .c7 { grid-column: span 7; }
.split > .c8 { grid-column: span 8; }
.split.top { align-items: start; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 56px; padding: 0 30px;
  font-family: var(--ui); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn-primary  { background: var(--vermilion); color: var(--on-verm); }
.btn-primary:hover  { background: var(--vermilion-d); color: var(--on-verm); }
.btn-dark     { background: var(--charcoal); color: var(--on-dark); }
.btn-dark:hover     { background: #1C1B1C; color: var(--on-dark); }
.btn-ghost    { border-color: #6A6663; color: var(--on-dark); font-weight: 500; }
.btn-ghost:hover    { border-color: var(--on-dark); color: var(--on-dark); }
.btn-outline  { border: 2px solid var(--ink); color: var(--ink); }
.btn-outline:hover  { background: var(--ink); color: var(--paper); }
.btn-quiet    { border-color: #C0B7A5; color: var(--ink-2); font-weight: 500; }
.btn-quiet:hover    { border-color: var(--ink); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

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

.site-header {
  background: var(--charcoal);
  border-bottom: 3px solid var(--vermilion);
}
.site-header .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 88px; padding-block: 14px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .1em; color: var(--on-dark);
}
.wordmark:hover { color: var(--on-dark); }
.site-nav { display: flex; gap: clamp(18px, 3vw, 38px); flex-wrap: wrap; }
.site-nav a {
  font-family: var(--ui); text-transform: uppercase; letter-spacing: .16em;
  font-size: 13px; font-weight: 500; color: #C8C2B6;
  padding-block: 6px; min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:hover { color: var(--on-dark); }
.site-nav a[aria-current="page"] {
  color: var(--on-dark); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--vermilion);
}

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

.site-footer { background: var(--charcoal); color: var(--on-dark-3); padding-block: 48px; }
.site-footer .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.pub { display: flex; align-items: center; gap: 20px; }
.pub img { width: 62px; height: 62px; object-fit: contain; background: var(--paper); padding: 5px; }
.pub .label { font-family: var(--ui); text-transform: uppercase; letter-spacing: .16em;
              font-size: 11px; color: var(--on-dark-3); margin-bottom: 6px; }
.pub a { font-family: var(--disp); font-weight: 800; text-transform: uppercase;
         font-size: 20px; letter-spacing: .08em; color: var(--on-dark); }
.footer-nav { display: flex; gap: 30px; flex-wrap: wrap; align-items: center;
              font-family: var(--ui); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
.footer-nav a { color: var(--on-dark-3); min-height: 44px; display: inline-flex; align-items: center; }
.footer-nav a:hover { color: var(--on-dark); }

/* ---------- covers ---------- */

.cover { box-shadow: 0 24px 48px rgba(46,45,46,.42); transform: rotate(-2.5deg); width: 100%; }
.cover-plain { box-shadow: 0 20px 42px rgba(32,29,30,.22); width: 100%; }
/* On the dark hero a soft drop shadow is invisible, so the cover gets the
   same vermilion offset block the placeholder had. */
.band-dark .cover-plain { box-shadow: 26px 26px 0 rgba(200,82,68,.30); }

.cover-todo {
  aspect-ratio: 2 / 3; width: 100%;
  background: var(--paper-2); border: 1px dashed #B7AE9C;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  font-family: var(--ui); text-transform: uppercase; letter-spacing: .16em;
  font-size: 11px; color: #A79E8C; line-height: 1.9;
  box-shadow: 22px 22px 0 rgba(200,82,68,.20);
}
.band-dark .cover-todo { background: #3A3839; border-color: #7E7975; color: #8E8884;
                         box-shadow: 26px 26px 0 rgba(200,82,68,.30); }

/* ---------- pronunciation guide ---------- */

.guide-toolbar {
  background: var(--paper-2); border-bottom: 1px solid var(--rule-2);
  padding-block: 20px;
}
.guide-toolbar .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.search {
  display: flex; align-items: center; gap: 12px;
  background: #F7F4EE; border: 1px solid #D0C7B5;
  height: 52px; padding-inline: 18px; flex: 1 1 320px; max-width: 420px;
}
.search input {
  border: 0; background: transparent; outline: none;
  font-family: var(--body); font-size: 18px; color: var(--ink);
  width: 100%; height: 100%;
}
.search input::placeholder { color: #9C938A; }
.toolbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.count { font-family: var(--ui); text-transform: uppercase; letter-spacing: .16em;
         font-size: 11px; font-weight: 700; color: #8A837B; }
.btn-playall { min-height: 48px; padding: 0 22px; font-size: 12px; }

.terms {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: clamp(32px, 5vw, 56px);
}
.terms > li { break-inside: avoid; }

.term {
  display: flex; align-items: center; gap: 20px;
  width: 100%; text-align: left;
  padding: 18px 4px; border: 0; border-bottom: 1px solid #DFD8C8;
  background: transparent; cursor: pointer; font: inherit; color: inherit;
  min-height: 44px;
}
.term:hover .dot { border-color: var(--vermilion); background: rgba(200,82,68,.10); }
.dot {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1.5px solid #CBC3B4; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .16s ease, border-color .16s ease;
}
.dot svg { fill: var(--vermilion); }
.dot.is-filled { background: var(--vermilion); border-color: var(--vermilion); }
.dot.is-filled svg { fill: var(--on-verm); }
.term.is-playing .dot { background: var(--vermilion); border-color: var(--vermilion); }
.term.is-playing .dot svg { fill: var(--on-verm); }
.term-text { flex-grow: 1; min-width: 0; }
.term-name, .term-say { display: block; }
.term-name {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: 27px; line-height: 1.08; letter-spacing: .015em; color: var(--ink);
}
.term-say { font-size: 15px; color: var(--ink-3); margin-top: 5px; }
.wave { flex: none; }
.wave path { stroke: #D2CABA; }
.term.is-playing .wave path { stroke: var(--vermilion); }

.guide-note {
  display: flex; gap: 30px; align-items: stretch;
  font-size: 19px; line-height: 1.6; color: var(--ink-2);
}
.guide-note .bar { width: 3px; background: var(--vermilion); flex: none; }
.guide-note p { max-width: 900px; }

.no-results {
  padding: 40px 4px; font-size: 19px; color: var(--ink-3);
}

/* ---------- misc blocks ---------- */

.card { background: var(--paper-3); border: 1px solid var(--rule);
        box-shadow: 0 16px 34px rgba(32,29,30,.08); }

.callout {
  display: flex; align-items: center; gap: 22px;
  padding: 22px 26px; background: var(--paper-2);
  border-left: 3px solid var(--vermilion);
  font-size: 18px; line-height: 1.55; color: var(--ink-2);
  max-width: 700px; margin-top: 34px;
}
.callout svg { flex: none; }
.callout a { font-weight: 700; box-shadow: inset 0 -1px 0 var(--vermilion); }

.portrait { border: 8px solid var(--paper); box-shadow: 0 16px 34px rgba(32,29,30,.14); width: 100%; }
.band-dark .portrait { border: 0; box-shadow: 20px 20px 0 rgba(200,82,68,.34); }

.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.link-card {
  display: flex; align-items: center; gap: 16px;
  padding: 24px; background: var(--paper-3); border: 1px solid var(--rule);
  font-family: var(--ui); text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; font-weight: 700; color: var(--ink); min-height: 44px;
}
.link-card:hover { border-color: var(--vermilion); color: var(--ink); }
.link-card svg { flex: none; stroke: var(--vermilion); }

.fineprint { font-family: var(--ui); text-transform: uppercase; letter-spacing: .16em;
             font-size: 11px; font-weight: 500; color: #948C81; }
.band-verm .fineprint { color: #F0CFC8; }

.todo {
  font-family: var(--ui); font-size: 14px; letter-spacing: .02em; text-transform: none;
  color: #948C81; font-style: italic;
}

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

@media (max-width: 1000px) {
  .split > .c4, .split > .c5, .split > .c6,
  .split > .c7, .split > .c8 { grid-column: 1 / -1; }
  .split { align-items: start; }
  .cover-wrap { max-width: 320px; margin-inline: auto; }
  .portrait-wrap { max-width: 300px; }
  .terms { columns: 1; }
}

@media (max-width: 640px) {
  body { font-size: 18px; }
  .site-header .shell { min-height: 0; padding-block: 16px; }
  .site-nav { gap: 16px; width: 100%; }
  .site-nav a { font-size: 12px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .fineprint, .btn-row .todo { text-align: center; }
  .btn-playall { width: auto; }
  .term-name { font-size: 23px; }
  .site-footer .shell { flex-direction: column; align-items: flex-start; }
  .callout { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media print {
  .site-header, .site-footer, .guide-toolbar, .glow, .grain::after { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .band { padding-block: 18pt; }
  .band-dark, .band-verm { background: #fff !important; color: #000 !important; }
  .band-dark .disp, .band-verm .disp { color: #000 !important; }
  .terms { columns: 2; }
}