/* =========================================================================
   KYLE COFFEY — kylecoffey.ca  (Round 3)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --navy:        #182640;
  --navy-soft:   #223252;
  --paper:       #f3efe4;
  --ink:         #1c2333;
  --rust:        #b8532f;
  --rust-bright: #d1683f;
  --moss:        #6b8a5f;
  --cream-text:  #f1ede0;

  --tint-bg:     var(--paper);
  --tint-text:   var(--ink);
  --tint-accent: var(--rust);
  --tint-line:   rgba(28,35,51,0.12);

  --display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --body: 'Source Serif 4', Georgia, serif;
  --mono: 'Space Mono', 'SFMono-Regular', monospace;

  --edge: clamp(20px, 4vw, 64px);
  --vine-w: 40px;          /* vine artwork width */
  --vine-gutter: 108px;    /* space reserved before text starts */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0 0 0.9em; }
::selection{ background:var(--rust); color:#fff; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--rust-bright); outline-offset:3px; }

/* grid children must be allowed to shrink */
.alt-row > *, .run-layout > *, .legacy-grid > *, .contact-grid > *,
.stat-grid > *, .tool-grid > *, .civic-cards > *, .tl-media > *,
.scene-layout > *, .edu-grid > *, .side-stack > *{ min-width:0; }

/* =========================================================================
   SECTIONS + PER-SECTION TINTS
   ========================================================================= */
.section{
  position:relative; padding:76px var(--edge);
  background:var(--tint-bg); color:var(--tint-text);
  overflow:hidden;
}
.tint-navy { --tint-bg:var(--navy);  --tint-text:var(--cream-text); --tint-accent:var(--rust-bright); --tint-line:rgba(241,237,224,0.18); }
.tint-paper{ --tint-bg:var(--paper); --tint-text:var(--ink); --tint-accent:var(--rust); --tint-line:rgba(28,35,51,0.12); }
.tint-linen{ --tint-bg:#ece5d4;      --tint-text:var(--ink); --tint-accent:var(--rust); --tint-line:rgba(28,35,51,0.12); }
.tint-sage { --tint-bg:#e6ebdf;      --tint-text:#26311f;    --tint-accent:#4f6a44;    --tint-line:rgba(38,49,31,0.15); }
.tint-sky  { --tint-bg:#e2eaee;      --tint-text:#1b2a30;    --tint-accent:#2f6478;    --tint-line:rgba(27,42,48,0.14); }
.tint-sepia{ --tint-bg:#ece1cd;      --tint-text:#2c2415;    --tint-accent:var(--rust);--tint-line:rgba(44,36,21,0.15); }
.tint-gold { --tint-bg:#efe6cd;      --tint-text:#2a2413;    --tint-accent:#8a6a24;    --tint-line:rgba(42,36,19,0.15); }
.section h1,.section h2,.section h3{ color:var(--tint-text); }

.container{
  position:relative; z-index:3;
  max-width:1120px; margin-left:var(--vine-gutter); margin-right:auto;
}
@media (max-width:900px){
  .section{ padding:56px var(--edge); }
  .container{ margin-left:0; }
}

.kicker{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:0.14em;
  font-size:11.5px; color:var(--tint-accent); display:flex; align-items:center;
  gap:9px; margin-bottom:12px; font-weight:700;
}
.kicker::before{ content:""; width:22px; height:2px; background:currentColor; }

.section-head{ max-width:720px; margin-bottom:34px; }
.section-head h2{ font-size:clamp(2rem, 4vw, 2.9rem); line-height:1.04; }
.section-head .plain{
  display:block; font-family:var(--mono); font-size:0.9rem; font-weight:400;
  letter-spacing:0.02em; color:var(--tint-accent); margin-top:7px;
}
.section-head .lede{ margin-top:14px; font-size:1.06rem; max-width:60ch; opacity:0.86; }

/* =========================================================================
   VINE RAIL — lives in the gutter, never touches text
   ========================================================================= */
.vine{
  position:absolute; top:0; bottom:0; left:var(--edge); width:var(--vine-w);
  background-image:url("../images/vine.svg");
  background-repeat:repeat-y;
  background-size:40px 563px;   /* locked to the artwork's true 41:576.7 ratio */
  background-position:top center;
  opacity:0.85; pointer-events:none; z-index:1;
}
.tint-navy .vine{ background-image:url("../images/vine-light.svg"); opacity:0.75; }
@media (max-width:900px){ .vine{ display:none; } }

/* =========================================================================
   BACKGROUND ART — supplemental line drawings filling dead space
   ========================================================================= */
.bg-art{
  position:absolute; pointer-events:none; z-index:0;
  opacity:0.22; user-select:none;
}
.tint-navy .bg-art{ opacity:0.28; }
@media (max-width:900px){ .bg-art{ opacity:0.16; max-width:56vw; } }

/* inline supplemental art that sits *with* content (not a watermark) */
.inline-art{ width:100%; height:auto; opacity:1; max-width:340px; margin:0 auto; display:block; }
@media (max-width:900px){ .inline-art{ max-width:230px; opacity:1; } }

/* softly faded supplemental art that fills space without competing */
.art-soft{ opacity:0.42; }
@media (max-width:900px){ .art-soft{ opacity:0.42; max-width:230px !important; } }
.inline-art.muted{ opacity:0.55; }

/* =========================================================================
   TOP NAV + TICKER
   ========================================================================= */
#topnav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; gap:18px;
  padding:11px var(--edge);
  background:rgba(24,38,64,0.94); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(241,237,224,0.12);
}
#topnav .mark{
  font-family:var(--display); font-weight:700; font-size:1.02rem;
  color:var(--cream-text); text-decoration:none; white-space:nowrap; flex:none;
}
#topnav .mark span{ color:var(--rust-bright); }

/* ticker */
.ticker{
  flex:1 1 auto; min-width:0; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track{
  display:inline-flex; align-items:center; white-space:nowrap;
  animation:ticker 42s linear infinite;
}
.ticker-track span{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:rgba(241,237,224,0.82); padding:0 0;
}
.ticker-track .sep{ color:var(--rust-bright); padding:0 16px; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@media (max-width:1180px){ .ticker{ display:none; } }

#topnav .nav-links{ display:flex; gap:1px; list-style:none; margin:0; padding:0; flex:none; }
#topnav .nav-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:0.02em;
  color:rgba(241,237,224,0.74); text-decoration:none;
  padding:8px 11px; border-radius:20px; transition:background .2s, color .2s; white-space:nowrap;
}
#topnav .nav-links a:hover, #topnav .nav-links a.active{ background:rgba(241,237,224,0.14); color:#fff; }
@media (max-width:1080px){ #topnav .nav-links{ display:none; } }

#hamburger{
  display:none; width:40px; height:40px; border-radius:50%; flex:none;
  background:rgba(241,237,224,0.1); border:1px solid rgba(241,237,224,0.2);
  align-items:center; justify-content:center; flex-direction:column; gap:4px; cursor:pointer;
  margin-left:auto;
}
#hamburger span{ width:16px; height:2px; background:var(--cream-text); display:block; }
@media (max-width:1080px){ #hamburger{ display:flex; } }

#mobile-nav{
  position:fixed; inset:0; z-index:95; background:var(--navy);
  display:flex; flex-direction:column; justify-content:center; padding:40px var(--edge);
  transform:translateY(-100%); transition:transform .4s cubic-bezier(.7,0,.2,1); overflow-y:auto;
}
#mobile-nav.open{ transform:translateY(0); }
#mobile-nav button.close{ all:unset; position:absolute; top:18px; right:var(--edge); color:var(--cream-text); font-size:2rem; cursor:pointer; line-height:1; }
#mobile-nav a{
  display:block; font-family:var(--display); font-size:clamp(1.3rem,6vw,2rem);
  color:var(--cream-text); text-decoration:none; padding:9px 0;
  border-bottom:1px solid rgba(241,237,224,0.1);
}
#mobile-nav a span{ color:var(--rust-bright); font-family:var(--mono); font-size:0.75rem; margin-right:12px; }

#mobile-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:85; background:rgba(241,237,224,0.15); }
#mobile-progress .fill{ height:100%; width:var(--scrollpct,0%); background:var(--rust-bright); }

/* =========================================================================
   HERO
   ========================================================================= */
#hero{
  min-height:100vh; background:var(--navy); color:var(--cream-text);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  padding:120px var(--edge) 0;
}
#hero-art, #hero-art-mobile{
  position:absolute; left:0; right:0; bottom:-170px;
  width:100%; height:auto; opacity:0.55;
  pointer-events:none; z-index:1;
}
#hero-art-mobile{ display:none; bottom:0; }
@media (max-width:900px){
  #hero-art{ display:none; }
  #hero-art-mobile{ display:block; }
}
/* On very wide screens the artwork (width:100%, natural aspect ratio) renders
   tall enough that its top edge climbs back up into the headline even with
   the -170px offset above. Push it down further past that breakpoint only —
   smaller/standard desktop widths are untouched. */
@media (min-width:1700px){
  #hero-art{ bottom:-320px; }
}
.hero-inner{ position:relative; z-index:3; max-width:900px; margin-left:0; margin-right:auto; width:100%; padding-bottom:260px; }
.hero-eyebrow{
  font-family:var(--mono); color:var(--rust-bright); letter-spacing:0.16em;
  text-transform:uppercase; font-size:12.5px; margin-bottom:18px;
}
.hero-name{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(3rem, 9.5vw, 6.8rem); line-height:0.9; letter-spacing:-0.015em;
}
.hero-name .fname{ display:block; }
.hero-name .lname{ display:block; position:relative; cursor:default; }
.hero-name .lname .base{ transition:opacity .45s ease; }
.hero-name .lname:hover .base, .hero-name .lname.hit .base{ opacity:0; }
.hero-name .lname .fill{
  position:absolute; inset:0; color:var(--rust-bright); opacity:0;
  clip-path:inset(0 100% 0 0); transition:clip-path .55s cubic-bezier(.2,.7,.2,1);
}
.hero-name .lname:hover .fill, .hero-name .lname.hit .fill{ opacity:1; clip-path:inset(0 0 0 0); }
.hero-role{ margin-top:22px; font-size:clamp(1.05rem,1.9vw,1.28rem); max-width:58ch; color:rgba(241,237,224,0.9); }
.hero-cta{ display:flex; gap:13px; margin-top:28px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px;
  letter-spacing:0.03em; padding:12px 21px; border-radius:3px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--rust-bright); color:#1a1208; font-weight:700; }
.btn--outline{ border-color:rgba(241,237,224,0.4); color:var(--cream-text); }
.btn--outline:hover{ border-color:var(--rust-bright); color:var(--rust-bright); }

/* =========================================================================
   TRANSITIONING PHOTOS
   ========================================================================= */
.flip{ position:relative; overflow:hidden; border-radius:4px; cursor:pointer; background:var(--navy-soft); }
.flip img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:opacity 1.05s ease-in-out; }
.flip img.b{ opacity:0; }
.flip.show-b img.a{ opacity:0; }
.flip.show-b img.b{ opacity:1; }
.cap{ margin-top:9px; font-family:var(--mono); font-size:11.5px; opacity:0.68; letter-spacing:.02em; }

/* =========================================================================
   SEEDS OF GROWTH — alternating rows
   ========================================================================= */
.alt-row{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-bottom:44px; }
.alt-row:last-child{ margin-bottom:0; }
.alt-row.reverse .alt-text{ order:2; }
.alt-row.reverse .alt-media{ order:1; }
@media (max-width:820px){
  .alt-row, .alt-row.reverse{ grid-template-columns:1fr; gap:22px; margin-bottom:34px; }
  .alt-row.reverse .alt-text, .alt-row.reverse .alt-media{ order:unset; }
}
.alt-text p{ font-size:1.04rem; }
.alt-media.portrait{ max-width:400px; margin:0 auto; width:100%; }
.alt-text p.lead{ font-family:var(--display); font-size:1.35rem; font-weight:600; line-height:1.32; margin-bottom:14px; }

/* =========================================================================
   TIMELINE / CHAPTERS
   ========================================================================= */
.tl-chapter{ position:relative; padding:52px 0; border-bottom:1px solid var(--tint-line); }
.tl-chapter:last-child{ border-bottom:none; padding-bottom:8px; }
.tl-meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--tint-accent); text-transform:uppercase; margin-bottom:8px; font-weight:700; }
.tl-chapter h3{ font-size:clamp(1.55rem,3.2vw,2.15rem); margin-bottom:5px; }
.tl-role{ font-family:var(--mono); font-size:12px; opacity:0.7; margin-bottom:20px; }
.tl-body{ max-width:68ch; }
.tl-body p{ margin-bottom:12px; font-size:1.03rem; }
.tl-subhead{ margin:26px 0 6px; font-size:1.08rem; font-family:var(--display); font-weight:600; }

