/* ===== Atlas of Honest Entrances - Refined CSS ===== */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography Variables */
:root {
  --display: "antiquarian-scribe", serif;
  --body: "Source Serif 4", Georgia, serif;
  --meta: "Courier New", monospace;
  
  
  /* Colors - clean, no parchment */
  --ink: #1a1a1a;
  --paper: #fdfcfa;
  --gray: #666;
  --accent: #8b4513;
}

/* Base */
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}


/* === Custom quill cursor === */
/* Tweak these hotspot numbers so the quill tip feels precise */
:root { --cursor-x: 24;  --cursor-y: 16; }  /* pixels from top-left of image */

body {
cursor: url('atlaswebsitecursor.png') var(--cursor-x) var(--cursor-y), auto;
}

/* Keep “pointer” behavior on clickable things */
a, button, [role="button"], .compass span {
cursor: url('atlaswebsitecursor.png') var(--cursor-x) var(--cursor-y), pointer;
}

/* Let text fields keep the I-beam */
input, textarea { cursor: text; }

html {
  scroll-behavior: smooth;
}



/* Container layouts */
.container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 200px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px;
}

.casestudy {
  margin-top: 250px;
}

/* Width classes for asymmetric layout */
.width100 {
  width: 100%;
}

.width75 {
  width: 72%;
  padding-right: 3%;
}

.width25 {
  width: 28%;
  padding-left: 2%;
}

/* Large Script Titles - Your signature element */
.title {
  font-family: var(--display);
  font-size: clamp(60px, 8vw, 100px);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 60px;
  letter-spacing: 0.02em;
}

.title img {
  height: 80px;
  width: auto;
  vertical-align: middle;
  margin-right: 20px;
}

/* Main body text */
.text {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  font-style: italic;
}

.text p {
  margin-bottom: 20px;
  text-align: justify;
}

/* Hero images with captions */
.width75 figure {
  width: 100%;
  margin-bottom: 30px;
}

.width75 img {
  width: 100%;
  height: auto;
  display: block;
}

/* Figure captions - adding authority */
figcaption {
  margin-top: 12px;
  font-family: var(--meta);
  font-size: 11px;
  line-height: 1.4;
  color: var(--gray);
}

.fig-number {
  font-weight: bold;
}

/* Notes/Metadata section */
.notes {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.1);
  font-family: var(--meta);
  font-size: 10px;
  line-height: 1.5;
  color: var(--gray);
}

.notes h4 {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  font-weight: normal;
}

/* Quote sections - large script */
.quote {
  margin: 200px auto;
  max-width: 1000px;
  padding: 0 40px;
  text-align: center;
}

.quote-text {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 70px);
  line-height: 1.2;
  font-style: italic;
}

.quote img {
  max-width: 100%;
  height: auto;
  margin: 40px 0;
}

/* Marginalia - your poetic asides */
.marginalia {
  font-family: var(--display);
  font-size: 24px;
  font-style: italic;
  text-align: center;
  margin: 80px auto;
  max-width: 600px;
  color: var(--gray);
  letter-spacing: 0.05em;
}

/* Metadata cards for Son Doong section */
.meta {
  margin-top: 30px;
}

.card {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 15px;
  margin-bottom: 15px;
  font-family: var(--meta);
  font-size: 10px;
}

.card h3 {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
  font-weight: normal;
}

.card p, .card li {
  line-height: 1.5;
  color: var(--gray);
}

.card ul {
  list-style: none;
  padding-left: 0;
}

.card li {
  margin-bottom: 4px;
  padding-left: 12px;
  position: relative;
}

.card li:before {
  content: "·";
  position: absolute;
  left: 0;
}

/* Scale bar */
.scale {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--meta);
  font-size: 10px;
  margin-top: 20px;
}

.scale .bar {
  width: 60px;
  height: 1px;
  background: var(--ink);
}

/* Contents/navigation */
.contents {
  font-family: var(--body);
  font-size: 14px;
  line-height: 2;
  margin: 120px auto;
  max-width: 600px;
  text-align: center;
}

/* Cover/intro sections */
.cover {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Site header */
.site-header {
  text-align: center;
  padding: 80px 40px;
}

.site-header h1 {
  font-family: var(--display);
  font-size: clamp(48px, 6vw, 80px);
  margin-bottom: 20px;
}

.subtitle {
  font-family: var(--meta);
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.1em;
}

/* Hero bleed image */
.hero-bleed {
  width: 100%;
  margin-bottom: 80px;
}

.hero-bleed img {
  width: 100%;
  height: auto;
}

.hero-bleed img[src*="Magnetichelleycircles"] {
  display: block;
  margin: 0 auto;
  width: 75%;              /* makes it roughly twice as large as before */
  max-width: none;           /* removes earlier width limits */
  transform-origin: center;  /* scales from centre */
  opacity: 0.9;
  animation: circlePulse 6s ease-in-out infinite;
}

/* Smooth pulse animation */
@keyframes circlePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.08);  /* subtle 8% outward pulse */
    opacity: 1;
  }
}


/* Colophon */
.colophon {
  margin-top: 200px;
  padding: 80px 40px;
  text-align: center;
  font-family: var(--display);
  font-size: 32px;
  font-style: italic;
}

/* End artwork */
.end-art {
  margin: 120px auto;
  max-width: 800px;
}

.end-figure img {
  width: 100%;
  height: auto;
}

/* Footer */
.footer {
  padding: 40px;
  text-align: center;
  font-family: var(--meta);
  font-size: 10px;
  color: var(--gray);
  margin-bottom: 80px;
}

