/* Layout: the design is a 1920 x 1080 frame. The frame is scaled to fit the window and every
   position below is taken from the design PDF in that 1920 x 1080 space. */
@font-face { font-family: "Corner B"; src: url(fonts/CornerB-Fat.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Arketa"; src: url(fonts/OOArketa-Regular.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "GT Mechanik Semi"; src: url(fonts/GT-Mechanik-Semi-Light.woff2) format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "GT Mechanik Semi"; src: url(fonts/GT-Mechanik-Semi-Regular.woff2) format("woff2"); font-weight: 400; font-display: block; }
:root {
  /* Colours read from the design PDF */
  --bg: #282828;        /* page */
  --panel: #000000;     /* chapter list */
  --rule: #505050;      /* hairlines, inactive pins */
  --text: #DCDCDC;      /* title, inactive list text, inactive dots */
  --text-on: #FAFAFA;   /* active chapter text */
  --white: #FFFFFF;     /* centre title, Q mark */
  --blue: #1C58C7;      /* active dot + pins */
  --red: #FD3D16;       /* More info ring */
  --font-display: "Corner B", "Arial Black", sans-serif;
  --font-mono: "Arketa", ui-monospace, monospace;
  --font-sans: "GT Mechanik Semi", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
html { scroll-snap-type: y mandatory; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
#story section { height: 100vh; scroll-snap-align: start; }

.viewport { position: fixed; inset: 0; overflow: hidden; background: var(--bg); transition: background .8s ease; }

/* Intro screen (before the chapters): black page, blue map, white pins, large two-line title.
   Measured from the intro mockup; the map keeps the same placement as the chapters. */
.viewport.intro { background: #000000; }
.viewport.intro .pin { pointer-events: none; cursor: default; }
/* Map: state shapes from the SVG. Fill matches the earlier map (black, blue on the cover); the 1 px state outlines
   take the page background colour and never scale with the map or the zoom. */
#land path { fill: #000000; stroke: var(--bg); stroke-width: 1px; stroke-miterlimit: 10; vector-effect: non-scaling-stroke; transition: fill .8s ease, stroke .8s ease; }
.viewport.intro #land path { fill: #1C2692; stroke: #000000; }
.viewport.intro .pin { fill: #505050; }
.intro-title {
  position: absolute; left: 960px; top: 424.15px; margin: 0; pointer-events: none;
  font: 400 115.5px/107px var(--font-display); color: var(--text); white-space: nowrap;
  opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease;
}
.viewport.intro .intro-title { opacity: 1; transform: none; }
.panel, .headline, .qmark { transition: opacity .6s ease; }
.viewport.intro .panel, .viewport.intro .headline, .viewport.intro .ring, .viewport.intro .qmark { opacity: 0; pointer-events: none; }
.frame { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }

/* Map: artwork placed at x 107, y 56, 1706 x 1000 (as in the PDF) */
#map { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.pin { fill: var(--rule); cursor: pointer; transition: fill .6s; }
.pin.on { fill: var(--blue); }
.pin:focus-visible { outline: none; stroke: var(--white); }

/* Chapter list panel: 492.4 px wide, black at 80% opacity. The list is widened by 12.4 px so its
   hairlines end exactly where the Q-VENT USA JOURNEY title ends (420.4 px wide in Corner B Fat 42).
   Text positions below are set so each line's capital height starts exactly where the PDF puts it. */
.panel { position: absolute; left: 0; top: 0; width: 492.4px; height: 1080px; background: transparent; transition: background .35s; }
.panel::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 3000px; background: inherit; }
.panel.open { background: rgba(0, 0, 0, .8); }
.brand { position: absolute; left: 48px; top: 35.4px; margin: 0; font: 400 42px/1 var(--font-display); color: var(--text); white-space: nowrap; pointer-events: none; }
/* Title reads Q-US while the list is hidden, and the full name when it is open */
.brand .full { display: none; }
.panel.open .brand .full { display: inline; }
.panel.open .brand .short { display: none; }
.list { position: absolute; left: 48px; top: 102.2px; width: 420.4px; margin: 0; padding: 0; list-style: none; }

/* Each row gets 2 px extra at the bottom so the list runs to y 1032, level with the Q mark's base */
.chapter { position: relative; display: grid; grid-template-columns: 228.4px 192px; align-items: start; padding-bottom: 1.98px; border-top: .735px solid transparent; cursor: pointer; }
.chapter:last-child { border-bottom: .735px solid transparent; }
.panel.open .chapter { border-color: var(--rule); }
.c-name {
  all: unset; display: block; position: relative; box-sizing: border-box; cursor: pointer; align-self: start;
  padding: 8.8px 0 7.7px; font: 400 14px/16px var(--font-mono); color: var(--text);
  opacity: 0; transition: opacity .3s;
}
/* The active name is laid over the row, so the larger 22 px text never changes the row height or moves the dots */
.c-name .a { display: none; }
.chapter.on .c-name .n { visibility: hidden; }
.chapter.on .c-name .a { display: block; position: absolute; left: 0; top: 7.46px; width: 228.4px; font: 400 22px/22px var(--font-sans); color: var(--text-on); }
.c-name:focus-visible { outline: 1px solid var(--blue); outline-offset: 2px; }
.projects { list-style: none; margin: 0; padding: 0; opacity: 0; transition: opacity .3s; }
.projects li { padding: 8.06px 0 10.5px; border-top: .735px solid var(--rule); }
.projects li:first-child { border-top: 0; }
.p-name { display: block; font: 300 12px/15px var(--font-sans); color: var(--text); }
.p-city { display: block; margin-top: 3.94px; font: 400 10px/10px var(--font-mono); text-transform: uppercase; color: var(--text); }
.chapter.on .p-name, .chapter.on .p-city { color: var(--text-on); }
.panel.open .c-name, .panel.open .projects { opacity: 1; }

/* Dots: centred at x 32 (16 px left of the list), on the chapter's first line */
.dot { position: absolute; left: -19px; top: 13.9px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); transition: all .3s; }
.chapter.on .dot { left: -24px; top: 13.6px; width: 16px; height: 16px; background: var(--blue); }

/* Centre title: GT Mechanik Semi 54, white, centred on the frame */
.headline {
  position: absolute; left: 960px; top: 509.3px; transform: translateX(-50%);
  margin: -60px 0 0; padding: 60px 90px; border: 0; background: none; cursor: pointer;
  font: 400 54px/1 var(--font-sans); color: var(--white); white-space: nowrap;
}
.headline .label { display: inline-block; }
.headline .label.swap { animation: swap .5s ease; }
@keyframes swap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.headline:focus-visible { outline: 1px solid var(--red); outline-offset: -40px; }
@media (hover: hover) and (pointer: fine) { .headline { cursor: none; } }

/* More info ring: 157 px, 1.6 px red line, label 19 px; follows the cursor over the title */
.ring {
  position: absolute; left: 1110.6px; top: 499.3px; width: 157.3px; height: 157.3px; box-sizing: border-box;
  border: 1.6px solid var(--red); border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  font: 400 19px/1 var(--font-sans); color: var(--red); text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .2s, transform .25s;
}
.ring.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .ring { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.qmark { position: absolute; left: 1824px; top: 951px; width: 48px; height: 81px; pointer-events: none; }

/* Screen-space UI (not part of the design frame) */
.close {
  position: absolute; top: 22px; right: max(22px, env(safe-area-inset-right, 0px)); background: none; border: .735px solid var(--rule);
  color: var(--text-on); font: 400 11px/1 var(--font-mono); padding: 8px 10px; cursor: pointer; text-transform: uppercase;
}
/* Prototype toolbar steps aside while the More Info sheet is open, so it never covers the close button */
body.sheet-open .proto { opacity: 0; pointer-events: none; }
/* On touch screens the ring is a static hint on the title; hide it while the sheet is open */
.frame.info-open .ring:not(.show) { opacity: 0; }
.proto { position: fixed; z-index: 9; transition: opacity .3s; top: 18px; right: max(18px, env(safe-area-inset-right, 0px)); display: flex; gap: 8px; font: 400 11px/1 var(--font-mono); }
.proto button, .proto label { background: #1a1a1a; border: 1px solid #444; color: #cfcfcf; padding: 7px 10px; cursor: pointer; font: inherit; display: inline-flex; gap: 6px; align-items: center; }
.proto input { accent-color: var(--blue); margin: 0; }
.tip { position: fixed; z-index: 7; pointer-events: none; background: #000; border: .735px solid var(--rule); padding: 6px 8px; font: 300 12px/1.2 var(--font-sans); color: var(--text-on); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.tip span { display: block; font: 400 9px/1.3 var(--font-mono); color: var(--text); text-transform: uppercase; }

.notes { position: fixed; z-index: 12; inset: 0; background: rgba(8,8,8,.97); overflow-y: auto; padding: 64px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
.notes-inner { max-width: 980px; margin: 0 auto; }
.notes h2 { font: 400 28px/1 var(--font-display); color: var(--text); margin: 0 0 10px; }
.notes h3 { font: 400 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--red); margin: 36px 0 12px; }
.notes p, .notes li { font: 300 15px/1.55 var(--font-sans); color: #e6e6e6; max-width: 72ch; }
.notes b { font-weight: 400; color: var(--white); }
.notes code { font: 400 12px var(--font-mono); color: var(--text-on); }
.notes ul { padding-left: 18px; margin: 0; display: grid; gap: 6px; }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font: 300 13px/1.35 var(--font-sans); color: #e6e6e6; }
th, td { text-align: left; padding: 7px 12px 7px 0; border-bottom: .735px solid var(--rule); vertical-align: top; }
th { font: 400 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
td.num { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip { font: 400 10px/1 var(--font-mono); padding: 3px 6px; border: 1px solid; white-space: nowrap; }
.chip.verified { color: #7fc97f; } .chip.address { color: #b9c4ff; } .chip.approximate { color: #f0b85a; } .chip.city { color: var(--red); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }
/* More Info sheet: a layer of blue tracing paper laid over the map. Measured from the More Info draft
   (1920 x 1080 frame). Blue at 84% over a 16 px blur, with a fine code-generated grain. */
.sheet { position: absolute; inset: 0; z-index: 5; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.sheet.open { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.sheet-paper { position: absolute; inset: 0; background: rgba(28, 38, 146, .84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.sheet-paper::after { content: ""; position: absolute; inset: 0; background-image: var(--grain, none); background-size: 192px 192px; opacity: .17; mix-blend-mode: overlay; pointer-events: none; }
.sheet-scroll {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, #000 128px);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, #000 128px);
}
.sheet-scroll::-webkit-scrollbar { display: none; }
.sheet-content { padding-bottom: 140px; transform: translateY(14px); transition: transform .5s ease; }
.sheet-grid { display: grid; grid-template-columns: 168px 288px 72px 902px 72px 370px; align-items: start; }
/* Project photos: cut-outs with transparent skies, full sheet width, so the blue paper becomes the sky */
.gallery { margin-top: 160px; display: flex; flex-direction: column; gap: 96px; }
.gallery img { display: block; width: 100%; height: auto; }
.sheet.open .sheet-content { transform: none; }

/* Header: US JOURNEY left, Q-VENT centred, Close right */
.sheet-head { position: absolute; left: 0; top: 0; width: 1920px; height: 100px; pointer-events: none; }
.sh-left, .sh-center { position: absolute; top: 35.4px; font: 400 42px/1 var(--font-display); color: var(--text); white-space: nowrap; }
.sh-left { left: 48px; }
.sh-center { left: 960px; transform: translateX(-50%); }
/* Close: the More info ring's language, smaller — a 56 px red circle (1.6 px line) with an X, centred on the header line */
.sh-close {
  position: absolute; right: 48px; top: 30.5px; width: 56px; height: 56px; pointer-events: auto; cursor: pointer;
  background: none; border: 0; padding: 0; transition: transform .25s ease;
}
.sh-close svg { display: block; width: 56px; height: 56px; overflow: visible; }
.sh-close circle, .sh-close path { fill: none; stroke: var(--red); stroke-width: 1.6px; }
.sh-close:hover { transform: scale(1.08); }
.sh-close:focus-visible { outline: 1px solid var(--white); outline-offset: 6px; border-radius: 50%; }

/* Photos: x 168, 288 wide (placeholders until the photos arrive) */
.photos { grid-column: 2; display: flex; flex-direction: column; gap: 24px; padding-top: 110px; }
.ph { border: .735px dashed rgba(255, 255, 255, .45); display: grid; place-items: center; font: 400 12px/1 var(--font-mono); color: rgba(255, 255, 255, .7); text-transform: uppercase; }

/* Text: labels at x 528 (Arketa 18), body at x 720 (GT Mechanik Semi 24 on 28) */
.textcol { grid-column: 4; display: flex; flex-direction: column; }
.above { margin-top: 110px; min-height: 361px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.below, .essay { display: flex; flex-direction: column; gap: 7px; }
.below { margin-top: 52.5px; }
.essay { margin-top: 84px; }
.row { display: grid; grid-template-columns: 192px 710px; }
.lbl { padding-top: 1.75px; padding-right: 16px; font: 400 18px/26px var(--font-mono); color: var(--text); text-transform: uppercase; }
.lbl .sub { color: rgba(220, 220, 220, .7); }
.txt { font: 300 22px/26px var(--font-sans); color: var(--white); }
.s-title-row { display: grid; grid-template-columns: 192px 710px; margin-top: 40.3px; }
.s-title {
  grid-column: 2; justify-self: start; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  font: 400 54px/54px var(--font-sans); color: var(--white); text-wrap: balance;
}
@media (hover: hover) and (pointer: fine) { .s-title { cursor: none; } }
.s-title:focus-visible { outline: 1px solid var(--white); outline-offset: 8px; }

/* Credits: x 1502, label 69 + value, GT Mechanik Semi 12 uppercase on 22, hairlines */
.credits { grid-column: 6; padding-top: 522px; display: flex; flex-direction: column; gap: 32px; }
.cblock { border-bottom: .735px solid rgba(255, 255, 255, .5); }
.crow { display: grid; grid-template-columns: 69px 301px; padding-bottom: 10px; border-top: .735px solid rgba(255, 255, 255, .5); font: 400 12px/22px var(--font-sans); color: var(--white); text-transform: uppercase; }

/* While the sheet is open */
.frame.info-open .headline, .frame.info-open .brand, .frame.info-open .qmark { opacity: 0; pointer-events: none; }
.frame.info-open .dot { background: var(--white); }
.ring { z-index: 8; }
.panel { z-index: 6; }

/* Responsive mode: the frame fills the window. The map scales to fit; every font keeps its pixel size.
   Positions that were set in the 1920 x 1080 frame are re-anchored to the window's edges or centre. */
.viewport.resp .frame { width: var(--fw); height: var(--fh); }
.resp #map { width: 100%; height: 100%; }
.resp .panel { height: 100%; overflow-y: auto; scrollbar-width: none; }
.resp .panel::-webkit-scrollbar { display: none; }
.resp .headline { left: 50%; top: calc(50% - 30.7px); }
.resp .ring { left: calc(50% + 150.6px); top: calc(50% - 40.7px); }
.resp .intro-title { left: 50%; top: calc(50% - 115.85px); }
.resp .qmark { left: auto; top: auto; right: 48px; bottom: 48px; }
.resp .sheet-head { width: 100%; }
.resp .sheet-grid { grid-template-columns: minmax(48px, 168px) 288px minmax(32px, 72px) minmax(0, 902px) minmax(32px, 72px) 370px; }
.resp .row, .resp .s-title-row { grid-template-columns: 192px minmax(0, 710px); }
.resp .above { min-height: max(0px, calc(var(--fh) / 2 - 179px)); }
.resp .credits { padding-top: calc(var(--fh) / 2 - 18px); }
/* Below 1600 px wide the credits move under the text */
.narrow .sheet-grid { grid-template-columns: minmax(48px, 168px) 288px minmax(32px, 72px) minmax(0, 902px) 48px; }
.narrow .credits { grid-column: 4; padding-top: 56px; }
.narrow .photos { grid-row: 1 / span 2; }

/* The list only takes pointer events while open, so pins and photos under it stay usable */
.panel:not(.open) { pointer-events: none; }