styles.css

/* ==========================================================================
   Διάγνωση Θραύσης Ελαστικού Αεροσκάφους — infographic styles
   Warm "cream / technical" palette (preserved from source), elevated with
   HAF Training Command typography (Oswald / Rubik / JetBrains Mono).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&family=Oswald:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap&subset=greek,greek-ext,latin,latin-ext');

:root{
  /* paper + ink (warm cream) */
  --paper:#efe9dd;          /* page background */
  --panel:#fbf8f1;          /* panel surface */
  --panel-2:#f4f0e7;        /* alt surface */
  --ink:#2c2620;            /* primary text (warm near-black) */
  --ink-2:#6b6258;          /* secondary / muted */
  --ink-3:#8c8478;          /* faint */
  --line:#e2dccf;           /* hairline */
  --line-2:#d6cfbf;         /* stronger hairline */

  /* mechanism colours (from source legend) */
  --navy:#0b5fa5;           /* landing family */
  --navy-deep:#0b3f70;
  --navy-bg:#eaf2fb;
  --red:#b8351f;            /* braking family */
  --red-deep:#7d1f12;
  --red-bg:#fbeee9;
  --amber:#c47a18;          /* combination / caution */
  --amber-deep:#8a5a10;
  --amber-bg:#fff8e9;
  --grey:#6b6258;           /* other / intermediate */

  --font-display:'Oswald',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-sans:'Rubik',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --maxw:1180px;
  --shadow-card:0 1px 2px rgba(44,38,32,.05), 0 8px 24px -16px rgba(44,38,32,.25);
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #f4efe4 0%, var(--paper) 60%) fixed,
    var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:40px 28px 72px; }

/* ---------- header ---------- */
.masthead{ border-bottom:2px solid var(--line-2); padding-bottom:22px; margin-bottom:34px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.eyebrow .dot{ width:7px;height:7px;border-radius:50%;background:var(--navy); display:inline-block; }
.eyebrow .rule{ flex:1; height:1px; background:var(--line); min-width:30px; }
h1.title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px,4.4vw,52px); line-height:1.02; letter-spacing:.005em;
  margin:0 0 12px; color:var(--ink); text-wrap:balance;
}
.subtitle{ font-size:15.5px; color:var(--ink-2); max-width:880px; margin:0; line-height:1.55; }
.subtitle b{ color:var(--ink); font-weight:600; }
.byline{
  margin-top:18px; display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.04em;
}
.byline .tag{
  border:1px solid var(--line-2); border-radius:3px; padding:3px 9px;
  text-transform:uppercase; letter-spacing:.16em; color:var(--ink-2);
}

/* ---------- section heads ---------- */
.section{ margin-top:46px; }
.sec-head{ display:grid; grid-template-columns:auto auto 1fr; column-gap:14px; align-items:center; margin:0 0 20px; }
.sec-num{
  font-family:var(--font-mono); font-size:12px; color:var(--navy);
  letter-spacing:.1em; align-self:center;
}
h2.sec-title{
  font-family:var(--font-display); font-weight:500; font-size:clamp(20px,2.4vw,27px);
  letter-spacing:.01em; margin:0; color:var(--ink); white-space:nowrap;
}
.sec-head .rule{ min-width:30px; height:1px; background:var(--line-2); align-self:center; }
@media (max-width:720px){
  .sec-head{ grid-template-columns:auto 1fr; }
  h2.sec-title{ grid-column:1 / -1; white-space:normal; }
  .sec-head .rule{ display:none; }
}

