/* Additions for generated pages. Bertie's site.css is loaded first and is never edited. */

:root{
  /* motion: real mass, never linear, never ease-in-out */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.55s;
  --dur-slow:.85s;
  --rule:rgba(10,35,54,.28);   /* the shipped --line is 1.32:1 on cream; this is 3.1:1 */
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:.9rem 1.2rem;background:var(--gold);color:var(--ink);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.skip-link:focus{left:0}
/* gold alone is 1.74:1 on cream and invisible. Two-tone ring reads on every surface. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 5px rgba(6,23,37,.55)}
@supports not (selector(:focus-visible)){:focus{outline:2px solid var(--gold);outline-offset:3px}}

/* Editorial Luxury: a fixed film grain so cream reads as paper, not as flat #fff8e9.
   Fixed + pointer-events-none so it never triggers a scroll repaint. */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* scroll entry: heavy, slow, once. transform + opacity only. */
.rise{opacity:0;transform:translate3d(0,20px,0);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.rise.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* article body ------------------------------------------------------------ */
.article-hero{min-height:52vh}
.article-hero .eyebrow a{color:var(--gold);text-decoration:none}
.article-hero .eyebrow a:hover{text-decoration:underline}
.article-hero h1{max-width:20ch;font-size:clamp(2.6rem,5.5vw,5rem)}
.article h2,.article h3,.article h4{color:var(--navy)}
.article h3{margin:2.4rem 0 .8rem;font-size:1.9rem}
.article h4{margin:2rem 0 .6rem;font-family:Manrope,sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:.01em}
.article p{margin:0 0 1.35rem}
.article ul,.article ol{margin:0 0 1.5rem;padding-left:1.3rem}
.article li{margin:.4rem 0}
.article a{color:#8f622b;text-decoration:underline;text-underline-offset:.18em}
.article blockquote{margin:2rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:3px solid var(--gold);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;line-height:1.4;color:var(--navy)}
.article blockquote p{margin:0}
.article img{display:block;width:auto;max-width:min(100%,640px);height:auto;margin:2rem auto;border:1px solid var(--line)}
.article hr{margin:2.5rem 0;border:0;border-top:1px solid var(--line)}
.article table{width:100%;margin:2rem 0;border-collapse:collapse}
.article td,.article th{padding:.7rem;border:1px solid var(--line);text-align:left}

/* embeds ------------------------------------------------------------------ */
.embed{position:relative;margin:2rem 0;background:var(--ink)}
.embed--video{aspect-ratio:16/9}
.embed--audio{height:166px}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* tags -------------------------------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.tags .tag{padding:.4rem .8rem;border:1px solid var(--line);background:#fff;color:var(--slate);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.62rem}
.tags .tag:hover{border-color:var(--gold);color:var(--navy)}

/* post cards -------------------------------------------------------------- */
.card--post{display:flex;padding:0;overflow:hidden}
.card--post a{display:flex;flex-direction:column;height:100%;padding:0 0 1.4rem;color:inherit;text-decoration:none}
.card--post .card-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 1.1rem}
.card--post small,.card--post h3,.card--post p,.card--post .text-link{padding:0 1.4rem}
.card--post small{display:block;color:#8f622b;text-transform:uppercase;letter-spacing:.13em;font-size:.63rem}
.card--post h3{margin:.5rem 0 .6rem;font-size:1.45rem;line-height:1.15}
.card--post p{flex:1;margin:0 0 1rem;color:var(--slate);font-size:.94rem;line-height:1.6}
.card--post .text-link{font-size:.86rem}
.card--post:hover{border-color:var(--gold)}

/* meet bertie portrait ---------------------------------------------------- */
.portrait-block{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;width:min(92%,1180px);margin:auto}
.portrait{margin:0;padding:.9rem;border:1px solid var(--gold);background:var(--navy)}
.portrait img{display:block;width:100%;height:auto}
.portrait figcaption{padding:.9rem .2rem 0;color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font-size:.62rem}

/* footer ------------------------------------------------------------------ */
.footer-links{display:flex;flex-wrap:wrap;gap:1.2rem}
.footer-links a{color:rgba(255,255,255,.72);text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem}
.footer-links a:hover{color:#fff}

@media(max-width:900px){
  .portrait-block{grid-template-columns:1fr}
  .article-hero{min-height:46vh}
}

/* breadcrumb ------------------------------------------------------------- */
.crumbs{background:var(--cream);border-bottom:1px solid var(--rule)}
.crumbs div{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;width:min(92%,1180px);margin:auto;padding:1.05rem 0;color:var(--slate);text-transform:uppercase;letter-spacing:.13em;font-size:.62rem}
.crumbs a{color:#8f622b;text-decoration:none;transition:color var(--dur) var(--ease)}
.crumbs a:hover{color:var(--navy)}
.crumbs span[aria-hidden]{color:var(--rule)}
.crumbs [aria-current]{color:var(--navy)}

/* tags: the unlinked ones must still be legible (was 2.60:1) ---------------- */
.tags .tag{border-color:var(--rule);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tags .tag:hover{transform:translate3d(0,-1px,0)}
.tags .tag--plain{color:var(--slate);border-style:dashed;opacity:.85}

/* card physics: lift, hairline warms to gold, image breathes. GPU only. ----- */
.card--post{border-color:var(--rule);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);will-change:transform}
.card--post:hover{transform:translate3d(0,-4px,0);border-color:var(--gold);box-shadow:0 18px 40px -28px rgba(6,23,37,.45)}
.card--post a{overflow:hidden}
.card--post .card-img{transition:transform var(--dur-slow) var(--ease-out)}
.card--post:hover .card-img{transform:scale(1.035)}
.card--post .text-link{transition:letter-spacing var(--dur) var(--ease)}
.card--post:hover .text-link{letter-spacing:.02em}

/* typographic craft -------------------------------------------------------- */
h1,h2,h3{text-wrap:balance}
.article p,.lead,.intro,.card--post p{text-wrap:pretty}
.article{hanging-punctuation:first last}
.article > h2:first-child,.article > p:first-child{margin-top:0}
.article a{transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease);text-decoration-color:rgba(143,98,43,.4)}
.article a:hover{text-decoration-color:currentColor}
.button{transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.button:hover{transform:translate3d(0,-2px,0)}
.button:active{transform:translate3d(0,0,0) scale(.985)}
.text-link{transition:color var(--dur) var(--ease)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.eyebrow--heading{margin:0 0 .4rem;font-family:Manrope,sans-serif;font-size:.68rem;font-weight:500;line-height:1.4}
.card--post h2{margin:.5rem 0 .6rem;font-size:1.45rem;line-height:1.15;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}