/* holofish.app landing page (rendered by src/services/site-page.ts). Mobile first; Paper (light) and Night (dark)
   palettes from .impeccable.md; the sky bands are the pixel sky of the store screenshots and the lake strips. */

@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans-600.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Silkscreen";src:url(fonts/silkscreen.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --paper:#F3EFE6;--surface:#FBF8F2;--sunken:#E9E3D6;--line:#D8D0BF;
  --ink:#14202B;--soft:#4A5866;--soft-sky:#33424F;
  --accent:#E4511F;--accent-ink:#B73E16;
  /* pixel sky bands (store shots, lake strips) */
  --sky1:#8DCAE2;--sky2:#A3D5E7;--sky3:#BCE0EA;--sky4:#D3EAE8;
  --end-sky:#8DCAE2;--water:#5DB3C4;
  --btn:#14202B;--on-btn:#FBF8F2;
  --tag:#14202B;--on-tag:#FBF8F2;
  --shadow:rgba(20,32,43,.42);
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pixel:"Silkscreen",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:16px;
  --max:1120px;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0A0F14;--surface:#111A22;--sunken:#111A22;--line:#24323F;
    --ink:#EAF0F2;--soft:#9BAAB6;--soft-sky:#9BAAB6;
    --accent:#FF6B3D;--accent-ink:#FF8A63;
    --sky1:#0A0F14;--sky2:#0A0F14;--sky3:#0A0F14;--sky4:#0A0F14;
    --end-sky:#2D5595;--water:#204D86;
    --btn:#EAF0F2;--on-btn:#0A0F14;
    --tag:#EAF0F2;--on-tag:#0A0F14;
    --shadow:rgba(0,0,0,.6);
  }
}
@media (min-width:600px){:root{--gutter:32px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.store{transition:none}}
body{position:relative;margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{display:block}
a{color:inherit;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:#FBF8F2}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

.skip{position:absolute;left:-9999px;top:8px;z-index:9;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;text-decoration:none}
.skip:focus{left:16px}

/* ───────── type ───────── */
.over{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:400 12px/1.3 var(--pixel);letter-spacing:.14em;text-transform:uppercase}
.over::before{content:"";flex:none;width:7px;height:7px;background:var(--accent);transform:rotate(45deg)}
h1,h2,h3{font-weight:400;text-wrap:balance}
h1{margin:0;font:400 clamp(54px,15.5vw,124px)/.92 var(--serif);letter-spacing:-.02em}
h2{margin:0;font:400 clamp(42px,11.5vw,78px)/.98 var(--serif);letter-spacing:-.015em}
h1 em,h2 em,.big em{font-style:italic;color:var(--accent-ink)}
.body{margin:18px 0 0;max-width:40ch;font-size:18px;line-height:1.55;color:var(--soft)}
.fine{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--soft)}
.note{margin:22px 0 0;max-width:34ch;font:italic 400 22px/1.3 var(--serif)}
.note-tag{display:inline-block;margin-right:4px;padding:5px 8px 4px;border-radius:4px;background:var(--tag);color:var(--on-tag);font:normal 400 10px/1 var(--pixel);letter-spacing:.1em;text-transform:uppercase;vertical-align:.32em}

/* ───────── header ───────── */
.top{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) max(var(--gutter),calc((100% - var(--max)) / 2)) 0}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:400 28px/1 var(--serif);letter-spacing:-.01em;text-decoration:none}
.logo em{font-style:italic;color:var(--accent-ink)}
.logo-icon{flex:none;width:36px;height:36px;border-radius:9px;box-shadow:0 1px 3px rgba(12,24,36,.22)}
.lang{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:38px;border-radius:999px;font:400 12px/1 var(--pixel);letter-spacing:.08em;text-decoration:none;color:var(--soft)}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{background:var(--ink);color:var(--paper)}