.scene-layout{ display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .scene-layout{ grid-template-columns:1fr; gap:24px; } }

.side-stack{ display:flex; flex-direction:column; gap:16px; }
.side-stack figure{ margin:0; }

.tl-media{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:20px; }
.tl-media.cols-2{ grid-template-columns:repeat(2,1fr); }
.tl-media figure{ margin:0; }
.tl-media img, .tl-media .flip{ border-radius:3px; }
.tl-media figcaption, figure figcaption{ font-family:var(--mono); font-size:10.5px; opacity:0.62; margin-top:6px; }
@media (max-width:700px){ .tl-media, .tl-media.cols-2{ grid-template-columns:1fr; } }

.tl-links{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.pill-link{
  font-family:var(--mono); font-size:11px; border:1.5px solid var(--tint-accent);
  color:var(--tint-accent); padding:7px 12px; border-radius:20px; text-decoration:none;
  transition:background .2s, color .2s; font-weight:700;
}
.pill-link:hover{ background:var(--tint-accent); color:var(--tint-bg); }

.reel{ margin-top:16px; display:flex; flex-wrap:wrap; gap:7px; }
.reel span{ font-family:var(--mono); font-size:10.5px; border:1px solid var(--tint-line); padding:5px 10px; border-radius:3px; opacity:0.85; }

.facade-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .facade-grid{ grid-template-columns:1fr; } }
.facade-grid figure{ margin:0; }
.facade-grid figcaption{ font-family:var(--mono); font-weight:700; font-size:11.5px; margin-top:7px; opacity:0.9; }

