/* Layout: dark olive "field map" header, paper-coloured body sections, war-diary style entries. */
:root{
  --ink:#1c2117;
  --olive:#2b3323;
  --olive-2:#3a4530;
  --khaki:#b8ae82;
  --paper:#e6e4d3;
  --paper-2:#d9d6c0;
  --maple:#a32620;
  --brass:#c4a24a;
  --muted:#5a604d;
  --display:"Big Shoulders Stencil Display","Arial Narrow",Impact,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --type:"Special Elite","Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65;padding-inline:0}
img{max-width:100%;height:auto}
a{color:var(--maple);text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.wrap{width:100%;max-width:70rem;margin-inline:auto;padding-inline:1.25rem}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:.01em}
h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem}
h3{font-size:1.5rem;letter-spacing:.02em}
p{margin:0 0 1rem;max-width:42rem}
.meta{font-family:var(--type);font-size:.88rem;color:var(--muted);letter-spacing:.02em}

/* header */
.site-header{background:var(--olive);color:var(--paper);border-bottom:4px solid var(--brass)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;padding-block:.9rem}
.brand{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.04em;color:var(--paper);text-decoration:none}
.brand:hover{color:var(--brass)}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0;padding:0}
nav a{font-family:var(--type);font-size:.95rem;color:var(--paper);text-decoration:none;padding:.35rem 0;display:inline-block;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current="page"]{color:var(--brass);border-bottom-color:var(--brass)}

/* hero */
.hero{background:var(--olive);color:var(--paper);position:relative;overflow:hidden;
  background-image:
   linear-gradient(rgba(184,174,130,.09) 1px,transparent 1px),
   linear-gradient(90deg,rgba(184,174,130,.09) 1px,transparent 1px);
  background-size:3.5rem 3.5rem}
.hero .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:2.5rem;align-items:center;padding-block:4rem 4.5rem}
.hero h1{font-size:clamp(3.2rem,10vw,6.6rem);color:var(--paper)}
.hero .titles{font-family:var(--type);color:var(--khaki);font-size:1rem;margin:1.1rem 0 1.4rem;line-height:1.5}
.hero .lede{font-size:1.25rem;line-height:1.55;color:var(--paper);max-width:34rem}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.btn{display:inline-block;font-family:var(--type);font-size:1rem;padding:.8rem 1.4rem;text-decoration:none;border:2px solid var(--brass);background:var(--brass);color:var(--ink)}
.btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--paper)}
.btn.ghost:hover{background:var(--paper);color:var(--ink)}

/* placeholders */
.ph{position:relative;aspect-ratio:var(--ratio,4/5);width:100%;max-width:100%;overflow:hidden;background:
  repeating-linear-gradient(45deg,rgba(28,33,23,.10) 0 12px,rgba(28,33,23,.18) 12px 24px),var(--paper-2);
  border:2px solid var(--ink);display:grid;place-items:center;text-align:center;container-type:inline-size}
.ph::before{content:"PLACEHOLDER";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:10.5cqw;white-space:nowrap;color:rgba(163,38,32,.78);
  transform:rotate(-22deg);letter-spacing:.06em;pointer-events:none}
.ph span{position:relative;z-index:1;font-family:var(--type);font-size:.9rem;color:var(--ink);background:var(--paper);padding:.35rem .6rem;margin:0 1rem;max-width:90%;align-self:end;margin-bottom:1rem}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ph{border-color:var(--paper);box-shadow:.6rem .6rem 0 rgba(0,0,0,.35);transform:rotate(1.2deg)}
figure{margin:0}
figcaption{font-family:var(--type);font-size:.85rem;color:var(--muted);margin-top:.5rem}

/* sections */
section{padding-block:4.5rem}
.alt{background:var(--paper-2)}
.dark{background:var(--olive);color:var(--paper)}
.dark h2{color:var(--paper)}
.dark .meta{color:var(--khaki)}
.rule{height:0;border:0;border-top:2px dashed var(--khaki);margin:0}

.about{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.about > *{min-width:0}
.facts{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.facts li{padding-left:1rem;border-left:4px solid var(--maple);max-width:42rem}
.facts b{font-weight:600}

/* war-diary entries */
.entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.5rem;margin-top:2rem}
.entry{background:var(--paper);border:2px solid var(--ink);padding:1.4rem 1.4rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.entry .meta{border-bottom:1px dashed var(--muted);padding-bottom:.5rem}
.entry p{margin:0;font-size:1rem}
.entry .so{color:var(--muted);font-style:italic}

.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.two > *{min-width:0}
.list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.list li{padding-left:1.4rem;position:relative}
.list li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:.6rem;background:var(--maple)}
.dark .list li::before{background:var(--brass)}

.pubs{display:grid;gap:1.1rem;margin-top:1rem}
.pub{padding-bottom:1rem;border-bottom:1px dashed var(--khaki)}
.pub:last-child{border-bottom:0}
.pub .meta{display:block;margin-bottom:.15rem}
.pub p{margin:0}

.log{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0;max-width:52rem}
.log li{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px dashed var(--muted)}
.log li > *{min-width:0}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.5rem;margin-top:2rem}

.cv-panel{min-height:32rem;border:2px solid var(--ink);background:var(--paper);margin-top:1.5rem}

.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:start}
.contact > *{min-width:0}
.contact a{color:var(--brass)}
.contact a:hover{color:var(--paper)}
.big-link{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4.5vw,2.4rem);word-break:break-word;display:inline-block}

footer{background:var(--ink);color:var(--khaki);padding-block:1.6rem;font-family:var(--type);font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}
footer a{color:var(--khaki)}

@media (max-width:50rem){
  .hero .wrap,.about,.two,.contact{grid-template-columns:1fr;gap:2rem}
  .hero .wrap{padding-block:2.5rem 3rem}
  .hero .ph{max-width:22rem;transform:none}
  section{padding-block:3rem}
  .log li{grid-template-columns:1fr;gap:.2rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.portrait{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center top;border:2px solid var(--paper);box-shadow:.6rem .6rem 0 rgba(0,0,0,.35);transform:rotate(1.2deg)}
@media (max-width:50rem){.portrait{max-width:22rem;transform:none}}

.contact-photo{display:block;width:7.5rem;height:7.5rem;object-fit:cover;object-position:center 18%;border:2px solid var(--brass);margin-bottom:1.25rem}

.gallery-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--ink);filter:contrast(1.02)}