/* ───────── sky bands ───────── */
.band{position:relative;background:linear-gradient(var(--sky1) 0 30%,var(--sky2) 30% 56%,var(--sky3) 56% 80%,var(--sky4) 80% 100%)}
.band .body,.band .fine{color:var(--soft-sky)}
.sky-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cloud{position:absolute;display:block}
.cloud svg{width:100%;height:auto;image-rendering:pixelated}
.cl{fill:#F8FBFC}.cl-s{fill:#DDEEF4}
.c1{top:100px;right:-40px;width:92px}
.c2{top:30px;left:42%;width:44px}
.c3{display:none;top:46%;left:-30px;width:118px}
@media (min-width:640px){.c1{top:24%;right:6%;width:110px}.c2{top:12%;left:12%;width:64px}.c3{display:block}}
.stars{display:none;position:absolute;top:0;left:22%;width:56%;height:88px;fill:#7F93A6}
.stars .st-b{fill:#EAF0F2}
@media (prefers-color-scheme:dark){.cloud{display:none}.stars{display:block}}
@media (prefers-reduced-motion:no-preference){
  .c1{animation:drift 26s ease-in-out infinite alternate}
  .c2{animation:drift 34s ease-in-out -9s infinite alternate-reverse}
  .c3{animation:drift 30s ease-in-out -4s infinite alternate}
}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(22px)}}

/* ───────── hero ───────── */
.hero .band{padding:calc(92px + env(safe-area-inset-top)) var(--gutter) 30px}
.hero-copy{position:relative;z-index:1;max-width:var(--max);margin:0 auto}
.app-icon{display:block;width:96px;height:96px;margin:0 0 20px;border-radius:22px;box-shadow:0 14px 30px rgba(12,24,36,.28),0 2px 6px rgba(12,24,36,.2)}
.hero h1{max-width:9.5em}
.lead{margin:20px 0 0;max-width:35ch;font-size:19px;line-height:1.5;color:var(--soft-sky)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:26px}
.more{display:inline-block;padding:10px 0;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.hero-art{display:block}
.hero-art img{width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .9s var(--ease) both}
  .hero-copy>:nth-child(2){animation-delay:.06s}
  .hero-copy>:nth-child(3){animation-delay:.14s}
  .hero-copy>:nth-child(4){animation-delay:.22s}
  .hero-copy>:nth-child(5){animation-delay:.3s}
  .hero-copy>:nth-child(6){animation-delay:.38s}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:640px){
  .hero .band{padding-bottom:36px}
  .hero-copy{text-align:center}
  .hero-copy .over,.ctas{justify-content:center}
  .hero h1,.lead,.app-icon{margin-inline:auto}
  .hero h1{max-width:11em}
}
@media (min-width:1100px){
  .hero .band{padding-top:120px}
  .hero-art img{max-height:820px;object-fit:cover;object-position:50% 0}
}

/* ───────── App Store button ───────── */
.store{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px 0 20px;border-radius:999px;background:var(--btn);color:var(--on-btn);
  font:600 17px/1 var(--sans);letter-spacing:.005em;text-decoration:none;box-shadow:0 10px 24px -12px var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.store .apple{flex:none;width:22px;height:22px;margin-top:-2px;fill:currentColor}
.store:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px var(--shadow)}
.store:active{transform:translateY(0)}

/* ───────── how it works ───────── */
.how{padding:68px 0 60px}
.steps{display:grid;margin:30px 0 0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:52px 1fr;padding:18px 0 20px;border-top:1px solid var(--line)}
.steps .num{grid-row:span 2;padding-top:6px;font:400 20px/1 var(--pixel);color:var(--accent-ink)}
.steps h3{margin:0;font:400 30px/1.1 var(--serif)}
.steps p{margin:6px 0 0;color:var(--soft)}
@media (min-width:900px){
  .how{padding:110px 0 100px}
  .steps{grid-template-columns:repeat(3,1fr);gap:40px;margin-top:44px}
  .steps li{display:block;padding-top:22px;border-top:2px solid var(--ink)}
  .steps .num{display:block;margin-bottom:22px}
}

/* ───────── features (one per store shot) ───────── */
.feat .band{padding:60px var(--gutter) 22px}
.feat-copy{position:relative;z-index:1;max-width:600px}
.shot{margin:0}
.shot img{width:100%;height:auto}
@media (prefers-color-scheme:dark){
  .shot img,.hero-art img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%);mask-image:linear-gradient(to bottom,transparent,#000 16%)}
}
@media (min-width:720px){
  .feat{--shot:clamp(300px,40vw,440px);display:grid;grid-template-columns:minmax(0,1fr) var(--shot);gap:clamp(48px,7vw,104px);align-items:center;max-width:calc(var(--max) + 2 * var(--gutter));margin:0 auto;padding:clamp(72px,9vw,110px) var(--gutter)}
  .feat+.feat{border-top:1px solid var(--line)}
  .feat .band{background:none;padding:0}
  .feat h2,.split h2{font-size:clamp(40px,5.6vw,72px)}
  .feat .band .body{color:var(--soft)}
  .feat.flip{grid-template-columns:var(--shot) minmax(0,1fr)}
  .feat.flip .shot{order:-1}
  .shot img{border-radius:30px;box-shadow:0 40px 70px -40px var(--shadow),0 0 0 1px rgba(20,32,43,.08);-webkit-mask-image:none;mask-image:none}
}

/* tiers */
.tiers{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;max-width:520px}
.tier{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px 0 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600}
.gem{width:10px;height:10px;transform:rotate(45deg);background:var(--t)}
.t-common{--t:#9AA3AE}.t-uncommon{--t:#3FBF6F}.t-rare{--t:#3D8BFF}.t-epic{--t:#A45CFF}.t-legendary{--t:#F5B82E}.t-mythic{--t:#1FE5D3}
.t-record{--t:#E8C065;background:#14110B;border-color:#14110B;color:#E8C065}

/* tackle box: pixel baits on a line */
.lures{display:flex;align-items:flex-start;justify-content:space-around;gap:10px;max-width:420px;margin:26px 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.lure{transform-origin:50% 0}
.lure img{image-rendering:pixelated}
.lure-float{margin-top:6px}.lure-spinner{margin-top:0}.lure-wobbler{margin-top:16px}.lure-spoon{margin-top:4px}.lure-softbait{margin-top:22px}
@media (prefers-reduced-motion:no-preference){
  .lure{animation:sway 3.6s ease-in-out infinite alternate}
  .lure:nth-child(2){animation-duration:4.2s;animation-delay:-1s}
  .lure:nth-child(3){animation-duration:3.1s;animation-delay:-2s}
  .lure:nth-child(4){animation-duration:4.6s;animation-delay:-.5s}
  .lure:nth-child(5){animation-duration:3.9s;animation-delay:-1.6s}
}
@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}

/* ───────── tournaments and invites ───────── */
.tourney,.invite{padding:76px 0}
.invite{background:var(--sunken)}
.split{display:grid;gap:36px}
.banners{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.banners img{width:100%;height:auto;border-radius:14px;image-rendering:pixelated}
.invite-art .lake{width:100%;height:auto;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px -36px var(--shadow)}
.big{margin:18px 0 0;font:400 32px/1.15 var(--serif)}
@media (min-width:900px){
  .tourney,.invite{padding:120px 0}
  .split{grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,104px);align-items:center}
  .banners{gap:14px}
}

/* ───────── FAQ ───────── */
.faq{padding:76px 0}
.faq .wrap{max-width:calc(860px + 2 * var(--gutter))}
.qa{margin-top:30px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:16px 0;cursor:pointer;list-style:none;font:400 25px/1.2 var(--serif)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--accent-ink)}
.plus{position:relative;flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:var(--surface)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);transition:transform .25s var(--ease)}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(90deg) scaleX(0)}
.answer p{margin:0 0 22px;max-width:62ch;color:var(--soft)}
.answer a{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.plus::before,.plus::after{transition:none}}
@media (min-width:900px){.faq{padding:120px 0}}

