/* The dig: surface hero, strata, tunnel, bedrock. */
.top .bar { background: transparent; }

/* ---------- surface */
.surface { position: relative; padding: 10px 0 0; background: var(--sun); overflow: hidden; }
.surface::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(28, 16, 8, .09) 1.5px, transparent 1.6px); background-size: 18px 18px; pointer-events: none; }
.hero-mark { position: relative; margin: 6px auto 0; text-align: center; }
.hero-word { position: relative; z-index: 1; font-size: clamp(110px, 21vw, 320px); line-height: .82; margin-left: -.02em; }
.hero-mole { position: absolute; z-index: 2; left: 50%; top: 18%; width: clamp(280px, 42vw, 620px); transform: translateX(-36%) rotate(4deg); animation: crawl 3.2s ease-in-out infinite alternate; }
.hero-mole img { width: 100%; height: auto; filter: drop-shadow(10px 12px 0 rgba(28, 16, 8, .22)); }
.hero-mole .beam { position: absolute; left: 83%; top: 50%; width: 520px; height: 420px; transform-origin: 0 0; transform: rotate(18deg); background: conic-gradient(from 72deg at 0 0, transparent 0deg, rgba(255, 246, 216, .65) 8deg, rgba(255, 246, 216, .1) 26deg, transparent 34deg); mix-blend-mode: screen; pointer-events: none; animation: flicker 4s steps(1) infinite; }
@keyframes crawl { to { transform: translateX(-34%) translateY(-6px) rotate(2deg); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .9; } 48% { opacity: .4; } 49% { opacity: 1; } 83% { opacity: .75; } }
.hero-row { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: end; margin-top: clamp(150px, 20vw, 300px); padding-bottom: 120px; }
.hero-copy h1 { margin: 14px 0 18px; font-size: clamp(52px, 6.4vw, 96px); letter-spacing: -.04em; }
.hero-copy .lede { max-width: 560px; font-size: 18px; line-height: 1.55; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-live .panel-b { padding: 16px 18px; }
.hero-live .kv dd b { font-weight: 700; }
.live-foot { margin-top: 14px; }
.ground { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 64px; background: var(--soil-1); }
.ground::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; background: linear-gradient(90deg, var(--soil-1) 50%, transparent 0) 0 0/16px 8px repeat-x, linear-gradient(90deg, transparent 50%, var(--soil-1) 0) 8px 8px/16px 8px repeat-x; }

/* ---------- layers */
.layer { padding: 120px 0 130px; }
.layer-head { max-width: 760px; margin-bottom: 54px; }
.layer-head h2 { margin: 16px 0 18px; }
.layer-head h2 em { font-style: normal; color: var(--sun); }
.stratum.s1 .layer-head h2 em { color: var(--cream); text-shadow: 3px 3px 0 var(--ink); }
.layer-head p { font-size: 18px; max-width: 680px; opacity: .92; }

/* claim */
.claim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.claims { position: relative; display: grid; gap: 14px; }
.claim { position: relative; padding: 16px 18px; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow-sm); font-size: 16px; }
.claim .who { display: block; margin-bottom: 4px; font-family: var(--pixel); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.claim::after { content: "unverifiable"; position: absolute; right: 12px; top: -12px; padding: 2px 8px; background: var(--bad); color: var(--ink); border: 2px solid var(--ink); font-family: var(--pixel); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; transform: rotate(3deg); }
.claim.c2 { margin-left: 40px; } .claim.c3 { margin-right: 30px; } .claim.c4 { margin-left: 20px; }
.answer { padding: 30px; background: var(--ink); color: var(--cream); border: 3px solid var(--ink); box-shadow: 8px 8px 0 rgba(28, 16, 8, .45); }
.answer .label { color: var(--sun); margin-bottom: 16px; }
.answer-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.answer-list li { padding-left: 26px; position: relative; }
.answer-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; background: var(--ok); }
.answer-list b { color: var(--sun); }

/* header */
.header-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 36px; align-items: start; }
#hdr-table td:first-child { color: var(--ink-3); white-space: nowrap; }
#hdr-table td:last-child { overflow-wrap: anywhere; }
#hdr-table tr.root td { background: rgba(253, 179, 1, .28); }
.rehash { padding: 26px; border: 3px dashed rgba(255, 243, 209, .6); }
.rehash .label { color: var(--sun); margin-bottom: 10px; }
.rehash { min-width: 0; }
.rehash-out { margin-top: 18px; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.rehash-out .row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(255, 243, 209, .25); }
.rehash-out .row span { min-width: 0; overflow-wrap: anywhere; word-break: break-all; }
.rehash-out .row span:first-child { color: var(--sun); word-break: normal; }
.rehash-out .row.same span:last-child { color: var(--ok); }
.rehash-out .eq { display: inline-block; margin-top: 8px; padding: 4px 10px; background: var(--ok); color: var(--ink); font-family: var(--pixel); font-size: 13px; }
.rehash-out .ne { background: var(--bad); }

