/* ============================================================
   Ιστορικό Τελωνείο της Πρόπαν — shared stylesheet
   Adapted from the Sachpazis Group design system, shifted toward
   a stone/heritage register: warm cream canvas, coffee ink,
   schist-slate dark bands, single signal-orange accent.
   ============================================================ */

:root{
  /* brand / accent (verbatim from design system) */
  --primary:#ff4f00; --primary-press:#e84800; --on-primary:#fffefb;
  /* surfaces */
  --canvas:#fffefb; --canvas-soft:#f8f4f0;
  /* heritage dark — schist slate (κυανίζον τεφρόν) */
  --stone:#222b30; --stone-soft:#2c3940; --stone-line:#3c4a52;
  /* text ladder (coffee, verbatim) */
  --ink:#201515; --ink-soft:#2f2a26; --ink-mid:#36342e;
  --body:#605d52; --body-mid:#939084; --mute:#c5c0b1;
  --border-ink:#201515;
  /* spacing */
  --space-xxs:2px; --space-xs:4px; --space-sm:8px; --space-md:12px;
  --space-lg:16px; --space-xl:24px; --space-2xl:32px; --space-3xl:48px; --space-4xl:64px;
  /* radius */
  --radius-sm:6px; --radius-md:12px; --radius-pill:9999px;
  /* type */
  --font-display:"Mona Sans","Inter",system-ui,sans-serif;
  --font-text:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--canvas); color:var(--body);
  font-family:var(--font-text); font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:500; line-height:1.05; letter-spacing:-0.01em;}
p{margin:0;}

/* ---------- bilingual visibility ---------- */
html[lang="en"] .t-el{display:none !important;}
html[lang="el"] .t-en{display:none !important;}

