/* ==========================================================================
   Julius's Travel Journal - site stylesheet
   One cached file for every page (previously ~25KB inline CSS repeated per page).
   Order: tokens > fonts > base > layout > components > pages > a11y modes > print
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  --paper:#fff;
  --ink:#000;
  --brand:#004EAC;          /* was --green (it was blue) */
  --brand-bright:#007BFF;   /* decorative only (progress bar) - not for text */
  --line:#C8DAEF;
  --line-strong:#7A9BC7;
  --surface:#F1F7FF;
  --surface-2:#E6F2FF;
  --hover:#E1EFFF;
  --focus:#004EAC;
  --radius-s:9px;
  --radius-m:14px;
  --radius-l:22px;
  --shadow:0 14px 32px -22px #004EAC66;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-display:"Baskervville","Baskerville","Libre Baskerville",Georgia,"Times New Roman",serif;
  --wrap:1240px;
  --gutter:clamp(17px,3.2vw,40px);
  --tap:44px;
}

/* ---------- 2. Web fonts (self-hosted, GDPR-safe) ----------
   The design names DM Sans + Baskervville but the original kit never loaded them,
   so every visitor saw Arial + Georgia. To enable: download the WOFF2 files
   (both are SIL Open Font License) into /fonts/ and REMOVE the comment markers.
   Do NOT link fonts.googleapis.com - loading Google Fonts from Google servers
   has been ruled a GDPR breach in the EU.
@font-face{font-family:"DM Sans";src:url("../../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Baskervville";src:url("../../fonts/baskervville-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
*/

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
@media(prefers-reduced-motion:no-preference){html:not([data-reduced-motion]){scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 var(--font-body);overflow-wrap:break-word}
h1,h2,h3,.title{font-family:var(--font-display);font-weight:400;margin:0;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
p,figure{margin:0}
img,video,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{text-decoration-thickness:2px}
:where(a,button,summary,select,input,video,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Skip link */
.skip{position:absolute;inset-inline-start:12px;top:12px;z-index:30;padding:10px 14px;background:var(--paper);border:2px solid var(--brand);border-radius:var(--radius-s);transform:translateY(-200%)}
.skip:focus{transform:none}
main:focus{outline:none}

/* ---------- 4. Header ---------- */
.masthead{position:relative}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;min-height:80px;padding-block:12px;border-bottom:1px solid var(--line)}
.title,.footer-brand{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:var(--ink)}
.title{font-size:1.875rem}
.brand-mark{width:auto;height:1.48em;flex:none}
.main-nav{display:flex;flex-wrap:wrap;gap:4px 28px;font-size:.9375rem}
.main-nav a{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.main-nav a::after{content:"";position:absolute;bottom:9px;inset-inline:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left}
.main-nav a:is(:hover,:focus-visible,[aria-current="page"])::after{transform:scaleX(1)}
.main-nav a[aria-current="page"]{font-weight:700}
/* Reading-progress bar (decorative) */
.masthead::after{content:"";position:fixed;inset:0 0 auto;height:3px;z-index:20;background:var(--brand-bright);transform:scaleX(var(--journal-progress,0));transform-origin:left;pointer-events:none}
[dir="rtl"] .masthead::after{transform-origin:right}

/* ---------- 5. Shared components ---------- */
.btn-pill{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 18px;border:1px solid #A9C7EE;border-radius:99px;background:var(--paper);font-weight:700;text-decoration:none}
.btn-pill:hover{background:var(--hover);border-color:var(--brand)}
.social-chip{display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);padding:0 13px;background:var(--surface);border:1px solid var(--line);border-radius:99px;font-size:.875rem;font-weight:700;text-decoration:none}
.social-chip:hover{background:var(--surface-2)}
.social-chip svg{width:16px;height:16px;flex:none;color:var(--brand)}
.ext-hint{font-weight:400}

/* ---------- 6. Home: hero ---------- */
.hero{margin-top:36px;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.intro{padding:clamp(28px,4.5vw,54px) clamp(20px,3vw,22px) clamp(28px,4.5vw,54px) clamp(20px,4vw,50px)}
.hero h1{font-size:clamp(2.35rem,4.5vw,4.125rem)}
.lead{max-width:30ch;margin:22px 0 25px;font-size:1.0625rem}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.hero-actions a:first-child{display:inline-flex;align-items:center;gap:5px;min-height:var(--tap)}
.hero figure{margin:clamp(18px,3vw,42px);margin-inline-start:0;border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:var(--paper)}
.hero figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero figcaption{padding:.45em .8em;font-size:.8125rem}

/* ---------- 7. Home: about ---------- */
.about{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:32px;align-items:start;max-width:1020px;margin:62px auto;padding:clamp(23px,3vw,35px);background:var(--surface);border-radius:16px}
.about figure img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 24px -20px #004EAC44}
.about figcaption{font-size:.8125rem;text-align:center;padding-top:6px}
.about h2{font-size:clamp(1.9rem,4vw,2.5rem);margin-bottom:10px}
.about p{max-width:64ch}
.about p+p{margin-top:10px}
.about .quote{margin:18px 0;padding-inline-start:16px;border-inline-start:3px solid var(--brand);font-family:var(--font-display);font-size:1.6rem;line-height:1.35;color:var(--brand)}
.about .quote p{max-width:none}
.about .sharing-note{margin-top:20px;font-size:.95rem;font-weight:700}

/* ---------- 8. Home: video ---------- */
.introduction-film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(22px,5vw,76px);align-items:center;max-width:970px;margin:0 auto 62px;padding:clamp(18px,4vw,48px);border:1px solid var(--line);border-radius:var(--radius-l);background:linear-gradient(135deg,#fff,#EFF6FF)}
.introduction-film h2,.follow-section h2{font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.07}
.film-story p{max-width:55ch;margin-top:16px}
.film-player{min-width:0}
.story-video{display:block;width:min(100%,320px);height:auto;aspect-ratio:9/16;margin:0 auto;border:1px solid var(--line);border-radius:var(--radius-m);background:#0E2240;box-shadow:0 20px 46px -24px #004EAC44}
.transcript{margin-top:22px;border-top:1px solid var(--line);padding-top:6px}
.transcript summary{display:flex;align-items:center;gap:8px;min-height:var(--tap);width:fit-content;cursor:pointer;font-weight:700;color:var(--brand);text-decoration:underline;text-underline-offset:5px}
.transcript .transcript-body{padding:6px 0 4px;padding-inline-start:14px;border-inline-start:2px solid var(--line)}
.transcript .transcript-body p+p{margin-top:8px}
.transcript .scene{font-style:italic}

/* ---------- 9. Home: follow ---------- */
.follow-section{max-width:970px;margin:0 auto clamp(36px,7vw,82px);padding-top:24px;border-top:1px solid var(--line)}
.follow-section>p{margin-top:12px;max-width:63ch}
.follow-banners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:23px 0 0;padding:0;list-style:none}
.follow-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65em;min-height:105px;padding:14px;border-radius:16px;border:1px solid var(--banner-border);background:var(--banner-surface);text-decoration:none;box-shadow:0 12px 22px -24px var(--brand)}
.follow-banner--tiktok{--banner-surface:#EDF8FA;--banner-border:#9BC5CF;--banner-icon:#174958}
.follow-banner--instagram{--banner-surface:#FBF0F9;--banner-border:#D5B2D4;--banner-icon:#763A77}
.follow-banner--facebook{--banner-surface:#EDF5FF;--banner-border:#A6BFE3;--banner-icon:#004EAC}
.follow-icon{display:grid;place-items:center;width:47px;height:47px;border-radius:12px;background:var(--banner-icon);color:#fff}
.follow-icon svg{width:23px;height:23px}
.follow-name{font-family:var(--font-display);font-size:clamp(1.16rem,2.4vw,1.55rem);letter-spacing:-.015em;line-height:1.2}
.follow-name small{display:block;font-family:var(--font-body);font-size:.8rem;letter-spacing:0}
.follow-arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid currentColor;color:var(--brand);background:#fff}
.follow-arrow svg{width:16px;height:16px}
.follow-banner:is(:hover,:focus-visible){border-color:var(--brand);box-shadow:0 12px 26px -18px #004EAC85}
.follow-banner:is(:hover,:focus-visible) .follow-name{text-decoration:underline;text-underline-offset:5px}
.follow-banner:is(:hover,:focus-visible) .follow-arrow{background:var(--hover)}

/* ---------- 10. Policy pages ---------- */
.policy{max-width:76ch;padding-block:48px 64px}
.policy h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:.5em}
.policy h2{font-size:1.55rem;margin-top:1.6em;line-height:1.25}
.policy h3{font-size:1.2rem;margin-top:1.2em;line-height:1.3}
.policy p,.policy ul,.policy dl{margin:.6em 0 .9em}
.policy ul{padding-inline-start:1.3em}
.policy li+li{margin-top:.35em}
.policy a{color:var(--brand);text-decoration:underline}
.policy .updated{color:#333;font-size:.9375rem}
.policy dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px}
.policy dt{font-weight:700}
.policy dd{margin:0}
.todo{background:#FFF3B0;outline:1px dashed #8A6D00;padding:0 .2em}
.contact-email{min-height:var(--tap);padding:8px 14px;border-radius:var(--radius-s);border:1px solid var(--brand);background:#E8F3FF;cursor:pointer}
.contact-email:hover{background:#D6EAFF}
.contact-email[hidden]{display:none}
#accessibility-contact{scroll-margin-top:20px}
.notfound{padding-block:80px;text-align:start}
.notfound h1{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:.4em}

/* ---------- 11. Footer ---------- */
.journal-footer{margin-top:auto;background:linear-gradient(112deg,#E8F3FF 0%,#F5F9FF 70%);border-top:3px solid var(--brand);padding-bottom:clamp(88px,10vh,115px)}
.journal-footer-wrap{padding-block:30px 20px}
.journal-footer-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr) minmax(0,1fr);gap:22px;padding-bottom:26px}
.journal-footer-grid h2{font-size:1.2rem;margin:0 0 5px}
.journal-footer-grid p{font-size:.91rem;max-width:32ch;margin-top:8px}
.footer-brand{font-size:1.375rem}
.footer-brand span{text-decoration:underline}
.footer-brand .brand-mark{height:2.05rem}
.journal-footer-grid ul{display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:0;list-style:none}
.journal-footer-grid ul a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:underline;text-underline-offset:4px}
.journal-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #9BB8D8;padding-top:16px}
.footer-socials{display:flex;flex-wrap:wrap;gap:9px 12px;margin:0;padding:0;list-style:none}
.journal-footer-bottom>a{display:inline-flex;align-items:center;gap:5px;min-height:var(--tap)}
.copyright{width:100%;font-size:.8125rem;margin-top:4px}

/* ---------- 12. Accessibility dock ---------- */
.access-dock[hidden],#access-panel[hidden]{display:none}
.access-dock{position:fixed;inset-inline-end:16px;bottom:16px;z-index:25}
#access-toggle{display:grid;place-items:center;width:54px;height:54px;margin-inline-start:auto;padding:0;color:#fff;background:var(--brand);border:2px solid #fff;border-radius:50%;box-shadow:0 4px 14px #12324A55;cursor:pointer}
#access-panel{position:absolute;bottom:64px;inset-inline-end:0;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 100px);overflow:auto;background:#fff;border:1px solid #8CAACF;border-radius:16px;box-shadow:0 12px 36px #10274530;padding:16px}
.prefs-heading{display:flex;align-items:start;justify-content:space-between;gap:10px}
.prefs-heading h2{font-size:1.25rem;line-height:1.25;font-family:var(--font-body);font-weight:700;letter-spacing:0}
.prefs-heading button,.access-grid button{line-height:1.25;min-height:var(--tap);border:1px solid #8CAACF;border-radius:var(--radius-s);padding:8px 11px;background:var(--surface);cursor:pointer}
.prefs-heading button{min-width:var(--tap);padding:4px;font-size:1.3rem}
.access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.access-grid button:hover{background:#E2EFFF}
.access-grid button[aria-pressed="true"]{border:2px solid var(--brand);background:#D6EAFF;font-weight:700}
.access-grid button[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
#access-size{font-size:.875rem;margin:5px 0 10px}
.access-note{font-size:.8125rem;margin-top:10px}
.access-note a{color:var(--brand)}

/* ---------- 13. Motion (only when the visitor allows it) ---------- */
@media(prefers-reduced-motion:no-preference){
  html:not([data-reduced-motion]) .main-nav a::after,
  html:not([data-reduced-motion]) .social-chip svg{transition:transform .22s ease}
  html:not([data-reduced-motion]) .social-chip:hover svg{transform:translateY(-2px)}
  html:not([data-reduced-motion]) .intro{animation:journal-intro .8s cubic-bezier(.18,.68,.22,1) both}
  html:not([data-reduced-motion]) .hero figure img{animation:journal-settle 1.35s cubic-bezier(.18,.68,.22,1) both}
  html:not([data-reduced-motion]) .journal-section-arrival{animation:journal-arrival .76s cubic-bezier(.18,.68,.22,1) both}
  html:not([data-reduced-motion]) .follow-banner{transition:box-shadow .22s,border-color .22s}
  html:not([data-reduced-motion]) .follow-arrow{transition:transform .22s,background-color .22s}
  html:not([data-reduced-motion]) .follow-banner:is(:hover,:focus-visible) .follow-arrow{transform:translateX(2px)}
  @keyframes journal-intro{from{opacity:.2;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes journal-settle{from{transform:scale(1.065)}to{transform:scale(1)}}
  @keyframes journal-arrival{from{opacity:.55;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){.masthead::after{display:none}}
html[data-reduced-motion] .masthead::after{display:none}
html[data-reduced-motion] *,html[data-reduced-motion] *::before,html[data-reduced-motion] *::after{animation:none!important;transition:none!important}

/* ---------- 14. Visitor accessibility modes ---------- */
html[data-text-size="125"]{font-size:125%}
html[data-text-size="150"]{font-size:150%}
html[data-text-size="175"]{font-size:175%}
html[data-text-size="200"]{font-size:200%}
html[data-text-size] :is(.hero,.about,.introduction-film,.follow-banners,.journal-footer-grid){grid-template-columns:minmax(0,1fr)}
html[data-text-size] .hero figure{margin:0 clamp(14px,3vw,30px) clamp(14px,3vw,30px)}
html[data-text-size] .about figure{width:min(220px,100%)}
html[data-high-contrast]{--ink:#000;--brand:#00317A;--line:#000;--line-strong:#000;--surface:#fff;--surface-2:#fff}
html[data-high-contrast] :is(.hero,.about,.introduction-film,.follow-banner,.journal-footer,.social-chip,.hero figure,#access-panel,.access-grid button){background:#fff!important;border-color:#000!important;box-shadow:none!important}
html[data-high-contrast] :is(.title,.main-nav a,summary){text-decoration:underline}
html[data-high-contrast] .follow-arrow{color:#000}
html[data-highlight-links] a{color:#000!important;background:#FFED9A!important;text-decoration:underline!important;text-decoration-thickness:2px!important}

/* Windows High Contrast / forced colors */
@media(forced-colors:active){
  .follow-icon,#access-toggle{forced-color-adjust:auto;border:1px solid CanvasText}
  .masthead::after{display:none}
}

/* ---------- 15. Responsive ---------- */
@media(max-width:780px){
  .introduction-film,.follow-banners{grid-template-columns:minmax(0,1fr)}
  .follow-banner{min-height:80px}
}
@media(max-width:690px){
  .masthead .wrap{min-height:64px}
  .title{font-size:1.5rem}
  .hero{margin-top:18px;grid-template-columns:minmax(0,1fr)}
  .hero figure{margin:0 16px 16px}
  .hero h1{font-size:clamp(2.4rem,10vw,3.5rem)}
  .lead{max-width:34ch;font-size:1rem;margin:14px 0}
  .journal-footer-grid{grid-template-columns:1fr;gap:18px}
}
@media(max-width:620px){
  .about{margin:35px 0;grid-template-columns:minmax(0,1fr);gap:20px}
  .about figure{width:min(55vw,190px)}
  .about figcaption{text-align:start}
  .about .quote{font-size:1.35rem}
  .policy dl{grid-template-columns:1fr}
  .policy dd{margin-bottom:8px}
}
@media(max-width:400px){.access-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 16. Print ---------- */
@media print{
  .masthead::after,.access-dock,.skip,.footer-socials,.film-player{display:none!important}
  .journal-footer{padding-bottom:0;background:none}
  .transcript-body{display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}

/* Pen-name note in About */
.about .pen-name{margin-top:14px;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);font-size:.9375rem}
.copyright a{text-decoration:underline}