/* roots */
.roots { position: relative; }
.root-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 520px; margin: 0 auto; padding: 16px 20px; background: var(--sun); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow); font-family: var(--mono); }
.root-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.root-card { padding: 22px; background: rgba(28, 16, 8, .55); border: 3px solid var(--ink); box-shadow: var(--shadow-sm); }
.root-name { display: inline-block; margin-bottom: 14px; padding: 4px 10px; background: var(--sun); color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 14px; }
.root-card h3 { margin-bottom: 8px; color: var(--sun); }
.root-card p { font-size: 15px; opacity: .9; }
.uses { display: flex; flex-wrap: wrap; gap: 6px; color: var(--lamp); }

/* tunnel */
#tunnel { overflow: hidden; }
#tunnel .layer-head, #tunnel .dig-grid { position: relative; z-index: 4; }
#tunnel .layer-head h2 em { color: var(--lamp); }
.dig-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.dig-form { position: sticky; top: 96px; }
.dig-log { margin-top: 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: rgba(255, 231, 160, .75); min-height: 60px; }
.dig-log .ok { color: var(--ok); } .dig-log .bad { color: var(--bad); }
.dig-shaft { min-height: 420px; }
.dig-shaft .sec { margin: 4px 0 12px; font-family: var(--pixel); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sun); }

/* bedrock */
.cert-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: start; }
.paper { position: relative; padding: 30px 30px 26px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 10px 10px 0 rgba(255, 231, 160, .25); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(28, 16, 8, .06) 27px 28px); }
.paper-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 3px double var(--ink); }
.paper .stamp { position: absolute; right: 22px; bottom: 22px; }
.paper .kv { font-size: 12.5px; }
.paper .tx { margin: 14px 0 0; display: grid; gap: 4px; font-family: var(--mono); font-size: 12px; max-height: 190px; overflow: auto; padding-right: 110px; }
.cert-side { color: var(--cream); }
.cert-steps { margin: 0 0 28px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 16px; }
.cert-steps li { counter-increment: s; position: relative; padding-left: 52px; }
.cert-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--sun); color: var(--ink); font-family: var(--pixel); font-size: 16px; border: 3px solid var(--lamp); }
.cert-steps b { color: var(--sun); }
#bedrock .btn:not(.sun) { background: transparent; color: var(--lamp); border-color: var(--lamp); box-shadow: 4px 4px 0 var(--lamp); }
#bedrock .btn.sun { border-color: var(--lamp); box-shadow: 4px 4px 0 var(--lamp); }