/* ---------- generic panel ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line-2); border-radius:6px;
  box-shadow:var(--shadow-card);
}

/* ---------- decision tree svg ---------- */
.tree-card{ padding:10px 14px 16px; overflow:hidden; }
.decision-tree{ width:100%; height:auto; display:block; }
.decision-tree .q{ fill:var(--panel-2); stroke:var(--line-2); stroke-width:1.4; }
.decision-tree .qlab{ font-family:var(--font-sans); font-weight:600; font-size:14px; fill:var(--ink); }
.decision-tree .small{ font-family:var(--font-sans); font-size:11.5px; fill:var(--ink-2); }
.decision-tree .res{ font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.02em; }
.decision-tree .conn{ fill:none; stroke:#b8b0a2; stroke-width:1.6; }
.decision-tree .edge{ font-family:var(--font-mono); font-size:10px; fill:#fff; letter-spacing:.08em; text-transform:uppercase; }
.decision-tree .edgebg{ fill:var(--ink-2); }

/* ---------- mechanism panels ---------- */
.mechs{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:880px){ .mechs{ grid-template-columns:1fr; } }
.mech{
  background:var(--panel); border:1px solid var(--line-2); border-radius:6px;
  box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column;
}
.mech .topbar{ height:5px; }
.mech.l .topbar{ background:var(--navy); }
.mech.b .topbar{ background:var(--red); }
.mech .body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:14px; flex:1; }
.mech .kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:9px;
}
.mech.l .kicker{ color:var(--navy); }
.mech.b .kicker{ color:var(--red); }
.mech .kicker .id{
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.02em;
  width:26px;height:26px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff;
}
.mech.l .kicker .id{ background:var(--navy); }
.mech.b .kicker .id{ background:var(--red); }
.mech h3{
  font-family:var(--font-display); font-weight:500; font-size:21px; line-height:1.12;
  margin:0; color:var(--ink); letter-spacing:.01em;
}
.mech p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.mech p b{ color:var(--ink); font-weight:600; }
.mech .en{ color:var(--ink-3); font-style:normal; }

