/* endo-katsiveli.gr — Πηνελόπη Κατσιβέλη, Ενδοκρινολόγος – Διαβητολόγος */

@font-face{
  font-family:"Commissioner"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/site/commissioner-greek.woff2") format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
  font-family:"Commissioner"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/site/commissioner-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"GFS Didot"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/site/gfsdidot-greek.woff2") format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
  font-family:"GFS Didot"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/site/gfsdidot-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Χρώματα: μπλε & κόκκινο του λογοτύπου, ροζ από τον πίνακα με τις αμυγδαλιές του ιατρείου */
  --ink:#10243d;
  --blue:#1d629c;
  --blue-deep:#124774;
  --navy:#0e2a48;
  --blossom:#f4dce1;
  --blossom-soft:#fbf2f3;
  --mist:#f2f6fa;
  --red:#cd2d46;
  --muted:#51627a;
  --line:#d8e1eb;
  --white:#fff;

  --serif:"GFS Didot","Didot","Bodoni MT","Times New Roman",serif;
  --sans:"Commissioner",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px,4vw,40px);
  --section:clamp(72px,10vw,136px);
  --header-h:76px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto }
a{ color:var(--blue); text-underline-offset:.18em; text-decoration-thickness:1px }
a:hover{ color:var(--blue-deep) }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.12; margin:0; letter-spacing:-.005em; text-wrap:balance }
p{ margin:0 0 1em; text-wrap:pretty }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px }
.on-dark :focus-visible{ outline-color:var(--blossom) }