/* ───────── the end: one more cast ───────── */
.end{background:var(--end-sky);padding-top:76px;text-align:center}
.end h2{max-width:12em;margin:0 auto}
.end .body{margin-inline:auto;color:var(--soft-sky)}
.store-end{margin-top:28px}
.sign{margin:22px 0 0;font:400 12px/1.3 var(--pixel);letter-spacing:.14em;text-transform:uppercase}
.end-copy{padding-bottom:36px}
.strip img{width:100%;height:300px;object-fit:cover;object-position:22% 0;image-rendering:pixelated}
@media (prefers-color-scheme:dark){.end h2 em{color:#FFB08F}.end .body{color:#D5DEE8}}
@media (min-width:900px){.end{padding-top:120px}.strip img{height:450px;object-position:50% 0}}

/* ───────── footer (under water) ───────── */
.foot{background:var(--water);padding:36px 0 calc(44px + env(safe-area-inset-bottom));font-size:15px}
.foot .logo{font-size:26px}
.foot ul{display:flex;flex-wrap:wrap;gap:0 20px;margin:14px 0 8px;padding:0;list-style:none}
.foot li a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.foot p{margin:6px 0 0}
.foot .small{font-size:13px}
.foot a{text-decoration-color:currentColor}
.foot .logo em{color:inherit}