/* ==========================================================================
   Base theme (no frameworks)
   ========================================================================== */

/* ---- CSS Variables ---- */
:root{
  --bg: #ffffff;
  --txt: #0a0a0a;
  --muted: #666;
  --ring: #e6e6e6;
  --brand: #0a0a0a;
  --brand-2: #f4f4f5;
  --accent: #f59e0b; /* amber for the "pill" */
}

/* ---- Reset-ish ---- */
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
               Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--txt);
  background:var(--bg);
  line-height:1.6;
}

/* ---- Layout helpers ---- */
.container{ max-width:1120px; margin:0 auto; padding:0 16px; }
.row{ display:flex; gap:16px; align-items:center; }
.between{ justify-content:space-between; }
.small{ font-size:.925rem; }
.muted{ color:var(--muted); }
.mt{ margin-top:12px; }
.w-full{ width:100%; }

/* ---- Typography ---- */
.h1{ font-size:clamp(32px, 3.2vw, 48px); line-height:1.1; font-weight:800; margin:0; }
.h2{ font-size:clamp(26px, 2.4vw, 36px); line-height:1.2; font-weight:800; margin:0; }
.h3{ font-size:1.25rem; line-height:1.25; font-weight:700; margin:0; }
.lead{ font-size:1.05rem; color:#444; max-width:58ch; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--ring);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  text-decoration:none; color:inherit; font-weight:700;
}
.brand-icon{
  /* If you’re using an inline SVG or <img>, this centers it nicely */
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
}
.nav{ display:flex; gap:18px; align-items:center; }
.nav a{ color:inherit; text-decoration:none; font-size:.95rem; }
.nav .btn{ margin-left:6px; }

/* ==========================================================================
   Sections
   ========================================================================== */

.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(60,60,60,.08), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(0,0,0,.05), transparent 40%);
  padding:64px 0;
}
.section{ padding:64px 0; }
.section-alt{
  background:#fafafa;
  border-top:1px solid var(--ring);
  border-bottom:1px solid var(--ring);
}

/* ==========================================================================
   Grids
   ========================================================================== */

.grid-2{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.span-2{ grid-column:span 2; }
.span-3{ grid-column:span 3; }

/* Fine-tune hero layout on desktop */
.hero .grid-2{ grid-template-columns:1.35fr 1fr; }

/* ==========================================================================
   Cards & Media items
   ========================================================================== */

.card{
  background:#fff;
  border:1px solid var(--ring);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 0 0 0 rgba(0,0,0,0);
}

/* Default two-column card layout */
.card-grid{ display:grid; grid-template-columns:2fr 3fr; }

/* Hero card tighter split */
.hero .card-grid{ grid-template-columns:.8fr 1fr; }

/* Books cards: slightly narrower image column by default */
#books .card-grid{ grid-template-columns:.9fr 2fr; }

.card-cover{
  background:#eee;
  aspect-ratio:4/5;           /* consistent cover shape on desktop */
  background-size:cover;
  background-position:center;
}

/* When using <img> inside .card-cover, keep consistent visual cap */
.card-cover img{
  display:block; width:100%; height:auto; max-height:420px;
  object-fit:contain; border:0;
}

.card-body{ padding:20px; }
.cards{ display:grid; gap:16px; grid-template-columns:1fr; }

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Pill (e.g., New Release) --- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem;
  background:#FEF3C7; color:#92400E;
  border:1px solid #FCD34D;
  border-radius:999px;
  padding:4px 10px;
}