/* Dotted circle motif - for portal elements */
.portal-dots {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 2px dotted var(--ink);
  border-radius: 50%;
  margin: 40px auto;
}

/* Accessibility */
.skip-link {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footnote superscripts */
sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .container {
    margin-top: 100px;
  }
  
  .casestudy {
    margin-top: 120px;
  }
  
  .width75,
  .width25 {
    width: 100%;
    padding: 0;
  }
  
  .width25 {
    margin-top: 40px;
  }
  
  .title {
    font-size: 48px;
    margin-bottom: 30px;
  }
  
  .quote {
    margin: 100px auto;
  }
  
  .quote-text {
    font-size: 32px;
  }
}

/* Print styles */
@media print {
  body {
    font-size: 11pt;
  }
  
  .casestudy {
    page-break-before: always;
  }
}




/* more air between case studies */
.casestudy { margin-top: 280px; }
.casestudy + .casestudy { margin-top: 340px; } /* extra gap after each */
.title { margin-bottom: 70px; }                /* space under the section title */

/* looser contents list */
.contents { line-height: 2.8; }  /* bump up from ~2 */

.big-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .95;
  font-size: clamp(56px, 9.5vw, 140px);
  text-align: center;
  margin: 12vh auto 8vh;
  color: #111;
  text-shadow: 0 0 12px rgba(255,255,255,.6);
}
.big-title .break { display:block; margin-top:.1em; }

/* Big title fills ~75% of viewport width */
.site-header{
  display:flex;
  justify-content:center;
  padding: 10vh 0 6vh;
}

.big-title{
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  line-height: .88;
  letter-spacing: .01em;

  /* key bits */
  max-width: 75vw;           /* target width */
  font-size: clamp(96px, 16vw, 280px); /* scales up with screen */
  text-align: center;

  color:#111;
  text-shadow: 0 0 12px rgba(255,255,255,.6);
}
.big-title .break{ display:block; margin-top:.06em; }

@media (max-width: 768px){
  .big-title{ max-width: 92vw; font-size: clamp(56px, 12vw, 120px); }
}



/* optional subtle vignette to help foreground elements read */
.break-full::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% 50%, transparent 60%, rgba(0,0,0,.10));
  pointer-events: none;
}

/* optional overlaid title on top of the break */
.break-title {
  position: absolute;
  left: 50%; bottom: 8vh; transform: translateX(-50%);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  line-height: .9;
  text-align: center;
  font-size: clamp(48px, 7vw, 140px);
  color: #111;
  text-shadow:
    0 0 14px rgba(255,255,255,.85),
    0 2px 40px rgba(255,255,255,.55);
}

/* optional decorative overlays using your PNGs */
.break-dot {
  position: absolute;
  right: 3vw;
  bottom: 4vh;
  width: min(44vw, 560px);   /* scales but caps */
  height: auto;
  pointer-events: none;
}

.break-icon {
  position: absolute;
  right: 6vw;
  bottom: 16vh;
  width: clamp(56px, 9vw, 120px);
  height: auto;
  pointer-events: none;
}

/* Bigger gap after every case */
.casestudy { margin-bottom: 280px; }      /* add space after the whole case */

/* Extra air *only* before the next case (stacked cases) */
.casestudy + .casestudy { margin-top: 420px; }

/* If you’re using the full-screen break section */
.break-full { margin-top: clamp(140px, 12vh, 260px); }

/* If the last figure in a case feels tight, bump its bottom margin */
.width75 figure { margin-bottom: 60px; }

/* Tighter quote without clamp */
.quote-text{
/* pick a fixed size you like */
font-size: 76px;           /* change to any px you want */
line-height: .86;          /* pull lines closer (try .84–.90) */
margin: 70px auto 40px;    /* less air above/below if needed */
}

/* If you’re using the “tape strip” spans, trim their extra padding */
.quote-text .strip,
.quote-text.stepped span{
padding-top: .02em;
padding-bottom: .02em;     /* was adding vertical space */
}

/* Optional: if you still want it tighter */
@media (min-width: 900px){
.quote-text{ line-height: .84; }
}

/* tighten the intro quote */
.quote-text{
line-height: 0.9 !important;
}


/* === Big title: fixed to ~75% page width, no clamp === */
.site-header {
display: flex;
justify-content: center;
padding: 10vh 0 6vh;
}

.site-header .big-title {
width: 75vw;          /* use width, not max-width */
max-width: none;      /* ignore earlier max-width */
margin: 0 auto;
text-align: center;

font-family: var(--display);
font-style: italic;
font-weight: 400;
line-height: .9;
letter-spacing: .01em;

/* no clamp — scale with viewport only */
font-size: 12vw !important;  /* tweak 10–14vw to taste */
color: #111;
text-shadow: 0 0 12px rgba(255,255,255,.6);
}

.big-title .break { display:block; margin-top:.06em; }


/* Editorial introduction section
 This section introduces the reader to the project’s counter-narrative.
 It uses generous margins and centred typography to create an
 understated, editorial feel rather than a corporate marketing tone. */
 .introduction {
  max-width: 720px;
  margin: 6rem auto;
  padding: 2rem;
  text-align: center;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  border-top: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
}

.introduction h2 {
  font-family: var(--display);
  font-size: 2.25rem;
  margin-bottom: 1rem;
  color: var(--ink);
  letter-spacing: 0.5px;
}

.introduction p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--gray);
  max-width: 60ch;
  margin: 0 auto;
}




/* Closing section styling
 Reflects the quiet editorial tone of the final statement. */