/* ---------- layout ---------- */
.container{width:100%; max-width:1240px; margin:0 auto; padding:0 28px;}
.band{padding:var(--space-4xl) 0;}
.band-soft{background:var(--canvas-soft);}
.band-stone{background:var(--stone); color:#d9dde0;}
.band-stone h1,.band-stone h2,.band-stone h3,.band-stone h4{color:#fbf7f2;}
.narrow{max-width:760px;}

.eyebrow{
  font-family:var(--font-text); text-transform:uppercase; font-weight:600;
  font-size:13px; letter-spacing:2.5px; color:var(--primary); margin:0 0 var(--space-lg);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:24px; height:2px; background:var(--primary); display:inline-block;}
.band-stone .eyebrow{color:#ff7a3c;}
.band-stone .eyebrow::before{background:#ff7a3c;}

.display-xl{font-family:var(--font-display); font-size:clamp(40px,6vw,68px); line-height:1.02; letter-spacing:-0.02em;}
.display-lg{font-family:var(--font-display); font-size:clamp(32px,4.4vw,52px); line-height:1.05; letter-spacing:-0.02em;}
.display-md{font-family:var(--font-display); font-size:clamp(26px,3vw,36px); line-height:1.1;}
.lead{font-size:clamp(19px,2.2vw,23px); line-height:1.6; color:var(--ink-mid);}
.body-lg{font-size:20px; line-height:1.65;}
.muted{color:var(--body-mid);}
.flow > * + *{margin-top:var(--space-xl);}
.flow-sm > * + *{margin-top:var(--space-md);}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-text);
  font-weight:600; font-size:17px; padding:13px 24px; border-radius:var(--radius-md);
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:background .14s ease,color .14s ease,border-color .14s ease;}
.btn-primary{background:var(--primary); color:var(--on-primary);}
.btn-primary:hover{background:var(--primary-press);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border-ink);}
.btn-ghost:hover{background:var(--ink); color:var(--canvas);}
.band-stone .btn-ghost{color:#fbf7f2; border-color:#5a6970;}
.band-stone .btn-ghost:hover{background:#fbf7f2; color:var(--stone);}
.btn-sm{padding:9px 16px; font-size:15px;}

/* ---------- top nav ---------- */
.nav{position:sticky; top:0; z-index:60; background:var(--canvas);
  border-bottom:1px solid #ece5dc;}
.nav-inner{display:flex; align-items:center; gap:20px; height:72px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto;}
.brand-glyph{width:38px; height:38px; border-radius:10px; background:var(--stone);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:21px; flex:none;}
.brand-glyph span{color:var(--primary);}
.brand-word{font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); line-height:1.05; letter-spacing:-0.01em;}
.brand-word .dot{color:var(--primary);}
.brand-sub{font-family:var(--font-text); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--body-mid); font-weight:600;}
.nav-links{display:flex; align-items:center; gap:4px;}
.nav-links a{font-size:15px; font-weight:500; color:var(--ink-mid); text-decoration:none;
  padding:8px 12px; border-radius:8px; transition:background .12s,color .12s; white-space:nowrap;}
.nav-links a:hover{background:var(--canvas-soft); color:var(--ink);}
.nav-links a.active{color:var(--primary);}
.nav-tools{display:flex; align-items:center; gap:12px;}
.lang{display:inline-flex; border:1px solid #e0d8cd; border-radius:var(--radius-pill); overflow:hidden;}
.lang button{border:0; background:transparent; font-family:var(--font-text); font-weight:600;
  font-size:13px; padding:6px 12px; cursor:pointer; color:var(--body-mid);}
.lang button.on{background:var(--ink); color:var(--canvas);}
.nav-burger{display:none; border:1px solid #e0d8cd; background:transparent; border-radius:9px;
  width:42px; height:40px; cursor:pointer; align-items:center; justify-content:center;}
.nav-burger span{display:block; width:18px; height:2px; background:var(--ink); position:relative;}
.nav-burger span::before,.nav-burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink);}
.nav-burger span::before{top:-6px;} .nav-burger span::after{top:6px;}

@media(max-width:980px){
  .nav-links{position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--canvas); border-bottom:1px solid #ece5dc; padding:10px 20px 18px;
    gap:2px; transform:translateY(-120%); transition:transform .22s ease; box-shadow:0 16px 30px rgba(32,21,21,.08);}
  .nav-links.open{transform:translateY(0);}
  .nav-links a{padding:13px 10px; font-size:17px; border-bottom:1px solid #f0eae1;}
  .nav-burger{display:flex;}
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:calc(100vh - 72px); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden;}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0;}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,26,29,.30) 0%,rgba(20,26,29,.12) 38%,rgba(20,26,29,.78) 100%);}
.hero-inner{position:relative; z-index:2; padding-bottom:var(--space-4xl); padding-top:120px;}
.hero h1{color:#fff; max-width:16ch; text-shadow:0 2px 24px rgba(0,0,0,.35);}
.hero .lead{color:rgba(255,255,255,.92); max-width:54ch;}
.hero .eyebrow{color:#ffb486;}
.hero .eyebrow::before{background:#ffb486;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:var(--space-2xl);}

/* ---------- generic split ---------- */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:var(--space-4xl); align-items:center;}
.split.rev .split-media{order:-1;}
.figure{border-radius:var(--radius-md); overflow:hidden; background:var(--canvas-soft);}
.figure img{width:100%; height:100%; object-fit:cover;}
.figure-cap{font-size:13.5px; color:var(--body-mid); margin-top:10px; line-height:1.45;}
@media(max-width:860px){.split{grid-template-columns:1fr; gap:var(--space-2xl);} .split.rev .split-media{order:0;}}

/* ---------- cards grid ---------- */
.grid{display:grid; gap:var(--space-xl);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{background:var(--canvas-soft); border-radius:var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .16s ease, box-shadow .16s ease;}
a.card:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(32,21,21,.10);}
.card-media{aspect-ratio:4/3; overflow:hidden;}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
a.card:hover .card-media img{transform:scale(1.04);}
.card-body{padding:var(--space-xl); display:flex; flex-direction:column; gap:8px;}
.card-body h3{font-size:21px;}
.card-kicker{font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--primary); font-weight:600;}
.card-arrow{margin-top:auto; padding-top:14px; color:var(--primary); font-weight:600; font-size:15px;}

/* stat / fact */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-xl);}
@media(max-width:760px){.facts{grid-template-columns:1fr 1fr;}}
.fact .n{font-family:var(--font-display); font-size:clamp(32px,4vw,46px); color:var(--ink); line-height:1;}
.band-stone .fact .n{color:#fbf7f2;}
.fact .l{font-size:14px; color:var(--body-mid); margin-top:8px; line-height:1.4;}
.band-stone .fact .l{color:#9fb0b6;}
.fact{border-top:2px solid var(--primary); padding-top:16px;}

/* pull quote */
.pull{border-left:3px solid var(--primary); padding:6px 0 6px 26px;
  font-family:var(--font-display); font-weight:500; font-size:clamp(22px,2.8vw,30px);
  line-height:1.3; color:var(--ink);}
.band-stone .pull{color:#fbf7f2;}
.pull cite{display:block; font-family:var(--font-text); font-style:normal; font-weight:500;
  font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--body-mid); margin-top:16px;}

/* timeline */
.timeline{position:relative; margin-top:var(--space-2xl);}
.timeline::before{content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:#e3dbd0;}
.band-stone .timeline::before{background:var(--stone-line);}
.tl-item{position:relative; padding:0 0 var(--space-2xl) 46px;}
.tl-item::before{content:""; position:absolute; left:4px; top:4px; width:16px; height:16px;
  border-radius:50%; background:var(--canvas); border:3px solid var(--primary);}
.band-stone .tl-item::before{background:var(--stone);}
.tl-year{font-family:var(--font-display); font-size:22px; color:var(--primary); font-weight:600;}
.tl-item h4{font-size:19px; margin:4px 0 6px;}
.tl-item p{font-size:16px; color:var(--body);}
.band-stone .tl-item p{color:#aeb9bd;}

/* contributor card (subordinate to the two principals) */
.contributor{display:grid; grid-template-columns:96px 1fr; gap:var(--space-xl); align-items:start;
  background:var(--canvas); border:1px solid #ece5dc; border-left:3px solid var(--primary);
  border-radius:var(--radius-md); padding:var(--space-xl) var(--space-2xl); margin-top:var(--space-xl);}
.contributor-avatar{width:96px; height:96px; border-radius:12px; overflow:hidden; background:var(--stone);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:32px; font-weight:500;}
.contributor-avatar img{width:100%; height:100%; object-fit:cover; object-position:center 22%; border-radius:12px;}
@media(max-width:560px){.contributor{grid-template-columns:1fr;}}

/* speaker card */
.speaker{display:grid; grid-template-columns:120px 1fr; gap:var(--space-xl); align-items:start;
  background:var(--canvas-soft); border-radius:var(--radius-md); padding:var(--space-2xl);}
.speaker-avatar{width:120px; height:120px; border-radius:14px; background:var(--stone);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:42px; font-weight:500;}
.speaker-avatar{overflow:hidden;}
.speaker-avatar img{width:100%; height:100%; object-fit:cover; object-position:center 22%; border-radius:14px;}
.speaker h3{font-size:23px;}
.speaker .role{color:var(--primary); font-weight:600; font-size:15px; margin-top:2px;}
@media(max-width:560px){.speaker{grid-template-columns:1fr; text-align:left;}}

/* gallery */
.gallery-grid{columns:3; column-gap:16px;}
@media(max-width:900px){.gallery-grid{columns:2;}}
@media(max-width:560px){.gallery-grid{columns:1;}}
.gallery-grid figure{margin:0 0 16px; break-inside:avoid; border-radius:var(--radius-md);
  overflow:hidden; cursor:zoom-in; position:relative; background:var(--canvas-soft);}
.gallery-grid img{width:100%; transition:transform .4s ease;}
.gallery-grid figure:hover img{transform:scale(1.04);}
.gallery-cap{position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px; color:#fff;
  font-size:13.5px; background:linear-gradient(transparent,rgba(0,0,0,.7)); opacity:0; transition:opacity .2s;}
.gallery-grid figure:hover .gallery-cap{opacity:1;}

/* lightbox */
.lb{position:fixed; inset:0; z-index:200; background:rgba(18,22,24,.94); display:none;
  align-items:center; justify-content:center; padding:40px;}
.lb.open{display:flex;}
.lb img{max-width:92vw; max-height:84vh; border-radius:8px;}
.lb-cap{position:absolute; bottom:24px; left:0; right:0; text-align:center; color:#dfe3e5; font-size:14px; padding:0 20px;}
.lb-close,.lb-nav{position:absolute; background:rgba(255,255,255,.12); border:0; color:#fff;
  width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:22px; display:flex;
  align-items:center; justify-content:center;}
.lb-close{top:24px; right:24px;}
.lb-nav{top:50%; transform:translateY(-50%);}
.lb-prev{left:24px;} .lb-next{right:24px;}
.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.24);}

/* footer */
.footer{background:var(--stone); color:#aeb9bd; padding:var(--space-4xl) 0 var(--space-2xl);}
.footer h4{color:#fbf7f2; font-family:var(--font-text); font-size:13px; letter-spacing:1.6px;
  text-transform:uppercase; margin-bottom:16px; font-weight:600;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:var(--space-3xl);}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer a{color:#aeb9bd; text-decoration:none; display:block; padding:5px 0; font-size:15px;}
.footer a:hover{color:#fff;}
.footer-brand .brand-word{color:#fbf7f2;}
.footer-bottom{border-top:1px solid var(--stone-line); margin-top:var(--space-3xl);
  padding-top:var(--space-xl); font-size:13px; color:#7e8c92; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* misc */
.page-head{padding:var(--space-4xl) 0 var(--space-2xl);}
.crumb{font-size:13px; letter-spacing:1.4px; text-transform:uppercase; color:var(--body-mid); font-weight:600; margin-bottom:18px;}
.crumb a{color:var(--primary); text-decoration:none;}
.divider{height:1px; background:#ece5dc; border:0; margin:0;}
.tag{display:inline-block; background:var(--canvas-soft); border:1px solid #e8e0d5;
  border-radius:var(--radius-pill); padding:5px 14px; font-size:13.5px; color:var(--ink-mid); font-weight:500;}
.note{font-size:14.5px; color:var(--body-mid); line-height:1.55;}
.fullbleed-img{width:100%; height:clamp(280px,46vh,520px); object-fit:cover;}