.wrap{ width:100%; max-width:calc(var(--wrap) + 2*var(--gutter)); margin-inline:auto; padding-inline:var(--gutter) }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip{ position:absolute; left:16px; top:-60px; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px }
.skip:focus{ top:12px; color:#fff }

/* ---------- Κουμπιά ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:52px; padding:0 26px; border-radius:999px; border:1.5px solid transparent;
  font:600 1rem/1 var(--sans); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .18s, color .18s, border-color .18s;
}
.btn svg{ width:18px; height:18px; flex:none }
.btn-primary{ background:var(--blue); color:#fff }
.btn-primary:hover{ background:var(--blue-deep); color:#fff }
.btn-line{ border-color:var(--blue); color:var(--blue); background:transparent }
.btn-line:hover{ background:var(--blue); color:#fff }
.btn-light{ background:#fff; color:var(--navy) }
.btn-light:hover{ background:var(--blossom); color:var(--navy) }

/* ---------- Κεφαλίδα ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s;
  padding-top:env(safe-area-inset-top);
}
.site-header.is-stuck{ border-bottom-color:var(--line) }
.site-header .wrap{ display:flex; align-items:center; gap:24px; height:var(--header-h) }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--blue); margin-right:auto }
.brand img{ width:34px; height:auto }
.brand-name{ display:block; font-weight:600; font-size:1.0625rem; line-height:1.15; letter-spacing:-.01em }
.brand-role{ display:block; font-size:.8125rem; font-weight:400; color:var(--muted); line-height:1.3; white-space:nowrap }
.nav-list{ display:flex; gap:clamp(14px,2.2vw,30px); list-style:none; margin:0; padding:0 }
.nav-list a{ color:var(--ink); text-decoration:none; font-size:.9375rem; font-weight:500; padding:10px 0; display:block; border-bottom:1.5px solid transparent }
.nav-list a:hover, .nav-list a[aria-current]{ color:var(--blue); border-bottom-color:var(--blue) }
.header-call{ min-height:44px; padding:0 20px; font-size:.9375rem }
.nav-toggle{ display:none }

.nav-extra{ display:none }

@media (max-width:980px){
  :root{ --header-h:66px }
  .site-header.nav-open{ background:#fff; border-bottom-color:var(--line) }
  .nav-toggle{
    display:inline-grid; place-items:center; width:46px; height:46px; margin-right:-8px;
    background:none; border:0; border-radius:50%; color:var(--navy); cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle-bars{ position:relative; display:block; width:24px; height:12px }
  .nav-toggle-bars span{
    position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor;
    transition:translate .25s cubic-bezier(.3,.7,.2,1), rotate .25s cubic-bezier(.3,.7,.2,1);
  }
  .nav-toggle-bars span:first-child{ top:0 }
  .nav-toggle-bars span:last-child{ bottom:0 }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child{ translate:0 5px; rotate:45deg }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child{ translate:0 -5px; rotate:-45deg }

  /* Μενού πλήρους οθόνης κάτω από την κεφαλίδα */
  .site-nav{
    position:absolute; left:0; right:0; top:100%;
    height:calc(100vh - var(--header-h) - env(safe-area-inset-top)); height:calc(100dvh - var(--header-h) - env(safe-area-inset-top));
    display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
    background:#fff; padding:12px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    visibility:hidden; opacity:0; translate:0 -8px;
    transition:opacity .22s ease, translate .22s ease, visibility 0s .22s;
  }
  .site-nav.is-open{ visibility:visible; opacity:1; translate:0 0; transition:opacity .22s ease, translate .22s ease }
  .nav-list{ flex-direction:column; gap:0 }
  .nav-list a{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    font-family:var(--serif); font-size:1.75rem; font-weight:400; line-height:1.2; color:var(--navy);
    padding:20px 0; border-bottom:1px solid var(--line);
  }
  .nav-list a::after{
    content:""; flex:none; width:9px; height:9px; margin-right:4px; rotate:45deg;
    border-top:1.5px solid var(--blue); border-right:1.5px solid var(--blue);
  }
  .nav-list a:hover, .nav-list a[aria-current]{ color:var(--blue); border-bottom-color:var(--line) }
  .nav-extra{ display:block; margin-top:auto; padding-top:32px }
  .nav-extra .btn{ width:100%; min-height:56px; font-size:1.0625rem }
  .nav-extra p{ margin:18px 0 0; text-align:center; font-size:.9375rem; line-height:1.6; color:var(--muted) }
  .nav-extra p a{ color:var(--muted) }
  body.nav-locked{ overflow:hidden }

  .header-call{ display:none }
  .nav-toggle{ flex:none }
}
@media (max-width:420px){ .brand-name{ font-size:1rem } .brand-role{ font-size:.75rem } .brand img{ width:30px } .brand{ gap:10px } }
@media (max-width:350px){ .brand-role{ display:none } }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--mist),#fff 78%) }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center;
  gap:clamp(32px,6vw,88px); padding-block:clamp(48px,7vw,96px) clamp(56px,7vw,104px);
}
.hero-role{ font-size:1.0625rem; font-weight:500; color:var(--blue); margin:0 0 18px }
.hero h1{ font-size:clamp(3rem,8.4vw,6.75rem); line-height:.98; letter-spacing:-.015em; color:var(--navy) }
.hero h1 span{ display:block }
.hero-lead{ font-size:clamp(1.0625rem,1.5vw,1.25rem); line-height:1.6; color:var(--muted); max-width:34em; margin:28px 0 0 }
.hero-lead strong{ color:var(--ink); font-weight:600 }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px }