.closing {
max-width: 750px;
margin: 8rem auto 6rem;
padding: 2.5rem;
border-top: 1px solid var(--gray);
border-bottom: 1px solid var(--gray);
text-align: left;
font-family: var(--body);
background: var(--paper);
color: var(--ink);
line-height: 1.7;
}

.closing h2 {
font-family: var(--display);
font-size: 2rem;
margin-bottom: 1.25rem;
text-align: center;
letter-spacing: 0.5px;
color: var(--ink);
}

.closing p {
font-size: 1.05rem;
color: var(--gray);
margin-bottom: 1.5rem;
}

.closing .credit {
text-align: right;
font-family: var(--meta);
color: var(--gray);
font-size: 0.9rem;
letter-spacing: 0.2px;
}


















/* === Atlas Case Pattern (unified across all plates) === */
.case { margin: 220px auto; max-width: 1600px; padding: 0 40px; }
.case__titleblock {
text-align: center; margin-bottom: 80px;
}
.case__title {
font-family: var(--display); font-style: italic;
font-size: clamp(56px, 7vw, 100px);
letter-spacing: 0.06em; line-height: 1; margin: 0;
}
.case__subtitle {
display: block; margin-top: 8px;
font-family: var(--display); font-style: italic;
font-size: clamp(28px, 3.5vw, 48px);
letter-spacing: 0.05em; color: var(--gray);
}

/* 3-column editorial grid (Text / Figures / Meta) */
.case__grid {
display: grid;
grid-template-columns: 1fr 1.2fr 1.5fr; /* tweak to taste */
gap: 50px; align-items: start;
}

/* Left column: body text (your italic Source Serif) */
.case__text { font-family: var(--body); font-size: 14px; line-height: 1.7; text-align: justify; }

/* Middle column: figures stack with captions */
.case__fig figure { background: #fff; border: 1px solid #ddd; padding: 12px; margin-bottom: 22px; }
.case__fig img { width: 100%; height: auto; display: block; opacity: .92; }
.case__fig figcaption { margin-top: 8px; font-family: var(--meta); font-size: 11px; color: var(--gray); }
.case__panel-label { font-family: var(--meta); font-size: 9px; font-weight: bold; margin-bottom: 6px; }

/* Right column: method / notes cards (Son Đoòng style) */
.case__meta .card { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.08);
padding: 15px; margin-bottom: 15px; font-family: var(--meta); font-size: 10px; }
.case__meta .card h3 { font-size: 9px; text-transform: uppercase; letter-spacing: .15em; margin: 0 0 8px; }
.case__meta .card ul { list-style: none; padding: 0; margin: 0; }
.case__meta .card li { margin-bottom: 4px; padding-left: 12px; position: relative; color: var(--gray); }
.case__meta .card li::before { content: "·"; position: absolute; left: 0; }

/* Scale / provenance helpers (optional) */
.case__scale { display: flex; align-items: center; gap: 10px; font-family: var(--meta); font-size: 10px; margin-top: 12px; }
.case__scale .bar { width: 60px; height: 1px; background: var(--ink); }

/* Responsive collapse */
@media (max-width: 900px){
.case__grid { grid-template-columns: 1fr; gap: 28px; }
}




:root{
--paper:#fdfbf6;   /* warm off-white */
--ink:#1a1a1a;
--gray:#6e6e6e;
}

/* Global background */
body{
color:var(--ink);
background-color:var(--paper);
background-image:
  radial-gradient(circle at 1px 1px, rgba(0,0,0,.028) 1px, transparent 0), /* micro grain */
  linear-gradient(to bottom, rgba(0,0,0,.035) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,.035) 100%); /* lab falloff */
background-size: 3px 3px, 100% 100%;
}


/* REMOVE any old vignette/roller overlay */
body::after{ display:none !important; }

/* if you used a header shadow band, disable it too */
header::after{ display:none !important; }

/* turn off the grid overlay completely */
body::before{ display:none !important; }

/* OR keep it very faint (choose one of these, not both) */
/*
body::before{
content:"";
position:fixed; inset:0; pointer-events:none;
background-image:
  linear-gradient(0deg, rgba(0,0,0,.015) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,0,0,.015) 1px, transparent 1px);
background-size: 32px 32px;
opacity:.18;
}
*/



/* FIXED COMPASS (final) */
.compass {
position: fixed;
top: 2rem;
right: 2rem;
width: 160px;
height: 160px;
z-index: 9999;
pointer-events: auto;
}

.compass-inner { position: relative; width: 100%; height: 100%; }

.compass-rose-svg {
width: 100%;
height: 100%;
opacity: .9;
transform: rotate(-15deg);
}

.compass span {
position: absolute;
font-family: var(--display);
font-style: italic;
font-weight: 400;
color: var(--ink);
cursor: pointer;
user-select: none;
}

/* Label placement */
.north-label { top: -10px; left: 50%; transform: translateX(-50%); }
.south-label { bottom: -10px; left: 50%; transform: translateX(-50%); }
.east-label  { right: -8px; top: 50%; transform: translateY(-50%); }
.west-label  { left: -8px; top: 50%; transform: translateY(-50%); }

.compass span:hover { color: var(--accent); }





/* === Compass: stacked PNGs, outside labels, small === */
.compass{
/* knobs */
--size: 138px;             /* overall size — make smaller/bigger here */
--labelOffset: 16px;       /* how far letters sit OUTSIDE the circle */
--bx: 0px; --by: 0px;      /* micro-nudges (back)  if canvases aren't identical */
--fx: 0px; --fy: 0px;      /* micro-nudges (front) */

position: fixed;
top: 1.75rem;
right: 1.75rem;
width: var(--size);
aspect-ratio: 1 / 1;
z-index: 9999;
}
.compass-inner{ position: relative; width:100%; height:100%; }