/* --- Buttons --- */
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer;
  border-radius:999px;
  padding:10px 16px; font-weight:600;
  border:1px solid var(--ring);
  color:#111; background:#fff;
}
.btn:hover{ box-shadow:0 6px 22px rgba(0,0,0,.06); }
.btn-dark{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-dark:hover{ filter:brightness(.95); }
.btn-outline{ background:#fff; color:#111; }
.btn-outline:hover{ background:var(--brand-2); }

/* Brand buttons */
.btn-facebook{ background:#1877F2; color:#fff; border-color:#1877F2; }
.btn-facebook:hover{ filter:brightness(.95); }
.btn-youtube{ background:#FF0000; color:#fff; border-color:#FF0000; }
.btn-youtube:hover{ filter:brightness(.95); }

/* --- Portrait box (About section) --- */
.portrait{
  aspect-ratio:4/5;
  border-radius:18px;
  background:#eee;
  border:1px solid var(--ring);
}

/* --- Video cards --- */
.video-card{
  border-radius:18px; border:1px solid var(--ring);
  overflow:hidden; background:#fff;
}
.video-embed{ position:relative; padding-top:56.25%; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-title{ padding:12px; font-weight:500; }

/* --- Forms --- */
.form{ gap:14px; }
.label{ display:block; font-size:.9rem; font-weight:600; margin-bottom:6px; }
.input, .textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d4d4d8; border-radius:8px;
  outline:none; transition:.15s box-shadow ease;
}
.input:focus, .textarea:focus{ box-shadow:0 0 0 3px rgba(0,0,0,.08); }

/* --- Footer --- */
.site-footer{ border-top:1px solid var(--ring); padding:24px 0; background:#fff; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.footer-inner .links{ display:flex; gap:12px; }
.footer-inner a{ text-decoration:none; color:inherit; }

/* ==========================================================================
   Responsive (mobile-first adjustments)
   Breakpoint: <= 980px
   ========================================================================== */

@media (max-width: 980px){

  /* Header: stack & center */
  .site-header .header-inner{
    flex-direction:column; align-items:center; justify-content:center;
    padding:10px 0;
  }
  .site-header .brand{ text-align:center; }
  .site-header .brand-name{
    font-size:2rem !important; /* ~32px (about double) */
    line-height:1.1; font-weight:900; letter-spacing:-.01em;
  }
  .site-header .brand-icon{ width:26px; height:26px; }
  .site-header .nav{
    display:flex; flex-wrap:wrap; gap:10px 12px;
    justify-content:center; margin-top:6px;
  }
  /* Emphasize plain links (not buttons) */
  .site-header .nav a:not(.btn){
    font-weight:800;
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-underline-offset:3px;
  }
  .site-header .nav .btn{ margin-left:0; }

  /* Containers & spacing */
  .container{ padding:0 16px; }
  .hero{ padding:28px 0 !important; }

  /* Stacked grids */
  .grid-2, .grid-3, .grid-5{
    display:grid; grid-template-columns:1fr; gap:16px;
  }
  .span-2, .span-3{ grid-column:1 / -1; }

  /* Cards stack to one column */
  .card-grid{ grid-template-columns:1fr !important; }

  /* Hero card tweaks */
  .hero .card-cover{ padding:8px !important; aspect-ratio:auto !important; }
  .hero .card-cover img{
    max-height:300px !important;
    width:100% !important; height:auto !important; object-fit:contain !important;
  }
  .hero .card-body{ padding:12px 14px !important; }

  /* About photo smaller, no crop feel */
  #about img{ width:70% !important; max-width:320px !important; height:auto !important; }

  /* Books covers unlock height, single column */
  #books .card-cover{ padding:8px !important; aspect-ratio:auto !important; }
  #books .card-cover img{
    max-height:360px !important;
    width:100% !important; height:auto !important; object-fit:contain !important;
  }

  /* Media: single column videos */
  #media .grid-3{ grid-template-columns:1fr !important; gap:16px !important; }

  /* Forms: single column */
  .form.grid-2{ display:grid; grid-template-columns:1fr !important; gap:12px !important; }
  .form .span-2{ grid-column:1 / -1 !important; }

  /* Buttons easier to tap */
  .btn-row .btn{ width:100%; }
}

/* ==========================================================================
   Extra small phones <= 560px
   ========================================================================== */

@media (max-width: 560px){
  .h1{ font-size:28px !important; line-height:1.15 !important; }
  .lead{ font-size:.98rem !important; }
}

/* ==========================================================================
   Accessibility & motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ===== Safari / iPad only (won't affect Chrome desktop) ===== */
@supports (-webkit-touch-callout: none) {

  /* Make the left hero column a bit smaller; reduce the gap */
  .hero .container.grid-2{
    grid-template-columns: 1.25fr 1fr !important; /* was 1.52fr 1fr */
    gap:16px !important;
  }

  /* Keep the book cover from getting too skinny: give it a minimum width */
  .hero .card-grid{
    grid-template-columns: minmax(340px, .7fr) 1fr !important; /* min 340px image col */
  }

  /* Soften curve & give artwork some breathing room */
  .hero .card{ border-radius: 32px !important; }
  .hero .card-cover{ padding: 12px !important; }
  .hero .card-cover img{
    max-height: 380px !important;
    width: 100% !important; height: auto !important; object-fit: contain !important;
  }

  /* On tablets/laptop-width iPads, stack the hero earlier to avoid cramped two-column */
  @media (max-width: 1180px){
    .hero .container.grid-2{ grid-template-columns: 1fr !important; }
    .hero .card-grid{ grid-template-columns: 1fr !important; }
  }

  /* Safety: prevent grid children from stretching columns */
  .grid-2 > *, .card-grid > *{ min-width: 0; }
}