/* cyba.studio homepage. Layout only.
   Every colour, weight and scale comes from /themes/cyba.css, which is the
   projection of brand_token in the body. Nothing brand-critical is set here. */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* Base link colours. Wrapped in :where() so they carry almost no weight and any
   component below (.skip, .topbar-links a, .foot a) wins without a fight. Written
   as plain :not() these quietly beat the components and paint navy on navy.
   The pill is excluded because it carries its own colour from the motif. */
a:where(:not(.cyba-pill)) { color: var(--navy); }
.cyba-navy a:where(:not(.cyba-pill)) { color: var(--gold-l); }

/* ---- shell ---------------------------------------------------------- */

.wrap { max-width: 860px; margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 700px; }

section { padding: 84px 0; }
@media (max-width: 640px) { section { padding: 62px 0; } }

.paper { background: var(--paper); }

/* ---- the sticky bar --------------------------------------------------
   Always on screen, so the mark, the sections and the way in are never more
   than a glance away. The bar's own height feeds --bar so anchored sections
   can clear it when you jump to them. */

:root { --bar: 60px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy);
  border-bottom: 1px solid var(--line-d);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 22px;
  min-height: var(--bar);
}
.topbar-mark { display: flex; align-items: center; flex: none; }
/* the asset is square with the mark letterboxed inside, so the box runs taller
   than the mark. 40px of box puts the mark itself at about 23px, which is the
   "icon at 24px in bars" the logo token asks for. */
.topbar-mark img { height: 40px; width: auto; display: block; }

.topbar-links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.topbar-links::-webkit-scrollbar { display: none; }
.topbar-links a {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--on-navy-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.topbar-links a:hover { color: var(--cream); }
.topbar-links a.on { color: var(--gold-l); border-bottom-color: var(--gold); }

.topbar-cta {
  flex: none;
  font-size: 15px;
  padding: 11px 22px;
  min-height: 40px;
  box-shadow: none;
}

/* Anchored sections stop below the bar instead of under it. */
[id] { scroll-margin-top: calc(var(--bar) + 14px); }

/* ---- the phone's action bar ----------------------------------------- */

.bottombar { display: none; }

@media (max-width: 780px) {
  :root { --bar: 54px; }
  .topbar-in { gap: 14px; padding: 8px 16px; }
  .topbar-mark img { height: 26px; }
  .topbar-links { gap: 20px; }
  .topbar-links a { font-size: 14.5px; }
  .topbar-cta { display: none; }

  .bottombar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--navy) 62%, rgba(42, 57, 90, 0));
  }
  .bottombar .cyba-pill { display: block; width: 100%; font-size: 16px; padding: 15px 20px; }

  /* room so the bar never sits on top of the last line of the footer */
  body { padding-bottom: 92px; }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
  font-weight: 400;
}
.skip:focus { left: 0; }

/* One visible focus style, everywhere. Never removed, only replaced. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
.cyba-navy a:focus-visible,
.cyba-navy button:focus-visible,
.cyba-navy input:focus-visible,
.cyba-navy textarea:focus-visible {
  outline-color: var(--gold-l);
}

/* ---- type ----------------------------------------------------------- */

/* The type token gives two headline scales. The cover scale is built for a
   three-word cover line; the hook is two full sentences, so the hero wears the
   working scale. Both are tokens, neither is invented. */
h1 {
  font-size: var(--h-working);
  font-weight: var(--w-head);
  line-height: 1.1;
  letter-spacing: -.015em;
}

h2 {
  font-size: clamp(28px, 4.8vw, 42px);
  font-weight: var(--w-head);
  line-height: 1.16;
  letter-spacing: -.008em;
  margin-bottom: 20px;
}

h3 {
  font-size: 20px;
  font-weight: var(--w-med);
  line-height: 1.35;
  letter-spacing: 0;
}

p + p { margin-top: 18px; }

/* One text column, 620px, about 72 characters at 18px. Headings run wider than
   it, body copy never does, so the page reads as one measure and not three. */
main p,
main li,
.holds dd,
.hero .promise { max-width: 620px; }

.lead { font-size: 20px; }
.muted { color: var(--soft); }
.cyba-navy .muted { color: var(--on-navy-soft); }

/* 300 is the body weight, but light weights get thin below about 17px.
   Anything smaller steps up to 400 so it stays legible. */
.fine { font-size: 15px; font-weight: 400; line-height: 1.65; }

.gold-on-navy { color: var(--gold-l); }
.gold-on-light { color: var(--gold-ink); }

.kick-gap { margin-bottom: 22px; }
.rule-gap { margin-bottom: 26px; }
.rule-top { margin-top: 34px; }

/* ---- 6.1 hero, the navy-hero motif ---------------------------------- */

