/* =========================================================
   01) BASE / TOKENS
   =======================================================*/
:root{
  --bg: #fff8ea;                     /* warm cream background */
  --panel: #fffdf7;                  /* light panel background */
  --ink: #2b2b2b;                    /* primary text color */
  --muted: #6b6b6b;                  /* secondary text color */
  --gold: #f2a400;                   /* brand / primary */
  --gold-600: #d18600;               /* brand hover / darker */
  --ring: rgba(242,164,0,.35);       /* focus ring */
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 14px;
  --section-gap: 56px;                   /* default rounding */
}

/* =========================================================
   02) RESETS & BODY
   =======================================================*/
*{
  box-sizing: border-box;
}

html,
body{
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

body{ padding-top: var(--header-h); }

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

/* =========================================================
   03) LAYOUT HELPERS
   =======================================================*/
.container{
  width: min(1120px, 92vw);
  margin-inline: auto;
}

:root { --section-gap: 64px; }

/* default: every section with an id gets a bottom margin */
section[id] {
  margin-bottom: var(--section-gap);
  scroll-margin-top: calc(var(--header-h, 64px) + 12px); /* anchors clear fixed header */
}

/* no extra space after the last section */
section[id]:last-of-type { margin-bottom: 0; }

/* per-section overrides */
#home     { margin-bottom: 80px; }
#author   { margin-bottom: 56px; }
#books    { margin-bottom: 96px; }
#blog     { margin-bottom: 72px; }
#trailers { margin-bottom: 72px; }
#contact  { margin-bottom: 80px; }

/* optional: tighten on mobile */
@media (max-width: 768px){
  :root { --section-gap: 40px; }
  #books { margin-bottom: 56px; }
}

.section{
  padding: 40px 0;
  margin-bottom: var(--section-gap);
}
.section:last-child{ margin-bottom: 0; }
.section .container {
  max-width: 1100px;  /* keeps text narrower, like in screenshot */
  margin: 0 auto;
}

/* Paragraph readability */
.section p {
  line-height: 1.7;
  margin-bottom: 1em;
}

.section p,
.hero__sub,
.book-row.two-col .book-info p:not(.eyebrow) {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 20px;          /* ~like the example */
  line-height: 1.6;         /* ~32px line-height at 20px */
  letter-spacing: -0.1px;
}
.section p {
  color: #242424;
}

.hero__sub {
  color: #ffffff;
}

.book-row.two-col .book-info p:not(.eyebrow) {
  color: #242424;
}
.section p.eyebrow {
  font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* if you want sans for the kicker */
  color: var(--gold-600);
  letter-spacing: .02em;
  margin: 2px 0 16px;
}


.section--tighter{
  padding: 48px 0;
}

.section--alt{
  background: #fff8ea;
}

.center{
  text-align: center;
}

.small{
  font-size: .92rem;
  color: var(--muted);
}

.mt-24{
  margin-top: 24px;
}

.stack{
  display: flex;
  flex-direction: column;
}

.gap-48{
  gap: 48px;
}

.grid{
  display: grid;
  gap: 32px;
  align-items: center;
}

.grid--2{
  grid-template-columns: 1.2fr 1fr;
}

@media (max-width: 900px){
  .grid--2{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   04) TYPOGRAPHY
   =======================================================*/
body {
  font-size: clamp(16px, 0.5vw + 15px, 16px);
  line-height: 1.65;
}

/* Headings now truly scale:
   h2 ~32–56px, h3 ~26–42px, h4 ~18–24px */
.h2 {
  font-family: "Newsreader", serif;
  font-weight: 700;
  font-size: clamp(32px, 2.2vw + 8px, 56px);
  line-height: 1.2;
  margin: 0 0 10px;
}

.h3 {
  font-family: "Newsreader", serif;
  font-size: clamp(26px, 1.6vw + 8px, 42px);
  line-height: 1.25;
  margin: 0 0 12px;
}

.h4 {
  font-family: "Newsreader", serif;
  font-size: clamp(32px, 0.8vw + 14px, 32px);
  line-height: 1.3;
  margin: 0 0 8px;
}

p,
li {
  font-size: 18px;
}


/* Hero title: make it scale more on desktop, but stay readable on mobile */
.hero__title {
  font-family: "Newsreader", serif;
  font-size: clamp(32px, 2.6vw + 8px, 54px);
  line-height: 1.15;
  margin: 0 0 12px;
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* Optional: widen container a bit on very large screens so text doesn’t feel tiny in a sea of whitespace */
@media (min-width: 1400px) {
  .container {
    width: min(1280px, 92vw);
  }
}

.eyebrow{
  color: var(--gold-600);
  letter-spacing: .02em;
  margin: 2px 0 16px;
}

/* =========================================================
   05) HEADER & NAV
   =======================================================*/
/* Header bar */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;

  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.site-header.is-scrolled{
  background: rgba(255,255,255,.92);
  border-bottom-color: rgba(0,0,0,.08);
  box-shadow: 0 6px 22px rgba(0,0,0,.10);
}
/* 3-column grid: brand | nav | cta */
.nav-wrap{
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  position: relative;
}

/* brand (left) */
.brand{
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  font-family: "Newsreader", serif;
  font-size: 1.7rem;
}

/* centered nav */
.nav{
  justify-self: center;       /* center in the middle column */
  display: flex;
  gap: 32px;
  align-items: center;

  /* IMPORTANT: cancel old absolute-centering */
  position: static;
  left: auto;
  transform: none;
}

.nav a{
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  opacity: .9;
}
.nav a:hover{ opacity:1; color: var(--gold-600); }

/* right CTA button (compact) */
.header-cta{
  padding: 8px 14px;
  line-height: 1;
  border-radius: 12px;
}

/* mobile toggle */
.nav-toggle{
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  position: absolute;
  right: 8px;
}
.nav-toggle span{
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: .3s;
}

/* Mobile dropdown */
@media (max-width: 860px){
  .nav-wrap{ grid-template-columns: auto auto; } /* brand | cta */
  .nav-toggle{ display: block; }
  .header-cta{ margin-right: 42px; }            /* room for toggle */

  .nav{
    position: fixed;
    inset: var(--header-h) 0 auto 0;  /* was 60px; now tied to header height */
    background: rgba(255,255,255,.98);
    border-top: 1px solid #eee;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    transform: translateY(-120%);
    transition: .35s ease;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
  }
  .nav.open{ transform: translateY(0); }
}


/* =========================================================
   06) BUTTONS (smooth transitions)
   =======================================================*/
.btn{
  --bgc: var(--gold);
  display: inline-block;
  background: var(--bgc);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
  box-shadow: 0 6px 14px rgba(242,164,0,.25);
}

.btn:hover{
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 10px 24px rgba(242,164,0,.28);
  background: var(--gold-600);
}

.btn:active{
  transform: translateY(0) scale(.98);
}

.btn:focus{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.btn--lg{
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 1.02rem;
}

.btn--sm{
  padding: 8px 12px;
  border-radius: 9px;
  font-size: .95rem;
}

/* =========================================================
   07) HERO
   =======================================================*/
.hero{
  position: relative;
  isolation: isolate;
  color: #fff;
  text-align: center;
  padding: 150px 0 150px;
  background:
    radial-gradient(1200px 420px at 50% -10%, rgba(242,164,0,.55), transparent 60%),
    linear-gradient(#3a2a09, #17130b);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fill hero area */
  z-index: -1;            /* keep behind text */
}
.hero__glow{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 380px at 50% 20%, rgba(255,224,150,.45), transparent 60%),
    url('assets/open-book-light.png') center 42% / 560px auto no-repeat;
  opacity: .9;
  pointer-events: none;
}

.hero__inner{
  position: relative;
}

.hero__title{
  font-family: "Newsreader", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0 0 10px;
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
}

.hero__sub{
  max-width: 720px;
  margin: 0 auto 20px;
  opacity: .95;
}

.accent{
  color: #69521a;
}

/* =========================================================
   08) AUTHOR CARD
   =======================================================*/


/* Make the card behave like a portrait frame */
.author-card{
  /* size/shape */
  aspect-ratio: 2 / 2.5;                 /* tall portrait; change to 1/1 for square */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  /* (Optional) fallback background while image loads */
  background: #f1ede4;
}

/* Make the image fill the frame nicely */
.author-card .author-photo{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                    /* fills and crops like a magazine photo */
  object-position: center;              /* adjust to 'top' if you want more headroom */
}

/* (Optional) on smaller screens, limit width so it doesn’t get huge */
@media (max-width: 900px){
  .author-card{
    max-width: 420px;                   /* tweak to taste */
    margin-inline: auto;                /* center in the column */
  }
}


/* =========================================================
   09) BOOKS — TWO COLUMN LAYOUT
   =======================================================*/


.book-row.two-col {
  display: grid;              /* use grid for layout */
  gap: 32px;                  /* space between columns */
  align-items: start;         /* align content at top */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}


/* Image Left (Book 1) */
.book-row.image-left {
  grid-template-columns: 280px 1fr;
  margin-right: 50px;
}

@media (min-width: 1100px){
  .book-row.image-left {
    grid-template-columns: 360px 1fr;
  }
}

/* Image Right (Book 2) */
.book-row.image-right {
  grid-template-columns: 1fr 280px;
}

@media (min-width: 1100px){
  .book-row.image-right {
    grid-template-columns: 1fr 360px;
  }
}

/* Shared child styles */
.book-row.two-col .book-cover {
  width: 100%;                                
  max-width: 640px;                           
  height: auto;                               
  border-radius: 12px;                        
  box-shadow: 0 12px 26px rgba(0,0,0,.14);    
  overflow: hidden;                           
}

.book-row.two-col .book-info {
  display: flex;                              
  flex-direction: column;
  justify-content: center;                    
}

.format {
  margin-top: 2.75rem;    /* space above the whole format block */
  margin-bottom: 0.5rem;  /* small space below */
  display: block;
}

.format > span {
  display: block;
  color: #a6a6a6;         /* grey font */
  font-size: 0.85rem;     /* reduced size */
  line-height: 1.2;
  margin-bottom: 0.4rem;
  font-weight:100;
  font-style: italic;
}

.format .btn-row {
  display: inline-flex;
  gap: 1.5rem;
  align-items: center;
}

.format .btn {
  padding: .75rem 0.9rem;
  font-size: 0.85rem;
  border-radius: 8px;
}

/* Optional: slightly dim inactive button color for contrast */
.format .btn:not(:hover) {
  opacity: 0.95;
}

.book-row.two-col .btn-row {
  display: flex;                              
  gap: 12px;                                  
  flex-wrap: wrap;                            
}

/* Mobile Stack */
@media (max-width: 768px){
  .book-row.two-col {
    grid-template-columns: 1fr;               
    text-align: center;                       
  }

  .book-row.two-col .book-info {
    align-items: center;                      
  }

  .book-row.two-col .btn-row {
    justify-content: center;                  
  }

  .book-row.two-col .book-cover {
    max-width: 84%;                           
    margin-inline: auto;                      
  }
}
/* =========================================================
   TRAILER
   =======================================================*/

   /* Book Trailers section heading */
#trailers h2 {
  font-family: "Newsreader", serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 40px); /* edit to taste */
  line-height: 1.2;
  text-align: center;                  /* ensure centered */
  margin: 0 0 14px;
}

/* Per-trailer title (under each video) */
.trailer-title {
  font-family: "Newsreader", serif;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw + 8px, 30px); /* edit to taste */
  line-height: 1.3;
  text-align: center;                  /* center the title */
  margin: 10px 0 0;
}

.trailer-grid{
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.trailer-block .trailer-frame{
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.trailer-frame video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* use "contain" if you prefer letterboxing */
}

/* =========================================================
   BLOG / POST CARD
   =======================================================*/

   /* ===== BLOG (grid + cards + featured) ===== */

/* Grid used in blog.php (and can be reused for a "Latest Posts" row on index.php) */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
@media (max-width:1100px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:800px){  .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){  .blog-grid{ grid-template-columns:1fr; } }

/* Individual post card (thumbnail + title + excerpt + meta) */
.blog-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.blog-card > a{ text-decoration:none; color:inherit; display:block; }
.blog-card img{
  width:100%;
  aspect-ratio:16/9;             /* keeps images uniform */
  object-fit:cover;
  display:block;
}
.blog-card h3{
  font-family:"Newsreader",serif;
  font-size:18px;
  line-height:1.3;
  margin:10px 12px 6px;
}
.blog-card p{
  margin:0 12px;
  color:#444;
  font-size:14px;
  line-height:1.45;
  display:-webkit-box;           /* 2-line clamp */
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card small{
  margin:10px 12px 14px;
  color:#777;
  font-size:12px;
}

/* Pagination (used in blog.php) */
.pagination{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin:24px 0;
}
.pagination a{
  padding:8px 12px;
  border-radius:10px;
  background:#f1f3f5;
  color:#333;
  text-decoration:none;
}
.pagination a.current{ background:#111; color:#fff; }
.pagination a:hover{ background:#e2e6ea; }

/* Optional: Featured article card (if you re-add a single post preview on index.php) */
.post-card{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:20px;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.post-card img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.post-card .post-body{
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.post-card .h4{ margin:0 0 4px; }
.post-card .btn{ align-self:flex-start; }
@media (max-width:800px){
  .post-card{ grid-template-columns:1fr; }
}

/* fallback block when a post has no featured_image */
.noimg{
  width:100%;
  aspect-ratio:16/9;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.06)),
    #f3f5f7;
}

/* nice touch on hover */
.blog-card:hover { transform: translateY(-2px); transition: transform .15s ease; }

/* ===== Single Post (real blog layout) ===== */

/* Full-bleed hero image on wide screens */
.post-hero{
  margin: 0 0 20px;
}
.post-hero img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  max-height: 60vh; /* keeps super-tall images reasonable */
}
@media (min-width: 900px){
  .post-hero{
    /* full-bleed: escape the centered container and span the viewport */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* Centered reading column (no card, no shadow) */
.blog-post{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 18px 40px;
}

/* Back link */
.post-breadcrumb{
  margin: 6px 0 12px;
}
.post-breadcrumb .crumb{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; color:#6b6b6b; font-size:14px;
}
.post-breadcrumb .crumb:hover{ text-decoration:underline; }

/* Title + meta */
.post-header{ 
    margin-top: 100px;
    margin-bottom: 12px; }
.post-title{
  font-family:"Newsreader",serif;
  font-weight:800;
  font-size: clamp(28px, 4vw, 40px);
  line-height:1.15;
  margin: 2px 0 6px;
}
.post-meta{
  color:#7a7a7a;
  font-size:14px;
}
.post-meta .sep{ margin: 0 6px; }

/* Article body */
.content{
  color:#2b2b2b;
  font-size: 18px;
  line-height: 1.8;
}
.content p{ margin: 0 0 1.05em; }
.content h2, .content h3, .content h4{
  font-family:"Newsreader",serif;
  line-height:1.25;
  margin: 1.25em 0 .5em;
}
.content h2{ font-size: 28px; }
.content h3{ font-size: 22px; }
.content h4{ font-size: 18px; }

.content img, .content video, .content iframe{
  max-width:100%; height:auto; display:block;
  margin: 16px auto; border-radius: 10px;
}
.content figure{ margin: 0; }
.content figcaption{
  text-align:center; font-size:13px; color:#777; margin-top:6px;
}

.content blockquote{
  margin: 1.2em 0; padding: 12px 14px;
  background: #fff8e8;
  border-left: 4px solid #e0c27a;
  border-radius: 8px; color:#4b3f2a;
}
.content ul, .content ol{ padding-left: 1.2em; margin: 0 0 1em; }

.content a{ color:#2d63c8; text-decoration:none; }
.content a:hover{ text-decoration:underline; }

.content code{
  background:#f3f5f7; padding:.15em .35em; border-radius:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.content pre{
  background:#0f172a; color:#e2e8f0; padding:14px; border-radius:12px; overflow:auto; font-size:14px;
}

/* Mobile tweaks */
@media (max-width:600px){
  .blog-post{ padding: 0 14px 34px; }
}

.content { white-space: pre-line; }
.content{
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.1px;
  color: #242424;
}
/* .post-card {
  display: flex;
  flex-direction: column;           
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;                  
  margin-top: 32px;
}

.post-card img {
  width: 95%;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 20px;
}

.post-body {
  padding: 20px 24px;
}

.post-body h4 {
  margin-top: 10px;
  margin-bottom: 22px;
}

.post-body p {
  color: #333;
  margin-bottom: 56px;
}

.post-body .btn {
  font-size: 0.9rem;
  padding: 8px 14px;
}


@media (max-width: 768px) {
  .post-body {
    text-align: center;
  }
  .post-body .btn {
    margin: 0 auto;
  }
} */


/* =========================================================
   11) CONTACT
   =======================================================*/
.contact-form{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  border: 1px solid #e7dbc4;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--ring);
}

.form-msg{
  min-height: 1.1rem;
  color: var(--gold-600);
  font-weight: 700;
}

#contact .contact-side {
  align-self: start;    /* top-align this item */
  /* optional tiny nudge if you want it a bit higher still */
  margin-top: -8px;     /* adjust -4px to -16px to taste */
}

.contact-side .socials a{
  font-size: 1.3rem;
  margin-right: 8px;
  text-decoration: none;
}

#contact .contact-side h3:first-child {
  margin-top: 0;
}
/* CONTACT — layout overrides for your existing form */
#contact .contact-form {
  display: grid;                         /* grid instead of simple stack */
  grid-template-columns: 1fr 1fr;        /* two columns on desktop */
  gap: clamp(12px, 2vw, 18px);
  margin-top: 12px;                      /* keep your spacing */
}

/* Put Name on the left, Email on the right */
#contact .contact-form input[name="name"]  { grid-column: 1; }
#contact .contact-form input[name="email"] { grid-column: 2; }

/* Subject, Message, Button, and Status span full width */
#contact .contact-form input[name="subject"],
#contact .contact-form textarea,
#contact .contact-form .btn,
#contact .contact-form .form-msg {
  grid-column: 1 / -1;
}

/* Full-width button to match your mock */
#contact .contact-form .btn {
  width: 100%;
  padding: 12px 22px;      /* optional: a bit taller */
  border-radius: 10px;
}

/* Responsive: stack fields on small screens */
@media (max-width: 900px) {
  #contact .contact-form {
    grid-template-columns: 1fr;          /* one column on mobile */
  }
  #contact .contact-form input[name="name"],
  #contact .contact-form input[name="email"] {
    grid-column: 1;                      /* stack Name above Email */
  }
}

/* =========================================================
   12) FOOTER
   =======================================================*/
.site-footer{
  padding: 28px 0;
  text-align: center;
  background: #fff;
  border-top: 1px solid #f0e9db;
}

/* =========================================================
   13) REVEAL ON SCROLL
   =======================================================*/
.reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.in{
  opacity: 1;
  transform: none;
}


.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ffd986;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
  font-size: 1.1rem;              /* icon size */
}

.socials a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  background: var(--gold);
  color: #fff;
}

/* Burger -> X animation */
.nav-toggle{ display:none; position:absolute; right:8px; background:transparent; border:0; padding:8px; }
.nav-toggle span{
  display:block; width:24px; height:2px; background:var(--ink);
  margin:5px 0; transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.x span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.x span:nth-child(2){ opacity:0; }
.nav-toggle.x span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-toggle{ display:block; }
}