.compass-back, .compass-front{
position:absolute; inset:0;
width:100%; height:100%;
object-fit: contain; pointer-events:none;
}
.compass-back  { z-index:1; transform: translate(var(--bx), var(--by)); opacity:.95; }
.compass-front { z-index:2; transform: translate(var(--fx), var(--fy));  opacity:.98; }

/* Letters — use your atlas display font and push them OUTSIDE */
.compass span{
position:absolute;
font-family: var(--display);
font-style: italic; font-weight: 400;
color: var(--ink);
user-select:none; cursor:pointer;
line-height: 1;
}
.north-label { top: calc(-1 * var(--labelOffset)); left: 50%; transform: translateX(-50%); }
.south-label { bottom: calc(-1 * var(--labelOffset)); left: 50%; transform: translateX(-50%); }
.east-label  { right: calc(-1 * var(--labelOffset)); top: 50%; transform: translateY(-50%); }
.west-label  { left:  calc(-1 * var(--labelOffset)); top: 50%; transform: translateY(-50%); }

.compass span:hover{ color: var(--accent); }

/* Remove any earlier CSS keyframe spin you may have added */
.compass.animate .compass-front{ animation: none !important; }





/* === Compass label spacing + micro-nudges === */
.compass{
/* distance of ALL letters from the outer circle */
--labelOffset: 20px;        /* try 18–26px to taste */

/* per-letter micro adjustments (X/Y) */
--nX: 0px;  --nY: 0px;
--eX: 0px;  --eY: 0px;
--sX: 0px;  --sY: 0px;
--wX: -8px; --wY: 0px;      /* ⟵ push W further left */
}

/* keep your existing font rules; just swap in these positions */
.north-label{
position:absolute; top: calc(-1 * var(--labelOffset)); left:50%;
transform: translateX(-50%); margin-left: var(--nX); margin-top: var(--nY);
}
.south-label{
position:absolute; bottom: calc(-1 * var(--labelOffset)); left:50%;
transform: translateX(-50%); margin-left: var(--sX); margin-bottom: var(--sY);
}
.east-label{
position:absolute; right: calc(-1 * var(--labelOffset)); top:50%;
transform: translateY(-50%); margin-right: var(--eX); margin-top: var(--eY);
}
.west-label{
position:absolute; left:  calc(-1 * var(--labelOffset)); top:50%;
transform: translateY(-50%); margin-left: var(--wX); margin-top: var(--wY);
}









/* kill the vignette overlay on the break/hero */
.break-full::after { content: none !important; background: none !important; }

/* simplify page background — keep micro-dots only */
body{
background-color: var(--paper) !important;
background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.028) 1px, transparent 0) !important;
background-size: 3px 3px !important;
}





/* --- FINAL COMPASS FIX (mobile + desktop) --- */
.compass {
position: fixed;
top: 1rem;           /* vertical distance from top */
right: 1.2rem;       /* horizontal distance from right edge */
width: 110px;        /* base size */
aspect-ratio: 1 / 1;
z-index: 100;        /* above content, below scrollbar */
pointer-events: auto;
}

.compass-inner {
position: relative;
width: 100%;
height: 100%;
}

.compass-back, .compass-front {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}

.compass span {
position: absolute;
font-family: var(--display);
font-style: italic;
font-weight: 400;
color: var(--ink);
font-size: 0.8rem;
user-select: none;
cursor: pointer;
line-height: 1;
}

.north-label { top: -14px; left: 50%; transform: translateX(-50%); }
.south-label { bottom: -14px; left: 50%; transform: translateX(-50%); }
.east-label  { right: -12px; top: 50%; transform: translateY(-50%); }
.west-label  { left: -12px; top: 50%; transform: translateY(-50%); }

.compass span:hover {
color: var(--accent);
}

/* --- Responsive scaling for mobile --- */
@media (max-width: 768px) {
.compass {
  width: 90px;      /* smaller on mobile */
  top: 0.6rem;      /* shift slightly down */
  right: 0.6rem;    /* shift slightly left */
}

.compass span {
  font-size: 0.65rem; /* smaller labels */
}
}

/* === COMPASS — single source of truth === */
.compass{
position: fixed;
top: 0.9rem;
right: 4.6rem;        /* bigger number = more to the LEFT */
width: 118px;         /* desktop size */
aspect-ratio: 1 / 1;
z-index: 50;
}
.compass-inner{ position: relative; width:100%; height:100%; overflow: visible; }
.compass-back, .compass-front{
position:absolute; inset:0; width:100%; height:100%;
object-fit: contain; pointer-events:none;
}

/* Letter positions (bring N & W closer in) */
:root{
--offN: 5px;   /* inward a bit */
--offS: 14px;
--offE: 14px;
--offW: 5px;   /* inward a bit */
}
.compass span{
position:absolute;
font-family: var(--display);
font-style: italic; font-weight: 400;
color: var(--ink); line-height:1; user-select:none;
}
.north-label{ top:  calc(-1 * var(--offN)); left:50%; transform:translateX(-50%); }
.south-label{ bottom:calc(-1 * var(--offS)); left:50%; transform:translateX(-50%); }
.east-label { right: calc(-1 * var(--offE));  top:50%;  transform:translateY(-50%); }
.west-label { left:  calc(-1 * var(--offW));  top:50%;  transform:translateY(-50%); }