.portrait{ position:relative; justify-self:center; width:min(100%,400px) }
.portrait::before{
  content:""; position:absolute; inset:0; translate:22px 22px;
  border-radius:999px 999px 20px 20px; background:var(--blossom);
}
.portrait img{
  position:relative; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%;
  border-radius:999px 999px 20px 20px; background:var(--mist);
}
/* Το «καλώδιο» του στηθοσκοπίου από το λογότυπο: σχεδιάζεται μία φορά στο φόρτωμα */
.cord{ position:absolute; left:-34%; bottom:-11%; width:62%; height:auto; overflow:visible; pointer-events:none }
.cord path{ fill:none; stroke:var(--blue); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.6s .35s cubic-bezier(.6,.05,.3,1) forwards }
.cord circle{ fill:#fff; stroke:var(--blue); stroke-width:5; opacity:0; animation:pop .4s 1.8s ease-out forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes pop{ from{ opacity:0; scale:.6 } to{ opacity:1; scale:1 } }
.cord circle{ transform-box:fill-box; transform-origin:center }

.facts{ border-top:1px solid var(--line); background:#fff }
.facts dl{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 }
.facts dl > div{ padding:26px 28px 28px 0 }
.facts dl > div + div{ padding-left:28px; border-left:1px solid var(--line) }
.facts dt{ font-size:.875rem; color:var(--muted); margin-bottom:4px }
.facts dd{ margin:0; font-weight:500; line-height:1.4 }
.facts dd a{ color:var(--ink); text-decoration:none }
.facts dd a:hover{ color:var(--blue); text-decoration:underline }

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr }
  .portrait{ order:-1; width:min(46%,240px); justify-self:start; margin-bottom:10px }
  .portrait::before{ translate:10px 10px }
  .cord path, .cord circle{ stroke-width:7 }
  .cord{ left:auto; right:-52%; bottom:-6%; width:58%; scale:-1 1 }
  .facts dl{ grid-template-columns:1fr }
  .facts dl > div{ padding:18px 0 }
  .facts dl > div + div{ padding-left:0; border-left:0; border-top:1px solid var(--line) }
}

/* ---------- Ενότητες ---------- */
.section{ padding-block:var(--section) }
.section-title{ font-size:clamp(2rem,4.4vw,3.25rem); color:var(--navy) }
.section-intro{ color:var(--muted); max-width:36em; margin:18px 0 0; font-size:1.125rem }

/* Υπηρεσίες */
.services-grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,6vw,96px); align-items:start }
.services-head{ position:sticky; top:calc(var(--header-h) + 40px) }
.services-head .section-title{ text-wrap:wrap }
.services-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.services-list li{ display:grid; grid-template-columns:auto 1fr; column-gap:22px; align-items:start; padding:26px 0 28px; border-bottom:1px solid var(--line) }
.service-icon{ grid-row:span 2; width:64px; height:64px; border-radius:50%; background:var(--mist); color:var(--blue); display:grid; place-items:center }
.service-icon svg{ width:36px; height:36px }
.services-list h3, .services-list p{ grid-column:2 }
.services-list h3{ font-size:clamp(1.375rem,2.2vw,1.75rem); color:var(--navy); margin-bottom:8px }
.services-list p{ margin:0; color:var(--muted); max-width:38em }
@media (max-width:860px){
  .services-grid{ grid-template-columns:1fr }
  .services-head{ position:static }
  .services-list li{ column-gap:16px }
  .service-icon{ width:52px; height:52px }
  .service-icon svg{ width:30px; height:30px }
}

/* Η ιατρός */
.about{ background:var(--blossom-soft) }
.about-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:center }
.about-photo img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:20px }
.about-body p{ color:var(--muted); max-width:34em }
.about-body .section-title{ margin-bottom:24px }
.cv{ margin:32px 0 0; border-top:1px solid var(--ink) }
.cv > div{ display:grid; grid-template-columns:9.5em 1fr; gap:16px; padding:16px 0; border-bottom:1px solid rgba(16,36,61,.14) }
.cv dt{ color:var(--muted); font-size:.9375rem }
.cv dd{ margin:0; font-weight:500; line-height:1.45 }
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr }
  .cv > div{ grid-template-columns:1fr; gap:2px }
}

