/* Tale of the Bomber — shared styles.
   Stone page (Portland limestone, as CWGC headstones), RAF blue-grey ink,
   one night band for the last flight that grades to dawn at Basse Maison.
   Marcellus = cut-stone capitals for names and inscriptions only.
   Courier Prime = only where the original was typed (ORB, register). */

:root{
  --stone:#e5e4de; --stone-2:#dcdbd3; --sheet:#f1f0eb;
  --ink:#1e2733; --soft:#4f5a68; --faint:#7b8592; --rule:#c4c4bb;
  --night:#0d1520; --night-2:#16212f; --night-ink:#dde3ea; --night-soft:#93a1b2; --night-rule:#2a3646;
  --dawn:#c9b79a; --dawn-wash:#ece5d7;
  --poppy:#a3241e;
  --stoneface:"Marcellus","Trajan Pro",Georgia,serif;
  --read:"Source Serif 4",Georgia,"Times New Roman",serif;
  --typed:"Courier Prime","Courier New",Courier,monospace;
  --col:38rem; --margin:10.5rem; --gap:clamp(1.5rem,3vw,3rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --stone:#171b21; --stone-2:#1d222a; --sheet:#1f252e;
  --ink:#e2e5e9; --soft:#a7b0bc; --faint:#7f8995; --rule:#343c47;
  --dawn-wash:#2a2620; --poppy:#e0574f; color-scheme:dark}}
:root[data-theme="dark"]{
  --stone:#171b21; --stone-2:#1d222a; --sheet:#1f252e;
  --ink:#e2e5e9; --soft:#a7b0bc; --faint:#7f8995; --rule:#343c47;
  --dawn-wash:#2a2620; --poppy:#e0574f; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:4rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--stone);color:var(--ink);font:400 1.125rem/1.7 var(--read);
  font-optical-sizing:auto;text-rendering:optimizeLegibility;font-kerning:normal;hanging-punctuation:first}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--poppy)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--poppy);outline-offset:3px;border-radius:1px}
p{margin:0 0 1.05em}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
h2{font:400 clamp(2rem,4.2vw,2.9rem)/1.08 var(--read);font-variation-settings:"opsz" 60;letter-spacing:-.01em;margin-bottom:.7em}
h3{font:600 1.3rem/1.25 var(--read);margin:2.2em 0 .6em}
em{font-style:italic}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--stone);padding:.6em 1em;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--stone) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
  padding-top:env(safe-area-inset-top,0px)}
.bar .in{max-width:76rem;margin:0 auto;padding:.55rem max(1rem,env(safe-area-inset-right)) .55rem max(1rem,env(safe-area-inset-left));
  display:flex;align-items:center;gap:1.5rem}