/* Mobile tweaks */
@media (max-width: 768px){
.compass{
  right: 3.2rem;   /* push left on phones so it clears the scrollbar */
  top:   0.6rem;
  width: 92px;     /* smaller on mobile */
}
.compass span{ font-size: .62rem; }
}

/* === FINAL COMPASS FIX === */
.compass {
position: fixed;
top: 1.2rem;
right: 4.8rem;      /* slightly further left */
width: 115px;
aspect-ratio: 1 / 1;
z-index: 50;
}

.compass-inner {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
}

.compass-back, .compass-front {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}

/* Adjust letter offsets */
:root {
--offN: 7px;   /* slightly closer than before */
--offS: 14px;  /* leave as-is */
--offE: 14px;  /* leave as-is */
--offW: 7px;   /* slightly closer */
}

.compass span {
position: absolute;
font-family: var(--display);
font-style: italic;
font-weight: 400;
color: var(--ink);
line-height: 1;
user-select: none;
}

.north-label {
top: calc(-1 * var(--offN));
left: 50%;
transform: translateX(-50%);
}

.south-label {
bottom: calc(-1 * var(--offS));
left: 50%;
transform: translateX(-50%);
}

.east-label {
right: calc(-1 * var(--offE));
top: 50%;
transform: translateY(-50%);
}

.west-label {
left: calc(-1 * var(--offW));
top: 50%;
transform: translateY(-50%);
}

/* mobile adjustments */
@media (max-width: 768px) {
.compass {
  right: 3.4rem;    /* pushes a bit left */
  width: 90px;
  top: 0.8rem;
}
.compass span {
  font-size: 0.65rem;
}
}

/* === GREAT BLUE HOLE layout === */
#great-blue-hole { margin-top: 120px; }
#great-blue-hole .case__titleblock { margin-bottom: 40px; }

.gbh__grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1.9fr;  /* hero is heaviest */
  gap: 50px;
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
}

.gbh__text{ font-family: var(--body); font-size:14px; line-height:1.7; text-align:justify; }
.gbh__panel{ background:#fff; border:1px solid #ddd; padding:12px; margin-bottom:20px; }
.gbh__panel img{ width:100%; height:auto; display:block; opacity:.9; }
.gbh__smallmeta{ font-family: var(--meta); font-size:10px; color: var(--gray); margin-top:6px; }
.gbh__coords{ font-family: var(--meta); font-size:12px; background:linear-gradient(#eee,#f7f7f7); padding:6px 10px; margin-bottom:8px; text-align:center; }
.gbh__scale{ display:flex; gap:10px; align-items:center; font-family:var(--meta); font-size:10px; color:#333; }
.gbh__scale .bar{ width:60px; height:1px; background:#333; display:inline-block; }

/* two small panels side-by-side */
.gbh__twocol{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* Big hero */
.gbh__hero{ position:relative; }
.gbh__hero img{
  width: 100%;
  max-width: 820px;        /* make it noticeably larger */
  height: auto;
  display:block;
  margin-left: auto;       /* hugs right edge of its column */
  opacity:.98;
}


/* Great Blue Hole — dotted path final size and placement */
.gbh__dots-img {
  position: absolute;
  left: -40px;       /* tweak horizontally */
  top: 58%;          /* lower starting point */
  width: 180px;      /* larger, clean size (3–4× what you had) */
  height: auto;
  pointer-events: none;
  opacity: 0.95;
  transform: rotate(0deg);
}

/* Responsive adjustment */
@media (max-width: 1100px) {
  .gbh__dots-img {
    left: -25px;
    top: 60%;
    width: 140px;
  }
}
@media (max-width: 700px) {
  .gbh__dots-img {
    display: none;
  }
}


/* Great Blue Hole — dotted path (final size + placement) */
.gbh__dots-img{
  position: absolute;
  left: -52px;     /* nudge toward the middle column */
  top: 54%;        /* start lower so it clears the panels */
  width: 280px;    /* <<< scale here (try 260–320px to taste) */
  height: auto;
  pointer-events: none;
  opacity: .95;
  transform: rotate(0deg);
}

@media (max-width:1100px){
  .gbh__dots-img{ left:-28px; top:58%; width:200px; }
}
@media (max-width:700px){
  .gbh__dots-img{ display:none; }
}


/* Lake Toba two‑column layout and inset figures */
#lake-toba {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

#lake-toba .width75 {
  flex: 3;           /* overrides the 72% width */
}

#lake-toba .width25 {
  flex: 1;           /* overrides the 28% width */
}

#lake-toba .toba-inset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

#lake-toba .toba-inset img {
  width: 100%;
  height: auto;
  display: block;
}

#lake-toba .toba-inset figcaption {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 6px;
  color: var(--gray);
}

/* Stack inset images on narrow screens */
@media (max-width: 900px) {
  #lake-toba .toba-inset-grid {
    grid-template-columns: 1fr;
  }
}

/* === FINAL SPACING TWEAKS === */

/* More breathing room between each case */
.case {
  margin: 300px auto;          /* was 220px — now more space above/below */
  max-width: 1600px;
  padding: 0 40px;
}

/* Extra gap between consecutive cases */
.case + .case {
  margin-top: 380px;           /* ensures bigger breaks between plates */
}

/* Add vertical spacing around break quotes */
.quote {
  margin: 300px auto;          /* increased from ~200px */
}


.contents a {
  color: var(--ink);
  text-decoration: none;
  font-weight: normal;
  transition: color 0.3s ease;
}

.contents a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---- Mariana Trench = Son Đoòng / Toba layout ---- */
#mariana-trench { margin-top: 240px; }
#mariana-trench .mt-wrap { 
  display: flex; 
  align-items: flex-start; 
  gap: 40px; 
}
#mariana-trench .mt-fig { flex: 3; }
#mariana-trench .mt-side { flex: 1; }