/* Ιατρείο */
.office-head{ display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:clamp(28px,4vw,48px) }
.gallery-nav{ display:flex; gap:10px; flex:none }
.gallery-nav button{
  width:52px; height:52px; border-radius:50%; border:1.5px solid var(--ink); background:#fff; color:var(--ink);
  display:grid; place-items:center; cursor:pointer; transition:background-color .18s,color .18s,opacity .18s;
}
.gallery-nav button:hover:not(:disabled){ background:var(--ink); color:#fff }
.gallery-nav button:disabled{ opacity:.3; cursor:default }
.gallery-nav svg{ width:20px; height:20px }
.gallery{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-inline:max(var(--gutter), calc((100vw - var(--wrap))/2)); scroll-padding-inline:max(var(--gutter), calc((100vw - var(--wrap))/2));
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.gallery::-webkit-scrollbar{ display:none }
.gallery figure{ margin:0; flex:none; width:min(78vw,620px); scroll-snap-align:start }
.gallery img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:16px; background:var(--mist) }

/* Άρθρα & ομιλίες */
.reading{ background:var(--mist) }
.reading-group + .reading-group{ margin-top:clamp(48px,6vw,80px) }
.reading-kind{ font-family:var(--sans); font-size:1.0625rem; font-weight:600; color:var(--ink); margin:clamp(32px,4vw,56px) 0 20px; padding-bottom:14px; border-bottom:1px solid var(--ink) }
.cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.5vw,48px) }
.card{ position:relative; display:flex; flex-direction:column }
.card-media{ position:relative; border-radius:16px; overflow:hidden; background:var(--line) }
.card-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:scale .5s cubic-bezier(.2,.6,.2,1) }
.card:hover .card-media img{ scale:1.03 }
.card h3{ font-size:clamp(1.375rem,2.2vw,1.75rem); margin:20px 0 8px }
.card h3 a{ color:var(--navy); text-decoration:none }
.card h3 a::after{ content:""; position:absolute; inset:0 }
.card:hover h3 a{ color:var(--blue); text-decoration:underline; text-decoration-thickness:1px }
.card p{ color:var(--muted); margin:0; max-width:34em }
.card-meta{ font-size:.875rem; color:var(--muted); margin-top:12px }
.play{
  position:absolute; left:16px; bottom:16px; width:56px; height:56px; border-radius:50%;
  background:#fff; color:var(--blue); display:grid; place-items:center; box-shadow:0 6px 20px rgba(14,42,72,.25);
}
.play svg{ width:20px; height:20px; margin-left:3px }
@media (max-width:700px){ .cards{ grid-template-columns:1fr } }

