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

/* ---- 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;
}

/* -------------------------------------------------
   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 COLORS — SOLIDS
------------------------------------------------- */
:root{
  --archive-red:    #7b0c0c; /* EchoFyre */
  --archive-green:  #102c0d; /* EarthRite */
  --archive-yellow: #c7b955; /* ShadowWinds (alt: #9dcbe8) */
  --archive-blue:   #00747a; /* MirrorDrown */
  --archive-silver: #c5c7c9; /* The Archive Made Flesh */
  --archive-stenn:  #05abda; /* Project STENN */

  /* Neutral system already present; keeping for reference
     --bg-0:#0a0a0b; --bg-1:#141417; --ink:#e6e3dc; --muted:#aaa7a1; --line:#2a2a2e; */
}

/* -------------------------------------------------
   ARCHIVE GRADIENTS — HERO / PANELS / GLASS
   (8-digit hex = with opacity; great browser support)
------------------------------------------------- */
:root{
  /* Vertical “hero” fades */
  --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%);

  /* Subtle “glass” overlays for cards / accordions */
  --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);
}

/* -------------------------------------------------
   ACCENT MAPPING — details/summary blocks
------------------------------------------------- */
.faq-item{ --accent: var(--gold); } /* default */
.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); }

/* Optional: hero wrappers per archive (use as needed) */
.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); }

/* ---- Base ---- */
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}

/* ---- Top Nav (static; sits above hero) ---- */
.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; flex-wrap:wrap; gap:14px;
}
.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;
}

/* ---- Hero Banner (balanced scale across all screens) ---- */
.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);   /* a touch taller overall */
}

.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); } /* keeps presence on ultrawide displays */
}
@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;               /* switch to flex if needed later */
  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;
}

/* ---- Page/content shell ---- */
.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);
}

/* Buttons */
.btn-row{ display:flex; justify-content:center; gap:12px; padding:18px; }
.btn{
  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.08em;
  text-decoration:none;
  color:var(--bg-0);
  background:var(--gold);
  padding:10px 16px;
  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; }

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

/* FAQ/details */
.faq-item{ border:1px solid var(--line); border-radius:10px; margin:12px 0; overflow:hidden; }
.faq-item > summary{
  list-style:none; cursor:pointer; padding:14px 16px;
  background:#101014; color:var(--ink);
  font-family:"Unica One", system-ui, sans-serif; letter-spacing:.06em;
}
.faq-item > summary::-webkit-details-marker{ display:none }
.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); }

/* ---- Footer ---- */
footer.site-footer{
  text-align:center;
  color:var(--muted);
  font-size:13px;           /* smaller, but still readable on mobile */
  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;         /* links just a touch smaller */
}

footer.site-footer a:hover{
  color:#fff3c2;
  text-shadow:0 0 6px #e0b84a55;
}

footer.site-footer em{
  color:#d8d3c6;
  font-style:italic;
}

/* optional: even smaller on phones */
@media (max-width:820px){
  footer.site-footer{ font-size:12px; padding:28px 14px 40px; }
  footer.site-footer a{ font-size:12px; }
}

/* ---- Mobile ---- */
@media (max-width: 820px){
  .author-nav .wrap{ flex-direction:column; align-items:flex-start; gap:10px; }
  .nav{ gap:10px; }
  /* taller bar on small screens; image still fully visible */
  .author-hero{ min-height: clamp(200px, 38vh, 380px); }
  .page{ padding:18px 14px 52px; }
}

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

/* --- Responsive hero scaling: smaller on big displays, present on mobile --- */
@media (min-width: 1280px){
  .author-hero{ min-height: clamp(140px, 22vh, 280px); }
}
@media (min-width: 1600px){
  .author-hero{ min-height: clamp(120px, 18vh, 240px); }
}
@media (min-width: 2000px){
  .author-hero{ min-height: clamp(110px, 14vh, 200px); }
}
/* Keep some presence on phones */
@media (max-width: 820px){
  .author-hero{ min-height: clamp(180px, 36vh, 360px); }
}

/* --- Contact Form --- */
.contact-form{
  max-width:520px;
  margin:0 auto;
  text-align:left;
}
.contact-form label{
  display:block;
  margin:12px 0 4px;
  font-family:"Unica One", sans-serif;
  letter-spacing:.08em;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  background:#0e0e10;
  border:1px solid var(--line);
  color:var(--ink);
  font-family:"IBM Plex Serif", serif;
  padding:10px;
  border-radius:8px;
  resize:vertical;
}
.contact-form button.btn{
  margin-top:14px;
}
.contact-form .btn-row{
  justify-content:center;
  padding-top:20px;
}
.contact-form .btn{
  min-width:140px;
}

/* --- Tweek for Book Hero --- */
/* Optional: slightly larger book on wide screens */
@media (min-width: 1024px){
  #book-feature img { max-height: 380px; }
}

/* === Mobile Adjustments (post-head fix) === */

/* NAV: keep brand + links on one line; allow gentle horizontal scroll on tiny screens */
@media (max-width: 820px){
  .author-nav .wrap{
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }
  .nav a{
    white-space: nowrap;
    font-size: 14px;
    padding: 6px 8px;
  }
}

/* Featured book: scale down image on phones */
@media (max-width: 820px){
  [aria-label="Featured book"] img{
    max-height: 260px;
    max-width: 86%;
  }
}

/* Credo panel: tighten padding on mobile */
@media (max-width: 820px){
  .entry-box.author .copy{
    padding: 22px 16px;
  }
}

