:root{
  --paper:#f6f2eb; --cream:#fffcf7; --ink:#2b3329; --muted:#566052; --sage:#5f7360;
  --sage-soft:#e8ebe2; --line:#dcd7ca; --gold:#a48b60; --gold-text:#725b32; --link:#2f5a45;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.68}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #1d4d8f;outline-offset:3px;border-radius:2px}
.wrap{width:min(100% - 40px,900px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;z-index:100;font-family:var(--sans)}
.skip:focus{top:12px}
.eyebrow{font:600 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin:0}
.motif{font-size:26px;color:var(--gold);letter-spacing:.2em;text-align:center;margin:0}

/* hero */
.hero{text-align:center;padding:36px 0 56px}
@media (min-width:760px){
  .hero{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;text-align:left}
  .hero .portrait{width:300px;margin:0}
  .hero .rule{margin:24px 0}
  .hero .intro{margin:0}
}
.portrait{width:min(260px,68vw);aspect-ratio:1;object-fit:cover;border-radius:50%;border:8px solid #fcfaf4;box-shadow:0 6px 28px #3a40301f;margin:24px auto 24px}
.hero h1{font-weight:400;font-size:clamp(38px,9vw,66px);line-height:1.08;letter-spacing:-.03em;margin:8px 0 10px}
.dates{font:500 14px/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0}
.rule{width:80px;height:1px;background:var(--gold);margin:28px auto}
.intro{font-size:clamp(20px,3.2vw,26px);line-height:1.55;max-width:620px;margin:0 auto;font-style:italic;text-wrap:balance}
.btn{display:inline-block;font:600 16px/1 var(--sans);padding:15px 26px;border-radius:999px;background:var(--link);color:#fff;text-decoration:none;border:2px solid var(--link);cursor:pointer}
.btn:hover{background:#244a38}
.btn.secondary{background:transparent;color:var(--link)}
.btn.secondary:hover{background:var(--sage-soft)}


/* sections */
section.block{padding:52px 0;border-top:1px solid var(--line)}
h2{font-weight:400;font-size:clamp(28px,5vw,40px);line-height:1.2;letter-spacing:-.015em;margin:10px 0 14px}
.lead{max-width:700px;color:#3f4a3d;margin:0 0 26px}
.card{background:var(--cream);border:1px solid #e6e1d4;border-radius:16px;padding:26px;box-shadow:0 6px 18px #3a40300a}
.card h3{font-weight:400;font-size:24px;line-height:1.25;margin:4px 0 10px}
.card p{margin:0 0 16px;color:#454e42}
.kicker{font:600 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin:0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.arrow:after{content:"\00a0↗";font-family:var(--sans)}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 28px}
figure.quote{margin:0;position:relative;background:var(--cream);border:1px solid #e6e1d4;border-left:4px solid var(--gold);border-radius:4px 14px 14px 4px;padding:24px 26px 20px;box-shadow:0 6px 18px #3a40300a}
figure.quote blockquote{margin:0 0 14px;font-style:italic;font-size:clamp(19px,2.5vw,22px);line-height:1.52}
figure.quote blockquote p{margin:0}
figure.quote figcaption{font:14px/1.5 var(--sans);color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
figure.quote figcaption strong{color:var(--ink);font-weight:600}
em.iq{font-style:italic}

/* section nav: green pill buttons */
nav.sections{margin:0 auto 34px}
nav.sections ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
nav.sections a{display:inline-block;padding:11px 16px;border-radius:999px;background:var(--link);color:#fff;text-decoration:none;font:600 14.5px/1.2 var(--sans);border:2px solid var(--link);white-space:nowrap}
nav.sections a:hover{background:#244a38;border-color:#244a38}
nav.sections a:focus-visible{outline-offset:3px}

/* adventure */
.story{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:center}
figure.plain{margin:0}
.story img{border-radius:14px;box-shadow:0 6px 24px #3a40301a}
.story figcaption{font:13px/1.5 var(--sans);color:var(--muted);margin-top:10px}
.story p{margin:0 0 18px;font-size:19px}
.story p.src{font:13px/1.5 var(--sans);color:var(--muted)}

/* work */
.credits{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.credits li{background:var(--cream);border:1px solid #e6e1d4;border-radius:12px;padding:16px 20px}
.credits .t{font-weight:600;display:block}
.credits .d{font:14px var(--sans);color:var(--muted)}

/* claudia */
.quiet{background:var(--sage-soft);border-radius:18px;padding:30px}
.quiet p{margin:10px 0 0;font-size:20px}
.quiet .note{font:15px var(--sans);color:var(--muted);margin-top:16px}

/* links */
.linklist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.linklist a{display:block;padding:14px 18px;background:var(--cream);border:1px solid #e6e1d4;border-radius:12px;text-decoration:none;font-family:var(--sans);font-weight:500}
.linklist a:hover{background:var(--sage-soft)}

footer{text-align:center;padding:48px 0 90px;color:var(--muted)}
footer p{font:14px/1.6 var(--sans);max-width:620px;margin:16px auto 0}

#story-wrap{margin-top:20px}

@media (max-width:680px){
  body{font-size:18px}
  .quotes,.story{grid-template-columns:1fr}
  figure.quote{padding:22px 22px 18px}
  .story img{max-height:480px;object-fit:cover;object-position:center 22%}
  section.block{padding:40px 0}
  .card,.quiet{padding:22px}
}
@media print{body{background:#fff}a{color:#000}}