/* Επικοινωνία */
.contact{ background:var(--navy); color:#e8eef5 }
.contact .section-title{ color:#fff }
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:start }
.contact-phone{ display:inline-block; font-family:var(--serif); font-size:clamp(2.5rem,6vw,4.25rem); line-height:1; color:#fff; text-decoration:none; margin:28px 0 8px; letter-spacing:-.01em }
.contact-phone:hover{ color:var(--blossom) }
.contact-note{ color:#b9c7d8; margin:0 }
.contact-list{ margin:36px 0 0; border-top:1px solid rgba(255,255,255,.22) }
.contact-list > div{ display:grid; grid-template-columns:7em 1fr; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.22) }
.contact-list dt{ color:#b9c7d8; font-size:.9375rem }
.contact-list dd{ margin:0; line-height:1.5 }
.contact-list a{ color:#fff }
.contact-list a:hover{ color:var(--blossom) }
.map{ margin-top:32px; border-radius:16px; overflow:hidden; background:#1b3b5f; aspect-ratio:16/10 }
.map iframe{ display:block; width:100%; height:100%; border:0 }

.form{ background:#fff; color:var(--ink); border-radius:20px; padding:clamp(24px,3.5vw,44px) }
.form h3{ font-size:1.75rem; color:var(--navy); margin-bottom:8px }
.form > p{ color:var(--muted); font-size:.9375rem; margin-bottom:24px }
.field{ margin-bottom:18px }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.field label{ display:block; font-size:.9375rem; font-weight:500; margin-bottom:6px }
.field .opt{ color:var(--muted); font-weight:400 }
.field input, .field textarea{
  width:100%; font:inherit; color:var(--ink); background:#fff; border:1.5px solid #b9c6d4; border-radius:10px;
  padding:13px 14px; min-height:52px; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none;
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.5 }
.field input:hover, .field textarea:hover{ border-color:var(--muted) }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,98,156,.2) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form .btn{ width:100% }
.form-hint{ font-size:.875rem; color:var(--muted); margin:16px 0 0 }
.notice{ border-radius:12px; padding:14px 16px; margin-bottom:20px; font-weight:500; border:1.5px solid }
.notice-ok{ background:#edf7f0; border-color:#2f8552; color:#1c5a36 }
.notice-err{ background:#fdf0f2; border-color:var(--red); color:#8f1b2e }
@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr }
  .field-row{ grid-template-columns:1fr; gap:0 }
}

/* ---------- Υποσέλιδο ---------- */
.site-footer{ background:#fff; border-top:1px solid var(--line); padding:44px 0 36px; font-size:.9375rem; color:var(--muted) }
.footer-grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 40px }
.footer-grid img{ width:190px }
.footer-links{ display:flex; flex-wrap:wrap; gap:8px 24px; list-style:none; margin:0; padding:0 }
.footer-links a{ color:var(--ink); text-decoration:none }
.footer-links a:hover{ color:var(--blue); text-decoration:underline }
.footer-legal{ margin:28px 0 0; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px }
.footer-legal p{ margin:0 }

/* ---------- Σελίδα άρθρου ---------- */
.article-head{ background:linear-gradient(180deg,var(--mist),#fff); padding-block:clamp(32px,5vw,64px) 0 }
.article-wrap{ max-width:calc(760px + 2*var(--gutter)) }
.crumbs{ font-size:.9375rem; color:var(--muted); margin-bottom:28px }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 10px; margin:0; padding:0 }
.crumbs li + li::before{ content:"/"; margin-right:10px; color:#9fb0c2 }
.crumbs a{ color:var(--muted) }
.article-head h1{ font-size:clamp(2.125rem,5.4vw,3.5rem); color:var(--navy); line-height:1.08 }
.article-meta{ color:var(--muted); margin:20px 0 0; font-size:.9375rem }
.article-figure{ margin:clamp(28px,4vw,48px) 0 0 }
.article-figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:20px }

.prose{ padding-block:clamp(36px,5vw,64px) clamp(56px,8vw,104px); font-size:1.125rem; line-height:1.75 }
.prose > p:first-of-type{ font-size:1.25rem; line-height:1.65; color:var(--ink) }
.prose p{ margin:0 0 1.15em; color:#2b3d55 }
.prose strong{ color:var(--ink); font-weight:600 }
.prose h2{ font-size:clamp(1.625rem,3.2vw,2.125rem); color:var(--navy); margin:2em 0 .7em; padding-top:1em; border-top:1px solid var(--line) }
.prose ul, .prose ol{ margin:0 0 1.4em; padding-left:1.3em; color:#2b3d55 }
.prose li{ margin-bottom:.7em; padding-left:.3em }
.prose li::marker{ color:var(--blue); font-weight:600 }
.article-note{ background:var(--blossom-soft); border-radius:16px; padding:22px 24px; margin-top:2.5em; font-size:1rem; line-height:1.6; color:#3c4b61 }
.article-note p{ margin:0; color:inherit }
.article-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:2.5em; padding-top:1.8em; border-top:1px solid var(--ink); font-size:1rem }
.share{ display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center; color:var(--muted) }
.next-read{ background:var(--mist); padding-block:clamp(48px,6vw,80px) }
.next-read p{ color:var(--muted); margin:0 0 10px; font-size:.9375rem }
.next-read a{ font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.25rem); line-height:1.15; color:var(--navy); text-decoration:none }
.next-read a:hover{ color:var(--blue); text-decoration:underline; text-decoration-thickness:1px }

.cta-band{ background:var(--navy); color:#e8eef5; padding-block:clamp(48px,6vw,80px) }
.cta-band .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 40px }
.cta-band h2{ color:#fff; font-size:clamp(1.75rem,3.6vw,2.5rem) }
.cta-band p{ margin:10px 0 0; color:#b9c7d8 }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important }
  .gallery{ scroll-behavior:auto }
}
@media print{
  .site-header,.gallery-nav,.map,.form,.cta-band,.next-read,.share{ display:none !important }
  body{ font-size:11pt }
}