/* Contact form: prevent iOS zoom on focus */
.contact-form input,
.contact-form textarea,
.contact-form select{
  font-size: 16px;
}

/* ===== Contact form: bulletproof mobile stack, desktop preserved ===== */

/* Base hygiene: make the form predictable across browsers */
.contact-form{
  max-width: 640px;
  margin: 0 auto;
}
.contact-form *{ box-sizing: border-box; }

/* Inputs: consistent look + iOS no-zoom */
.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;
}

/* Labels above fields everywhere by default */
.contact-form label{
  display: block;
  margin: 12px 0 6px;
  line-height: 1.25;
}

/* Kill random inline/floats some generators add */
.contact-form .row,
.contact-form .pair,
.contact-form .inline,
.contact-form .field,
.contact-form .form-group{
  display: contents; /* let children flow; grid rules below will take over on desktop */
}

/* Honeypot fields that sometimes show on mobile */
.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;   /* avoid odd gaps */
  transform-origin: center top;
}

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

/* ----------------- Mobile-first stack ----------------- */
@media (max-width: 600px){
  /* Force all labels+controls to stack, even if HTML tries to be two-column */
  .contact-form label,
  .contact-form label + *,
  .contact-form label + div > *,
  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Common “half width” fields (Name/Email, Subject/Inquiry) → full width on phones */
  .contact-form input[name*="name" i],
  .contact-form input[name*="email" i],
  .contact-form input[name*="subject" i],
  .contact-form input[name*="inquiry" i]{
    width: 100% !important;
  }

  .contact-form textarea{ min-height: 160px; }
}

/* ----------------- Desktop: optional 2-col grid ----------------- */
/* If your PHP outputs Name/Email in one row, this gives a clean 2-col layout ≥ 720px */
@media (min-width: 720px){
  .contact-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
  }
  /* Make long fields span both columns */
  .contact-form textarea,
  .contact-form .g-recaptcha,
  .contact-form .btn-row{
    grid-column: 1 / -1;
  }
  /* If you want Name/Email in two columns, add these optional helpers: */
  .contact-form .half{ grid-column: auto; }
  .contact-form .full{ grid-column: 1 / -1; }
}

/* Honeypot: hide visually on every device, still in DOM for bots */
.hp-trap{ 
  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; }     /* prevents accidental focus */
.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%);
}

/* Books page: show full banner image */
.page-books .author-hero:not(.hero-roller){
  height:auto;           /* stop forcing a fixed hero height */
  min-height:unset;
  padding:0;
}
.page-books .author-hero:not(.hero-roller) .banner{
  width:100%;            /* scale by width so the whole image shows */
  height:auto;
  max-width:100%;
  object-fit:contain;    /* full image, no crop */
}

/* Make buttons size to content, not square up */
.btn-row{ 
  flex-wrap:wrap;        /* allow wrapping on small screens */
}

.btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  flex:0 0 auto;         /* don’t stretch */
  min-height:44px;       /* tap target */
  padding:10px 18px;     /* keeps proportions */
}

/* If you want full-width buttons under Book I on phones, add: */
@media (max-width: 480px){
  .book-block .btn{ width:100%; }
}

/* Accent system for book/project sections */
.faq-item{
  --accent: var(--gold);         /* default; already in your theme */
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:10px;
  margin:12px 0;
  overflow:hidden;
}

/* Color swatches — tune these to your palette */
.faq-item[data-accent="gold"]  { --accent: #e0b84a; } /* Book I? */
.faq-item[data-accent="violet"]{ --accent: #9c7cff; } /* Book II? */
.faq-item[data-accent="stenn"] { --accent: #5bd1ff; } /* Project STENN (placeholder) */

/* A small marker dot before the title */
.faq-item > summary{
  position:relative;
  padding-left:36px; /* room for the dot */
}
.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);
}

/* Full-bleed background for a section, with a readable overlay */
.section-bg {
  --bg-url: url("/images/bio_background_001.webp"); /* safe default */
  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;
  /* no background-attachment: fixed; avoids iOS jank */
  z-index: -2;
}

.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Top fade band for readability */
    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%
    ),
    /* Base veil across the whole area */
    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;
}

/* Slightly soften the edges of the text container */
.entry-box.author.section-bg {
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.35);
}

/* Increase contrast for body text against the background */
.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);
}

/* Slight glow to titles so they read over bright hair strands */
.entry-box.author.section-bg .section-title {
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

/* If a background is extra busy, this gives the text a touch more separation */
.entry-box.author.section-bg {
  backdrop-filter: blur(4px);
  background-color: rgba(0,0,0,0.18);
  border-radius: 1rem;
}

@media (prefers-reduced-data: reduce) {
  .section-bg::before { background-image: none; }
  .section-bg::after { background: none; }
}

/* --- AUTHOR PHOTO ---*/
.author-photo {
  text-align: center;
  margin: 2.5rem auto 3rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.author-photo img {
  width: 240px;
  height: auto;
  border: none;              /* removes the frame */
  border-radius: 0;          /* your vignette already provides shape */
  box-shadow: none;          /* no halo, lets your vignette breathe */
}

.author-photo figcaption {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  margin-top: 0.5rem;
  font-style: italic;
}

/* --- LOGOS --- */
.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: 0.9;
  transition: opacity 0.25s ease;
}
.press-logo img:hover {
  opacity: 1;
}
.press-logo figcaption {
  font-family: "Unica One", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
  color: var(--muted);
}
@media (max-width: 640px){
  .press-logo img { max-height: 90px; }
}