.hero { padding: 30px 0 78px; }
.hero .coverlogo { height: 116px; width: auto; display: block; margin: 0 0 30px -2px; }
@media (max-width: 640px) { .hero .coverlogo { height: 84px; } }

.hero h1 .last { color: var(--gold-l); }

/* the for-block slot: the positioning line, two beats, gold on the second */
.hero .beats {
  margin-top: 30px;
  font-size: 18px;
  line-height: 1.9;
  color: var(--on-navy-soft);
}
.hero .beats span { color: var(--gold-l); }

.hero .promise {
  margin-top: 24px;
  font-size: 21px;
  max-width: 34ch;
}

.hero .cta { margin-top: 34px; }

/* ---- 6.3 the self-similar diagram ----------------------------------- */

.selfsim {
  margin-top: 38px;
  border: 1px solid var(--line-d);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  padding: 26px 20px 20px;
}
.sim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sim-panel { flex: 1 1 0; min-width: 0; max-width: 300px; }
.sim-title {
  text-align: center;
  font-size: 12px;
  font-weight: var(--w-med);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-l);
  margin-bottom: 8px;
}
.sim-arrow {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 400;
  color: var(--on-navy-soft);
  padding: 0 4px;
}
.sim-arrow::before, .sim-arrow::after { content: "\00a0"; }
@media (max-width: 560px) {
  .sim { flex-direction: column; gap: 4px; }
  .sim-panel { max-width: 320px; width: 100%; }
  .sim-arrow { padding: 6px 0; }
}
.selfsim svg { display: block; width: 100%; height: auto; }
.selfsim figcaption {
  margin-top: 16px;
  text-align: center;
  color: var(--on-navy-soft);
  font-size: 15px;
  font-weight: 400;
}

/* ---- 6.4 what a studio holds ---------------------------------------- */

.holds { margin-top: 30px; border-top: 1px solid var(--line); }
.holds > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 6px 28px;
  padding: 20px 2px;
  border-bottom: 1px solid var(--line);
}
.holds dt { font-weight: var(--w-med); color: var(--navy); }
.holds dd { color: var(--soft); }
@media (max-width: 620px) {
  .holds > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- 6.6 what we refuse --------------------------------------------- */

.refuse-list { list-style: none; margin-top: 26px; }
.refuse-list li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-top: 1px solid var(--line-d);
}
.refuse-list li:first-child { border-top: none; }
.refuse-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

/* ---- 6.7 origin, with the gap left visible -------------------------- */

.gap {
  margin-top: 32px;
  border: 1px dashed var(--gold);
  border-radius: 14px;
  padding: 22px 24px;
  background: rgba(201, 160, 90, .07);
}
.gap .label {
  font-size: 12px;
  font-weight: var(--w-med);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 10px;
}

/* ---- 6.9 the form --------------------------------------------------- */

.form { margin-top: 34px; max-width: 560px; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;
  margin-bottom: 7px;
  color: var(--cream);
}
.field .hint { color: var(--on-navy-soft); }

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  min-height: 48px;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #b3341f; border-width: 2px; }

.field .err {
  display: none;
  margin-top: 7px;
  font-size: 15px;
  font-weight: 400;
  color: #ffc9be;
}
.field .err.on { display: block; }

.form-foot { margin-top: 28px; }
.form-note { margin-top: 18px; color: var(--on-navy-soft); }
/* padded so the tap target clears 24px even at this small text size */
.form-note a { color: var(--gold-l); display: inline-block; padding: 4px 0; }

.sent {
  display: none;
  margin-top: 34px;
  max-width: 560px;
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 24px 26px;
  background: rgba(201, 160, 90, .1);
}
.sent.on { display: block; }
.sent h3 { color: var(--gold-l); margin-bottom: 8px; }

.trouble {
  display: none;
  margin-top: 18px;
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 16px;
  color: var(--cream);
}
.trouble.on { display: block; }

/* honeypot: off screen, never announced, never focusable */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 6.10 footer ---------------------------------------------------- */

/* The tagline is the last thing read. It gets room, not a legal line. */
.foot { background: var(--navy); color: var(--cream); padding: 58px 0 60px; }
.foot .mark { font-size: 27px; font-weight: var(--w-head); letter-spacing: -.005em; line-height: 1.4; }
.foot .lines { margin-top: 38px; line-height: 2.05; font-size: 17px; }
.foot a { color: var(--gold-l); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .legal {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line-d);
  color: var(--on-navy-soft);
}
.foot .mnemonic { color: var(--on-navy-soft); }

/* touch targets: every footer link is at least 44px tall on a phone */
.foot .lines a { display: inline-block; padding: 4px 0; min-height: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}