.zoomable{ cursor:zoom-in; overflow:hidden; border-radius:4px; }
.zoomable img{ transition:transform .4s ease; }
.zoomable:hover img{ transform:scale(1.45); }
@media (max-width:900px){ .zoomable{ max-width:none; } .zoomable img{ width:100%; } }

/* =========================================================================
   AUDIO PLAYER
   ========================================================================= */
.audio-player{
  display:flex; align-items:center; gap:14px; margin-top:18px; padding:13px 18px;
  border:1.5px solid var(--tint-accent); border-radius:40px; max-width:400px; width:100%;
}
@media (max-width:900px){ .audio-player{ max-width:none; border-radius:14px; } }
.audio-player button.play{
  all:unset; width:40px; height:40px; border-radius:50%; background:var(--tint-accent);
  color:var(--tint-bg); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.audio-player .meta{ flex:1; min-width:0; }
.audio-player .title{ font-family:var(--mono); font-size:12px; font-weight:700; }
.audio-player .track{ position:relative; height:4px; background:var(--tint-line); border-radius:2px; margin-top:6px; cursor:pointer; }
.audio-player .track .fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--tint-accent); border-radius:2px; }
.audio-player .time{ font-family:var(--mono); font-size:10px; opacity:0.65; margin-top:3px; }

