/* ============================================================
   Obake Studio — shared stylesheet
   ------------------------------------------------------------
   The identity that was already there is kept: teal, geometric
   display type, one gradient. What changed is that the gradient
   appears once per page instead of three times, and nothing you
   have to read ever sits on top of it.
   ============================================================ */
:root{
  /* Straight off the mark's gradient: #6fc890 -> #3d887c -> #274d5c. On this
     near-white paper the mid stop only reaches about 3.7:1, so links and labels
     take the deep stop and the mid one is kept for larger type and fills. */
  --sea:#274D5C; --sea-lift:#3D887C; --sea-deep:#1B3742;
  --spark:#6FC890;                      /* the gradient's light stop, as the warm end of the glow */
  --ink:#12201F; --ink-dim:#4A605E; --ink-faint:#7A908E;
  --paper:#FBFAF7; --card:#FFFFFF; --line:#E4E6E1; --edge:#D2D8D4;
  --disp:"Futura","Century Gothic",Poppins,"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",SFMono-Regular,ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --wrap:1140px;
}
@media(prefers-color-scheme:dark){
  :root{
    --sea:#6FC890; --sea-lift:#8FDCA8; --sea-deep:#BEEFD4;
    --ink:#E8F0EE; --ink-dim:#A2B8B5; --ink-faint:#75908D;
    --paper:#0B1413; --card:#121E1D; --line:#1E2E2C; --edge:#2A3E3B;
  }
}
:root[data-theme="dark"]{
  --sea:#6FC890; --sea-lift:#8FDCA8; --sea-deep:#BEEFD4;
  --ink:#E8F0EE; --ink-dim:#A2B8B5; --ink-faint:#75908D;
  --paper:#0B1413; --card:#121E1D; --line:#1E2E2C; --edge:#2A3E3B;
}
:root[data-theme="light"]{
  --sea:#274D5C; --sea-lift:#3D887C; --sea-deep:#1B3742;
  --ink:#12201F; --ink-dim:#4A605E; --ink-faint:#7A908E;
  --paper:#FBFAF7; --card:#FFFFFF; --line:#E4E6E1; --edge:#D2D8D4;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media(max-width:760px){.wrap{padding:0 22px}body{font-size:16px}}

h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.015em;margin:0;line-height:1.06}
a{color:inherit}
img{max-width:100%;display:block}

/* the small mono labels — kept, but as seasoning rather than the meal */
.kicker{font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--sea);margin-bottom:20px}

/* ---------------- header ---------------- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;flex:0 0 auto}
.brand img{width:26px;height:26px;flex:0 0 auto;border-radius:50%}
footer .brand img{width:20px;height:20px}
.brand b{font:700 14px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase}
nav .lk{font-size:14px;color:var(--ink-dim);text-decoration:none;white-space:nowrap}
nav .lk:hover,nav .lk:focus-visible{color:var(--sea)}
nav .lk[aria-current="page"]{color:var(--sea);font-weight:600}
.themebtn{margin-left:2px;background:none;border:1px solid var(--edge);color:var(--ink-dim);
  border-radius:8px;width:34px;height:32px;cursor:pointer;font-size:14px;line-height:1;flex:0 0 auto}
.themebtn:hover{color:var(--sea);border-color:var(--sea)}
.burger{display:none;background:none;border:1px solid var(--edge);color:var(--ink);
  border-radius:8px;width:38px;height:34px;font-size:15px;cursor:pointer}
/* Base first, narrow second. The other way round the unconditional display:flex
   wins on cascade order and the mobile menu is permanently open. */