/* hero + panel stack (no frame) */
.case__panel.noframe figure,
#mariana-trench .noframe figure {
  background: none;
  border: 0;
  padding: 0;
}

/* figure basics */
#mariana-trench .mt-fig figure { margin: 0 0 22px; }
#mariana-trench .mt-fig img { width: 100%; height: auto; display: block; }

/* side column typographic tone like Sơn Đoòng/Toba */
#mariana-trench .mt-side .text { 
  font-family: var(--body); 
  font-size: 14px; 
  line-height: 1.7; 
  text-align: justify;
  margin-bottom: 20px;
}
#mariana-trench .mt-side .card { 
  background: rgba(255,255,255,0.5); 
  border: 1px solid rgba(0,0,0,0.08); 
  padding: 15px; 
  margin-bottom: 15px; 
  font-family: var(--meta); 
  font-size: 10px; 
  color: var(--gray);
}
#mariana-trench .mt-side .card h3 { 
  font-size: 9px; 
  text-transform: uppercase; 
  letter-spacing: .15em; 
  margin: 0 0 8px; 
  font-weight: normal;
}

/* small scale bar like other cases */
#mariana-trench .case__scale { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-family: var(--meta); 
  font-size: 10px; 
  margin-top: 10px; 
  color: var(--gray);
}
#mariana-trench .case__scale .bar { width: 60px; height: 1px; background: var(--ink); }

/* responsive stack */
@media (max-width: 900px){
  #mariana-trench .mt-wrap { flex-direction: column; }
}


/* === Credits / Colophon === */
.credits {
  margin-top: 180px;
  padding: 80px 40px;
  text-align: center;
  background: var(--paper);
  border-top: 1px solid rgba(0,0,0,0.1);
}

.credits p {
  font-family: var(--meta);
  font-size: 13px;
  line-height: 1.8;
  color: var(--gray);
  letter-spacing: 0.03em;
}

.credits strong {
  font-family: var(--body);
  color: var(--ink);
}

.credits em {
  font-family: var(--display);
  font-style: italic;
  color: var(--ink);
}

/* === Secondary Figures (smaller supporting images) === */
.case__panel.secondary,
.casestudy .secondary {
  max-width: 70%;
  margin: 20px auto;
}

.case__panel.secondary img,
.casestudy .secondary img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}
/* ===== Lake Vostok final layout: hero left, B + C stacked right ===== */
#lake-vostok .case__grid {
  grid-template-columns: 0.9fr 1.4fr 1.1fr;   /* more room for text, wider figures */
  gap: 80px;
}

#lake-vostok .case__fig {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;          /* A left / B+C right */
  align-items: start;
  column-gap: 40px;
}

/* Left: hero A — remove small card frame look */
#lake-vostok .case__fig .hero {
  background: none;
  border: none;
  padding: 0;
}
#lake-vostok .case__fig .hero img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.98;
}

/* Right: stack of B + C */
#lake-vostok .case__fig .stack {
  display: grid;
  gap: 30px;
}
#lake-vostok .case__fig .stack figure {
  margin: 0;
  background: none;
  border: none;
  padding: 0;
}
#lake-vostok .case__fig .stack img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.98;
}

/* Captions & labels */
#lake-vostok .case__fig .case__panel-label {
  font-family: var(--meta);
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 6px;
}
#lake-vostok .case__fig figcaption {
  font-family: var(--meta);
  font-size: 11px;
  color: var(--gray);
  margin-top: 6px;
}

/* Let text column breathe */
#lake-vostok .case__text {
  max-width: 46ch;
  line-height: 1.8;
}

/* Responsive stack */
@media (max-width: 1000px) {
  #lake-vostok .case__fig {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }
}


/* === Lake Vostok: hero left, two secondaries stacked right, no frames === */
#lake-vostok .case__grid{
  /* give copy more breathing room and figures more width */
  grid-template-columns: 1.05fr 1.65fr 1.1fr;  /* text / figures / meta */
  gap: 70px;
}

/* two-column inner layout for the figure area */
#lake-vostok .lv-fig{
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;  /* A bigger than the B+C stack */
  column-gap: 40px;
  align-items: start;
}

/* remove frames/borders only in this case */
#lake-vostok .lv-fig figure{
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 18px 0;
}

/* hero scales naturally and reads crisp */
#lake-vostok .lv-hero img{
  width: 100%;
  height: auto;
  display: block;
  opacity: .98;
}

/* stacked secondaries smaller than hero */
#lake-vostok .lv-stack{
  display: grid;
  gap: 26px;
}
#lake-vostok .lv-stack img{
  width: 100%;
  height: auto;
  display: block;
  opacity: .98;
}

/* keep tidy labels/captions */
#lake-vostok .case__panel-label{
  font-family: var(--meta);
  font-size: 10px;
  font-weight: 700;
  margin: 0 0 6px 0;
}
#lake-vostok figcaption{
  font-family: var(--meta);
  font-size: 11px;
  color: var(--gray);
  margin-top: 6px;
}

/* make the body column a touch softer / narrower line length */
#lake-vostok .case__text{
  max-width: 48ch;
  line-height: 1.8;
}