.bar .home{font:400 1.05rem/1 var(--stoneface);letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.bar nav{display:flex;gap:1.15rem;overflow-x:auto;scrollbar-width:none;flex:1;font-size:.9rem;
  mask-image:linear-gradient(90deg,#000 88%,transparent)}
.bar nav::-webkit-scrollbar{display:none}
.bar nav a{text-decoration:none;color:var(--soft);white-space:nowrap;padding:.3rem 0;border-bottom:2px solid transparent}
.bar nav a:hover,.bar nav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--poppy)}
.bar .lang{font-size:.85rem;color:var(--soft);text-decoration:none;border:1px solid var(--rule);padding:.2rem .55rem;border-radius:2px;white-space:nowrap}
.bar .lang:hover{color:var(--ink);border-color:var(--soft)}
@media (max-width:760px){.bar .in{flex-wrap:wrap;row-gap:.2rem;justify-content:space-between}.bar nav{order:3;flex-basis:100%;gap:1rem}.bar .home{font-size:.95rem}}

/* ---------- page grid: margin | text | aside ---------- */
.g{max-width:76rem;margin:0 auto;padding-inline:max(1.25rem,env(safe-area-inset-left));
  display:grid;grid-template-columns:var(--margin) minmax(0,var(--col)) minmax(0,1fr);column-gap:var(--gap)}
.g>*{grid-column:2}
.g>.m{grid-column:1;font-size:.88rem;line-height:1.45;color:var(--soft);padding-top:.35rem}
.g>.m b{display:block;font:400 1rem/1.3 var(--stoneface);letter-spacing:.05em;color:var(--ink);margin-bottom:.2rem}
.g>.wide{grid-column:2 / 4}
.g>.full{grid-column:1 / 4}
.g>.aside{grid-column:3;align-self:start}
.g>blockquote,.g>p{align-self:start}
@media (max-width:1100px){.g>.aside{margin-block:.5rem 1.6rem}.g{grid-template-columns:var(--margin) minmax(0,1fr)}.g>.wide,.g>.full{grid-column:1 / 3}.g>.aside{grid-column:2}}
@media (max-width:760px){
  .g{grid-template-columns:minmax(0,1fr)}
  .g>*,.g>.m,.g>.wide,.g>.full,.g>.aside{grid-column:1}
  .g>.m{padding-top:0;margin-bottom:.6rem}
  .g>.m b{display:inline;margin-right:.4em}
}
section{padding-block:clamp(3.5rem,8vw,6.5rem)}
section+section{border-top:1px solid var(--rule)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem);border-bottom:1px solid var(--rule)}
.hero .g{align-items:end}
.hero .who{grid-column:1 / 3}
.hero .por{grid-column:3;justify-self:end;width:min(100%,22rem)}
.hero .rank{font-size:.95rem;color:var(--soft);margin-bottom:1.1rem;letter-spacing:.01em}
.hero h1{font:400 clamp(2.5rem,6.4vw,5.4rem)/1.02 var(--stoneface);letter-spacing:.045em;margin-bottom:.35em}
.hero h1 span{display:block}
.hero .dates{font:400 clamp(1.15rem,2vw,1.45rem)/1.3 var(--stoneface);letter-spacing:.08em;color:var(--soft);margin-bottom:1.6rem}
.hero .lede{font-size:1.2rem;line-height:1.65;max-width:34rem}
.hero dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.4rem;margin:1.8rem 0 0;font-size:.95rem;max-width:34rem}
.hero dt{color:var(--soft)}
.hero dd{margin:0}
@media (max-width:1100px){.hero .who{grid-column:1 / 3}.hero .por{grid-column:1 / 3;justify-self:start;margin-top:2.5rem}}
@media (max-width:760px){.hero .who,.hero .por{grid-column:1}.hero .por{width:min(70%,17rem);margin-top:2rem}.hero .lede{font-size:1.1rem}}