/* =========================================================================
   NUMBERS
   ========================================================================= */
.stat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--tint-line); border:1px solid var(--tint-line); border-radius:4px; overflow:hidden; }
@media (max-width:1000px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
.stat{ background:var(--tint-bg); padding:26px 20px; }
.stat .num{ font-family:var(--mono); font-weight:700; font-size:clamp(1.7rem,3.2vw,2.2rem); color:var(--tint-accent); }
.stat .label{ margin-top:6px; font-size:0.88rem; opacity:0.8; max-width:24ch; }

/* =========================================================================
   TOOLSHED + EDUCATION
   ========================================================================= */
.tool-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--tint-line); border-radius:4px; overflow:hidden; }
@media (max-width:700px){ .tool-grid{ grid-template-columns:1fr; } }
.tool{ background:var(--tint-bg); padding:26px 28px; }
.tool h3{ font-size:1.16rem; margin-bottom:7px; }
.tool p{ opacity:0.84; font-size:0.95rem; margin:0; }

.edu-wrap{ margin-top:44px; }
.edu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; }
@media (max-width:820px){ .edu-grid{ grid-template-columns:1fr; } }
.edu-card{
  border:1px solid var(--tint-line); border-left:3px solid var(--tint-accent);
  border-radius:4px; padding:20px 22px; background:var(--tint-bg);
}
.edu-card .edu-cred{ font-family:var(--display); font-weight:600; font-size:1.03rem; }
.edu-card .edu-inst{ font-family:var(--mono); font-size:11px; color:var(--tint-accent); margin-top:4px; letter-spacing:.03em; }
.edu-card p{ margin:9px 0 0; font-size:0.92rem; opacity:0.84; }