/* responsive: stack nicely on narrow screens */
@media (max-width: 1000px){
  #lake-vostok .case__grid{ grid-template-columns: 1fr; gap: 32px; }
  #lake-vostok .lv-fig{ grid-template-columns: 1fr; row-gap: 26px; }
}


/* ====== HOTFIX OVERRIDES (minimal + safe) ====== */

/* ——— General tidy ——— */
figure { border: 0 !important; padding: 0 !important; background: none !important; }
figure img { border: 0 !important; padding: 0 !important; background: none !important; }
.case { max-width: 1600px; margin: 260px auto; padding: 0 40px; }
.case + .case { margin-top: 380px; }
.quote { margin: 280px auto !important; }

/* Contents links — small hover only */
.contents a { color: var(--ink); text-decoration: none; }
.contents a:hover { color: var(--accent); text-decoration: underline; }

/* ——— Secondary images smaller across the site ——— */
.case__panel.secondary,
.casestudy .secondary,
.gbh__panel,
#lake-toba .toba-inset figure {
  max-width: 60% !important;    /* smaller than hero */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* For side-inset pairs (Toba etc.) */
#lake-toba .toba-inset-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { #lake-toba .toba-inset-grid { grid-template-columns: 1fr; } }

/* ——— GREAT BLUE HOLE: big hero right, dots overlay neat ——— */
.gbh__grid{
  display: grid !important;
  grid-template-columns: 1fr 1.1fr 1.9fr !important; /* text / panels / BIG hero */
  gap: 48px !important;
  align-items: start !important;
  max-width: 1600px; margin: 0 auto; padding: 0 40px;
}
.gbh__hero { position: relative; }
.gbh__hero img { width: 100%; height: auto; display: block; opacity: .98; }

/* dot overlay image (use your smallred dot sheet) */
.gbh__dots-img{
  position: absolute;
  left: -48px;            /* nudges toward centre column */
  top: 54%;               /* start lower so it clears panels */
  width: 260px;           /* clean scale; change 220–320px to taste */
  height: auto;
  pointer-events: none;
  opacity: 0.95;
  transform: rotate(0deg);
}
@media (max-width: 1100px){ .gbh__dots-img{ left:-28px; top:58%; width:200px; } }
@media (max-width: 700px){ .gbh__dots-img{ display:none; } }

/* Panels (B/C/D/E) look like light cards but smaller */
.gbh__panel { background: none !important; border: 0 !important; padding: 0 !important; }
.gbh__panel img { width: 100%; height: auto; display: block; opacity: .92; }
.gbh__twocol{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* ——— LAKE VOSTOK: hero left, B+C stacked right, no frames ——— */
#lake-vostok .case__grid{
  display: grid !important;
  grid-template-columns: 1.05fr 1.65fr 1.1fr !important; /* text / figures / meta */
  gap: 70px !important;
  align-items: start;
}
#lake-vostok .lv-fig{
  display: grid !important;
  grid-template-columns: 1.2fr 0.9fr !important; /* A bigger, B+C stack */
  column-gap: 40px;
}
#lake-vostok .lv-fig figure{ background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 18px; }
#lake-vostok .lv-hero img{ width: 100%; height: auto; display: block; opacity: .98; }
#lake-vostok .lv-stack{ display: grid; gap: 26px; }
#lake-vostok .lv-stack img{ width: 100%; height: auto; display: block; opacity: .98; }
#lake-vostok .case__text{ max-width: 48ch; line-height: 1.8; }
@media (max-width: 1000px){
  #lake-vostok .case__grid{ grid-template-columns: 1fr !important; gap: 32px; }
  #lake-vostok .lv-fig{ grid-template-columns: 1fr !important; row-gap: 26px; }
}

/* ——— MARIANA (match Sơn Đoòng/Toba feel, no frames) ——— */
#mariana-trench .mt-wrap { display:flex; gap:40px; align-items:flex-start; }
#mariana-trench .mt-fig { flex:3; }
#mariana-trench .mt-side{ flex:1; }
#mariana-trench .mt-fig figure{ margin:0 0 22px; background:none !important; border:0 !important; padding:0 !important; }
#mariana-trench .mt-fig img{ width:100%; height:auto; display:block; }
#mariana-trench .mt-side .text{ font-family:var(--body); font-size:14px; line-height:1.7; text-align:justify; margin-bottom:20px; }
#mariana-trench .mt-side .card{ background:rgba(255,255,255,.5); border:1px solid rgba(0,0,0,.08); padding:15px; margin-bottom:15px; font-family:var(--meta); font-size:10px; color:var(--gray); }
@media (max-width: 900px){ #mariana-trench .mt-wrap { flex-direction: column; } }

/* ——— Compass: keep one small, tidy version ——— */
.compass{
  position: fixed; top: 1rem; right: 3.6rem;
  width: 110px; aspect-ratio: 1/1; z-index: 50;
}
.compass span{ font-family: var(--display); font-style: italic; line-height:1; user-select:none; }
.north-label{ top:-12px; left:50%; transform:translateX(-50%); position:absolute; }
.south-label{ bottom:-12px; left:50%; transform:translateX(-50%); position:absolute; }
.east-label { right:-12px; top:50%; transform:translateY(-50%); position:absolute; }
.west-label { left:-12px; top:50%; transform:translateY(-50%); position:absolute; }
@media (max-width: 768px){ .compass{ right: 2rem; width: 90px; } }

/* ——— Circle hero pulse (tasteful) ——— */
.hero-bleed img[src*="Magnetichelleycircles"]{
  width: 72% !important; max-width: none !important; margin: 0 auto; display:block;
  opacity: .9; animation: circlePulse 6s ease-in-out infinite;
}
@keyframes circlePulse { 0%,100%{ transform: scale(1); opacity:.9;} 50%{ transform:scale(1.06); opacity:1; } }


/* ===== Fix end credits / colophon ===== */

/* If you used: <section class="credits">…</section> */
.credits, #credits {
  /* break away from any .case grid rules */
  display: block !important;
  margin: 120px auto 0 !important;
  padding: 64px 24px !important;
  max-width: 1100px !important;
  text-align: center !important;
  background: var(--paper);
  border-top: 1px solid rgba(0,0,0,.12);
}

