/* ==================================================================
   THE PAGE BELOW THE HERO: the curtain, what we've built, the idea, the
   flat map, pons and the footer. Ported from reference/landing-1440.html
   (the finished design at 1440, in _handoff, never deployed): the class
   names and every value are the reference's unless a comment says why.
   Widths: 1440 and up the content stops at 1360 and centres; 1200 to
   1439 padding 40; 768 to 1199 padding 32; under 768 padding 20. The
   idea takes its phone layout below 900.
   ================================================================== */

@font-face {
  font-family: "WIF Par";
  src: url("../fonts/WIFPar-Flat0.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; color: #EDE4CF;
  font-family: "WIF Par", ui-monospace, monospace;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
[hidden-pending] { visibility: hidden; }

/* the frames: the reference's clip-path and border-image. The stroke is
   its 1.5px, cream at 0.34, at dpr 2 (3 device pixels). At dpr 1 and 3 a
   1.5px stroke falls between pixels, so the line is the same whole number
   of device pixels the hero's frames round to: 2 at dpr 1, 5 at dpr 3. */
:root {
  --pad: 40px;
  --line-1: 1.5px;
  --cut-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2254%22%20height%3D%2254%22%3E%3Cpath%20d%3D%22M14.75%200.75%20H53.25%20V39.25%20L39.25%2053.25%20H0.75%20V14.75%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EDE4CF%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.5%22/%3E%3C/svg%3E");
  --cut-s: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20d%3D%22M8.75%200.75%20H35.25%20V27.25%20L27.25%2035.25%20H0.75%20V8.75%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EDE4CF%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.5%22/%3E%3C/svg%3E");
  /* keyboard focus: a clip path clips an outline, so the ring is the frame's own line, in lime and heavier */
  --cut-l-focus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2254%22%20height%3D%2254%22%3E%3Cpath%20d%3D%22M15%201%20H53%20V39%20L39%2053%20H1%20V15%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23CFEF5B%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
  --cut-s-focus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20d%3D%22M9%201%20H35%20V27%20L27%2035%20H1%20V9%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23CFEF5B%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
}
@media (max-resolution: 1.49dppx) {
  :root {
    --line-1: 2px;
    --cut-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2254%22%20height%3D%2254%22%3E%3Cpath%20d%3D%22M15%201%20H53%20V39%20L39%2053%20H1%20V15%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EDE4CF%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
    --cut-s: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20d%3D%22M9%201%20H35%20V27%20L27%2035%20H1%20V9%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EDE4CF%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
  }
}
@media (min-resolution: 2.5dppx) {
  :root {
    --line-1: 1.6667px;
    --cut-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2254%22%20height%3D%2254%22%3E%3Cpath%20d%3D%22M14.8333%200.8333%20H53.1667%20V39.1667%20L39.1667%2053.1667%20H0.8333%20V14.8333%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EDE4CF%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.6667%22/%3E%3C/svg%3E");
    --cut-s: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2236%22%3E%3Cpath%20d%3D%22M8.8333%200.8333%20H35.1667%20V27.1667%20L27.1667%2035.1667%20H0.8333%20V8.8333%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23EDE4CF%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%221.6667%22/%3E%3C/svg%3E");
  }
}
.c-l { position: relative; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.c-l::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 18px solid transparent; border-image: var(--cut-l) 18 stretch; z-index: 2; }
.c-s { position: relative; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.c-s::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 12px solid transparent; border-image: var(--cut-s) 12 stretch; z-index: 2; }

/* links and focus, below the hero as in it */
.reveal a, .ideasec a, .mapsec a, .ponsec a, .foot a { color: #EDE4CF; text-decoration: none; transition: color .16s ease-out, background-color .16s ease-out; }
.reveal a:hover, .ideasec a:hover, .mapsec a:hover, .ponsec a:hover, .foot a:hover { color: #CFEF5B; }
.reveal :focus-visible, .ideasec :focus-visible, .mapsec :focus-visible, .ponsec :focus-visible, .foot :focus-visible {
  outline: 2px solid #CFEF5B; outline-offset: 3px;
}
.c-s:focus-visible, .c-l:focus-visible { outline: none; }
.c-s:focus-visible::after { border-image: var(--cut-s-focus) 12 stretch; }
.c-l:focus-visible::after { border-image: var(--cut-l-focus) 18 stretch; }
button { font: inherit; color: inherit; }

/* a tabpanel holds keyboard focus but is not a control: the ring stays inside its plate */
.ipane:focus-visible { outline-offset: -8px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* skip link: visible on focus */
.skip {
  position: fixed; z-index: 60; left: 16px; top: -80px;
  display: inline-flex; align-items: center; height: 44px; padding: 0 16px;
  background: #0E0E0B; color: #CFEF5B; font-size: 14px; letter-spacing: 0.06em; text-decoration: none;
  outline: 1px solid rgba(237, 228, 207, 0.6);
}
.skip:focus { top: max(16px, env(safe-area-inset-top)); }
.wh-main:focus { outline: none; }

/* the content column */
.wrap { position: relative; width: 100%; max-width: 1360px; margin-left: auto; margin-right: auto; }
.wrap--foot { container-type: inline-size; }

/* images below the hero wait until they are near (landing.js, .in) */
.js [data-lazy]:not(.in)::before, .js [data-lazy]:not(.in)::after { background-image: none !important; }
.js .ic2bg[data-lazy]:not(.in), .js .vcgq[data-lazy]:not(.in) { background-image: none !important; }

/* --- the curtain: the hero scrolls away and uncovers what is under it.
   The hero sits above (z-index 2). .reveal starts back up behind it, by
   the hero's height, and .sec sticks to the top of the screen while the
   curtain lifts; .spacer is the room it has to do that in. The heights
   are the reference's 900px as the hero's height, which is 100svh, and
   grows on a phone where the hero is taller than the screen. */
.wh { z-index: 2; }
.reveal { position: relative; z-index: 1; margin-top: calc(-1 * var(--hero-h, 100svh)); }
.reveal-anchor { position: absolute; left: 0; top: var(--hero-h, 100svh); width: 1px; height: 1px; }
.spacer { height: var(--hero-h, 100svh); }
.sec { position: sticky; top: 0; padding: 0 var(--pad) 160px; background: #0E0E0B; color: #EDE4CF; }
@supports (animation-timeline: scroll()) {
  .sec {
    animation: lift linear both; animation-timeline: scroll(root block);
    animation-range: calc(var(--hero-h, 100svh) * 0.2444) calc(var(--hero-h, 100svh) * 0.7);
  }
}
@keyframes lift { from { opacity: 0.4; } to { opacity: 1; } }
@supports not (position: sticky) {
  .reveal { margin-top: 0; } .spacer { display: none; } .reveal-anchor { top: 0; }
}

/* the storm ships, with the fine 3 x 2 pixel mask */
.bbg { position: absolute; left: 0; right: 0; top: 0; height: 1000px; pointer-events: none; overflow: hidden; }
.bbg::before, .bbg::after {
  content: ""; position: absolute; inset: 0;
  background: url("../images/built-ships@1x.webp") 50% 0 / max(1440px, 100%) auto no-repeat;
  background-image: image-set(url("../images/built-ships@1x.webp") 1x, url("../images/built-ships@2x.webp") 2x);
}
.bbg::before { opacity: 0.55; }
.bbg::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='1'/%3E%3C/svg%3E") 0 0 / 3px 2px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='1'/%3E%3C/svg%3E") 0 0 / 3px 2px repeat;
}
.shead { box-sizing: border-box; height: calc(100svh - 180px); min-height: 280px; padding-bottom: 56px; display: flex; justify-content: space-between; align-items: flex-end; }
.shead h2 { margin: 0; font-size: 72px; line-height: 1; font-weight: 400; }
.cards { display: flex; flex-direction: column; gap: 24px; }

/* --- the cards --------------------------------------------------------- */
.pcard {
  display: flex; gap: 56px; align-items: flex-start; height: 520px; padding: 48px;
  background: rgba(20, 20, 17, 0.46);
  -webkit-backdrop-filter: blur(18px) brightness(1.25); backdrop-filter: blur(18px) brightness(1.25);
  scroll-margin-top: 24px;
}
.pcard--art { background: #0E0E0B; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pcard--art > *:not(.cbg), .pcard--art > .pbody > *:not(.hcount) { position: relative; }
.pbody { display: contents; }
.cbg { position: absolute; inset: 0; pointer-events: none; }
.cbg::before {
  content: ""; position: absolute; inset: 0;
  background: url("../images/hackathon-bridge@1x.webp") 50% 50% / cover no-repeat;
  background-image: image-set(url("../images/hackathon-bridge@1x.webp") 1x, url("../images/hackathon-bridge@2x.webp") 2x);
}
.cbg.fbg::before {
  background: url("../images/fair-clouds-hands@1x.webp") 50% 50% / cover no-repeat;
  background-image: image-set(url("../images/fair-clouds-hands@1x.webp") 1x, url("../images/fair-clouds-hands@2x.webp") 2x);
}
.cbg.dbg::before {
  background: url("../images/flat-lines@1x.webp") 50% 50% / cover no-repeat;
  background-image: image-set(url("../images/flat-lines@1x.webp") 1x, url("../images/flat-lines@2x.webp") 2x);
}

.hhead { display: flex; flex-direction: column; width: 640px; flex: none; padding-top: 2px; }
.heb { font-size: 12px; letter-spacing: 0.14em; color: rgba(237, 228, 207, 0.78); display: inline-flex; gap: 10px; align-items: center; }
.htitle { margin: 18px 0 0; font-size: 54px; line-height: 1; font-weight: 400; letter-spacing: -0.005em; white-space: nowrap; }
.hkey { margin: 22px 0 0; font-size: 20px; line-height: 1.35; color: #EDE4CF; }
.hbtns { display: flex; gap: 12px; margin-top: 42px; }
.reveal a.hbtn { color: #EDE4CF; }
.hbtn {
  display: inline-flex; align-items: center; gap: 14px; height: 46px; padding: 0 20px;
  background: rgba(20, 20, 17, 0.5);
  -webkit-backdrop-filter: blur(12px) brightness(1.25); backdrop-filter: blur(12px) brightness(1.25);
  font-size: 14px; letter-spacing: 0.06em; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.reveal a.hbtn.lime { color: #CFEF5B; }
.reveal a.hbtn:hover { color: #CFEF5B; }
.hbtn .ic, .ppbtn .ic { display: inline-flex; transition: transform .18s ease-out; }
.hbtn:hover .ic, .ppbtn:hover .ic { transform: translateX(3px); }

.hcount { position: absolute !important; right: 48px; top: 46px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hcn { font-size: 40px; line-height: 1; }
.hcl { font-size: 11px; letter-spacing: 0.12em; color: rgba(237, 228, 207, 0.55); }

.hbar { position: absolute !important; left: 48px; right: 48px; bottom: 40px; display: flex; align-items: flex-end; gap: 44px; }
.cdw { display: flex; flex-direction: column; gap: 12px; flex: none; }
.cdd { display: flex; align-items: flex-end; gap: 4px; }
/* a digit: only the reel inside it moves */
.dg { position: relative; width: 28px; height: 38px; overflow: hidden; display: inline-block; font-size: 24px; background: rgba(14, 14, 11, 0.78); border: 1px solid rgba(237, 228, 207, 0.2); }
.dgr { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; }
.dgr > span { height: 36px; display: flex; align-items: center; justify-content: center; flex: none; }
.dgr.roll { transition: transform .3s linear; transform: translateY(-36px); }
.u { font-size: 12px; color: rgba(237, 228, 207, 0.8); margin: 0 10px 4px 4px; }
.u:last-child { margin-right: 0; }
.cdl { font-size: 12px; letter-spacing: 0.08em; color: rgba(237, 228, 207, 0.79); }
.sgs { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 8px; }
.sg { display: flex; flex-direction: column; min-width: 0; }
.sgh { display: flex; gap: 10px; align-items: baseline; }
.sgn { font-size: 11px; letter-spacing: 0.12em; color: rgba(237, 228, 207, 0.97); }
.sgm { font-size: 13px; color: rgba(237, 228, 207, 1); white-space: nowrap; }
.sgb { position: relative; display: block; height: 6px; margin: 12px 0; background: rgba(237, 228, 207, 0.14); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.sgb .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #CFEF5B; }
.sgd { font-size: 12px; letter-spacing: 0.08em; color: rgba(237, 228, 207, 0.81); }
.sg.on .sgn, .sg.on .sgd { color: #CFEF5B; }
.sg.on .sgm { color: #EDE4CF; }

/* world is fair: the hands over the clouds, everything centred above the fingertips */
.pcard.pcard--fair { padding-top: 40px; }
.pcard--fair .pbody { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.ftitle { margin: 14px 0 0; font-size: 54px; line-height: 1; font-weight: 400; letter-spacing: -0.005em; white-space: nowrap; }
.fkey { margin: 14px 0 0; font-size: 20px; line-height: 1.35; color: #EDE4CF; }
.fbtns { display: flex; gap: 12px; margin-top: 24px; }

/* something flat is coming */
.pcard.pcard--data { align-items: center; }
.dsoon { margin: 0; font-size: 54px; line-height: 1; font-weight: 400; letter-spacing: -0.005em; white-space: nowrap; }

/* --- the idea: the same black carries on, no line or seam ------------- */
.ideasec { position: relative; z-index: 1; background: transparent; color: #EDE4CF; padding: 96px var(--pad) 40px; }
.ihead { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 80px; align-items: end; }
.idh { margin: 0; font-size: 72px; line-height: 1; font-weight: 400; }
.imis { margin: 0 0 6px; max-width: 900px; font-size: 21px; line-height: 1.5; color: rgba(237, 228, 207, 0.82); }
.igrid {
  /* a row of two rather than the reference's grid: WebKit keeps a grid row's old height when a column inside it reflows on a resize, and cuts the text */
  display: flex; align-items: stretch; margin-top: 40px; overflow: hidden;
  background: rgba(20, 20, 17, 0.46);
  -webkit-backdrop-filter: blur(18px) brightness(1.25); backdrop-filter: blur(18px) brightness(1.25);
}
.itabs { display: flex; flex: 0 0 364px; min-width: 0; flex-direction: column; padding: 28px 0; border-right: 1px solid rgba(237, 228, 207, 0.12); }
.il {
  position: relative; display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 16px 28px;
  border: 0; background: transparent; text-align: left; cursor: pointer; color: rgba(237, 228, 207, 0.52);
  transition: color .2s ease-out, background-color .2s ease-out;
}
.il::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: #CFEF5B; transform: scaleY(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.il:hover { color: rgba(237, 228, 207, 0.8); }
.iln { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: rgba(237, 228, 207, 0.05); color: rgba(237, 228, 207, 0.5); transition: color .2s ease-out, background-color .2s ease-out; }
.ilt { font-size: 23px; line-height: 1.2; white-space: nowrap; }
.il[aria-selected="true"] { color: #EDE4CF; background: rgba(237, 228, 207, 0.04); }
.il[aria-selected="true"]::before { transform: scaleY(1); }
.il[aria-selected="true"] .iln { color: #0E0E0B; background: #CFEF5B; }
.il:focus-visible { outline-offset: -4px; }
.ipanes { flex: 1 1 0; min-height: 600px; padding: 44px 52px 40px; min-width: 0; }
.ipane { animation: paneIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.ichap { display: none; }
@keyframes paneIn { from { opacity: 0; } to { opacity: 1; } }
.ilead { position: relative; margin: 0; font-size: 33px; line-height: 1.24; color: #EDE4CF; max-width: 900px; }
.icap { display: block; margin-top: 12px; font-size: 12px; letter-spacing: 0.14em; color: rgba(237, 228, 207, 0.51); }
.icols { position: relative; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(237, 228, 207, 0.1); columns: 2; column-gap: 56px; }
.ip, .ie { margin: 0 0 16px; break-inside: avoid; font-size: 17px; line-height: 1.6; color: rgba(237, 228, 207, 0.7); }
.ie { font-size: 20px; line-height: 1.42; color: #EDE4CF; }
.iend { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 40px; padding-top: 32px; }
.ieb { margin: 0; font-size: 32px; line-height: 1.1; white-space: nowrap; }
.ier p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(237, 228, 207, 0.75); text-align: right; white-space: nowrap; }
.ier p.g { color: #CFEF5B; }

/* --- the flat map: the moon, very dim, fading in from the top ---------- */
.mapsec { position: relative; z-index: 1; background: transparent; margin-top: -1px; color: #EDE4CF; padding: 150px var(--pad) 100px; overflow: hidden; }
.mapsec::before {
  content: ""; position: absolute; left: 0; right: 0; top: 40px; bottom: 0;
  background: url("../images/moon@1x.webp") 50% 0 / max(1440px, 100%) auto no-repeat;
  background-image: image-set(url("../images/moon@1x.webp") 1x, url("../images/moon@2x.webp") 2x);
  opacity: 0.36; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 34%, #000 74%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 34%, #000 74%, transparent 100%);
}
.mhd { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 44px; }
.mhd h2 { margin: 0; font-size: 72px; line-height: 1; font-weight: 400; }
.mhd p { margin: 0 0 10px; font-size: 19px; color: rgba(237, 228, 207, 0.79); }
.mcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mcard {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 9px; height: 100px; margin: 0; padding: 22px 22px 0;
  border: 0; text-align: left; background: rgba(20, 20, 17, 0.5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  cursor: pointer; color: rgba(237, 228, 207, 0.62); transition: background-color .25s ease-out, color .25s;
}
.mcard:hover { background: rgba(237, 228, 207, 0.05); color: #EDE4CF; }
.mcard::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: #CFEF5B; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.mct { font-size: 19px; line-height: 1; white-space: nowrap; }
.mcd { padding-right: 18px; font-size: 11px; letter-spacing: 0.05em; line-height: 1.4; color: rgba(237, 228, 207, 0.68); transition: color .25s; }
.mcn { position: absolute; right: 16px; bottom: 14px; font-size: 11px; letter-spacing: 0.1em; color: rgba(237, 228, 207, 0.54); }
.mcard[aria-selected="true"] { background: rgba(237, 228, 207, 0.07); color: #EDE4CF; }
.mcard[aria-selected="true"]::before { transform: scaleX(1); }
.mcard[aria-selected="true"] .mcd { color: rgba(237, 228, 207, 0.68); }
.mcard[aria-selected="true"] .mcn { color: #CFEF5B; }
.mplate {
  margin-top: 14px; padding: 22px; background: rgba(20, 20, 17, 0.5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.mpanel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@keyframes mtIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mtile {
  position: relative; display: flex; align-items: center; gap: 16px; height: 84px; padding: 0 20px;
  background: rgba(237, 228, 207, 0.035); text-decoration: none; cursor: pointer;
  animation: mtIn .45s cubic-bezier(.2, .7, .2, 1) var(--d) both;
}
.mapsec a.mtile { color: #EDE4CF; transition: background-color .25s ease-out; }
.mtile:hover { background: rgba(237, 228, 207, 0.075); }
.mlg { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; background: rgba(237, 228, 207, 0.06); }
.mlg img { display: block; width: 44px; height: 44px; filter: grayscale(1) brightness(0.82) contrast(1.05); opacity: 0.85; transition: filter .3s ease-out, opacity .3s ease-out; }
.mtile:hover .mlg img { filter: none; opacity: 1; }
.mlg--t { font-size: 14px; letter-spacing: 0.04em; color: rgba(237, 228, 207, 0.7); }
/* a name is never cut: the reference's ellipsis goes, and a long one wraps */
.mtn { flex: 1; min-width: 0; font-size: 19px; line-height: 1.1; overflow-wrap: anywhere; transition: color .25s; }
.mtile:hover .mtn { color: #CFEF5B; }
.mte { flex: none; display: inline-flex; color: rgba(237, 228, 207, 0.3); transition: color .25s; }
.mtile:hover .mte { color: #CFEF5B; }

/* --- pons --------------------------------------------------------------- */
.ponsec { position: relative; z-index: 1; padding: 20px var(--pad) 120px; color: #EDE4CF; }
.ic2 { position: relative; height: 520px; background: #0E0E0B; overflow: hidden; }
.ic2bg { position: absolute; right: 40px; top: -150px; width: 820px; height: 820px; background: url("../images/pons-engraved.webp") 50% 50% / contain no-repeat; opacity: 0.55; pointer-events: none; }
.ic2c { position: absolute; left: 48px; top: 48px; width: 640px; }
.ppt { margin: 0; font-size: 54px; line-height: 1.02; font-weight: 400; }
.ppl2 { margin: 16px 0 0; font-size: 20px; line-height: 1.45; color: rgba(237, 228, 207, 0.8); }
.ppact { display: flex; gap: 12px; margin-top: 40px; }
.ponsec a.ppbtn { color: #CFEF5B; }
.ppbtn { display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 22px; background: rgba(20, 20, 17, 0.5); font-size: 15px; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.ppbtn:hover { background: rgba(237, 228, 207, 0.08); }
.ppca { display: inline-flex; align-items: center; gap: 14px; height: 52px; margin: 0; padding: 0 18px; border: 0; background: rgba(20, 20, 17, 0.5); font-size: 15px; letter-spacing: 0.04em; color: #EDE4CF; cursor: pointer; white-space: nowrap; transition: background-color .2s; }
.ppca:hover { background: rgba(237, 228, 207, 0.08); }
.ppcal { font-size: 11px; letter-spacing: 0.14em; color: rgba(237, 228, 207, 0.51); }
/* our copy icon: two pixel sheets. hover fills the front sheet in lime; copied, a pixel tick for two seconds */
.ppcac { position: relative; display: inline-flex; flex: none; width: 18px; height: 18px; color: rgba(237, 228, 207, 0.6); }
.ppcac > span { position: absolute; inset: 0; display: inline-flex; }
.cp1, .cp2 { opacity: 0; }
.ppca:hover .ppcac { color: #CFEF5B; }
.ppca:hover .cp0 { opacity: 0; }
.ppca:hover .cp1 { opacity: 1; }
.ppca.is-copied .ppcac { color: #CFEF5B; }
.ppca.is-copied .cp0, .ppca.is-copied .cp1 { opacity: 0; }
.ppca.is-copied .cp2 { opacity: 1; }
.ic2f { position: absolute; left: 48px; bottom: 40px; }
.pfx { display: flex; gap: 56px; }
.pfx div { display: flex; flex-direction: column; gap: 8px; }
.pfx span { font-size: 11px; letter-spacing: 0.12em; color: rgba(237, 228, 207, 0.51); }
.pfx b { font-weight: 400; font-size: 22px; }

/* --- footer ------------------------------------------------------------- */
.foot { position: relative; z-index: 1; padding: 40px var(--pad) calc(64px + env(safe-area-inset-bottom)); color: #EDE4CF; }
.ftop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: start; }
.fpave { margin: 0; font-size: 54px; line-height: 1.02; }
.fsub { margin: 18px 0 0; max-width: 460px; font-size: 17px; line-height: 1.5; color: rgba(237, 228, 207, 0.62); }
.fcols { display: grid; grid-template-columns: repeat(4, auto); gap: 56px; }
.fcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fch { font-size: 11px; letter-spacing: 0.14em; color: rgba(237, 228, 207, 0.51); }
.fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fl { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; }
.fli { display: inline-flex; color: rgba(237, 228, 207, 0.45); transition: color .2s; }
a.fl:hover .fli { color: #CFEF5B; }
.fdis { position: relative; margin-top: 96px; background: rgba(20, 20, 17, 0.46); -webkit-backdrop-filter: blur(18px) brightness(1.25); backdrop-filter: blur(18px) brightness(1.25); }
.fdeb { position: relative; font-size: 12px; letter-spacing: 0.14em; color: rgba(237, 228, 207, 0.6); }
.vc { overflow: hidden; padding: 44px 48px 48px; }
.vcgq {
  position: absolute; right: -150px; top: 50%; width: 620px; height: 620px; transform: translateY(-50%);
  background: url("../images/guilloche@1x.webp") 0 0 / 100% 100% no-repeat;
  background-image: image-set(url("../images/guilloche@1x.webp") 1x, url("../images/guilloche@2x.webp") 2x);
  opacity: 0.16; pointer-events: none;
}
.vcb { position: relative; max-width: 860px; margin-top: 30px; columns: 2; column-gap: 64px; }
.vcb p { margin: 0 0 18px; break-inside: avoid; font-size: 14px; line-height: 1.72; color: rgba(237, 228, 207, 0.66); }
.vcl { color: #EDE4CF; }
/* the wordmark: 15.3% of the content width (208px at 1440), drawn in lines that stay 2px on a 3px gap */
.fwm {
  margin-top: 88px; font-size: 208px; font-size: 15.3cqw; line-height: 0.8; letter-spacing: -0.02em; white-space: nowrap; text-align: center; color: transparent;
  background: repeating-linear-gradient(180deg, rgba(237, 228, 207, 0.9) 0 2px, transparent 2px 5px);
  -webkit-background-clip: text; background-clip: text; user-select: none;
}
.fbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 44px; font-size: 12px; letter-spacing: 0.1em; color: rgba(237, 228, 207, 0.51); }
.fbar > span:last-child { justify-self: end; }
.fup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.foot a.fup { color: rgba(237, 228, 207, 0.7); }
.foot a.fup:hover { color: #CFEF5B; }
.fupi { display: inline-flex; transform: rotate(-90deg); }

/* --- at 1441 and wider the images are drawn larger than 1440: always the 2x files, so nothing pixelates */
@media (min-width: 1441px) {
  .bbg::before, .bbg::after { background-image: url("../images/built-ships@2x.webp"); }
  .bbg { height: calc(100vw * 1000 / 1440); }
  .mapsec::before { background-image: url("../images/moon@2x.webp"); }
}

/* --- no backdrop-filter: a solid glass --------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .igrid, .fdis, .mplate, .mcard, .hbtn { background: rgba(20, 20, 17, 0.9); }
  .wh-card::before, .wh-cap::before, .wh .wh-own::before, .wh .wh-cta::before { background-color: rgba(20, 20, 17, 0.9); }
}

/* --- 1439 and below: the content shrinks, so words that were one line may take two */
@media (max-width: 1439px) {
  .sgm { white-space: normal; }
  .hhead { width: min(640px, calc(100% - 180px)); }
  .htitle { white-space: normal; }
  .ier p { white-space: normal; }
  .ieb { white-space: normal; }
  .mct { overflow-wrap: anywhere; }
  .mcards { gap: 8px; }
  .mcard { padding: 22px 14px 0; height: auto; min-height: 100px; padding-bottom: 28px; }
  .mcd { padding-right: 0; }
  .fcols { gap: 40px; }
}

/* --- tablet ------------------------------------------------------------- */
@media (max-width: 1199px) {
  :root { --pad: 32px; }
  /* the hackathon card holds its content in one column */
  .pcard { height: auto; min-height: 520px; }
  .pcard:not(.pcard--fair):not(.pcard--data) .pbody { display: flex; flex-direction: column; width: 100%; gap: 32px; }
  .hhead { width: 100%; padding-right: 150px; }
  .hbar { position: relative !important; left: auto; right: auto; bottom: auto; flex-direction: column; align-items: stretch; gap: 28px; margin-top: auto; }
  .hbtns, .fbtns { flex-wrap: wrap; }
  .ftitle { white-space: normal; text-align: center; }
  .dsoon { white-space: normal; }
  .ipanes { padding: 36px 32px 32px; }
  .icols { columns: auto; }
  .ihead { column-gap: 40px; }
  .iend { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ier p { text-align: left; }
  .mcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mpanel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic2c { width: min(640px, calc(100% - 96px)); }
  /* the engraved P would sit behind all the words at its 820px: as on a phone, it steps to the corner */
  .ic2bg { right: -80px; top: -60px; width: 560px; height: 560px; opacity: 0.4; }
  /* the columns move under "pave your own path." in one row of four */
  .ftop { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .fcols { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 24px; }
  .fl { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 959px) {
  .vcb { columns: 1; max-width: none; }
}

/* --- the idea's phone layout, below 900 -------------------------------- */
@media (max-width: 899px) {
  .ihead { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .idh { font-size: 44px; }
  .imis { font-size: 18px; margin-bottom: 0; }
  /* one row of four equal tabs, numeral only, sticking under the top of the screen */
  .igrid { display: block; overflow: visible; }
  .itabs {
    position: sticky; top: env(safe-area-inset-top); z-index: 5;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0;
    border-right: 0; border-bottom: 1px solid rgba(237, 228, 207, 0.12); background: #0E0E0B;
  }
  .il { justify-content: center; min-height: 62px; padding: 8px 0; }
  .il::before { left: 8px; right: 8px; top: auto; bottom: 0; width: auto; height: 2px; transform: scaleX(0); }
  .il[aria-selected="true"]::before { transform: scaleX(1); }
  .ilt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ichap { display: block; margin: 0 0 14px; font-size: 12px; font-weight: 400; letter-spacing: 0.14em; color: rgba(237, 228, 207, 0.6); }
  .ipanes { min-height: 0; padding: 24px 20px; }
  .ilead { font-size: 24px; }
  .ip, .ie { font-size: 16px; }
  .iend { margin-top: 24px; padding-top: 24px; }
  .ieb { font-size: 26px; }
}

/* --- phone: under 768 --------------------------------------------------- */
@media (max-width: 767px) {
  :root { --pad: 20px; }
  .sec { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); padding-bottom: 96px; }
  .shead h2 { font-size: 44px; }
  .shead { padding-bottom: 32px; }

  /* each card stacks: the image area, then the text and buttons on the card's glass */
  .pcard, .pcard.pcard--fair { display: block; height: auto; min-height: 0; padding: 0; }
  .cbg { position: relative !important; inset: auto; height: 220px; }
  .cbg::before { background-position: 50% 62%; }
  .cbg.fbg::before { background-position: 50% 64%; }
  .pcard:not(.pcard--data) .pbody, .pcard--fair .pbody { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 24px 20px 28px; background: rgba(20, 20, 17, 0.46); text-align: left; }
  .hhead { width: 100%; padding: 0; }
  .htitle, .ftitle { font-size: 34px; white-space: normal; text-align: left; line-height: 1.04; }
  .hkey, .fkey { font-size: 18px; }
  .hbtns, .fbtns { flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-top: 24px; }
  .hbtn { width: 100%; height: 48px; justify-content: space-between; }
  .hcount { position: relative !important; right: auto; top: auto; flex-direction: row; align-items: baseline; gap: 12px; margin-top: 24px; }
  .hbar { margin-top: 24px; gap: 24px; }
  /* d h m s in one row: the digits at 32px take 34px wide cells, which needs 8 x 34 + the units */
  .cdd { justify-content: space-between; gap: 2px; }
  .dg { flex: 1 1 0; min-width: 0; width: auto; max-width: 34px; height: 46px; font-size: 32px; }
  .dgr > span { height: 44px; }
  .dgr.roll { transform: translateY(-44px); }
  .u { margin: 0 3px 4px 1px; flex: none; }
  /* the stages: a vertical list, the current one highlighted */
  .sgs { display: flex; flex-direction: column; gap: 14px; }
  .sgm { font-size: 14px; }
  .sgb { margin: 8px 0; }
  /* the flat card: the image area at 260, the words on it */
  .pcard.pcard--data { display: flex; height: 260px; padding: 20px; }
  .pcard--data .cbg { position: absolute !important; inset: 0; height: auto; }
  .dbg::before { background-position: 50% 50% !important; }
  .dsoon { font-size: 30px; line-height: 1.15; }

  .ideasec { padding: 64px var(--pad) 32px; }

  .mapsec { padding: 88px var(--pad) 72px; }
  .mapsec::before { top: 0; background-size: 520px auto; background-position: 50% 120px; }
  .mhd { display: block; margin-bottom: 28px; }
  .mhd h2 { font-size: 44px; }
  .mhd p { margin: 12px 0 0; font-size: 17px; }
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mcard { min-height: 96px; height: auto; padding: 14px 10px 26px 12px; gap: 6px; }
  .mct { font-size: 17px; }
  .mcd { font-size: 12px; line-height: 1.3; }
  .mcn { right: 10px; bottom: 8px; }
  .mplate { padding: 10px; }
  .mpanel { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mtile { height: 64px; padding: 0 14px; gap: 14px; }
  .mlg, .mlg img { width: 40px; height: 40px; }
  .mtn { font-size: 17px; }

  .ponsec { padding: 12px var(--pad) 72px; }
  .ic2 { height: auto; padding: 28px 20px 28px; }
  .ic2bg { right: -90px; top: -50px; width: 360px; height: 360px; opacity: 0.4; }
  .ic2c { position: relative; left: auto; top: auto; width: 100%; }
  .ppt { font-size: 34px; }
  .ppl2 { font-size: 17px; }
  .ppact { flex-direction: column; gap: 10px; margin-top: 24px; }
  .ppbtn, .ppca { width: 100%; justify-content: space-between; }
  .ic2f { position: relative; left: auto; bottom: auto; margin-top: 28px; }
  /* the three facts in one row: "Robinhood Chain" takes two lines rather than a row of its own */
  .pfx { justify-content: space-between; gap: 12px; }
  .pfx div { min-width: 0; }

  .foot { padding: 24px var(--pad) calc(32px + env(safe-area-inset-bottom)); }
  .ftop { gap: 36px; }
  .fpave { font-size: 36px; }
  .fsub { font-size: 16px; }
  .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .fcol { gap: 8px; }
  .fcol ul { gap: 0; }
  .fl { display: inline-flex; min-height: 44px; }
  .fdis { margin-top: 48px; }
  .vc { padding: 28px 20px 16px; }
  .vcgq { right: -130px; top: -130px; width: 380px; height: 380px; transform: none; }
  .fwm { margin-top: 48px; }
  /* back to top, then the two lines, centred */
  .fbar { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; text-align: center; }
  .fbar > span:last-child { justify-self: auto; }
  .fup { order: -1; min-height: 44px; }
}

/* --- a finger, at any width: the footer's small links get their 44px, their gaps giving it back */
@media (pointer: coarse) {
  .fl, .fup { min-height: 44px; }
  .fcol ul { gap: 0; }
}

/* --- under 360: "infrastructure" at 17px is wider than half the screen. Type never shrinks, so
   the category cards take one column here */
@media (max-width: 359px) {
  .mcards { grid-template-columns: minmax(0, 1fr); }
  .pfx { flex-wrap: wrap; }
}

/* --- reduced motion: no curtain, no pane fades, no tile stagger, digits change without rolling */
@media (prefers-reduced-motion: reduce) {
  .reveal { margin-top: 0; }
  .reveal-anchor { top: 0; }
  .spacer { display: none; }
  .sec { position: relative; animation: none; opacity: 1; }
  .ipane, .mtile { animation: none; }
  .dgr.roll { transition: none; }
  .il, .il::before, .mcard::before { transition: none; }
}

/* --- contrast (decided 5 nov): the same cream, the lowest opacity that passes in each band, from
   screenshots every 8px from 320 to 1448 and at 1500, 1680, 1920 and 2560, at dpr 1, 2 and 3 (bin/contrast holds 12 of them at 1 and 2). Tablets need more: the
   card art and the engraved P run behind the words. Where 1 was not enough, the art is toned under them: the next block */
@media (max-width: 1439px) {
  .ppl2 { color: rgba(237, 228, 207, 1); }
}
@media (max-width: 1285px) {
  .heb { color: rgba(237, 228, 207, 0.92); }
  .hcl { color: rgba(237, 228, 207, 0.97); }
  .u { color: rgba(237, 228, 207, 1); }
  .cdl { color: rgba(237, 228, 207, 0.96); }
  .sgn { color: rgba(237, 228, 207, 1); }
  .sgm { color: rgba(237, 228, 207, 1); }
  .sgd { color: rgba(237, 228, 207, 0.98); }
  .mhd p { color: rgba(237, 228, 207, 0.75); }
  .mcd, .mcard[aria-selected="true"] .mcd { color: rgba(237, 228, 207, 0.74); }
  .mcn { color: rgba(237, 228, 207, 0.57); }
  .ppcal { color: rgba(237, 228, 207, 0.69); }
}
@media (max-width: 767px) {
  .heb { color: rgba(237, 228, 207, 0.6); }
  .hcl { color: rgba(237, 228, 207, 0.55); }
  .u { color: rgba(237, 228, 207, 0.6); }
  .cdl { color: rgba(237, 228, 207, 0.51); }
  .sgn { color: rgba(237, 228, 207, 0.51); }
  .sgm { color: rgba(237, 228, 207, 0.6); }
  .sgd { color: rgba(237, 228, 207, 0.52); }
  .mcd, .mcard[aria-selected="true"] .mcd { color: rgba(237, 228, 207, 0.67); }
  .mcn { color: rgba(237, 228, 207, 0.56); }
  .ppcal { color: rgba(237, 228, 207, 0.51); }
  .fdeb { color: rgba(237, 228, 207, 0.63); }
}

/* --- the art under words no opacity can carry (decided 5 nov): the same image with its bright strokes
   toned down under those words, baked by tooling/tone_art.py, only at the widths that fail */
@media (min-width: 768px) and (max-width: 1199px) {
  .cbg:not(.fbg):not(.dbg)::before {
    background-image: url("../images/hackathon-bridge-tablet@1x.webp");
    background-image: image-set(url("../images/hackathon-bridge-tablet@1x.webp") 1x, url("../images/hackathon-bridge-tablet@2x.webp") 2x);
  }
}
/* a 2x screen only: the 1x art passes at these widths */
@media (min-width: 1200px) and (max-width: 1312px) {
  .cbg:not(.fbg):not(.dbg)::before {
    background-image: image-set(url("../images/hackathon-bridge@1x.webp") 1x, url("../images/hackathon-bridge-wide@2x.webp") 2x);
  }
}
@media (min-width: 344px) and (max-width: 484px), (min-width: 719px) and (max-width: 736px) {
  .cbg.dbg::before {
    background-image: image-set(url("../images/flat-lines@1x.webp") 1x, url("../images/flat-lines-phone@2x.webp") 2x);
  }
}
@media (min-width: 485px) and (max-width: 718px) {
  .cbg.dbg::before {
    background-image: url("../images/flat-lines-phone@1x.webp");
    background-image: image-set(url("../images/flat-lines-phone@1x.webp") 1x, url("../images/flat-lines-phone@2x.webp") 2x);
  }
}
@media (min-width: 889px) and (max-width: 1312px) {
  .cbg.dbg::before {
    background-image: url("../images/flat-lines-tablet@1x.webp");
    background-image: image-set(url("../images/flat-lines-tablet@1x.webp") 1x, url("../images/flat-lines-tablet@2x.webp") 2x);
  }
}
@media (max-width: 736px) {
  .ic2bg { background-image: url("../images/pons-engraved-phone.webp"); }
}
@media (min-width: 768px) and (max-width: 956px) {
  .ic2bg { background-image: url("../images/pons-engraved-tablet.webp"); }
}
@media (min-width: 1200px) and (max-width: 1382px) {
  .ic2bg { background-image: url("../images/pons-engraved-desk.webp"); }
}