/* =========================================================================
   RUNNING
   ========================================================================= */
.run-layout{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:start; }
@media (max-width:900px){ .run-layout{ grid-template-columns:1fr; gap:26px; } }
.run-side{ display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:13px; }

table.race-table{ width:100%; border-collapse:collapse; margin-top:16px; font-size:0.88rem; }
table.race-table th{ text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; opacity:0.6; padding:0 8px 8px 0; font-weight:700; border-bottom:1px solid var(--tint-line); }
table.race-table td{ padding:10px 8px 10px 0; border-bottom:1px solid var(--tint-line); vertical-align:top; }
table.race-table td.race-name{ font-weight:600; font-family:var(--display); }
table.race-table td.race-time{ font-family:var(--mono); color:var(--tint-accent); font-weight:700; white-space:nowrap; }
table.race-table td.race-rank{ font-family:var(--mono); font-size:.8rem; opacity:0.72; }
table.race-table tr:last-child td{ border-bottom:none; }
@media (max-width:560px){
  table.race-table{ font-size:0.7rem; }
  table.race-table td, table.race-table th{ padding:7px 4px 7px 0; }
  table.race-table td.race-time{ white-space:normal; }
}

.km-banner{ margin-top:20px; padding:16px 20px; border:1.5px solid var(--tint-accent); border-radius:4px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.km-banner .big{ font-family:var(--mono); font-size:1.6rem; color:var(--tint-accent); font-weight:700; }
.km-banner p{ margin:0; font-size:0.87rem; opacity:0.8; max-width:36ch; }

/* =========================================================================
   MAP + TRAVEL
   ========================================================================= */
.map-wrap{ position:relative; background:var(--tint-bg); border:1px solid var(--tint-line); border-radius:6px; padding:16px; }
#world-map{ width:100%; height:auto; display:block; }
#world-map path{ fill:#cbc3aa; stroke:var(--tint-bg); stroke-width:0.7; transition:fill .18s; }
#world-map path.visited{ fill:var(--moss); cursor:pointer; }
#world-map path.visited:hover{ fill:var(--rust-bright); }
#world-map path.flight-line{ fill:none !important; stroke:var(--rust); stroke-width:3.5; stroke-dasharray:9 7; stroke-linecap:round; }
#world-map circle.flight-dot{ fill:var(--rust); stroke:var(--tint-bg); stroke-width:2; }
.map-tooltip{
  position:absolute; pointer-events:none; background:var(--navy); color:var(--cream-text);
  font-family:var(--mono); font-size:12px; padding:6px 11px; border-radius:4px; opacity:0;
  transition:opacity .12s; transform:translate(-50%,-135%); white-space:nowrap; z-index:5;
}
.map-tooltip.show{ opacity:1; }
.map-legend{ display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-family:var(--mono); font-size:11.5px; }
.map-legend .item{ display:flex; align-items:center; gap:8px; }
.map-legend .swatch{ width:13px; height:13px; border-radius:3px; flex:none; }

.travel-masonry{ columns:4 220px; column-gap:13px; margin-top:28px; }
@media (max-width:700px){ .travel-masonry{ columns:2 148px; } }
.travel-masonry figure{ margin:0 0 13px; break-inside:avoid; position:relative; overflow:hidden; border-radius:3px; cursor:zoom-in; }
.travel-masonry img{ width:100%; transition:transform .5s ease; }
.travel-masonry figure:hover img{ transform:scale(1.05); }
.travel-masonry figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:18px 10px 8px;
  background:linear-gradient(to top, rgba(20,25,17,0.85), transparent);
  color:#fff; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; margin:0;
}

