/* Archivo, self-hosted (SIL Open Font Licence 1.1, see src/fonts/OFL.txt). These are the
   variable woff2 files Google Fonts serves, split by the same unicode ranges; each file
   carries the full wght 100-900 and wdth 62-125 axes, so one face covers every weight
   and the 125% stretch of the 56 mark. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('/_astro/archivo-latin-ext.7khWdh9v.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('/_astro/archivo-latin.DY7AcnAa.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* fiftysixoperators.com. Values ported verbatim from design/reference.html.html; keep them. */
:root{--paper:#F4F2ED;--ink:#121A24;--body:#3A4452;--muted:#5B6572;--rule:#D7D3CA;--num:#8A929D;--slate:#1A2430;--onslate:#D6DBE1}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:'Archivo','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:#4A5563}
.split{min-height:100vh;display:flex;flex-wrap:wrap;align-items:stretch}
.copy{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:64px;padding:36px clamp(24px,5vw,72px) 28px}
header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px 24px}
.wordmark{text-decoration:none;font-size:17px;letter-spacing:-.01em}.wordmark b{font-weight:600}
.where{font-size:13px;letter-spacing:.02em;color:var(--muted)}
main{display:flex;flex-direction:column;gap:40px;max-width:620px}
.eyebrow{margin:0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{margin:0;font-size:clamp(40px,4.8vw,66px);line-height:1.02;font-weight:600;letter-spacing:-.03em}
/* Replaces the reference's inline style="margin-top:24px" on the h1 (CSP forbids style attributes). */
.headline{margin-top:24px}
.intro{display:flex;flex-direction:column;gap:18px;font-size:17px;line-height:1.6;color:var(--body)}.intro p{margin:0}
.services{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule);font-size:16px}
.services li{border-top:1px solid var(--rule);padding:13px 0;display:flex;justify-content:space-between;gap:16px}
.services li span:last-child{color:var(--num)}
.contact p{margin:0 0 8px;font-size:13px;color:var(--muted)}
.contact a{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.01em;text-underline-offset:6px;text-decoration-thickness:1px;word-break:break-all}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:12px;line-height:1.6;color:var(--muted)}
footer p{margin:0;max-width:520px}footer a{color:var(--muted)}
.panel{flex:1 1 440px;min-width:0;position:relative;min-height:460px;overflow:hidden;background:var(--slate);color:var(--onslate)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;transform:scale(1)}
.slide.on{opacity:1;z-index:2;animation:zoom 7.6s ease-out forwards}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.scrim{position:absolute;left:0;right:0;bottom:0;height:160px;background:rgba(10,14,20,.28);z-index:3}
.label{position:absolute;top:36px;right:clamp(24px,4vw,56px);z-index:4;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:right;line-height:1.7}
.mark{position:absolute;left:-.03em;bottom:-.16em;z-index:3;font-size:clamp(300px,36vw,620px);font-weight:700;font-stretch:125%;line-height:.8;letter-spacing:-.06em;color:rgba(244,242,237,.12);user-select:none;pointer-events:none}
.caption{position:absolute;left:clamp(24px,4vw,56px);right:clamp(24px,4vw,56px);bottom:28px;z-index:4;display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.slide,.slide.on{transition:none;animation:none;transform:none}}

/* --- Additions beyond the reference --- */

/* Lazy slides: until the full image arrives, each slide shows its 24px poster
   (per-slide classes live in posters.css, generated by `npm run photos`). */
.slide{background-size:cover;background-position:center}

/* The columns wrap below 1000px (flex-basis 560 + 440): pin the panel at 460px under the copy. */
@media (max-width:999px){.panel{flex-basis:100%;height:460px}.panel-plain{display:none}}

/* Secondary pages (privacy, credits, 404): same typography as the copy column. */
.prose{display:flex;flex-direction:column;gap:18px;font-size:17px;line-height:1.6;color:var(--body)}
.prose p,.prose ul{margin:0}
.prose ul{padding-left:1.2em}
.prose h2{margin:22px 0 0;font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.prose a{word-break:break-word}
.credits{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule);font-size:16px}
.credits li{border-top:1px solid var(--rule);padding:13px 0;display:flex;justify-content:space-between;gap:16px}
.credits li>span:last-child{color:var(--num)}
.credits .detail{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:var(--muted)}
.credits .detail a{color:var(--muted)}

/* Contrast: the reference --num (#8A929D) is 2.8:1 on paper; this is the nearest
   shade of the same grey that meets WCAG AA 4.5:1 for the 16px service numbers. */
:root{--num:#696F77}
/* Generated by `npm run photos` from src/data/photos.json. Do not edit by hand. */
.s2{background-image:url(/media/02-assembly-poster.webp)}
.s3{background-image:url(/media/03-logistics-poster.webp)}
.s4{background-image:url(/media/04-port-poster.webp)}
.s5{background-image:url(/media/05-london-poster.webp)}
.s6{background-image:url(/media/06-silicon-poster.webp)}
.s7{background-image:url(/media/07-datacentre-poster.webp)}
.s8{background-image:url(/media/08-components-poster.webp)}