/* ---------- figures ---------- */
figure{margin:0}
figure.f{margin-block:2.2rem}
figcaption{font-size:.88rem;line-height:1.5;color:var(--soft);margin-top:.6rem;max-width:36rem}
.zoom{cursor:zoom-in;padding:0;border:0;background:none;display:block;width:100%;color:inherit;font:inherit;text-align:left}
.photo img{background:var(--stone-2)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.pair figure{position:relative}
.pair .tag{position:absolute;left:.6rem;top:.6rem;font-size:.82rem;background:rgba(13,21,32,.78);color:#eef1f4;padding:.15rem .5rem;border-radius:2px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
@media (max-width:640px){.pair,.duo{grid-template-columns:1fr}}

/* documents from the service file: the scan itself, on its paper */
.doc{margin:1.4rem 0 2rem;max-width:40rem}
.doc img{background:#fff;border:1px solid var(--rule);box-shadow:0 1px 0 var(--rule),0 6px 18px -12px rgba(30,39,51,.35)}
.doc.narrow{max-width:24rem}
:root[data-theme="dark"] .doc img{filter:brightness(.88)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .doc img{filter:brightness(.88)}}
/* small period prints, shown as prints */
.print{max-width:13rem}
.print img{background:#fff;padding:.45rem .45rem 1.1rem;border:1px solid var(--rule);box-shadow:0 6px 18px -12px rgba(30,39,51,.4)}
@media (max-width:1100px){.print{max-width:15rem}}
/* photo groups */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
.wreck{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto auto;gap:.6rem}
.wreck .tall{grid-column:2;grid-row:1 / 3}
.wreck .tall,.wreck .tall .zoom,.wreck .tall img{height:100%}
.wreck .tall img{object-fit:cover;object-position:50% 72%}
.wreck .cap{grid-column:1 / 3;font-size:.88rem;color:var(--soft);margin:.2rem 0 0}
@media (max-width:760px){.trio{grid-template-columns:1fr}.wreck{grid-template-columns:1fr}.wreck .tall{grid-column:1;grid-row:auto}.wreck .tall img{height:auto}.wreck .cap{grid-column:1}}

/* map cards: a picture you can step into */
.go{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);background:#1e2733;color:#eef0f2;
  text-decoration:none;margin-block:2.4rem;border-radius:3px;overflow:hidden;isolation:isolate}
.go .pic{position:relative;min-height:15rem;background:#203040}
.go .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.go:hover .pic img{transform:scale(1.025)}
.go .txt{padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:.7rem}
.go .t{font:400 1.45rem/1.2 var(--stoneface);letter-spacing:.04em}
.go .d{font-size:.95rem;line-height:1.55;color:#c3cad3}
.go .act{margin-top:auto;align-self:start;background:var(--poppy);color:#fff;padding:.6rem 1rem;border-radius:2px;font-size:.95rem}
.go:hover .act{filter:brightness(1.1)}
.go:focus-visible{outline-offset:4px}
@media (max-width:820px){.go{grid-template-columns:1fr}.go .pic{min-height:0;aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.go .pic img{transition:none}}
:root[data-theme="dark"] .go,.dark-go{background:#0d1520}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .go{background:#0d1520;color:#e2e5e9}}

/* route drawing (inline svg) */
.route{width:100%;height:100%}
.route .sea{fill:#132131}
.route .land{fill:#2a3a4c;stroke:#3d5066;stroke-width:.6}
.route .leg{fill:none;stroke:#e9d9b8;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.route .leg.rec{stroke:#e9d9b8;stroke-dasharray:3 4;opacity:.9}
.route text{font:13px/1 "Source Serif 4",Georgia,serif;fill:#dde3ea;paint-order:stroke;stroke:#132131;stroke-width:3px}
.route .place circle{fill:#93a1b2}.route .place text{fill:#93a1b2;font-size:11px}
.route .stop circle{fill:#e9d9b8}
.route .end circle{fill:#e0574f;stroke:#132131;stroke-width:2}
.route .end text{fill:#fff}
.go .key{font-size:.85rem;color:#aab3be;display:flex;gap:1.2rem;flex-wrap:wrap}
.go .key i{display:inline-block;width:1.6rem;border-top:2px solid #e9d9b8;vertical-align:middle;margin-right:.4rem}
.go .key i.rec{border-top-style:dashed}

/* ---------- quotes & typed records ---------- */
blockquote{margin:1.8rem 0;padding:0 0 0 1.3rem;border-left:2px solid var(--poppy)}
blockquote p{font-style:italic;font-size:1.1rem}
blockquote footer,.cite{font-size:.88rem;color:var(--soft);font-style:normal}
.typed{font-family:var(--typed);font-size:.95rem;line-height:1.6}
.register{background:var(--sheet);border:1px solid var(--rule);padding:1.4rem 1.5rem;margin:2rem 0;
  box-shadow:0 1px 0 var(--rule),0 3px 0 -1px var(--sheet),0 4px 0 -1px var(--rule)}
.register .typed{margin-bottom:1rem}
.register .tr{font-size:.98rem}
.register .cite{display:block;margin-top:.7rem}

/* ops sheet: laid out like a typed Form 541 */
.sheet{background:var(--sheet);border:1px solid var(--rule);margin-block:2rem;overflow-x:auto;
}
.sheet table{border-collapse:collapse;width:100%;min-width:42rem;font-family:var(--typed);font-size:.9rem;line-height:1.45}
.sheet th,.sheet td{text-align:left;vertical-align:top;padding:.6rem .9rem;border-bottom:1px solid var(--rule)}
.sheet thead th{font-weight:700;font-size:.82rem;color:var(--soft);border-bottom:2px solid var(--ink)}
.sheet tbody th{font-weight:400;color:var(--faint);width:2.4rem}
.sheet tr.sq td{font-family:var(--read);font-size:.9rem;color:var(--soft);background:var(--stone);padding-top:1rem}
.sheet tr.last td,.sheet tr.last th{color:var(--poppy)}
.sheet td:nth-child(2),.sheet td:nth-child(4){white-space:nowrap}
@media (max-width:640px){
  .sheet{overflow:visible}
  .sheet table{min-width:0;display:block}
  .sheet thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sheet tbody,.sheet tr{display:block}
  .sheet tr{display:grid;grid-template-columns:2rem 1fr auto;column-gap:.6rem;padding:.75rem .9rem;border-bottom:1px solid var(--rule)}
  .sheet th,.sheet td{padding:0;border:0}
  .sheet tbody th{grid-row:1 / 4}
  .sheet td:nth-child(2){grid-column:2}
  .sheet td:nth-child(4){grid-column:3;grid-row:1;text-align:right}
  .sheet td:nth-child(3){grid-column:2 / 4;font-weight:700}
  .sheet td:nth-child(5){grid-column:2 / 4;font-family:var(--read);font-size:.95rem;margin-top:.25rem}
  .sheet tr.sq{display:block;padding:.9rem .9rem .5rem}
}
.note{font-size:.95rem;color:var(--soft)}

/* service timeline */
.tl{list-style:none;margin:1rem 0 0;padding:0}
.tl li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1.2rem;padding:.75rem 0;border-top:1px solid var(--rule)}
.tl time{color:var(--soft);font-variant-numeric:tabular-nums lining-nums}
.tl li:last-child{border-bottom:1px solid var(--rule)}
.tl li:last-child div{color:var(--poppy)}
@media (max-width:520px){.tl li{grid-template-columns:1fr;gap:.1rem}}

/* ---------- the night ---------- */
#last{background:var(--night);color:var(--night-ink);border-top:0;padding-bottom:0}
#last+section{border-top:0}
#last h2,#last h3{color:#f2f4f6}
#last .m{color:var(--night-soft)}
#last .m b{color:var(--night-ink)}
#last blockquote{border-color:#e0574f}
#last .cite,#last blockquote footer{color:var(--night-soft)}
#last a{text-decoration-color:#e0574f}
.clock{font:400 1.7rem/1 var(--stoneface)!important;letter-spacing:.06em!important;color:var(--night-ink)}
.clock small{display:block;font:400 .82rem/1.4 var(--read);letter-spacing:0;color:var(--night-soft);margin-top:.35rem}
/* years in the margin of Afterwards, echoing the clock in the night */
.g>.m.year{font:400 1.2rem/1.2 var(--stoneface);letter-spacing:.05em;color:var(--ink);padding-top:.25rem}
@media (max-width:760px){.g>.m.year{margin-top:.6rem}}
/* towards dawn: night → first light → morning stone */
.dawn{background:linear-gradient(to bottom,var(--night) 0,#17222f 40%,#2c3949 100%);padding-block:3rem 2.5rem}
.dawn .lightish{color:#eef0f2}
.morning{background:linear-gradient(to bottom,#2c3949 0,#6d7279 2.5rem,#b9b1a1 5rem,var(--dawn-wash) 7rem);color:var(--ink);padding-block:9rem clamp(3.5rem,8vw,6rem)}
.morning .m{color:var(--soft)}.morning .m b{color:var(--ink)}
.morning .clock{color:var(--ink)}.morning .clock small{color:var(--soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .morning{background:linear-gradient(to bottom,#2c3949 0,#2a2a28 5rem,var(--dawn-wash) 8rem)}}
:root[data-theme="dark"] .morning{background:linear-gradient(to bottom,#2c3949 0,#2a2a28 5rem,var(--dawn-wash) 8rem)}
.dawn .g>*{color:#eef0f2}
.dawn .clock small{color:#c9d1da}

/* ---------- crew roll: a face beside each name ---------- */
.roll{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));column-gap:var(--gap)}
.roll li{display:grid;grid-template-columns:4.75rem minmax(0,1fr);column-gap:1rem;align-items:start;padding:1.1rem 0 1.15rem;border-top:1px solid var(--rule)}
.roll li>.face{grid-row:1 / span 5}
.roll li>:not(.face){grid-column:2}
.roll .face{width:4.75rem;aspect-ratio:4/5;object-fit:cover;background:var(--stone-2);filter:grayscale(1) contrast(1.02);border:1px solid var(--rule)}
.roll .noface{width:4.75rem;aspect-ratio:4/5;border:1px dashed var(--rule);display:grid;place-items:center;text-align:center;font-size:.66rem;line-height:1.25;color:var(--soft);padding:.25rem;overflow-wrap:anywhere}
.roll .role{font-size:.88rem;color:var(--soft)}
.roll .nm{font:400 1.3rem/1.25 var(--stoneface);letter-spacing:.04em;margin:.15rem 0 .3rem}
.roll .det{font-size:.95rem;line-height:1.5;color:var(--soft)}
.roll .ep{font:400 .9rem/1.4 var(--stoneface);letter-spacing:.06em;color:var(--ink);margin-top:.45rem}
@media (max-width:420px){.roll li{grid-template-columns:4rem minmax(0,1fr);column-gap:.85rem}.roll .face,.roll .noface{width:4rem}.roll .nm{font-size:1.15rem}}

/* ---------- grave ---------- */
.epitaph{grid-column:1 / 4!important;text-align:center;font:400 clamp(1.45rem,3.4vw,2.35rem)/1.4 var(--stoneface);
  letter-spacing:.09em;max-width:28ch;margin:2.5rem auto 2.8rem;padding:2.2rem 1rem;border-block:1px solid var(--rule)}
.epitaph small{display:block;font:400 .95rem/1.5 var(--read);letter-spacing:0;color:var(--soft);margin-top:1rem}

.sources ul{padding-left:1.1rem;margin:0 0 1.5rem}
.sources li{margin-bottom:.5rem;font-size:1rem}
.sources li::marker{color:var(--faint)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:color-mix(in srgb,var(--stone) 75%,transparent);padding-block:3rem calc(3rem + env(safe-area-inset-bottom))}
.foot .motto{font:400 1.5rem/1.2 var(--stoneface);letter-spacing:.08em;color:var(--stone);margin-bottom:.5rem}
.foot a{color:var(--stone)}
.foot .row{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.2rem;font-size:.95rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot{background:#0d1117}}

/* ---------- photo viewer ---------- */
dialog.view{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:94vh;color:#eef1f4}
dialog.view::backdrop{background:rgba(8,12,18,.92)}
dialog.view img{max-width:100%;max-height:84vh;margin:0 auto;object-fit:contain}
dialog.view p{margin:.8rem auto 0;max-width:46rem;text-align:center;font-size:.95rem;color:#c3cbd5}
dialog.view button{position:fixed;top:max(1rem,env(safe-area-inset-top));right:1rem;background:#eef1f4;color:#0d1520;border:0;border-radius:2px;
  font:600 .95rem/1 var(--read);padding:.6rem .9rem;cursor:pointer}

@media print{.bar,.go .act,dialog{display:none!important}#last,.dawn,.morning{background:none!important;color:#000!important}.dawn .g>*{color:#000!important}}

/* colourised photo over its original: the original shows left of the line */
.cmp{position:relative;display:block;overflow:hidden;--x:0%;touch-action:pan-y}
.cmp>img{display:block;width:100%;height:auto}
.cmp>img.bw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--x)) 0 0);pointer-events:none}
.cmp .cline{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);opacity:0;pointer-events:none}
.cmp .ctag{position:absolute;left:.6rem;bottom:.6rem;font:600 .72rem/1 var(--read);letter-spacing:.06em;color:#fff;background:rgba(13,21,32,.7);padding:.3rem .45rem;border-radius:2px;opacity:0;pointer-events:none}
.cmp.on .cline,.cmp.on .ctag{opacity:1}
.zoom:focus-visible .cmp .cline{opacity:1}
.wreck .tall .cmp,.wreck .tall .cmp>img:first-child{height:100%}
.wreck .tall .cmp>img:first-child{object-fit:cover;object-position:50% 72%}
@media (max-width:760px){.wreck .tall .cmp,.wreck .tall .cmp>img:first-child{height:auto}}
/* small hint under colourised photos */
.ctip{display:block;font-size:.8rem;color:var(--soft);margin-top:.15rem}
dialog.view .cmp{max-height:84vh}
dialog.view .cmp>img{max-height:84vh;width:auto;margin:0 auto}

/* ---------- phone ---------- */
.totop{display:inline-block;margin-top:1.4rem;color:var(--stone);font-size:.95rem}
@media (max-width:760px){
  .bar .home{display:inline-flex;align-items:center;min-height:44px}
  .bar nav a{display:inline-flex;align-items:center;min-height:40px;padding:0}
  .bar .lang{min-height:36px;display:inline-flex;align-items:center}
  .doc,.doc.narrow{max-width:none;margin-inline:-.25rem}
  .g>.m.year{font-size:1.1rem;border-top:1px solid var(--rule);padding-top:.9rem;margin-top:1.4rem}
  #last .g>.m.clock{margin-top:1.2rem}
  blockquote{padding-left:1rem}
  .go .txt{padding:1.2rem 1.15rem}
  .hero dl{grid-template-columns:5.2rem 1fr}
}
@media (prefers-reduced-motion:no-preference){.cmp.hint .cline,.cmp.hint .ctag{opacity:1}}