/* photo + sketch row */
.evid{ display:grid; grid-template-columns:1.25fr .95fr; gap:12px; align-items:stretch; }
.figure{ margin:0; display:flex; flex-direction:column; }
.photo-frame{
  position:relative; border:1px solid var(--line-2); border-radius:4px; overflow:hidden;
  background:#000; aspect-ratio:4/3;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.04); }
/* duotone treatments */
body[data-duo="mech"] .mech.l .photo-frame img{ filter:url(#duo-navy); }
body[data-duo="mech"] .mech.b .photo-frame img{ filter:url(#duo-red); }
body[data-duo="ink"] .photo-frame img{ filter:url(#duo-ink); }
body[data-duo="bw"] .photo-frame img{ filter:grayscale(1) contrast(1.06); }

.photo-frame .corner{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(10,22,40,0) 55%, rgba(10,22,40,.55) 100%);
}
.figure figcaption{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; color:var(--ink-3);
  margin-top:6px; line-height:1.35;
}
.figure figcaption b{ color:var(--ink-2); font-weight:600; }

/* sketch */
.sketch-box{
  border:1px dashed var(--line-2); border-radius:4px; background:var(--panel-2);
  padding:8px; display:flex; flex-direction:column;
}
body[data-sketch="off"] .evid{ grid-template-columns:1fr; }
body[data-sketch="off"] .sketch-box{ display:none; }
.sketch-box svg{ width:100%; height:auto; display:block; flex:1; }
.sketch-box .slab{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; color:var(--ink-3);
  text-align:center; margin-top:4px;
}

/* signature / "πώς το ξεχωρίζεις" + example */
.mech .note{
  font-size:12.5px; line-height:1.5; padding:11px 13px; border-radius:4px;
  background:var(--panel-2); border:1px solid var(--line);
}
.mech .note .lab{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  display:block; margin-bottom:3px; color:var(--ink-3);
}
.mech .example{
  border-left:3px solid; padding:10px 13px; border-radius:0 4px 4px 0; font-size:12.5px; line-height:1.5;
  background:var(--panel-2);
}
.mech.l .example{ border-color:var(--navy); }
.mech.b .example{ border-color:var(--red); }
.mech .example .lab{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  display:block; margin-bottom:3px;
}
.mech.l .example .lab{ color:var(--navy); }
.mech.b .example .lab{ color:var(--red); }
.mech .example b{ color:var(--ink); }

/* ---------- comparison table ---------- */
.cmp{ width:100%; border-collapse:collapse; font-size:13px; background:var(--panel);
  border:1px solid var(--line-2); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-card); }
.cmp th,.cmp td{ text-align:left; padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp thead th{
  font-family:var(--font-display); font-weight:500; font-size:13px; letter-spacing:.02em;
  background:var(--panel-2); color:var(--ink);
}
.cmp thead th.c-l{ color:var(--navy); }
.cmp thead th.c-b{ color:var(--red); }
.cmp tbody th{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; width:170px;
}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{ border-bottom:none; }
.cmp td b{ color:var(--ink); font-weight:600; }
.cmp .en{ color:var(--ink-3); }

/* ---------- combination note ---------- */
.combo{ background:var(--amber-bg); border:1px solid var(--amber); border-radius:6px; padding:20px 24px; }
.combo h3{ font-family:var(--font-display); font-weight:500; font-size:19px; margin:0 0 10px; color:var(--amber-deep); }
.combo p{ margin:0 0 8px; font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.combo p:last-child{ margin-bottom:0; }
.combo b{ color:var(--ink); }

/* ---------- case study ---------- */
.case{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; overflow:hidden; }
@media (max-width:780px){ .case{ grid-template-columns:1fr; } }
.case .ph{ position:relative; min-height:240px; background:#0d1722; border-right:1px solid var(--line-2); }
.case .ph img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
body[data-duo="mech"] .case .ph img,
body[data-duo="ink"] .case .ph img{ filter:url(#duo-navy); }
body[data-duo="bw"] .case .ph img{ filter:grayscale(1) contrast(1.04); }
.case .ph .cap{
  position:absolute; left:0; right:0; bottom:0; padding:10px 14px;
  background:linear-gradient(to top, rgba(10,22,40,.78), rgba(10,22,40,0));
  font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; color:#dfe7f0;
}
.case .txt{ padding:22px 26px; }
.case .kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 10px; }
.case h3{ font-family:var(--font-display); font-weight:500; font-size:20px; margin:0 0 12px; color:var(--ink); line-height:1.15; }
.case p{ margin:0 0 9px; font-size:13px; line-height:1.55; color:var(--ink-2); }
.case p b{ color:var(--ink); }
.case .facts{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.case .facts span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:3px; padding:4px 9px; background:var(--panel-2);
}
body[data-case="off"] .case-section{ display:none; }
body[data-example="off"] .mech .example{ display:none; }

/* ---------- catalogue gallery ---------- */
.gal-intro{ font-size:13.5px; color:var(--ink-2); max-width:900px; margin:0 0 22px; line-height:1.6; }
.gal-intro b{ color:var(--ink); font-weight:600; }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:860px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .gallery{ grid-template-columns:1fr; } }
.gcard{ margin:0; background:var(--panel); border:1px solid var(--line-2); border-radius:6px;
  overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.gphoto{ aspect-ratio:16/10; background:#0e1722; overflow:hidden; }
.gphoto img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); display:block; }
.gcard figcaption{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.gcard h4{ font-family:var(--font-display); font-weight:500; font-size:16.5px; line-height:1.15;
  margin:0; color:var(--ink); letter-spacing:.01em; }
.gcard h4 .en{ color:var(--ink-3); font-weight:400; font-size:12.5px; font-family:var(--font-mono); letter-spacing:.02em; }
.gcard p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-2); flex:1; }
.gcard .action{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); border-top:1px solid var(--line); padding-top:9px; }

/* ---------- legend ---------- */
.legend{ display:flex; gap:22px; flex-wrap:wrap; margin:14px 0 0; font-size:12px; color:var(--ink-2); }
.legend .item{ display:flex; align-items:center; gap:8px; }
.legend .sw{ width:13px;height:13px;border-radius:3px; }

/* ---------- footnotes + sources ---------- */
.notes{ margin-top:38px; padding-top:18px; border-top:1px solid var(--line-2); }
.notes p{ font-size:11.5px; color:var(--ink-3); line-height:1.5; margin:0 0 6px; max-width:1000px; }
.sources{ margin-top:24px; }
.sources h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin:0 0 12px; }
.sources ol{ margin:0; padding-left:20px; }
.sources li{ font-size:12px; color:var(--ink-2); line-height:1.5; margin-bottom:8px; }
.sources a{ color:var(--navy); text-decoration:none; font-family:var(--font-mono); font-size:11px; word-break:break-all; }
.sources a:hover{ text-decoration:underline; }
.colophon{ margin-top:30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em; }
.colophon .motto{ font-family:var(--font-display); font-size:16px; font-style:italic; color:var(--ink-2); letter-spacing:.01em; }

/* svg filter host (visually hidden) */
.filterhost{ position:absolute; width:0; height:0; overflow:hidden; }

/* print */
@media print{
  body{ background:#fff; }
  .wrap{ max-width:none; padding:0; }
  .mech,.panel,.cmp,.case{ box-shadow:none; }
  .section{ break-inside:avoid; }
  .mech{ break-inside:avoid; }
}