/* Public landing page only; other routes retain their existing appearance. */
body.public-landscape { isolation:isolate; }
.public-background { position:fixed; inset:0; z-index:-1; pointer-events:none; background:#f5d65b url("/comic-production/hookemon-background-yellow-2560.webp") center / cover no-repeat; }
@media (max-width: 1600px) { .public-background { background-image: url("/comic-production/hookemon-background-yellow-1600.webp"); } }
@media (max-width: 860px) { .public-background { background-image: url("/comic-production/hookemon-background-yellow-960.webp"); background-position: 50% 40%; } }
.public-landscape .hero,.public-landscape .scene-sticky { background:transparent; }
.public-landscape .hero-landscape,.public-landscape .scene-landscape,.public-landscape .hero::before,.public-landscape .scene-wash { display:none; }
.hero .hero-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto; gap:24px 48px; min-height:0; padding-block:40px 24px; }
.hero .hero-title-wrap { grid-column:1 / -1; text-align:center; justify-self:center; width:min(100%,760px); }
.hero .hero-title-wrap h1 { margin:0; font-size:52px; }
.hero .hero-title-wrap .robinhood-name { justify-content:center; }
.hero .hero-title-wrap .robinhood-wordmark { width:100%; max-width:700px; }
.hero .hero-copy { --hero-text-gap:28px; width:100%; max-width:470px; justify-self:center; align-self:center; }
.hero .hero-copy .hero-description { margin-top:0; font-size:18px; line-height:1.6; }
.hero .holder-share-callout strong { font-size:24px; line-height:1.35; }
.hero .hero-art { width:100%; height:380px; min-height:0; margin:0; justify-self:center; align-self:center; }
.hero .hero-art .hero-coin { width:68.6%; max-width:374.5px; left:15.7%; top:6%; }
.hero .coin-orbit { inset:14%; }
.hero .coin-shadow { width:45%; left:27.5%; bottom:3%; }
.hero .hero-bottom { position:relative; bottom:auto; padding-bottom:24px; }
:is(#machine > .section-heading > div, #machine > .recent-pulls, .loop-intro-box, .story-panel, #cards > .section-heading > div, .economics-layout > div:first-child, .faq-intro) {
 background:rgb(255 253 246 / 96%); border:1px solid rgb(21 52 95 / 40%); border-radius:16px; padding:16px 20px; width:fit-content; max-width:100%; min-width:0; height:fit-content; align-self:start; box-sizing:border-box;
}
#machine > .recent-pulls { width:100%; }
.loop-intro-box { margin-inline:auto; }
.story-panel { align-self:center; }
#economics { background:transparent; border-block:0; }
#economics .fee-card { background:rgb(255 253 246 / 96%); }
.faq-list > details { background:transparent; border:0; }
.faq-list > details > summary { background:rgb(255 253 246 / 96%); border:1px solid rgb(21 52 95 / 40%); border-radius:12px; padding:16px; margin-bottom:10px; }
.story-transcript.shell { width:calc(100% - 40px); max-width:540px; margin:28px auto; border:2px solid #2a75bb; box-shadow:0 0 0 2px #ffcb05,0 0 16px #ffcb0570,0 0 26px #2a75bb40; }
.story-transcript.shell > summary { min-height:48px; padding:12px 18px; font-size:17px; }
.story-transcript[open] { max-width:680px; }
.public-background svg { display:block; width:100%; height:100%; }
.background-star { transform-origin:0 0; animation:star-spark var(--duration) ease-in-out var(--delay) infinite; }
@keyframes star-spark { 0%,100% {opacity:.2;transform:scale(.65)} 35% {opacity:.5;transform:scale(.85)} 48% {opacity:1;transform:scale(1.3)} 60% {opacity:.35;transform:scale(.7)} 76% {opacity:.9;transform:scale(1.1)} }
.sun-light { animation:sun-breathe 9s ease-in-out infinite alternate; }
.ray-light { transform-origin:820px 603px; animation:ray-breathe 13s ease-in-out -4s infinite alternate; }
@keyframes sun-breathe { from{opacity:.2} to{opacity:.8} }
@keyframes ray-breathe { from{opacity:.15;transform:rotate(-.6deg)} to{opacity:.55;transform:rotate(.6deg)} }
@media(max-width:734px) {
 .hero .hero-layout { grid-template-columns:minmax(0,1fr); gap:24px; padding-top:28px; }
 .hero .hero-title-wrap { grid-column:1; }
 .hero .hero-title-wrap h1 { font-size:28px; }
 .hero .hero-title-wrap .cycle-line { white-space:normal; }
 .hero .hero-art { height:280px; max-width:360px; }
 .hero .hero-copy { max-width:440px; }
 .hero .hero-copy .hero-description { font-size:16px; }
 .hero .holder-share-callout strong { font-size:21px; }
 .hero .hero-bottom { gap:16px; }
 .loop-intro-box,.story-panel,.faq-intro { padding:12px 14px; }
 .story-panel h2 { font-size:28px; }
}
@media(prefers-reduced-motion:reduce) { .background-star,.sun-light,.ray-light { animation:none;opacity:.5; } }

.hero .hero-title-wrap h1 .plain-heading,
.hero .hero-title-wrap h1 .cycle-line .hero-on { color:#EB4C8A; }
.hero .hero-copy { background:rgb(255 253 246 / 96%); border:1px solid rgb(21 52 95 / 40%); border-radius:16px; padding:20px; box-sizing:border-box; }
.hero .hero-copy .hero-description { font-weight:800; }
.hero .hero-copy .holder-share-callout strong { font-weight:900; }
@media(max-width:734px) { .hero .hero-copy { padding:16px; } }

.story-transcript.shell, .story-transcript.shell > summary { background:rgb(255 253 246 / 96%); }
.story-transcript.shell:has(> summary) { background:transparent; }
/* Keep both history panels aligned with the dashboard console. */
#machine > div.recent-pulls { width:100%; max-width:none; margin-inline:0; justify-self:stretch; }
#journey .scene-controls { padding:9px; }
#journey .scene-controls button { font-size:14px; min-height:50px; }
#journey .scene-controls button > span { font-size:12px; }
.story-transcript.shell { border-width:4px; box-shadow:0 0 0 3px #ffcb05,0 0 18px #ffcb0570,0 0 28px #2a75bb40; }
.story-transcript.shell > summary { position:relative; justify-content:center; text-align:center; padding-inline:48px; }
.story-transcript.shell > summary > span { position:absolute; right:18px; }
#cards .collectible-card { background:transparent; }
#cards .iconic-gallery figcaption { background:var(--paper); }
#cards .card-lugia figcaption { background:var(--navy); height:100%; box-sizing:border-box; }
#cards .card-lugia .card-display { background:radial-gradient(ellipse at 50% 42%, #fffce2cc 0%, #f9e79ecc 48%, #d9b549cc 100%); }
#cards .iconic-gallery .card-display { background:radial-gradient(ellipse at center, #fffdf5cc, color-mix(in srgb,var(--rarity-tint) 80%,transparent)); }
#economics .fee-breakdown > div { font-size:13.2px; padding-block:14.3px; }
#economics .fee-breakdown dd { font-size:15.4px; }
@media(max-width:800px) {
 #journey .scene-controls button { font-size:13px; }
 #journey .scene-controls button > span { font-size:11px; }
 #economics .fee-breakdown > div { font-size:11px; }
 #economics .fee-breakdown dd { font-size:13.2px; }
}
@media(max-width:600px) {
 #journey .scene-controls { padding:5px; }
 #economics .fee-breakdown > div { font-size:12.1px; }
 #economics .fee-breakdown dd { font-size:14.3px; }
}

/* The sun and its rays share one light envelope. */
.public-background .solar-light { animation:solar-breathe 10s ease-in-out infinite; }
.public-background .sun-light { animation:none; }
.public-background .ray-light { transform-origin:820px 603px; animation:solar-drift 10s ease-in-out infinite; }
.background-point { transform-origin:0 0; animation:point-twinkle var(--duration) ease-in-out var(--delay) infinite; }
@keyframes solar-drift { 0%,100% { transform:rotate(-1deg); } 50% { transform:rotate(1deg); } }
@keyframes point-twinkle { 0%,100% { opacity:.15;transform:scale(.7); } 38% { opacity:.45;transform:scale(.9); } 52% { opacity:1;transform:scale(1.55); } 70% { opacity:.3;transform:scale(.8); } }
@media(prefers-reduced-motion:reduce) {
 .public-background .solar-light,.public-background .ray-light,.background-point { animation:none; }
 .public-background .solar-light { opacity:.4; }
 .background-point { opacity:.65; }
}



.water-flow { stroke-dasharray:18 25 6 31; animation:water-current var(--flow-time) linear var(--flow-delay) infinite,water-light 5s ease-in-out var(--flow-delay) infinite; }
@keyframes water-current { from { stroke-dashoffset:80; } to { stroke-dashoffset:0; } }
@keyframes water-light { 0%,100% { opacity:.25; } 50% { opacity:.75; } }
@media(prefers-reduced-motion:reduce) { .water-flow { animation:none; opacity:.25; } }

/* A distinct light pulse supplements the gentle angular movement. */
.public-background .solar-light { animation:solar-breathe 7s ease-in-out infinite; }
.public-background .ray-light { animation:solar-drift 14s ease-in-out infinite,ray-radiance 7s ease-in-out infinite; }
@keyframes solar-breathe { 0%,100% { opacity:.14; } 50% { opacity:1; } }
@keyframes ray-radiance { 0%,100% { opacity:.12; } 50% { opacity:.8; } }
@media(prefers-reduced-motion:reduce) {
 .public-background .solar-light,.public-background .ray-light { animation:none; }
 .public-background .solar-light { opacity:.4; }
 .public-background .ray-light { opacity:.5; }
}

/* One continuous panel keeps expanded text readable without doubling the fill. */
.faq-list > details[open] { background:rgb(255 253 246 / 96%); border:1px solid rgb(21 52 95 / 40%); border-radius:12px; padding-bottom:16px; }
.faq-list > details[open] > summary { background:transparent; border:0; }
.faq-list > details[open] > p { padding-inline:16px; }
.story-transcript.shell[open] { background:rgb(255 253 246 / 96%); }
.story-transcript.shell[open] > summary { background:transparent; }
#cards .iconic-details[open] { background:rgb(255 253 246 / 96%); border:1px solid rgb(21 52 95 / 40%); border-radius:10px; padding:12px; }

/* Match the existing mobile hero breakpoint; desktop keeps its two-column alignment. */
@media(max-width:734px) {
 .public-landscape main h1,.public-landscape main h2 { text-align:center; }
 .public-landscape .section-heading { justify-content:center; text-align:center; }
 .public-landscape :is(#machine > .section-heading > div,#cards > .section-heading > div,.loop-intro-box,.story-panel,.economics-layout > div:first-child,.faq-intro) {
  margin-inline:auto; justify-self:center; text-align:center;
 }
}

/* Slim landing: one centered sentence, then the dashboard. Boxes stay readable on the light background. */
.hero { min-height:0; }
.hero .hero-layout { grid-template-columns:minmax(0,1fr); padding-block:28px 8px; gap:0; }
.hero .hero-copy { max-width:640px; justify-self:center; text-align:center; background:rgb(255 253 246 / 98%); }
.hero .hero-copy .holder-share-callout { justify-content:center; }
.hero .hero-copy .hero-actions { justify-content:center; }
#economics .economics-layout { grid-template-columns:minmax(0,1fr); max-width:720px; margin-inline:auto; gap:16px; }
#economics .economics-layout > div:first-child { width:100%; text-align:center; margin-inline:auto; }
#economics .economics-layout > div:first-child h2 { font-size:28px; }
#economics .economics-layout > div:first-child h2 br { display:none; }
#economics .fee-card { max-width:100%; }
:is(#machine > .section-heading > div, #machine > .recent-pulls, #cards > .section-heading > div, .economics-layout > div:first-child, .faq-intro, #economics .fee-card, .faq-list > details > summary, .faq-list > details[open], #cards .iconic-details[open]) { background:rgb(255 253 246 / 98%); }

/* Dashboard without the small captions; ETH metrics carry an approximate dollar value. */
#machine .metric > p { display:none; }
#machine .metric > strong { display:inline-block; }
#machine .metric-usd { display:inline-block; margin-left:8px; font-size:15px; font-weight:800; color:var(--muted); vertical-align:baseline; }
#machine .metric-usd:empty { display:none; }

/* Hero: each of the two sentences on a single line on wide screens. */
.hero .hero-copy { max-width:980px; width:fit-content; }
@media (min-width: 960px) {
 .hero .hero-copy .hero-description, .hero .hero-copy .holder-share-callout strong { white-space:nowrap; }
}
.hero .hero-copy { width:max-content; max-width:min(980px, 100%); margin-inline:auto; justify-self:center; }
.hero .hero-copy .hero-description, .hero .hero-copy .holder-share-callout, .hero .hero-copy .holder-share-callout strong { max-width:none; width:auto; }

/* Phone layout: tidy header, numbers that never break mid-value, one pull per row. */
@media (max-width: 600px) {
 .site-header .nav { row-gap: 6px; padding-block: 8px 6px; }
 .site-header .nav-actions { align-items: center; gap: 10px; padding-top: 2px; }
 .nav-actions .social-link { display: grid; place-items: center; }
 .nav-actions .nav-cycle { align-items: center; text-align: center; padding-left: 0; border-left: 0; }
 #machine .metrics-grid { grid-template-columns: 1fr; }
 #machine .metric { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 18px 14px; }
 #machine .metric:last-child { border-bottom: 0; }
 #machine .metric > strong { font-size: 30px; white-space: nowrap; overflow-wrap: normal; margin-top: 4px; }
 #machine .metric-usd { font-size: 14px; margin-left: 8px; }
 #machine .cycle-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .latest-cards:has(article) { grid-template-columns: 1fr; }
 .history-card .pull-facts { font-size: 12px; }
 .history-card .pull-facts a { white-space: nowrap; }
 .hero .hero-copy { text-align: center; }
}

/* Tablet widths: metrics two per row so ETH values stay on one line; fact links never wrap. */
@media (min-width: 601px) and (max-width: 1050px) {
 #machine .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 #machine .metric { border-bottom: 1px solid var(--line); }
 #machine .metric:nth-child(2n) { border-right: 0; }
 #machine .metric:nth-last-child(-n+2) { border-bottom: 0; }
 #machine .metric > strong { font-size: 32px; white-space: nowrap; }
 .latest-cards:has(article) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.history-card .pull-facts a { white-space: nowrap; }
.history-card .pull-facts dd { overflow-wrap: anywhere; }

/* FAQ heading on one line on wide screens. */
@media (min-width: 735px) { #faq-title { white-space: nowrap; } }

/* No full-width rule under the hero. */
.public-landscape .hero { border-bottom: 0; }

/* The landing screen: hero copy plus one row of graded cards fill the first
   viewport, the dashboard starts after the first scroll. */
.public-landscape .hero { min-height: calc(100svh - var(--nav-height)); display: flex; flex-direction: column; justify-content: center; }
.hero-card-row { display: flex; justify-content: center; align-items: flex-end; gap: 18px; margin-top: 34px; padding-bottom: 8px; }
.hero-card-row img { width: 112px; height: auto; flex: 0 0 auto; border-radius: 6px; filter: drop-shadow(0 10px 14px rgb(21 52 95 / 26%)); animation: deco-float var(--t, 16s) ease-in-out var(--d, 0s) infinite alternate; }
.hero-card-row img:nth-child(1) { transform: rotate(-7deg) translateY(6px); --d: -2s; }
.hero-card-row img:nth-child(2) { transform: rotate(4deg) translateY(-4px); --d: -9s; --t: 19s; }
.hero-card-row img:nth-child(3) { transform: rotate(-3deg) translateY(2px); --d: -5s; --t: 21s; }
.hero-card-row img:nth-child(4) { transform: rotate(5deg) translateY(-8px); --d: -13s; }
.hero-card-row img:nth-child(5) { transform: rotate(-5deg) translateY(1px); --d: -7s; --t: 18s; }
.hero-card-row img:nth-child(6) { transform: rotate(3deg) translateY(-3px); --d: -11s; --t: 22s; }
.hero-card-row img:nth-child(7) { transform: rotate(-6deg) translateY(5px); --d: -4s; }
@keyframes deco-float { from { translate: 0 0; } to { translate: 0 -8px; } }
@media (max-width: 1180px) { .hero-card-row img { width: 92px; } .hero-card-row { gap: 12px; } }
@media (max-width: 860px) {
  .public-landscape .hero { min-height: 0; }
  .hero-card-row { flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .hero-card-row img { width: 72px; }
}
@media (prefers-reduced-motion: reduce) { .hero-card-row img { animation: none; } }

/* Wallet list: the four addresses that do the work, one short table. */
.wallets { padding-block: 24px 96px; }
.wallets-intro { background: rgb(255 253 246 / 96%); border: 1px solid rgb(21 52 95 / 40%); border-radius: 16px; padding: 16px 20px; width: fit-content; max-width: 100%; }
.wallets-note { margin-top: 10px; font-size: 15px; color: #294565; }
.wallet-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; border: 2px solid var(--navy); border-radius: 13px; background: var(--paper); box-shadow: 5px 6px 0 #15345f16; overflow: hidden; }
.wallet-list li { display: grid; grid-template-columns: minmax(0, 1.1fr) 130px minmax(0, 1.5fr); gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 14px; }
.wallet-list li:first-child { border-top: 0; }
.wallet-role { font-weight: 700; }
.wallet-net { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wallet-address { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; color: var(--navy); }
a.wallet-address { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 860px) { .wallet-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Phone pulls: the three facts stack in one column so nothing hangs out of the card. */
@media (max-width: 600px) {
 .history-card .pull-facts { grid-template-columns: minmax(0, 1fr); gap: 0; font-size: 11px; }
 .history-card .pull-facts dt { margin-top: 6px; }
 .history-card .pull-facts dd { overflow-wrap: anywhere; }
}

/* Welcome hero: the concept in one breath, straight on the page. No panel, a soft light behind the words. */
.hero .hero-copy.hero-welcome { background: radial-gradient(ellipse 70% 80% at 50% 50%, rgb(255 249 239 / 92%) 35%, rgb(255 249 239 / 0%) 75%); border: 0; border-radius: 0; box-shadow: none; padding: 48px 56px; width: min(100%, 900px); max-width: 100%; text-align: center; }
.hero-welcome .hero-kicker { margin: 0 0 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-kicker-text { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 44px); line-height: 1; letter-spacing: -0.01em; color: var(--navy); }
.hero-kicker-logo { display: block; height: clamp(42px, 6vw, 64px); width: auto; }
.hero-welcome .hero-headline { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.02em; color: var(--yellow); -webkit-text-stroke: 0.11em #1b72bb; paint-order: stroke fill; text-shadow: 0.045em 0.065em 0 #153e7e; }
.hero .hero-copy.hero-welcome .hero-description { margin: 22px auto 0; max-width: 720px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; font-weight: 700; color: var(--navy); white-space: normal; }
.hero-welcome .hero-claim { margin: 18px 0 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 900; color: var(--navy); }
.hero .hero-copy.hero-welcome .hero-actions { justify-content: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.hero-welcome .hero-actions .button { gap: 10px; }
@media (max-width: 600px) {
  .hero .hero-copy.hero-welcome { padding: 28px 12px; background: radial-gradient(ellipse 95% 95% at 50% 50%, rgb(255 249 239 / 96%) 55%, rgb(255 249 239 / 0%) 92%); }
  .hero-welcome .hero-kicker { margin-bottom: 12px; gap: 8px; }
  .hero-kicker-text { font-size: clamp(22px, 8vw, 30px); }
  .hero-kicker-logo { height: clamp(30px, 11vw, 42px); }
  .hero-welcome .hero-headline { font-size: clamp(30px, 9vw, 40px); }
  .hero .hero-copy.hero-welcome .hero-description { font-size: 16px; }
  .hero-welcome .hero-claim { font-size: 20px; }
}

/* The details: four short facts on the landing-page panels. */
#facts .section-heading { justify-content: center; text-align: center; }
#facts > .section-heading > div { background: rgb(255 253 246 / 98%); border: 1px solid rgb(21 52 95 / 40%); border-radius: 16px; padding: 16px 20px; width: fit-content; margin-inline: auto; }
.fact-grid { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fact-grid li { background: rgb(255 253 246 / 98%); border: 1px solid rgb(21 52 95 / 40%); border-radius: 16px; padding: 22px 20px; text-align: center; display: flex; flex-direction: column; gap: 22px; }
/* Fixed two-line-tall title block: a one-line title centers inside it, a wrapped one fills it,
   so every card's description starts at the same height either way. */
.fact-grid strong { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.05; color: var(--navy); display: flex; align-items: center; justify-content: center; min-height: calc(2 * 1.05em); }
.fact-grid span { font-size: 16px; line-height: 1.55; color: #294565; }
@media (max-width: 900px) { .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fact-grid { grid-template-columns: 1fr; } }

/* Questions: no rule above the list, every box the same distance from the next, open or closed. */
.faq-list { border-top: 0; }
.faq-list > details { margin-bottom: 14px; border-bottom: 0; }
.faq-list > details:last-child { margin-bottom: 0; }
.faq-list > details > summary { margin-bottom: 0; }
.faq-list > details[open] > summary { margin-bottom: 0; }
.faq-list > details[open] > p { padding-inline: 16px; margin-top: 4px; }
/* A clear rule between the question and its answer once a FAQ item is open. */
.faq-list > details[open] > p:first-of-type { border-top: 1px solid rgb(21 52 95 / 25%); padding-top: 16px; margin-top: 10px; }