nav .links{display:flex;align-items:center;gap:24px}
@media(max-width:940px){
  nav .links{position:absolute;top:66px;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:8px 22px 18px;gap:0;display:none}
  nav .links.open{display:flex}
  nav .links .lk{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
  .burger{display:block;order:3}
}

/* ---------------- hero ---------------- */
.hero{padding:104px 0 84px;position:relative;overflow:hidden}
.hero.short{padding:76px 0 52px}
/* 104px over a 16ch measure ran the headline to five lines and a 964px hero —
   you scrolled past the whole first screen before reaching a single product.
   A slightly smaller face on a wider measure says the same thing in three. */
.hero h1{font-size:clamp(42px,6.2vw,80px);max-width:21ch}
.hero.short h1{font-size:clamp(38px,5.2vw,64px)}
.hero h1 em{font-style:normal;color:var(--sea)}
.hero .sub{font-size:clamp(18px,2.4vw,22px);color:var(--ink-dim);max-width:56ch;
  margin:30px 0 0;line-height:1.55}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--sea);color:var(--paper);
  text-decoration:none;font-weight:600;font-size:15px;padding:14px 26px;border-radius:999px;
  border:1px solid var(--sea);transition:.18s}
.btn:hover{background:var(--sea-lift);border-color:var(--sea-lift)}
.btn.ghost{background:none;color:var(--ink);border-color:var(--edge)}
.btn.ghost:hover{border-color:var(--sea);color:var(--sea);background:none}

/* The one gradient. A band of light behind the page, not a surface anybody has
   to read words off. That was the whole problem before. */
.glow{position:absolute;inset:-40% -20% auto -20%;height:150%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 40% at 18% 30%, color-mix(in srgb,var(--sea) 26%,transparent) 0%, transparent 70%),
    radial-gradient(40% 38% at 82% 18%, color-mix(in srgb,var(--spark) 22%,transparent) 0%, transparent 68%),
    radial-gradient(50% 44% at 62% 74%, color-mix(in srgb,var(--sea-lift) 20%,transparent) 0%, transparent 72%);
  filter:blur(14px)}

/* ---------------- sections ---------------- */
section{padding:92px 0;border-top:1px solid var(--line)}
section.tight{padding:64px 0}
section h2{font-size:clamp(30px,4.6vw,50px);max-width:20ch}
/* Headings carry no top margin, which is right when the h2 opens a section and
   wrong on a prose page that runs several under one. */
section p + h2{margin-top:54px}
.lede{font-size:clamp(17px,2vw,20px);color:var(--ink-dim);max-width:62ch;margin:22px 0 0}