.credits p {
  margin: 0 auto !important;
  max-width: 70ch;
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray);
  letter-spacing: 0.02em;
}

.credits strong { color: var(--ink); font-family: var(--text, Georgia, serif); }
.credits em     { color: var(--ink); font-family: var(--display, serif); font-style: italic; }

/* If you used: <footer class="foot">…</footer> */
.foot {
  display: block !important;
  margin: 120px auto 0 !important;
  padding: 64px 24px 96px !important;   /* extra bottom air so nothing feels cut off */
  max-width: 1100px !important;
  text-align: center !important;
  background: var(--paper);
  border-top: 1px solid rgba(0,0,0,.12);
  color: var(--gray);
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.foot b { color: var(--ink); }
.foot i { font-family: var(--display, serif); }

/* Keep credits from inheriting big .case spacing if you accidentally gave it class="case" */
.case.credits, .case#credits { 
  border-top: 1px solid rgba(0,0,0,.12) !important;
  margin: 120px auto 0 !important;
  padding-top: 0 !important;
  grid-template-columns: 1fr !important;
}

/* Make sure nothing overlaps the credits on small screens */
@media (max-width: 880px){
  .credits, #credits, .foot { margin-top: 80px !important; padding: 48px 20px 72px !important; }
}


/* --- References section: keep the heading modest --- */
#references h1, #references h2,
.references h1, .references h2,
#refs h1, #refs h2 {
  font-family: var(--display, serif);
  font-size: 28px;          /* normal, not display-big */
  line-height: 1.2;
  margin: 24px 0 16px;
  letter-spacing: 0;
  text-align: left;         /* or center if you prefer */
}

/* keep the end graphic reasonable too */
#references img, .references img, #refs img {
  display: block;
  max-width: 900px;         /* cap width */
  width: 100%;
  margin: 16px auto 24px;
}

/* small screens — a touch smaller */
@media (max-width: 880px){
  #references h1, #references h2,
  .references h1, .references h2,
  #refs h1, #refs h2 {
    font-size: 22px;
    text-align: left;
  }
}

/* ===== END SECTION: small + clean (final override) ===== */

/* A single selector basket so it works with #references OR .references OR #refs */
#references, .references, #refs {
  max-width: 1100px !important;
  margin: 120px auto 80px !important;
  padding: 0 24px !important;
}

/* Heading: modest script, centred, NOT giant */
#references h1, #references h2,
.references h1, .references h2,
#refs h1, #refs h2 {
  font-family: var(--display, serif) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .02em;
  text-align: center;
  /* small but readable */
  font-size: 28px !important;            /* was ballooning via other rules */
  line-height: 1.15;
  margin: 0 0 18px 0 !important;
  text-shadow: none !important;
}

/* End artwork: keep it reasonably small, never bleed full-width */
#references .end-figure img,
.references .end-figure img,
#refs .end-figure img,
#references > img, .references > img, #refs > img {
  display: block;
  width: min(62vw, 700px) !important;     /* cap size */
  max-width: 700px !important;
  height: auto;
  margin: 18px auto 28px auto !important; /* centred */
  opacity: .98;
  animation: none !important;             /* no pulses/fx here */
}

/* Reference list: calm body type with hanging indent */
#references .ref-list, .references .ref-list, #refs .ref-list {
  max-width: 72ch;
  margin: 18px auto 0 auto;
  padding: 0;
  list-style: none;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}

#references .ref-list li,
.references .ref-list li,
#refs .ref-list li {
  /* hanging indent */
  text-indent: -1.4em;
  padding-left: 1.4em;
  margin: 0 0 12px 0;
}

/* Optional emphasis for journal titles (keeps your academic vibe) */
#references .ref-list em,
.references .ref-list em,
#refs .ref-list em {
  font-style: italic;
}

/* Make sure end section never inherits '.case' grid/spacing */
#references.case, .references.case, #refs.case {
  display: block !important;
  margin: 120px auto 80px !important;
  padding: 0 24px !important;
  grid-template-columns: 1fr !important;
  border: 0 !important;
}

/* Credits/colophon right above references: small + neutral */
.credits, #credits, .foot {
  max-width: 1100px !important;
  margin: 120px auto 40px !important;
  padding: 40px 24px !important;
  border-top: 1px solid rgba(0,0,0,.12);
  background: var(--paper);
  text-align: center;
}

.credits p, #credits p, .foot {
  font-family: var(--meta, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray);
  letter-spacing: .02em;
}

/* Keep the compass from visually crowding the end block on short screens */
@media (max-height: 780px) {
  .compass { top: .6rem; right: 2.2rem; width: 92px; }
}

/* Add a little bottom air so nothing feels cut off on mobile */
@media (max-width: 880px) {
  #references, .references, #refs { margin: 90px auto 72px !important; }
}