/* Shared styles for every page in the Bands direction. Case studies follow c1-reporting.html. */
:root {
  --bg: #151614; --fg: #f4f1e8; --dim: #9a9a90; --chip: #151614; --rule: #3a3b37;
  --ink: #111311; --accent: #ee8a4a;
  --sky: #58a6dc; --rust: #b5471b; --mint: #b5dcc0; --peach: #e8b08e; --teal: #0f6b6b;
  /* Figures sit on the matchbook card: cream paper, brown-black ink, one orange. */
  --paper: #f7ebd0; --pink: #1d1712; --org: #e8742a; --faint: #e3d2ae;
}
html.lit { --bg: #f4efe2; --fg: #151614; --dim: #6d6a60; --chip: #f4efe2; --rule: #d6cfbd; --accent: #b4541a; --paper: #fbf3df; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 19px/1.62 var(--font-body), system-ui, sans-serif; }
a { color: inherit; }
.serif { font-family: var(--font-display), Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.grot { font-family: var(--font-body), sans-serif; font-weight: 900; letter-spacing: -0.03em; }

nav.top { position: fixed; top: 12px; left: 12px; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; }
nav.top a, .mode { font: 500 13px var(--font-body), sans-serif; text-decoration: none; padding: 3px 8px; border: 1px solid currentColor; background: var(--chip); color: var(--fg); }
nav.top a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.mode { cursor: pointer; margin-left: 10px; }
nav.top a:hover, nav.top a:focus-visible, .mode:hover, .mode:focus-visible { background: var(--fg); color: var(--bg); }

/* Band colours stay tied to homepage position: specialist, reporting, lamplight, teaching, wiki. */
.b-sky { background: var(--sky); color: var(--ink); } .b-rust { background: var(--rust); color: #f4f1e8; }
.b-mint { background: var(--mint); color: var(--ink); } .b-peach { background: var(--peach); color: var(--ink); }
.b-teal { background: var(--teal); color: #f4f1e8; }

/* Case-study hero: the homepage band, grown to full height. */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 4vw; align-items: end; min-height: min(88vh, 860px); padding: 120px 4vw 56px; margin: 8px; }
.hero .meta { font-size: 13px; font-weight: 500; margin: 0 0 18px; }
.hero h1 { font-size: clamp(2.8rem, 7.4vw, 7.6rem); line-height: .96; margin: 0; max-width: 11ch; }
.hero h1.serif { font-size: calc(clamp(2.8rem, 7.4vw, 7.6rem) * 1.04); }
.hero .more { max-width: 40ch; font-size: clamp(1.1rem, 1.5vw, 1.35rem); margin: 26px 0 0; }
.hero figure { margin: 0; display: grid; place-items: center; }

/* Plain page header for About, Work, Contact and the rest. */
.head { padding: 130px 4vw 7vh; }
.head h1 { font-size: calc(clamp(2.8rem, 8vw, 8rem) * 1.04); line-height: .96; margin: 0; max-width: 14ch; }
.head h1 em { font-style: normal; color: var(--accent); }
.head p { max-width: 46ch; margin: 4vh 0 0; font-size: clamp(1.05rem, 1.5vw, 1.35rem); }

/* Art cards. */
.sprite { width: 100%; max-width: 460px; aspect-ratio: var(--ar, 6 / 5); background-image: var(--src); background-repeat: no-repeat; background-size: calc(var(--n, 1) * 100%) 100%; box-shadow: 0 18px 26px rgba(0,0,0,.3); }
.stage { position: relative; width: 100%; max-width: 440px; aspect-ratio: 19 / 20; background: #f7ebd0; overflow: hidden; box-shadow: 0 18px 26px rgba(0,0,0,.3); }
.stage::before { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at center, transparent 55%, rgba(150,110,60,.18)); }
.stage .floor { position: absolute; left: 7%; right: 7%; top: 84%; height: 2px; background: #1d1712; }
.stage img { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; }
.stage svg.wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage svg.feather { position: absolute; left: 0; top: 0; opacity: 0; overflow: visible; }

/* The four facts a hiring manager scans for. */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 8px; border-bottom: 1px solid var(--rule); }
.facts div { padding: 22px 4vw 26px 0; }
.facts div:first-child { padding-left: 4vw; }
.facts dt { font-size: 13px; color: var(--dim); margin: 0 0 6px; }
.facts dd { margin: 0; font-size: 16px; line-height: 1.45; }

/* Reading column, with figures allowed to go wider. */
article { padding: min(9vh, 90px) 0 40px; }
.col { max-width: 680px; margin: 0 auto; padding: 0 20px; }
.wide { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.short { font-size: 1.3rem; line-height: 1.5; margin: 0 0 min(9vh, 90px); }
.short b { font-weight: 700; }
section { margin: 0 0 min(11vh, 110px); }
.kick { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .04em; margin: 0 0 10px; }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.02; margin: 0 0 28px; }
h3 { font-size: 1.15rem; font-weight: 700; margin: 2em 0 .4em; }
p { margin: 0 0 1.1em; }
ul.plain { padding-left: 1.1em; margin: 0 0 1.1em; }
ul.plain li { margin: 0 0 .4em; }
.pull { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; color: var(--accent); margin: 1.4em 0; max-width: 22ch; }
.textlink { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; }
.textlink:hover { border-bottom-width: 4px; }

/* "Go deeper" breakouts: the story reads without them. */
details.deep { border-top: 2px solid var(--fg); border-bottom: 1px solid var(--rule); margin: 2em 0; }
details.deep summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 700; font-size: 17px; }
details.deep summary::-webkit-details-marker { display: none; }
details.deep summary::after { content: "+"; font-weight: 400; font-size: 24px; line-height: 1; }
details.deep[open] summary::after { content: "–"; }
details.deep summary span { font-weight: 500; color: var(--dim); font-size: 13px; display: block; }
details.deep > div { padding: 0 0 18px; font-size: 17px; }
details.deep table { width: 100%; border-collapse: collapse; font-size: 15px; }
details.deep td { padding: 8px 12px 8px 0; border-top: 1px solid var(--rule); vertical-align: top; }
details.deep td:first-child { font-weight: 700; white-space: nowrap; }

/* Figure cards. */
.fig { background: var(--paper); color: var(--pink); padding: 28px clamp(16px, 3vw, 36px) 24px; margin: min(6vh, 60px) auto; box-shadow: 0 18px 26px rgba(0,0,0,.25); position: relative; }
.fig .ft { font-weight: 900; letter-spacing: -0.02em; font-size: 1.35rem; line-height: 1.15; margin: 0 0 4px; }
.fig .fs { font-size: 15px; margin: 0 0 20px; max-width: 60ch; }
.fig figcaption { font-size: 13px; margin: 18px 0 0; opacity: .8; }
.fig button.t { font: 700 14px var(--font-body), sans-serif; padding: 6px 12px; border: 2px solid var(--pink); background: transparent; color: var(--pink); cursor: pointer; }
.fig button.t[aria-pressed="true"], .fig button.t:hover { background: var(--pink); color: var(--paper); }
.fig button:focus-visible, .fig input:focus-visible { outline: 3px solid var(--org); outline-offset: 2px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tip { position: absolute; pointer-events: none; background: var(--pink); color: var(--paper); font-size: 12px; padding: 3px 7px; white-space: nowrap; opacity: 0; transform: translate(-50%, -130%); z-index: 3; }

/* Big-number strip. */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 2px solid var(--fg); margin: 2em 0; }
.nums div { padding: 14px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.nums b { display: block; font: 900 clamp(2rem, 4vw, 3rem)/1 var(--font-body), sans-serif; letter-spacing: -0.03em; }
.nums span { font-size: 14px; color: var(--dim); }

/* The block on password-protected studies. */
.gate .spec { font-size: 13px; color: var(--dim); margin: 14px 0 0; }
.gate { border: 2px solid var(--fg); padding: 28px clamp(18px, 3vw, 36px); margin: 2em 0; }
.gate h3 { margin: 0 0 .4em; font-size: 1.5rem; }
.btn { display: inline-block; font: 700 16px var(--font-body), sans-serif; padding: 10px 16px; background: var(--fg); color: var(--bg); text-decoration: none; border: 2px solid var(--fg); cursor: pointer; }
.btn:hover, .btn:focus-visible { background: transparent; color: var(--fg); }

/* Work bands, as on the homepage. */
.band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 4vw; align-items: center; padding: 52px 4vw; margin: 0 8px 8px; text-decoration: none; }
.band .txt { display: flex; flex-direction: column; align-items: flex-start; }
.band .meta { font-size: 13px; font-weight: 500; margin: 0 0 18px; }
.band h2 { margin: 0; font-size: clamp(2.2rem, 5.4vw, 5rem); line-height: 1; }
.band h2.serif { font-size: calc(clamp(2.2rem, 5.4vw, 5rem) * 1.04); }
.band .more { max-width: 40ch; font-size: 1.15rem; margin: 22px 0 26px; }
.band .go, .next .go { font-size: 15px; font-weight: 700; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.band:hover .go, .band:focus-visible .go, .next:hover .go { border-bottom-width: 4px; padding-bottom: 0; }
.band:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.band figure { margin: 0; display: grid; place-items: center; }

.next { display: grid; grid-template-columns: 1fr auto; gap: 4vw; align-items: end; padding: 52px 4vw; margin: 0 8px 8px; text-decoration: none; }
.next .meta { font-size: 13px; font-weight: 500; margin: 0 0 14px; }
.next h2 { margin: 0; font-size: clamp(2.2rem, 5.4vw, 5rem); line-height: 1; }
.next h2.serif { font-size: calc(clamp(2.2rem, 5.4vw, 5rem) * 1.04); }

.contact { background: var(--fg); color: var(--bg); margin: 0 8px 8px; padding: 6vh 4vw; }
.contact a { display: block; font-size: clamp(1.6rem, 5.2vw, 5rem); line-height: 1.1; text-decoration: none; overflow-wrap: anywhere; }
.contact a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }

footer.foot { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 26px 4vw 30px; margin: 0 8px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--dim); }
footer.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer.foot a { text-decoration: none; color: var(--fg); }
footer.foot a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  body { font-size: 18px; }
  .hero, .band { grid-template-columns: 1fr; gap: 28px; }
  .hero { min-height: 0; padding: 110px 5vw 40px; }
  .band { padding: 36px 5vw; }
  .hero .sprite, .hero .stage, .band .stage, .band .sprite { max-width: 320px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div, .facts div:first-child { padding: 16px 5vw; }
  .next { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } }


/* Site only: the second gate button and the password page. */
.btn.ghost { background: transparent; color: var(--fg); margin-left: 6px; }
.btn.ghost:hover, .btn.ghost:focus-visible { background: var(--fg); color: var(--bg); }