/* ---------------- the tools ---------------- */
.tools{display:grid;gap:20px;margin-top:52px}
.tool{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px}
@media(max-width:820px){.tool{grid-template-columns:1fr;gap:22px;padding:26px}}
.tool .face{aspect-ratio:3/4;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font:700 30px/1 var(--disp);letter-spacing:-.02em;color:#fff;text-align:center;padding:16px}
/* The three app icons carry their own ground, so the face is just a frame for
   them; Glacier is a bare mark and keeps a pale panel to sit on. */
.face.leef,.face.daisy,.face.clac{background:none;padding:0;aspect-ratio:1;align-self:start}
.face.leef img,.face.daisy img,.face.clac img{width:100%;border-radius:22%}
/* The real Glacier mark, on a pale ground rather than the brand gradient: the
   mark IS that gradient (#78C7BF -> #00ADBE -> #004667), so laying it on itself
   would lose the bottom third of the shape into the background. */
.face.glacier{background:#E9F3F6;aspect-ratio:1;align-self:start;border-radius:22%}
.face img{width:74%;height:auto}
.tool h3{font-size:29px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.status{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:1px solid var(--edge);color:var(--ink-faint)}
.status.live{color:var(--sea);border-color:var(--sea)}
.tool .one{font-size:19px;color:var(--ink);margin:14px 0 0;font-weight:500}
.tool p.body{color:var(--ink-dim);margin:12px 0 0;max-width:62ch}
.tool ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tool ul li{font-size:13px;color:var(--ink-dim);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;background:var(--paper)}
.go{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-weight:600;
  font-size:15px;color:var(--sea);text-decoration:none}
.go:hover{text-decoration:underline}
/* A card can end in more than one destination — the store, then the long
   write-up. .go carries its own top margin, so the row zeroes it and owns
   the spacing instead. */
.golist{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px}
.golist .go{margin-top:0}
/* A caveat that qualifies a feature claim travels with the claim. Filing the
   Apple Intelligence hardware requirement somewhere nobody looks would be
   technically true and practically a lie. */
.note{margin:16px 0 0;font-size:13px;line-height:1.55;color:var(--ink-faint);max-width:62ch}

/* clac! is sold in three tiers instead of rented monthly, which is most of the
   argument for it — so the prices are the pitch, not a footnote. */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  margin-top:18px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tier{background:var(--card);padding:16px 18px}
.tier .name{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
.tier .price{font:700 21px/1 var(--disp);margin:10px 0 0}
.tier p{font-size:13.5px;color:var(--ink-dim);margin:8px 0 0}

/* ---------------- principle / info grid ---------------- */
.grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;
  margin-top:52px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
/* The grid shows its own background through the 2px gaps, which is what draws
   the rules — so an empty cell reads as a stray grey block. .four sizes for
   exactly four items so there is never one. */
.grid6.four{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pr{background:var(--paper);padding:32px 28px}
.pr .n{font:600 11px/1 var(--mono);color:var(--sea);letter-spacing:.16em}
.pr h3{font-size:20px;margin:14px 0 10px}
.pr p{margin:0;color:var(--ink-dim);font-size:15.5px}

/* ---------------- people ---------------- */
/* 420 rather than 300, so four people land 2x2 instead of 3 + a lonely one */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:20px;margin-top:52px}
@media(max-width:900px){.people{grid-template-columns:1fr}}
.person{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px}
.person .role{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
/* Square source images, so the aspect-ratio is declared rather than left to the
   intrinsic size — the card must not reflow when the photo finally decodes. */
.person .portrait{width:84px;height:84px;aspect-ratio:1;object-fit:cover;border-radius:50%;
  margin:16px 0 0;border:1px solid var(--line)}
.person h3{font-size:24px;margin:12px 0 0}
.person p{color:var(--ink-dim);font-size:15.5px;margin:14px 0 0}

/* ---------------- builds ---------------- */
.builds{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:820px){.builds{grid-template-columns:1fr}}
.plat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px}
.plat h3{font-size:22px}
.plat > p{color:var(--ink-dim);font-size:15.5px;margin:10px 0 24px}
.build{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.build b{font:700 19px/1 var(--disp)}
.build .ver{font:500 11px/1 var(--mono);color:var(--ink-faint);letter-spacing:.08em}
.build .st{margin-left:auto;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:1px solid var(--edge);color:var(--ink-faint);white-space:nowrap}
.build .st.ok{color:var(--sea);border-color:var(--sea)}
/* Where a build has somewhere to go, the status pill is the link — so the row
   gains a destination without gaining a second thing to read. The pill is
   already the affordance, so it does not also need an underline. */
a.st{text-decoration:none}
a.st:hover{color:var(--sea);border-color:var(--sea)}

/* ---------------- channels ---------------- */
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:48px}
.chan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;
  text-decoration:none;display:block;transition:.18s}
.chan:hover{border-color:var(--sea);transform:translateY(-2px)}
.chan .role{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sea)}
.chan h3{font-size:22px;margin:12px 0 8px}
.chan p{color:var(--ink-dim);font-size:15.5px;margin:0}

/* ---------------- contact ---------------- */
.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:start}
@media(max-width:820px){.contact{grid-template-columns:1fr;gap:32px}}
.contact dl{margin:0;font-size:15.5px}
.contact dt{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:22px}
.contact dt:first-child{margin-top:0}
.contact dd{margin:8px 0 0}
.contact dd a{color:var(--sea);text-decoration:none}
.contact dd a:hover{text-decoration:underline}

footer{border-top:1px solid var(--line);padding:36px 0 52px;color:var(--ink-faint);font-size:13.5px}
footer .frow{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
footer a{color:var(--ink-faint);text-decoration:none}
footer a:hover{color:var(--sea)}
footer .sp{margin-left:auto}
@media(max-width:700px){footer .sp{margin-left:0;width:100%}}

:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}