/* five tunnels */
.tunnels-sec, .ways, .limits, .faq { padding: 120px 0; background: var(--sun); }
.tunnels-sec { background: var(--cream); border-top: 3px solid var(--ink); }
.tunnels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tcard { position: relative; display: flex; flex-direction: column; min-height: 250px; padding: 24px; text-decoration: none; color: var(--ink); background: #fff8e4; border: 3px solid var(--ink); box-shadow: var(--shadow); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.tcard:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.tcard .tnum { font-family: var(--wordmark); font-weight: 700; font-size: 42px; line-height: 1; color: var(--sun); -webkit-text-stroke: 2px var(--ink); }
.tcard h3 { margin: 14px 0 8px; }
.tcard p { flex: 1; font-size: 15px; color: var(--ink-2); }
.tcard .tgo { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.tcard.verify { background: var(--ink); color: var(--cream); }
.tcard.verify p { color: rgba(255, 243, 209, .8); }
.tcard.verify .tnum { -webkit-text-stroke: 0; }

/* ways */
.ways { border-top: 3px solid var(--ink); }
.ways-grid { display: grid; grid-template-columns: 220px 1fr; gap: 0; border: 3px solid var(--ink); background: var(--cream); box-shadow: var(--shadow); }
.ways-tabs { display: grid; align-content: start; border-right: 3px solid var(--ink); }
.ways-tabs button { padding: 20px; border: 0; border-bottom: 3px solid var(--ink); background: transparent; text-align: left; font-family: var(--pixel); font-size: 16px; text-transform: uppercase; cursor: pointer; }
.ways-tabs button.on { background: var(--ink); color: var(--sun); }
.ways-body { padding: 26px; min-height: 290px; }
.way { display: none; }
.way.on { display: block; }
.way p { max-width: 560px; font-size: 17px; }

/* limits */
.limits { background: var(--soil-1); color: var(--ink); border-top: 3px solid var(--ink); }
.limit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.limit { padding: 22px; background: var(--cream); border: 3px solid var(--ink); box-shadow: var(--shadow-sm); }
.limit b { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 20px; letter-spacing: -.01em; }
.limit p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* faq */
.faq { border-top: 3px solid var(--ink); }
.faq-list { display: grid; gap: 12px; max-width: 900px; }
.faq details { background: var(--cream); border: 3px solid var(--ink); box-shadow: var(--shadow-sm); }
.faq summary { padding: 18px 22px; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: 20px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-family: var(--pixel); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 22px 18px; margin: 0; color: var(--ink-2); }

@media (max-width: 980px) {
  .hero-row, .claim-grid, .header-grid, .dig-grid, .cert-grid { grid-template-columns: 1fr; }
  .hero-row { margin-top: 32vw; }
  .root-cards, .tunnels { grid-template-columns: 1fr 1fr; }
  .limit-grid { grid-template-columns: 1fr 1fr; }
  .dig-form { position: static; }
}
@media (max-width: 640px) {
  .hero-mole { width: 78vw; top: 22%; }
  .hero-row { margin-top: 46vw; padding-bottom: 100px; }
  .root-cards, .tunnels, .limit-grid { grid-template-columns: 1fr; }
  .ways-grid { grid-template-columns: 1fr; }
  .ways-tabs { grid-auto-flow: column; border-right: 0; border-bottom: 3px solid var(--ink); }
  .ways-tabs button { border-bottom: 0; text-align: center; padding: 14px; }
  .claim.c2, .claim.c3, .claim.c4 { margin: 0; }
  .layer { padding: 90px 0; }
  .paper .tx { padding-right: 0; }
  .paper .stamp { position: static; margin-top: 16px; }
}
.hero-word { font-size: clamp(64px, 21vw, 320px); }
@media (max-width: 640px) { .hero-word { font-size: 21.5vw; } .hero-mark { margin-top: 18px; } }

/* ---------- digging mole: head first into the ground, clods flying, a mound growing */
.dig-spot { position: absolute; z-index: 2; right: 8%; bottom: 40px; width: 200px; height: 180px; pointer-events: none; }
.digger { position: absolute; z-index: 2; left: 14px; bottom: -64px; width: 156px; transform-origin: 50% 90%; animation: dig .38s steps(2) infinite alternate, push 2.4s ease-in-out infinite; }
.digger img { width: 100%; transform: rotate(46deg); }
@keyframes dig { from { rotate: -5deg; } to { rotate: 5deg; } }
@keyframes push { 0%, 100% { translate: 0 -6px; } 45% { translate: 0 16px; } 60% { translate: 3px 10px; } }
.clod { position: absolute; z-index: 4; left: 96px; bottom: 26px; width: 10px; height: 10px; background: var(--soil-2); box-shadow: 0 0 0 2px var(--ink); opacity: 0; animation: clod 1.2s steps(8) infinite; --x: 54px; --y: -104px; }
.clod.k2 { width: 8px; height: 8px; background: var(--soil-1); animation-delay: .2s; --x: -70px; --y: -86px; }
.clod.k3 { animation-delay: .45s; --x: 64px; --y: -60px; }
.clod.k4 { width: 6px; height: 6px; background: var(--soil-3); animation-delay: .7s; --x: -40px; --y: -116px; }
.clod.k5 { width: 8px; height: 8px; animation-delay: .9s; --x: 92px; --y: -96px; }
.clod.k6 { width: 6px; height: 6px; background: var(--soil-1); animation-delay: 1.05s; --x: -96px; --y: -50px; }
@keyframes clod { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 55% { transform: translate(calc(var(--x) * .6), var(--y)); } 100% { opacity: 0; transform: translate(var(--x), 12px); } }
.mound { position: absolute; z-index: 4; left: 132px; bottom: 22px; display: flex; align-items: flex-end; }
.mound i { display: block; width: 18px; background: var(--soil-1); box-shadow: inset 0 3px 0 var(--soil-2), 0 0 0 2px var(--ink); }
.mound i:nth-child(1) { height: 10px; } .mound i:nth-child(2) { height: 22px; animation: grow 2.4s steps(3) infinite; } .mound i:nth-child(3) { height: 12px; }
@keyframes grow { 50% { height: 30px; } }
.dig-spot::after { content: ""; position: absolute; z-index: 4; left: 36px; bottom: 20px; width: 112px; height: 8px; background: var(--soil-3); box-shadow: 0 0 0 2px var(--ink); }

/* ---------- three roots: one stem from the header, a bus, three drops landing on the card centres */
.root-wire { --col: calc((100% - 44px) / 3); position: relative; height: 92px; }
.root-wire i { position: absolute; display: block; background: var(--sun); box-shadow: 0 0 0 3px var(--ink); }
.root-wire .stem { left: calc(50% - 5px); top: 0; width: 10px; height: 46px; }
.root-wire .bus { left: calc(var(--col) / 2 - 5px); right: calc(var(--col) / 2 - 5px); top: 41px; height: 10px; }
.root-wire .drop { top: 41px; bottom: 0; width: 10px; overflow: hidden; }
.root-wire .d1 { left: calc(var(--col) / 2 - 5px); }
.root-wire .d2 { left: calc(50% - 5px); }
.root-wire .d3 { left: calc(100% - var(--col) / 2 - 5px); }
.root-wire .drop b { position: absolute; left: 2px; width: 6px; height: 10px; background: var(--ink); animation: packet 1.6s steps(8) infinite; }
.root-wire .d2 b { animation-delay: .5s; } .root-wire .d3 b { animation-delay: 1s; }
@keyframes packet { from { top: -10px; } to { top: 100%; } }
.root-card { position: relative; }
.root-card::before { content: ""; position: absolute; left: calc(50% - 13px); top: -10px; width: 26px; height: 8px; background: var(--sun); box-shadow: 0 0 0 3px var(--ink); }

/* ---------- fossil bed: only the headlamp reveals it */
.fossil-bed { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 80px; padding-top: 26px; border-top: 3px dashed rgba(255, 231, 160, .18); }
.fossil-bed .fossil { padding: 14px 16px; border: 2px solid rgba(255, 231, 160, .25); background: rgba(255, 231, 160, .04); }
.fossil-bed .fossil:nth-child(odd) { transform: rotate(-1.5deg); } .fossil-bed .fossil:nth-child(even) { transform: rotate(1.5deg); }
@media (max-width: 980px) {
  .root-wire { display: none; }
  .root-cards { margin-top: 22px; }
  .root-card::before { display: none; }
  .fossil-bed { grid-template-columns: 1fr 1fr; }
  .dig-spot { right: 4%; transform: scale(.8); transform-origin: 100% 100%; }
}
@media (max-width: 640px) { .fossil-bed { grid-template-columns: 1fr; } .dig-spot { display: none; } }

/* ---------- the mole's tunnel, dug as you scroll (walk.js) */
.stratum .wrap { z-index: 1; }
.dig-spot .digger { display: none; }       /* the walking mole takes its place at the hole */
.walk-measure { position: absolute; width: 0; height: 0; overflow: hidden; }
.walk-svg { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.walk-svg.on-ground { z-index: 1; }
.walk-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.walk-svg .t-wall { stroke: #120a05; stroke-width: 64px; opacity: .9; }
.walk-svg .t-floor { stroke: #2e1a0c; stroke-width: 46px; }
.walk-svg .t-crumbs { stroke: rgba(192, 138, 79, .28); stroke-width: 6px; }
.walker { position: absolute; left: 0; top: 0; z-index: 50; width: 0; height: 0; pointer-events: none; will-change: transform; }
.walker-body { position: absolute; left: -62px; top: -62px; width: 124px; height: 124px; display: grid; place-items: center; }
.walker-body img { width: 124px; height: auto; filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .35)); }
.walker.moving .walker-body { animation: waddle .16s steps(2) infinite alternate; }
.walker.flip .walker-body img { transform: scaleX(-1); }
@keyframes waddle { from { transform: rotate(-5deg) translateY(-2px); } to { transform: rotate(5deg) translateY(2px); } }
.walker:not(.moving).home .walker-body { animation: sniff 1.4s steps(2) infinite; }
@keyframes sniff { 50% { transform: translateY(-4px) rotate(-3deg); } }
.dirt-layer { position: absolute; inset: 0; z-index: 49; pointer-events: none; overflow: hidden; }
.dirt-layer i { position: absolute; display: block; box-shadow: 0 0 0 2px #1c1008; }
@media (max-width: 760px) { .walker-body { left: -30px; top: -30px; width: 60px; height: 60px; } .walker-body img { width: 60px; } .walker-body::before { inset: -24px; } .walk-svg .t-wall { stroke-width: 26px; } .walk-svg .t-floor { stroke-width: 16px; } .walk-svg .t-crumbs { stroke-width: 3px; } }
/* in the dark layer the content must stay above the headlamp veil; only the fossil bed sits below it */
#tunnel .wrap { z-index: auto; }
/* her own headlamp lights a little circle around her in the dark */
.walker-body::before { content: ""; position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 231, 160, .16), transparent); pointer-events: none; }