#lightbox{ position:fixed; inset:0; z-index:120; background:rgba(10,14,20,0.94); display:none; align-items:center; justify-content:center; padding:36px; }
#lightbox.open{ display:flex; }
#lightbox img{ max-width:100%; max-height:88vh; border-radius:4px; }
#lightbox button{ all:unset; position:absolute; top:20px; right:26px; color:#fff; font-size:2.2rem; cursor:pointer; line-height:1; }

/* =========================================================================
   ROOTS & REEVES
   ========================================================================= */
.legacy-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .legacy-grid{ grid-template-columns:1fr; gap:26px; } }
.legacy-portraits{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.legacy-portraits figure{ margin:0; }
.legacy-portraits img{ border-radius:4px; width:100%; }
.legacy-quote{
  font-family:var(--display); font-weight:600; font-size:1.28rem; line-height:1.45;
  margin:20px 0; border-left:3px solid var(--tint-accent); padding-left:20px;
}
.legacy-quote cite{ display:block; font-family:var(--mono); font-size:0.7rem; font-style:normal; opacity:0.65; margin-top:9px; }
.civic-cards{ margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .civic-cards{ grid-template-columns:1fr; } }
.civic-card{ background:var(--tint-bg); border:1px solid var(--tint-line); padding:20px; border-radius:4px; }
.civic-card h4{ font-size:1rem; margin-bottom:7px; }
.civic-card p{ font-size:0.9rem; opacity:0.84; margin:0; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:26px; } }
.contact-big{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,5vw,3.2rem); line-height:1.03; color:#fff; text-transform:uppercase; }
.contact-email{ font-family:var(--display); font-weight:700; font-size:clamp(1.1rem,2.2vw,1.5rem); margin-top:20px; }
.contact-email a{ text-decoration:none; border-bottom:3px solid var(--rust-bright); color:#fff; }
.contact-email a:hover{ color:var(--rust-bright); }
.social-list{ display:flex; flex-direction:column; }
.social-list a{
  display:flex; justify-content:space-between; align-items:center; padding:12px 0;
  text-decoration:none; color:var(--cream-text); border-bottom:1px solid rgba(241,237,224,0.18);
  font-family:var(--mono); font-size:13.5px;
}
.social-list a .arrow{ opacity:0.5; transition:transform .2s, opacity .2s; }
.social-list a:hover{ color:var(--rust-bright); }
.social-list a:hover .arrow{ transform:translateX(4px); opacity:1; }

footer{
  padding:22px var(--edge); background:var(--navy); color:rgba(241,237,224,0.45);
  font-family:var(--mono); font-size:11px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; border-top:1px solid rgba(241,237,224,0.1);
}

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }