/* === Calder N. Halden — Author Site Base (no rollover) === */
/* Asset map:
   Fonts  : https://cnhalden.com/assets/fonts/
   Images : https://cnhalden.com/images/
*/

/* -------------------------------------------------
   00) FONTS
------------------------------------------------- */
@font-face{
  font-family:"Cinzel Decorative";
  font-style:normal;
  font-weight:700;
  src:url("https://cnhalden.com/assets/fonts/cinzeldecorative-bold-webfont.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Serif";
  font-style:normal;
  font-weight:400;
  src:url("https://cnhalden.com/assets/fonts/IBMPlexSerif-Regular.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Unica One";
  font-style:normal;
  font-weight:400;
  src:url("https://cnhalden.com/assets/fonts/UnicaOne-Regular.woff2") format("woff2");
  font-display:swap;
}

/* Uncial Antiqua (Drop Caps) */
@font-face {
  font-family: "Uncial Antiqua";
  src: url("https://cnhalden.com/assets/fonts/UncialAntiqua-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* -------------------------------------------------
   01) THEME TOKENS
------------------------------------------------- */
:root{
  --bg-0:#0a0a0b;         /* near-black charcoal */
  --bg-1:#141417;         /* panels/nav */
  --ink:#e6e3dc;          /* body text */
  --muted:#aaa7a1;        /* secondary text */
  --gold:#e0b84a;         /* author accent */
  --violet:#9c7cff;       /* subtle accent */
  --line:#2a2a2e;         /* borders/rules */

  /* Archive solids */
  --archive-red:#7b0c0c;      /* EchoFyre */
  --archive-green:#102c0d;    /* EarthRite */
  --archive-yellow:#c7b955;   /* ShadowWinds */
  --archive-blue:#00747a;     /* MirrorDrown */
  --archive-silver:#c5c7c9;   /* The Archive Made Flesh */
  --archive-stenn:#05abda;    /* Project STENN */

  /* Archive gradients */
  --grad-archive-red-hero:    linear-gradient(180deg, #7b0c0c00 0%, #7b0c0ccc 65%, #7b0c0cf0 100%);
  --grad-archive-green-hero:  linear-gradient(180deg, #102c0d00 0%, #102c0dcc 65%, #102c0df0 100%);
  --grad-archive-yellow-hero: linear-gradient(180deg, #c7b95500 0%, #c7b955cc 65%, #c7b955f0 100%);
  --grad-archive-blue-hero:   linear-gradient(180deg, #00747a00 0%, #00747acc 65%, #00747af0 100%);
  --grad-archive-silver-hero: linear-gradient(180deg, #c5c7c900 0%, #c5c7c9cc 65%, #c5c7c9f0 100%);
  --grad-archive-stenn-hero:  linear-gradient(180deg, #05abda00 0%, #05abdacc 65%, #05abdaf0 100%);

  --grad-archive-red-glass:    linear-gradient(180deg, #7b0c0c22, #7b0c0c55);
  --grad-archive-green-glass:  linear-gradient(180deg, #102c0d22, #102c0d55);
  --grad-archive-yellow-glass: linear-gradient(180deg, #c7b95522, #c7b95555);
  --grad-archive-blue-glass:   linear-gradient(180deg, #00747a22, #00747a55);
  --grad-archive-silver-glass: linear-gradient(180deg, #c5c7c922, #c5c7c955);
  --grad-archive-stenn-glass:  linear-gradient(180deg, #05abda22, #05abda55);
}

/* Optional hero wrappers per archive */
.hero--red    { background-image: var(--grad-archive-red-hero); }
.hero--green  { background-image: var(--grad-archive-green-hero); }
.hero--yellow { background-image: var(--grad-archive-yellow-hero); }
.hero--blue   { background-image: var(--grad-archive-blue-hero); }
.hero--silver { background-image: var(--grad-archive-silver-hero); }
.hero--stenn  { background-image: var(--grad-archive-stenn-hero); }

/* -------------------------------------------------
   02) BASE ELEMENTS
------------------------------------------------- */
html,body{
  margin:0;
  background:linear-gradient(180deg, var(--bg-0), #111115 45%, var(--bg-0));
  color:var(--ink);
  font-family:"IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}

/* -------------------------------------------------
   03) NAV (BASE)
   (Hamburger behavior will hook into your updated nav markup)
------------------------------------------------- */
.author-nav{
  background:var(--bg-1);
  border-bottom:1px solid var(--line);
}
.author-nav .wrap{
  max-width:1200px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}

.brand{
  font-family:"Cinzel Script","Cinzel Decorative",serif;
  font-weight:400;
  font-size:24px;
  letter-spacing:.05em;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
  text-shadow:0 0 6px #000;
}
.brand .accent{ color:var(--gold); }

.nav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.nav a{
  font-family:"Unica One", system-ui, sans-serif;
  font-size:14.5px;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--ink);
  padding:6px 8px;
  border-radius:6px;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav a:hover,
.nav a:focus-visible{
  color:var(--bg-0);
  background:var(--gold);
  box-shadow:0 0 10px #e0b84a55;
  outline:none;
}

/* ===== NAV TOGGLE (hamburger) ===== */
/* Default: desktop shows links, hides button */
.nav-toggle{
  display:none;
  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.10em;
  font-size:14px;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  white-space:nowrap;
}

/* Mobile: show button, collapse menu until .is-open */
@media (max-width:820px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Keep brand + button on the top row */
  .author-nav .wrap{
    flex-wrap:wrap; /* allows menu to drop under */
  }

  /* Collapse menu by default */
  .author-nav .nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:10px 0 2px;
    border-top:1px solid var(--line);
    margin-top:6px;
  }

  /* Open state (your JS toggles .is-open on [data-nav]) */
  .author-nav.is-open .nav{ display:flex; }

  /* Make each link a nice tap target */
  .author-nav .nav a{
    width:100%;
    padding:10px 10px;
    border-radius:10px;
  }
}

.author-nav{ position: relative; z-index: 10000; }
.nav-toggle{ position: relative; z-index: 10001; }

/* -------------------------------------------------
   04) HERO (single canonical system)
------------------------------------------------- */
.author-hero{
  background:#000;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  height:clamp(200px, 30vh, 380px);
}
.author-hero .banner{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:brightness(.95) contrast(1.02);
}

/* responsive hero scaling */
@media (min-width:1280px){
  .author-hero{ height:clamp(240px, 32vh, 420px); }
}
@media (min-width:1600px){
  .author-hero{ height:clamp(260px, 34vh, 440px); }
}
@media (min-width:2000px){
  .author-hero{ height:clamp(280px, 36vh, 460px); }
}
@media (max-width:820px){
  .author-hero{ height:clamp(190px, 38vh, 360px); }
}

/* Optional overlay copy (disabled by default) */
.author-hero .overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3vw;
}
.author-hero h1{
  margin:0;
  font-family:"Cinzel Decorative", serif;
  font-weight:700;
  letter-spacing:.04em;
  font-size:clamp(32px,4.2vw,56px);
  color:var(--gold);
  text-shadow:0 0 12px #000;
}
.author-hero p.tag{
  margin:.6rem 0 0;
  font-family:"Unica One", system-ui, sans-serif;
  font-size:clamp(14px,1.6vw,18px);
  color:#d5c079;
  text-shadow:0 0 10px #000;
}

/* Books page: show full banner image (no fixed hero height) */
.page-books .author-hero:not(.hero-roller){
  height:auto;
  padding:0;
}
.page-books .author-hero:not(.hero-roller) .banner{
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}

/* -------------------------------------------------
   05) LAYOUT / CONTENT
------------------------------------------------- */
.page{
  max-width:1000px;
  margin:0 auto;
  padding:24px 18px 64px;
}

.entry-box.author{
  background:rgba(10,10,11,.55);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 0 20px #0006;
  overflow:hidden;
}
.copy{ padding:28px 22px; }
.copy p{ margin:.65rem 0; }
.copy strong{ color:#f0ead7; }
.copy em{ color:#d8d3c6; }
.center{text-align:center}

/* Images placed inside content blocks */
.entry-box.author img.banner{
  margin:0;
  width:100%;
  max-height:420px;
  object-fit:cover;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Rules */
.hr-archive{
  border:0;
  height:1px;
  margin:22px 0;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}

/* Block Quotes */
blockquote{
  max-width:800px;
  margin:0 auto;
  padding:20px;
  color:var(--muted);
  border-left:2px solid var(--line);
}

/* -------------------------------------------------
   06) BUTTONS
------------------------------------------------- */
.btn-row{
  display:flex;
  justify-content:center;
  gap:12px;
  padding:18px;
  flex-wrap:wrap; /* mobile friendly */
}
.btn{
  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--bg-0);
  background:var(--gold);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:44px; /* tap target */
  padding:10px 18px;
  border-radius:10px;
  box-shadow:0 0 16px #e0b84a44;
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 18px #e0b84a66;
}
@media (max-width:480px){
  .book-block .btn{ width:100%; }
}

/* -------------------------------------------------
   07) FAQ / DETAILS + ACCENTS
------------------------------------------------- */
.faq-item{
  --accent: var(--gold);
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:10px;
  margin:12px 0;
  overflow:hidden;
}
.faq-item[data-accent="red"]     { --accent: var(--archive-red); }
.faq-item[data-accent="green"]   { --accent: var(--archive-green); }
.faq-item[data-accent="yellow"]  { --accent: var(--archive-yellow); }
.faq-item[data-accent="blue"]    { --accent: var(--archive-blue); }
.faq-item[data-accent="silver"]  { --accent: var(--archive-silver); }
.faq-item[data-accent="stenn"]   { --accent: var(--archive-stenn); }
.faq-item[data-accent="gold"]    { --accent: var(--gold); }
.faq-item[data-accent="violet"]  { --accent: var(--violet); }

.faq-item > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px 14px 36px; /* room for dot */
  background:#101014;
  color:var(--ink);
  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.06em;
  position:relative;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
  transform:translateY(-50%);
  box-shadow:0 0 10px color-mix(in oklab, var(--accent) 40%, transparent);
}
.faq-panel{
  padding:14px 16px;
  background:#0e0e10;
  border-top:1px solid var(--line);
}

/* Cover pair */
.cover-pair{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.cover img{
  width:min(360px, 90vw);
  border-radius:10px;
  box-shadow:0 8px 30px #0008;
}
.release-note .date{ color:var(--gold); }

/* -------------------------------------------------
   08) FOOTER
------------------------------------------------- */
footer.site-footer{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  padding:36px 18px 50px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, #0d0d0f 0%, #0a0a0b 100%);
}
footer.site-footer p{
  margin:6px 0;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}
footer.site-footer a{
  color:var(--gold);
  text-decoration:none;
  transition:color .2s ease, text-shadow .2s ease;
  font-size:12.5px;
}
footer.site-footer a:hover{
  color:#fff3c2;
  text-shadow:0 0 6px #e0b84a55;
}
footer.site-footer em{
  color:#d8d3c6;
  font-style:italic;
}
@media (max-width:820px){
  footer.site-footer{ font-size:12px; padding:28px 14px 40px; }
  footer.site-footer a{ font-size:12px; }
}

/* -------------------------------------------------
   09) CONTACT FORM (canonical consolidated)
------------------------------------------------- */
.contact-form{
  max-width:640px;
  margin:0 auto;
  text-align:left;
}
.contact-form *{ box-sizing:border-box; }

.contact-form label{
  display:block;
  margin:12px 0 6px;
  line-height:1.25;
  font-family:"Unica One", sans-serif;
  letter-spacing:.08em;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  max-width:100%;
  font-size:16px; /* prevents iOS zoom-on-focus */
  -webkit-appearance:none;
  appearance:none;
  background:#0e0e10;
  border:1px solid var(--line);
  color:var(--ink);
  font-family:"IBM Plex Serif", serif;
  padding:10px;
  border-radius:8px;
  resize:vertical;
}

/* Normalize odd generator wrappers */
.contact-form .row,
.contact-form .pair,
.contact-form .inline,
.contact-form .field,
.contact-form .form-group{
  display:contents;
}

/* Hide honeypot-ish fields if they appear */
.contact-form [type="hidden"],
.contact-form .honeypot,
.contact-form .hp,
.contact-form input[name*="website" i],
.contact-form input[name*="url" i]{
  display:none !important;
  height:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* reCAPTCHA alignment */
.contact-form .g-recaptcha{
  margin:10px auto 0 !important;
  transform:none !important;
  transform-origin:center top;
}

/* Buttons */
.contact-form .btn-row{
  display:flex;
  justify-content:center;
  gap:12px;
  padding-top:18px;
}
.contact-form .btn{ min-width:140px; }

/* Mobile stack */
@media (max-width:600px){
  .contact-form textarea{ min-height:160px; }
}

/* Desktop: optional 2-col grid */
@media (min-width:720px){
  .contact-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 18px;
  }
  .contact-form textarea,
  .contact-form .g-recaptcha,
  .contact-form .btn-row{
    grid-column:1 / -1;
  }
  .contact-form .half{ grid-column:auto; }
  .contact-form .full{ grid-column:1 / -1; }
}

/* Honeypot helper classes (visually hidden but in DOM) */
.hp-trap,
.vh{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  white-space:nowrap;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  top:0;
  left:0;
}
.hp-trap input{ pointer-events:none; }

/* -------------------------------------------------
   10) NEWSLETTER FORM
------------------------------------------------- */
.newsletter-box .copy{
  padding-top:22px;
  padding-bottom:22px;
}

.newsletter-form{
  max-width:720px;
  margin:0 auto;
}
.newsletter-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:stretch;
}
.newsletter-input{
  width:100%;
  min-width:0;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.35);
  color:var(--ink);
  outline:none;
}
.newsletter-input::placeholder{ color:var(--muted); }
.newsletter-input:focus{
  border-color:rgba(224,184,74,.55);
  box-shadow:0 0 0 3px rgba(224,184,74,.12);
}
@media (max-width:640px){
  .newsletter-row{ grid-template-columns:1fr; }
  .newsletter-form .btn{ width:100%; }
}

/* -------------------------------------------------
   11) SECTION BACKGROUNDS
------------------------------------------------- */
.section-bg{
  --bg-url:url("/images/bio_background_001.webp");
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.section-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--bg-url);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-2;
}
.section-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.85) 0%,
      rgba(0,0,0,.75) 14%,
      rgba(0,0,0,.60) 28%,
      rgba(0,0,0,.50) 42%,
      rgba(0,0,0,.45) 60%,
      rgba(0,0,0,.40) 100%
    ),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
}
.section-bg .section-inner{
  position:relative;
  z-index:1;
  padding:clamp(2.5rem, 3vw, 4rem) 1rem;
  max-width:70ch;
  margin:0 auto;
}

/* background section treatment */
.entry-box.author.section-bg{
  border-radius:1rem;
  backdrop-filter:blur(4px);
  background-color:rgba(0,0,0,0.18);
}
.entry-box.author.section-bg p,
.entry-box.author.section-bg em,
.entry-box.author.section-bg strong{
  color:rgba(255,255,255,0.92);
}
.entry-box.author.section-bg .section-title{
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
@media (prefers-reduced-data: reduce){
  .section-bg::before{ background-image:none; }
  .section-bg::after{ background:none; }
}

/* -------------------------------------------------
   12) AUTHOR PHOTO / PRESS LOGOS
------------------------------------------------- */
.author-photo{
  text-align:center;
  margin:2.5rem auto 3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.author-photo img{
  width:240px;
  height:auto;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.author-photo figcaption{
  font-size:.95rem;
  color:rgba(255,255,255,0.85);
  margin-top:.5rem;
  font-style:italic;
}

.press-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:4rem;
  margin:3rem auto 4rem;
}
.press-logo{
  text-align:center;
  max-width:280px;
}
.press-logo img{
  height:140px;
  width:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  opacity:.9;
  transition:opacity .25s ease;
}
.press-logo img:hover{ opacity:1; }
.press-logo figcaption{
  font-family:"Unica One", sans-serif;
  font-size:.85rem;
  letter-spacing:.05em;
  margin-top:.4rem;
  color:var(--muted);
}
@media (max-width:640px){
  .press-logo img{ max-height:90px; }
}

/* -------------------------------------------------
   13) CTA EFFECTS (SHIMMER + EMBERS)
------------------------------------------------- */
.calder-shimmer-btn{
  position:relative;
  overflow:hidden;
}
.calder-shimmer-btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.45) 50%,
    transparent 100%
  );
  transform:skewX(-20deg);
  transition:all .65s ease;
}
.calder-shimmer-btn:hover::after{ left:160%; }

.ember-cta{
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s ease-out, transform .9s ease-out;
}
.ember-cta.is-visible{
  opacity:1;
  transform:translateY(0);
}
.ember-cta::before,
.ember-cta::after{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;
}
.ember-cta::before{
  background:
    radial-gradient(circle at 20% 0%, rgba(0,0,0,0.35), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(0,0,0,0.4), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.9) 80%, rgba(0,0,0,0.98) 100%);
  z-index:1;
}
.ember-cta::after{
  z-index:1;
  opacity:.45;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(circle, rgba(255,172,94,0.9) 0, rgba(255,172,94,0.9) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,110,64,0.75) 0, rgba(255,110,64,0.75) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,214,165,0.8) 0, rgba(255,214,165,0.8) 2px, transparent 3px);
  background-size:220px 220px, 260px 260px, 200px 200px;
  background-position:0 0, 80px 40px, -60px 120px;
  animation:emberFloat 24s linear infinite;
}

@keyframes emberFloat{
  0%{
    transform:translate3d(0,0,0);
    background-position:0 0, 80px 40px, -60px 120px;
    opacity:.45;
  }
  50%{
    transform:translate3d(-40px, -60px, 0);
    background-position:-30px -40px, 40px 0, -90px 60px;
    opacity:.55;
  }
  100%{
    transform:translate3d(-80px, -130px, 0);
    background-position:-60px -80px, 0 -40px, -120px 0;
    opacity:.4;
  }
}

.ember-cta .copy{ position:relative; z-index:2; }

.ember-cta h2{
  animation:headerGlow 6s ease-in-out infinite alternate;
}
@keyframes headerGlow{
  0%{
    text-shadow:
      0 0 6px #000,
      0 0 12px rgba(224,184,74,0.45),
      0 0 22px rgba(224,184,74,0.3);
  }
  100%{
    text-shadow:
      0 0 8px #000,
      0 0 18px rgba(224,184,74,0.85),
      0 0 32px rgba(224,184,74,0.6);
  }
}

/* -------------------------------------------------
   14) TAGLINE COLOR SYSTEM
------------------------------------------------- */
.tag-soul{
  color:#e0b84a;
  font-weight:600;
  text-shadow:0 0 4px rgba(0,0,0,0.5);
}
.tag-endorphins{
  color:#b31620;
  font-weight:600;
  text-shadow:0 0 4px rgba(0,0,0,0.5);
}
.tag-plot{
  color:#66a9b3;
  font-weight:600;
  text-shadow:0 0 4px rgba(0,0,0,0.5);
}
.tag-soul,
.tag-endorphins,
.tag-plot{
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.tag-soul:hover,
.tag-endorphins:hover,
.tag-plot:hover{
  border-bottom-color:currentColor;
}

.tag-modifier{
  font-size:.85em;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--muted);
  opacity:.9;
}
.tag-modifier::before{
  content:"· ";
  opacity:.6;
}
.shorts-legend-copy.subtle{
  font-size:.9em;
  opacity:.75;
}
.short-tone{ margin:.25rem 0 .35rem; }

/* -------------------------------------------------
   15) STAFF NOTE (EVAN ROOK)
------------------------------------------------- */
.staff-note{
  --accent:var(--archive-blue);
  background:rgba(10,10,11,0.55);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 0 20px #0006;
  overflow:hidden;
  max-width:78ch;
  margin:22px auto;
}
.staff-note--blue{
  background:linear-gradient(
    135deg,
    rgba(10,10,11,0.78),
    color-mix(in oklab, rgba(10,10,11,0.92) 82%, var(--accent) 18%)
  );
}
.staff-note::before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.staff-note__header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 18px 10px;
}
.staff-note__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px color-mix(in oklab, var(--accent) 55%, transparent);
  flex:0 0 auto;
}
.staff-note__title{
  margin:0;
  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:13px;
  color:var(--ink);
}
.staff-note__body{
  padding:8px 18px 18px;
  line-height:1.65;
}
.staff-note__body p{ margin:.75rem 0; }
.staff-note__sig{
  margin-top:1rem;
  font-family:"IBM Plex Serif", serif;
  font-style:italic;
  color:var(--muted);
}
@media (max-width:820px){
  .staff-note{ margin:18px 0; }
  .staff-note__header{ padding:16px 14px 8px; }
  .staff-note__body{ padding:6px 14px 16px; }
}

/* -------------------------------------------------
   16) GHOST LINK
------------------------------------------------- */
.ghost-link{
  display:inline-block;
  text-decoration:none;
  color:inherit;
  cursor:default;
}
.ghost-link:hover,
.ghost-link:focus,
.ghost-link:active{
  text-decoration:none;
  color:inherit;
  outline:none;
}

/* -------------------------------------------------
   17) SMALL MOBILE TWEAKS (layout padding only)
------------------------------------------------- */
@media (max-width:820px){
  .page{ padding:18px 14px 52px; }
  .entry-box.author .copy{ padding:22px 16px; }
}

/* -------------------------------------------------
   18) BOOK FEATURE (optional)
------------------------------------------------- */
@media (min-width:1024px){
  #book-feature img{ max-height:380px; }
}
@media (max-width:820px){
  [aria-label="Featured book"] img{
    max-height:260px;
    max-width:86%;
  }
}

/* -------------------------------------------------
   19) Drop Down Navigation (CNHalden.com Index Only)
------------------------------------------------- */

/* Container sits inline with the other nav links */
.nav-dd{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Remove default marker */
.nav-dd > summary{ list-style: none; }
.nav-dd > summary::-webkit-details-marker{ display:none; }

/* Make SUMMARY match .nav a exactly */
.nav-dd-btn{
  font-family:"Unica One", system-ui, sans-serif;
  font-size:14.5px;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--ink);

  padding:6px 8px;          /* MATCH .nav a */
  border-radius:6px;        /* MATCH .nav a */
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;

  display:inline-flex;
  align-items:center;
  gap:.35rem;

  cursor:pointer;
  background:transparent;
  border:0;
  box-shadow:none;
  outline:none;
}

/* Hover + focus-visible match .nav a:hover/.nav a:focus-visible */
.nav-dd-btn:hover,
.nav-dd-btn:focus-visible{
  color:var(--bg-0);
  background:var(--gold);
  box-shadow:0 0 10px #e0b84a55;
  outline:none;
}

/* Keep it highlighted while open (feels like an active button) */
.nav-dd[open] > .nav-dd-btn{
  color:var(--bg-0);
  background:var(--gold);
  box-shadow:0 0 10px #e0b84a55;
}

/* Caret */
.nav-dd .caret{
  font-size:.85em;
  opacity:.9;
}

/* Dropdown panel */
.nav-dd-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:2000;

  min-width:240px;
  padding:6px;
  border-radius:10px;

  background:rgba(0,0,0,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.55);
}

.nav-dd[open] .nav-dd-menu{ display:block; }

/* Menu items should feel like nav buttons, not plain text */
.nav-dd-menu a{
  font-family:"Unica One", system-ui, sans-serif;
  font-size:14.5px;
  letter-spacing:.08em;

  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
}

.nav-dd-menu a:hover,
.nav-dd-menu a:focus-visible{
  color:var(--bg-0);
  background:var(--gold);
  box-shadow:0 0 10px #e0b84a55;
  outline:none;
}

/* Mobile: when hamburger is open, make the dropdown inline like the other links */
@media (max-width:820px){
  .author-nav.is-open .nav-dd{
    display:block;
    width:100%;
  }

  .author-nav.is-open .nav-dd-btn{
    width:100%;
    padding:10px 10px;     /* MATCH mobile .author-nav .nav a */
    border-radius:10px;    /* MATCH mobile .author-nav .nav a */
    justify-content:flex-start;
  }

  .author-nav.is-open .nav-dd-menu{
    position:static;
    display:none;
    min-width:0;
    box-shadow:none;
    margin-top:6px;
    padding:0;
    border:0;
    background:transparent;
  }

  .author-nav.is-open .nav-dd[open] .nav-dd-menu{
    display:block;
  }

  .author-nav.is-open .nav-dd-menu a{
    width:100%;
    padding:10px 10px;
    border-radius:10px;
  }
}

.nav-dd-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* default note: subtle, secondary */
.nav-note{
  font-size:.85em;
  letter-spacing:.06em;
  opacity:.85;
  color:rgba(224,184,74,.85); /* soft gold note */
}

/* “Start Here” can be slightly brighter */
.nav-note-start{
  color:rgba(224,184,74,1);
}

/* if you really want red, use it sparingly */
.nav-note-warn{
  color:#d85a5a; /* controlled red, not neon */
  opacity:1;
}

/* === Home Split Panels (Shorts / Slash) === */
/* Make the whole card a link without looking like a link */
.split-link{
  display:block;
  color: inherit;
  text-decoration: none;
}

/* Small CTA instead of big buttons */
.split-cta{
  display:inline-block;
  margin-top: 10px;
  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.10em;
  font-size: 14px;
  color: rgba(224,184,74,.95); /* your gold */
  text-shadow: 0 0 10px #000;
}

/* Hover/focus: subtle “this is clickable” */
.split-link:hover,
.split-link:focus-visible{
  transform: translateY(-1px);
}

.split-card{
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.split-link:hover.split-card,
.split-link:focus-visible.split-card{
  border-color: rgba(224,184,74,.35);
  box-shadow: 0 0 24px #0008, 0 0 18px rgba(224,184,74,.12);
  outline: none;
}

/* Optional: a faint inner edge for the “panel” feeling */
.split-card{
  box-shadow: 0 0 20px #0006, inset 0 0 0 1px rgba(255,255,255,.03);
}

.entry-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px 0;
}

.split-card{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 20px #0006;
  min-height: 210px;
  background: #000;
  isolation: isolate;
}

/* Background image */
.split-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(.75) contrast(1.05);
  z-index: -2;
}

/* Readability overlay */
.split-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 55%, rgba(0,0,0,.72) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 70%);
}

.split-inner{
  padding: 26px 22px;
  text-align: center;
}

.split-inner h2{
  margin: 0 0 10px;
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
  text-shadow: 0 0 12px #000;
  font-size: 22px;
}

.split-inner p{
  margin: 0 auto 14px;
  max-width: 52ch;
  color: rgba(230,227,220,.92);
  text-shadow: 0 0 10px #000;
}

/* Make the button row tighter inside these cards */
.split-card .btn-row{
  padding: 0;
}

/* Responsive: stack on mobile */
@media (max-width: 820px){
  .entry-split{
    grid-template-columns: 1fr;
  }
  .split-card{
    min-height: 200px;
  }
}

/* -------------------------------------------------
   PUBLICATION RIBBON
------------------------------------------------- */

.publication-ribbon{
  width:100%;
  background:
    linear-gradient(
      90deg,
      rgba(224,184,74,.10) 0%,
      rgba(156,124,255,.07) 48%,
      rgba(224,184,74,.10) 100%
    ),
    linear-gradient(180deg, rgba(30,26,18,.95), rgba(13,13,15,.98));
  border-top:1px solid rgba(224,184,74,.18);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  overflow:hidden;
}

.publication-ribbon-link{
  max-width:1100px;
  margin:0 auto;
  padding:9px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
  font-family:"IBM Plex Serif", serif;
  line-height:1.35;
}

.publication-ribbon-kicker,
.publication-ribbon-cta{
  flex:0 0 auto;
  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.78rem;
}

.publication-ribbon-kicker{
  color:var(--gold);
  border:1px solid rgba(224,184,74,.38);
  border-radius:999px;
  padding:4px 10px;
  background:rgba(224,184,74,.08);
  box-shadow:0 0 12px rgba(224,184,74,.12);
}

.publication-ribbon-text{
  max-width:430px;
  color:#e6e3dc;
  font-size:.94rem;
}

.publication-ribbon-text strong{
  color:#f0ead7;
}

.publication-ribbon-note{
  max-width:360px;
  color:var(--muted);
  font-size:.88rem;
  font-style:italic;
}

.publication-ribbon-cta{
  color:var(--bg-0);
  background:var(--gold);
  border-radius:999px;
  padding:5px 12px;
  box-shadow:0 0 10px rgba(224,184,74,.22);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.publication-ribbon-link:hover .publication-ribbon-cta,
.publication-ribbon-link:focus-visible .publication-ribbon-cta{
  transform:translateY(-1px);
  background:#f0cf67;
  box-shadow:0 0 18px rgba(224,184,74,.45);
}

.publication-ribbon-link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:-2px;
}

/* Slight tightening on medium screens before the mobile stack */
@media (max-width:1040px){
  .publication-ribbon-link{
    max-width:920px;
    gap:10px;
  }

  .publication-ribbon-text{
    max-width:380px;
  }

  .publication-ribbon-note{
    max-width:320px;
  }
}

/* Mobile: stacked, readable, not crushed */
@media (max-width:820px){
  .publication-ribbon-link{
    flex-direction:column;
    gap:7px;
    padding:13px 16px;
    text-align:center;
  }

  .publication-ribbon-text{
    max-width:680px;
    font-size:.95rem;
  }

  .publication-ribbon-note{
    max-width:680px;
    font-size:.86rem;
  }

  .publication-ribbon-cta{
    margin-top:2px;
  }
}