/* kaledonie.com — Lagoon Edge ground #0C1A19 page ground, dark ink #EFE7D9 bone, all reading text accent #D64A26 laterite — bands, kickers, marks second #109083 reef teal — section-level marks, links in bone panels quiet #8F9C97 silt — credits, meta */ :root{ --ground:#0C1A19; --ground-2:#112827; --ink:#EFE7D9; --ink-2:#CFC7B8; --accent:#D64A26; --accent-ink:#1A0D07; --second:#109083; --quiet:#8F9C97; --bone:#EFE7D9; --bone-ink:#1A2422; --bone-quiet:#8A7A6A; --hair:rgba(239,231,217,.16); --hair-2:rgba(239,231,217,.28); --pad:clamp(18px,4vw,44px); --measure:68ch; --display:'Petrona',Georgia,serif; --text:'Work Sans',system-ui,sans-serif; --mono:'Courier Prime',ui-monospace,monospace; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--text);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;text-wrap:pretty; } img{max-width:100%;display:block;height:auto} a{color:var(--accent);text-decoration:none} a:hover{color:var(--ink)} h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0} p{margin:0 0 1.05em} p:last-child{margin-bottom:0} figure{margin:0} .wrap{max-width:1320px;margin:0 auto;padding-inline:var(--pad)} .wrap.wrap{padding-inline:var(--pad)} .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet)} .kicker--accent{color:var(--accent)} .kicker--second{color:var(--second)} .rule-reef{display:block;width:100%;height:14px;color:var(--hair-2)} .mark{flex:0 0 auto} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:9;background:var(--bone);color:var(--bone-ink);padding:8px 12px} /* ── masthead + printed index ─────────────────────────── */ .masthead{border-bottom:1px solid var(--hair)} .masthead__top{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:22px 0 18px} .brand{display:flex;align-items:center;gap:clamp(12px,2vw,22px);color:var(--ink)} .brand__mark{color:var(--accent)} .brand__name{display:block;font-family:var(--display);font-weight:600;font-size:clamp(34px,5.2vw,54px);line-height:.92;letter-spacing:-.02em} .brand__line{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--quiet);margin-top:8px} .masthead__meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)} .index{border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(5,1fr);gap:0 clamp(16px,2.2vw,34px);padding:14px 0 16px} .index__col{padding:0} .index__head{display:flex;align-items:center;gap:9px;color:var(--ink)} .index__head span{font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:0} .index__head .mark{color:var(--second)} .index__col--live .index__head,.index__col--live .index__head span,.index__col--live .index__head .mark{color:var(--accent)} .index__list{display:flex;flex-wrap:wrap;gap:2px 12px;margin:7px 0 0;padding:0 0 0 35px} .index__list a{color:var(--quiet);font-size:13.5px;line-height:1.55;white-space:nowrap} .index__list a:not(:last-child)::after{content:"·";color:rgba(239,231,217,.22);margin-left:12px} .index__list a:hover{color:var(--ink)} .index__list a[aria-current]{color:var(--ink);border-bottom:1px solid var(--accent)} .index__foot{display:flex;flex-wrap:wrap;gap:22px;padding:9px 0;border-top:1px solid var(--hair);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase} .index__foot a{color:var(--quiet)} .index__foot a:hover{color:var(--ink)} /* ── homepage bands ───────────────────────────────────── */ .band{border-bottom:1px solid var(--hair)} .band--laterite{background:var(--accent);color:var(--accent-ink);border-bottom:0} .band--laterite a{color:var(--accent-ink);border-bottom:1px solid rgba(26,13,7,.4)} .band--bone{background:var(--bone);color:var(--bone-ink);border-bottom:0} .band--bone a{color:#8f2c12} .band--quiet{padding:clamp(34px,6vw,64px) 0} .lead-band{position:relative} .lead-band__img{position:relative;min-height:clamp(320px,52vw,660px)} .lead-band__img img{width:100%;height:clamp(320px,52vw,660px);object-fit:cover} .lead-band__scrim{position:absolute;inset:auto 0 0 0;height:66%;background:linear-gradient(180deg,rgba(12,26,25,0),rgba(12,26,25,.86) 62%,rgba(12,26,25,.97));pointer-events:none} .lead-band__text{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) clamp(20px,4vw,44px)} .lead-band__text .inner{max-width:900px} .lead-band h1{font-size:clamp(30px,5.4vw,68px);margin:14px 0 0} .lead-band .dek{font-size:clamp(15.5px,1.6vw,18px);color:var(--ink-2);max-width:62ch;margin:16px 0 0} .lead-band .credit{display:block;margin-top:16px} .standfirst{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(26px,4vw,64px);padding:clamp(30px,4vw,50px) 0} .standfirst p.big{font-family:var(--display);font-size:clamp(20px,2.3vw,29px);line-height:1.42;margin:0} .standfirst aside{border-top:1px solid var(--hair-2);padding-top:14px} .standfirst aside p{font-size:15.5px;color:var(--ink-2);margin:12px 0 0} .split{display:grid;grid-template-columns:1.05fr 1fr;gap:0;align-items:stretch} .split__text{align-self:center;padding:clamp(30px,4.5vw,58px) clamp(24px,3vw,52px) clamp(30px,4.5vw,58px) 0} .split__media{padding:clamp(20px,3vw,44px) 0;display:flex} .split__media .article-figure{width:100%;display:flex;flex-direction:column} .split__media .article-figure img{aspect-ratio:auto;flex:1 1 0;height:0;min-height:clamp(300px,34vw,520px);object-fit:cover} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);padding:clamp(30px,5vw,56px) 0} .two-col--map{grid-template-columns:.82fr 1.18fr;align-items:start} .entry-list{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--hair-2)} .entry-list li{border-bottom:1px solid var(--hair)} .entry-list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;color:var(--ink);font-size:16px} .entry-list a:hover{color:var(--accent)} .entry-list .no{font-family:var(--mono);font-size:11.5px;color:var(--quiet)} .figures3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);padding:clamp(26px,4vw,48px) 0} .statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border-top:1px solid currentColor;margin-top:26px} .statblock{padding:16px 20px 4px 0;border-right:1px solid rgba(128,128,128,.35)} .statblock:last-child{border-right:0} .stat-num{display:block;font-family:var(--display);font-size:clamp(30px,3.4vw,40px);line-height:1} .stat-label{display:block;font-size:14.5px;line-height:1.45;margin-top:6px} .quiet-line{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(22px,3.4vw,34px);line-height:1.42;margin:0;max-width:1080px} .selected{padding-block:clamp(30px,5vw,56px)} .selected__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:12px} .selected__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:clamp(18px,2.2vw,28px);margin-top:26px} .card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:0;color:var(--ink);align-items:stretch} .card img{width:100%;height:100%;aspect-ratio:auto;min-height:230px;object-fit:cover} .cat-list img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover} .card__body{display:flex;flex-direction:column;justify-content:center;padding:18px 20px} .card h3{font-size:clamp(21px,2vw,25px);line-height:1.14;min-height:0} .card p{font-size:15px;color:var(--ink-2);margin:9px 0 0} .card .kicker{margin-bottom:7px;font-size:11px} .card--plate{background:var(--bone);color:var(--bone-ink);padding:0} .card--plate .card__body{padding:18px 22px} .card--plate p{color:#3C4A45} .card--plate:hover{background:#e5dccb;color:var(--bone-ink)} /* ── supporters ───────────────────────────────────────── */ .supporters{padding-block:clamp(30px,4.6vw,54px)} .supporters__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--hair-2);padding-bottom:12px} .supporters__note{font-size:15.5px;color:var(--ink-2);max-width:56ch;margin:12px 0 0} .sponsor-group{margin-top:26px} .sponsor-group__label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--second)} .sponsor-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:12px} .sponsor-row--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .sponsor{display:flex;flex-direction:column;gap:7px;background:var(--ground-2);border-top:2px solid var(--accent);padding:16px 20px 18px;color:var(--ink);min-height:126px} .sponsor:hover{background:#16302e;color:var(--ink)} .sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain} .sponsor-name{font-family:var(--display);font-size:20px;line-height:1.15} .sponsor-blurb{font-size:14.5px;line-height:1.45;color:var(--ink-2)} .sponsor.feat{background:#17322f;border-top-width:4px} .sponsor.feat .sponsor-name{font-size:24px} /* ── figure system ──────────────────────────────────────── 1 .article-figure bone mat + corner marks, caption inside the mat 2 .article-figure.bleed full-measure band, dark caption plate over it 3 .article-figure.inset hairline frame, caption hanging in the margin 4 .article-figure.strip in-column, accent bar at the left of the caption */ .article-figure{position:relative;background:var(--bone);color:var(--bone-ink);padding:12px 12px 0;margin:0} .article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover} .article-figure figcaption{padding:11px 2px 14px} .article-figure .cap{font-family:var(--display);font-size:17px;line-height:1.4;display:block} .article-figure .credit{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-quiet);margin-top:7px} .article-figure::before,.article-figure::after{content:"";position:absolute;width:22px;height:22px;border-color:var(--bone-ink);border-style:solid;border-width:0} .article-figure::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px} .article-figure::after{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px} .credit{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)} .article-figure.bleed{background:none;color:var(--ink);padding:0} .article-figure.bleed::before,.article-figure.bleed::after{display:none} .article-figure.bleed img{aspect-ratio:16/9} .article-figure.bleed figcaption{position:relative;margin:-56px 0 0 auto;max-width:min(420px,86%);background:var(--ground);padding:18px 20px;z-index:1} .article-figure.bleed .cap{color:var(--ink)} .article-figure.bleed .credit{color:var(--quiet)} .article-figure.inset{background:none;color:var(--ink);border:1px solid var(--hair-2);padding:11px;display:grid;grid-template-columns:1fr 200px;gap:16px;align-items:end} .article-figure.inset::before,.article-figure.inset::after{display:none} .article-figure.inset img{aspect-ratio:4/3} .article-figure.inset figcaption{padding:0 0 4px} .article-figure.inset .cap{font-size:16px;color:var(--ink)} .article-figure.inset .credit{color:var(--quiet)} .article-figure.strip{background:none;color:var(--ink);padding:0} .article-figure.strip::before,.article-figure.strip::after{display:none} .article-figure.strip img{aspect-ratio:3/2} .article-figure.strip figcaption{padding:12px 0 0 14px;border-left:3px solid var(--accent)} .article-figure.strip .cap{color:var(--ink)} .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .gallery figure{background:var(--bone);color:var(--bone-ink);padding:10px 10px 0} .gallery img{width:100%;aspect-ratio:4/3;object-fit:cover} .gallery figcaption{padding:9px 2px 12px;font-size:14px;line-height:1.4} /* ── map ──────────────────────────────────────────────── */ .map-figure{margin:0} .map-slot{background:#071417;border:1px solid var(--hair-2)} .map-slot svg{display:block;width:100%;height:auto} .map-figure figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:9px} .map-pin circle{fill:var(--accent);stroke:#F6F2E8;stroke-width:2} .map-pin:hover circle{fill:#F6F2E8;stroke:var(--accent)} .map-pin{stroke:none} .map-pin text{paint-order:stroke;stroke:#071417;stroke-width:7px;stroke-opacity:.9} .map-pin text{font-family:var(--mono);font-size:27px;font-weight:700;fill:#F6F2E8;letter-spacing:.02em} .map-pin:hover circle{fill:var(--accent)} .map-pin:hover text{fill:#fff} /* ── article page ─────────────────────────────────────── */ .article__head{padding-block:clamp(28px,4.4vw,52px) 0} .crumb{display:flex;align-items:center;gap:10px;color:var(--accent)} .crumb .kicker{color:var(--accent)} .article__head h1{font-size:clamp(30px,5vw,62px);margin:16px 0 0;max-width:24ch} .article__deck{font-family:var(--display);font-size:clamp(19px,2.2vw,27px);line-height:1.44;color:var(--ink-2);margin:16px 0 0;max-width:34ch} .article__meta{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;margin-top:22px;padding-top:14px;border-top:1px solid var(--hair)} .article__meta .summary{font-size:15.5px;color:var(--ink-2);max-width:70ch} .lead{font-family:var(--display);font-size:clamp(19px,2vw,25px);line-height:1.46;color:var(--ink);margin:0 0 1em} .article__body{display:flex;flex-direction:column;gap:clamp(24px,3vw,38px);padding-block:clamp(26px,3.6vw,44px) 0} .prose{max-width:var(--measure)} .prose h2{font-size:clamp(24px,2.8vw,34px);margin:0 0 .5em} .prose h2+p{margin-top:0} .prose p{font-size:17.5px;line-height:1.72} .prose p+p{margin-top:0} .prose p.opener{font-size:19px;line-height:1.62;color:var(--ink)} .prose p.opener::first-line{letter-spacing:.005em} .num{font-family:var(--mono);font-size:.9em;font-weight:700;color:#E9A188;letter-spacing:.01em;white-space:nowrap} .band--bone .num,.article-figure .num{color:#9B3517} .prose em{font-style:italic} .full{max-width:none} .callout{background:var(--ground-2);border-top:2px solid var(--second);padding:20px 22px;margin:0;max-width:var(--measure);display:flex;flex-direction:column;gap:9px} .callout p{font-family:var(--display);font-size:19px;line-height:1.44;margin:0} .note{font-size:15.5px;color:var(--ink-2);border-left:3px solid var(--quiet);padding-left:14px;max-width:var(--measure)} .pullquote{margin:0;border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);padding:22px 0;max-width:var(--measure)} .pullquote p{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(21px,2.6vw,29px);line-height:1.4;margin:0} .blockquote{margin:0;max-width:var(--measure);border-left:3px solid var(--accent);padding-left:18px} .blockquote p{font-family:var(--display);font-size:20px;line-height:1.5;margin:0} .blockquote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)} .fieldnotes{border-top:2px solid var(--accent);background:var(--ground-2);padding:clamp(20px,3vw,30px)} .fieldnotes__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap} .fieldnotes h2{font-size:clamp(21px,2.4vw,28px)} .fieldnotes__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,34px);margin-top:20px} .fieldnotes h3{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--second);line-height:1.4} .fieldnotes ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .fieldnotes li{font-size:16px;line-height:1.5;color:var(--ink-2);display:grid;grid-template-columns:auto 1fr;gap:12px} .fieldnotes li::before{content:attr(data-n);font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);padding-top:3px} /* ── the figures strip ─────────────────────────────────── */ .datastrip{border-top:2px solid var(--accent);background:linear-gradient(180deg,rgba(214,74,42,.09),rgba(214,74,42,0) 70%);padding:20px 0 4px} .ds__head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:16px} .ds__head h2{font-size:clamp(20px,2.2vw,26px)} .ds__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:0} .ds__cell{display:flex;flex-direction:column;gap:8px;padding:4px 22px 20px 0;border-left:1px solid var(--hair);padding-left:20px} .ds__cell:first-child{border-left:0;padding-left:0} .ds__fig{font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,46px);line-height:.95;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums} .ds__label{font-size:15px;line-height:1.5;color:var(--ink-2)} .ds__label .num{color:var(--ink-2);font-weight:400} .related{border-top:1px solid var(--hair);padding:clamp(26px,3.4vw,44px) 0} .related-links{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0} .related-links li{border-top:1px solid var(--hair)} .related-links a{display:block;padding:14px 20px 16px 0;color:var(--ink)} .related-links .t{font-family:var(--display);font-size:20px;line-height:1.18;display:block} .related-links .b{font-size:14.5px;color:var(--ink-2);display:block;margin-top:6px} .further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .further-grid a{background:var(--ground-2);padding:16px 18px;color:var(--ink);font-family:var(--display);font-size:19px;line-height:1.2;border-top:2px solid var(--second)} .entity-ref{font-family:var(--text);border-bottom:1px solid var(--hair-2)} /* ── section / index pages ────────────────────────────── */ .section-head{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--hair);align-items:stretch} .section-head__text{align-self:center;padding:clamp(30px,4.6vw,56px) clamp(24px,3vw,48px) clamp(30px,4.6vw,56px) 0} .section-head h1{font-size:clamp(34px,6vw,62px)} .section-head p{font-size:clamp(16px,1.8vw,19px);color:var(--ink-2);margin:18px 0 0;max-width:46ch} .section-head__media{padding:clamp(20px,3vw,40px) 0 clamp(20px,3vw,40px) clamp(20px,3vw,40px);border-left:1px solid var(--hair);display:flex} .section-head__media .article-figure{width:100%;display:flex;flex-direction:column} .section-head__media .article-figure img{aspect-ratio:auto;flex:1 1 0;height:0;min-height:clamp(280px,30vw,460px);object-fit:cover} .cat-list{list-style:none;margin:0;padding:clamp(26px,4vw,46px) 0;display:grid;gap:clamp(20px,2.6vw,30px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .cat-list li{display:flex;flex-direction:column;background:var(--ground-2);padding:12px 12px 18px} .cat-list img{width:100%;aspect-ratio:16/10;object-fit:cover} .cat-list .no{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent);margin-top:12px;display:block} .cat-list h2{font-size:23px;line-height:1.15;margin-top:7px;min-height:2.3em} .cat-list p{font-size:15px;color:var(--ink-2);margin:8px 0 0} .datatable{width:100%;border-collapse:collapse;font-size:16px} .datatable caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);padding-bottom:10px} .datatable th{text-align:left;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);border-bottom:1px solid var(--hair-2);padding:8px 14px 8px 0} .datatable td{border-bottom:1px solid var(--hair);padding:13px 14px 13px 0;vertical-align:top;line-height:1.42} .datatable td:first-child{font-family:var(--mono);font-size:13px;color:var(--accent);width:64px} .datatable .t{font-family:var(--display);font-size:19px;line-height:1.2} .datatable tr:nth-child(2n) td{background:rgba(239,231,217,.03)} .versus{width:100%;border-collapse:collapse;font-size:16px} .versus th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);border-bottom:1px solid var(--hair-2);padding:8px 16px 8px 0} .versus td{border-bottom:1px solid var(--hair);padding:12px 16px 12px 0;vertical-align:top} .versus td:first-child{font-family:var(--display);font-size:18px} .timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair-2)} .timeline li{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:18px;padding:14px 0 14px 20px;position:relative} .timeline li::before{content:"";position:absolute;left:-4px;top:22px;width:7px;height:7px;background:var(--accent)} .t-when{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--second);line-height:1.4} .t-what{font-size:16px;line-height:1.5;color:var(--ink-2)} .chart{margin:0} .chart svg{width:100%;height:auto;overflow:visible} .chart .bar-fill{fill:var(--accent)} .chart .bar-label,.chart .axis{font-family:var(--mono);font-size:13px;fill:var(--ink-2)} .chart figcaption{margin-top:12px;font-size:14.5px;color:var(--ink-2)} .profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .profile-card{background:var(--ground-2);padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px} .profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover} .profile-card h3{font-size:22px} .profile-card .p-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--second);margin:0} .profile-card p{font-size:15.5px;color:var(--ink-2);margin:0} .profile-card .p-attr{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)} .org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .org-card{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;background:var(--ground-2);padding:14px 16px;color:var(--ink)} .org-card.no-logo{grid-template-columns:1fr} .org-logo{max-height:40px;width:auto;object-fit:contain} .org-name{font-family:var(--display);font-size:18px;line-height:1.2;display:block} .org-host{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--quiet);display:block;margin-top:3px} /* ── footer ───────────────────────────────────────────── */ .foot{background:#060F0E;border-top:2px solid var(--accent);padding:clamp(28px,3.6vw,44px) 0 40px;margin-top:clamp(30px,5vw,60px)} .foot__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,44px);align-items:center;padding-bottom:clamp(20px,2.6vw,30px);border-bottom:1px solid rgba(239,231,217,.14)} .foot__brand{display:flex;align-items:center;gap:14px;color:var(--accent)} .foot__brand span{font-family:var(--display);font-weight:600;font-size:30px;line-height:1;color:var(--ink)} .foot__line{margin:0;font-size:15.5px;line-height:1.5;color:var(--quiet);max-width:56ch} .foot__util{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase} .foot__util a{color:var(--ink-2)} .foot__util a:hover{color:var(--accent)} .foot__cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);padding-top:clamp(22px,2.8vw,32px)} .foot__sec{display:flex;align-items:center;gap:9px;color:var(--ink)} .foot__sec .mark{color:var(--second);width:20px;height:20px} .foot__sec span{font-family:var(--display);font-size:15px;font-weight:600} .foot__sec:hover span,.foot__sec:hover .mark{color:var(--accent)} .foot ul{list-style:none;margin:10px 0 0;padding:0 0 0 29px;display:flex;flex-direction:column;gap:6px} .foot a{color:var(--quiet);font-size:14px;line-height:1.4} .foot a:hover{color:var(--ink)} .foot__base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(24px,3vw,38px);padding-top:14px;border-top:1px solid rgba(239,231,217,.14);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5F6B67} /* ── responsive ───────────────────────────────────────── */ @media (max-width:1080px){ .index{grid-template-columns:repeat(3,1fr);gap:14px clamp(16px,2.2vw,34px)} .foot__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .foot__top{grid-template-columns:1fr;gap:16px} .split,.section-head{grid-template-columns:1fr} .split__text{padding-right:0} .section-head__media{padding-left:0;border-left:0} .standfirst{grid-template-columns:1fr} .figures3{grid-template-columns:1fr 1fr} } @media (max-width:900px){ /* the printed index keeps its five sections; the entry names live on the section pages and in the footer */ .index{grid-template-columns:repeat(3,1fr);gap:2px 20px;padding:12px 0 14px} .index__list{display:none} .index__head{min-height:42px} .index__head span{font-size:16px} .index__foot{gap:0 18px;padding:8px 0} .index__foot a{padding:7px 0} } @media (max-width:720px){ body{font-size:16.5px} .index{grid-template-columns:repeat(2,1fr)} .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))} .card{grid-template-columns:1fr} .card img{min-height:190px} .two-col,.figures3{grid-template-columns:1fr} .sponsor-row{grid-template-columns:1fr} .article-figure.inset{grid-template-columns:1fr} .article-figure.bleed figcaption{margin:-24px 0 0;max-width:100%} .timeline li{grid-template-columns:1fr;gap:4px} .sponsor,.sponsor.feat{min-height:0} .masthead__meta{align-items:flex-start;text-align:left} .datatable td:nth-child(3),.datatable th:nth-child(3){display:none} } @media (max-width:700px){ .map-pin text{font-size:40px;stroke-width:9px} .map-pin--minor text{display:none} .map-pin circle{r:9} } @media (max-width:560px){ .ds__grid{grid-template-columns:1fr} .ds__cell{border-left:0;border-top:1px solid var(--hair);padding:14px 0 16px} .ds__cell:first-child{border-top:0;padding-top:0} .index{grid-template-columns:repeat(2,1fr);gap:2px 16px;padding:10px 0 12px} .index__head{min-height:40px} .index__foot{font-size:11px} .index__foot span{display:none} .masthead__meta span:first-child{display:none} .entry-list a{padding:16px 0} .related-links a{padding:16px 20px 18px 0} .foot ul a{display:inline-block;padding:8px 0} .foot__cols{grid-template-columns:1fr 1fr} .foot__util a{padding:6px 0} .masthead__top{padding:14px 0 12px;gap:12px} .brand{gap:12px} .brand__mark{width:78px;height:42px} .brand__name{font-size:32px} .masthead__meta{font-size:11px;gap:3px;letter-spacing:.14em;align-items:flex-start;text-align:left} .brand__line{font-size:11px} .credit,.article-figure .credit{font-size:11px} .foot__base{font-size:11px;line-height:1.5} } @media (max-width:380px){ .index{grid-template-columns:1fr} .foot__cols{grid-template-columns:1fr} } @media print{ body{background:#fff;color:#111} .masthead,.foot,.supporters{border-color:#ccc} } /* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size, padding, panel and object-fit are untouched. */ .sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block} .sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center} /* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in every row, whatever the count. Only flex-grow is touched. */ .sponsor{flex-grow:0!important} .sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important} /* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */ .sponsor-blurb:not(:empty){display:block!important;line-height:1.5} /* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */ .sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's size. width:100% (or one fixed width where copy shares the row) + one height for the tier + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside it. A ground and an inset are added ONLY where none exists — adding a second ground gives co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */ .sponsor-row .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important} /* op-nav-collapse: this nav printed 238px of stacked links at 390 before any content (28 links), and the build shipped no control to close it. A disclosure cannot be built from CSS alone — :hover and :focus-within are unreachable on touch until a link has already been tapped — so a hidden checkbox and its label were injected immediately before the nav, and the nav collapses against the checked state. Exactly the mechanism the builds that DO have a burger already use. Treatment "filled-soft", bold, seeded from the domain so 175 builds do not all ship the same hairline box in the same place; it inherits this build's font and colour, and where the nav's own parent has no inline padding (0px measured) the button carries the build's gutter (clamp(18px,4vw,44px)) so it cannot sit against the glass. The links are hidden, not removed: they stay in the markup. Desktop is untouched — every rule below is inside the phone breakpoint (860px here), where the button appears and the nav starts closed. Folded with the "display" technique and marked with the "chevron" icon — the mechanism is deliberately not identical across the fleet either. */ .nav-disclose{display:none} @media (max-width:860px){ .nav-disclose{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:0;border-radius:2px;padding:12px 20px;background:color-mix(in srgb, currentColor 14%, transparent);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)} .nav-disclose-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)} /* ⚠️ `.wrap` IS THIS BUILD'S PAGE CONTAINER, NOT ITS NAV. The nav happens to carry the same class (