/* ══════════════════════════════════════════════════════════════════════
   BASE — the brand, and the furniture every page shares.

   This is the shell the ko.thatwednesday site starts from: the colour and
   type tokens, the page reset, the measure, the buttons, the nav bar and
   the footer. Nothing here describes a section of a page — all of that
   belongs to whatever the page is.

   Lifted from the studio site's site.css, which had grown to 533 lines
   because every section of every page had landed in it. Only the shared
   parts came across.

   The twi mark and the character are not here. They are a brand system of
   their own and they live in koko.css / koko.js, which also means the
   hover and blink rules have one home rather than two.
   ────────────────────────────────────────────────────────────────────── */

/* ── tokens ──────────────────────────────────────────────────────────── */
:root {
  --deep:    #0E2A24;
  --deep2:   #123A31;
  --ink:     #10403B;
  --signal:  #C8F08F;
  --paper:   #F4EFE4;
  --daylight:#FBFAF7;
  --clay:    #D9744C;
  --air:     #8FBCC6;
  --midday:  #E8B93C;

  /* Text steps, so nothing fades type with a bare opacity. Ratios are
     against --daylight on one side and --deep on the other; all clear
     WCAG AA. Any page's own accent sits on top of these. */
  --text-primary:   #10403B;
  --text-secondary: #3D6660;
  --text-muted:     #4D736D;
  --on-dark-primary:   #F4EFE4;
  --on-dark-secondary: #C1C4BA;
  --on-dark-muted:     #AFB4AA;
}

/* ── the page ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Outfit, Helvetica, sans-serif;
  background: var(--daylight);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* the measure everything lines up to */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 400;
}

/* ── keyboard ────────────────────────────────────────────────────────
   Nothing on the page showed a focus ring: all seventeen focusable
   elements came back with no outline and no shadow, so tabbing through
   it you cannot see where you are. :focus-visible only, so a mouse click
   does not draw one.

   Amber on both grounds — it is the one accent that carries against
   cream and deep green alike, and the offset keeps it off the glyphs. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--midday);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── tap targets ─────────────────────────────────────────────────────
   Nav and footer links were 17 to 23px tall. The padding takes them to
   44, which is what a thumb needs, without changing how they look. */
.menu a { padding-block: 13px; }
.foot-col a { padding-block: 13px; margin-bottom: 0; }
.foot-bottom a { display: inline-block; padding-block: 14px; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: Outfit, sans-serif; font-weight: 500;
  border-radius: 8px; cursor: pointer; border: 0; letter-spacing: -0.01em;
}
.btn svg { width: 16px; height: 16px; }
.btn-ink { background: var(--ink); color: var(--daylight); padding: 13px 22px; font-size: 15px; }
.btn-ink:hover { background: #0c3833; }
.btn-signal { background: var(--signal); color: var(--deep); padding: 14px 24px; font-size: 15px; }
.btn-signal:hover { background: #d6f6a8; }
.btn-outline-light {
  background: transparent; color: var(--paper);
  border: 1px solid rgba(244,239,228,0.4); padding: 14px 24px; font-size: 15px;
}
.btn-outline-light:hover { border-color: var(--paper); }
.btn-outline-ink {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(16,64,59,0.28); padding: 12px 20px; font-size: 15px;
}
.btn-outline-ink:hover { border-color: var(--ink); }

/* ── the bar ─────────────────────────────────────────────────────────── */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,250,247,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(16,64,59,0.10);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .wordmark { font-size: 22px; letter-spacing: -0.04em; color: var(--ink); }
/* a second word after the wordmark, ruled off from it — which is how this
   site says it is the Ko side of thatwednesday rather than the studio */
.brand .byline {
  font-size: 13px; letter-spacing: 0.02em; color: var(--text-muted);
  padding-left: 10px; margin-left: 4px; border-left: 1px solid rgba(16,64,59,0.22);
}
.menu { display: flex; align-items: center; gap: 34px; }
.menu a { font-size: 15px; color: var(--text-secondary); letter-spacing: -0.01em; }
.menu a:hover { color: var(--ink); }

/* ── the panel under a nav item ──────────────────────────────────────
   Kept because a suite of five products will want one. Nothing uses it
   yet: add a .m-item to the menu and put a .mega inside it.
   ────────────────────────────────────────────────────────────────────── */
.menu .m-item { position: relative; display: flex; align-items: center; height: 78px; }
.menu .m-item > a { display: inline-flex; align-items: center; gap: 6px; }
.menu .m-item > a .cv2 { transition: transform 0.18s ease; }
.menu .m-item:hover > a { color: var(--ink); }
.menu .m-item:hover > a .cv2 { transform: rotate(180deg); }
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  display: none; z-index: 60; width: 600px;
  background: #FFFFFF; border: 1px solid rgba(16,64,59,0.12);
  border-radius: 12px; box-shadow: 0 26px 60px rgba(14,42,36,0.18);
  padding: 26px; grid-template-columns: 1fr 1fr; gap: 28px;
}
.menu .m-item:hover .mega, .menu .m-item:focus-within .mega { display: grid; }
.mega-col { min-width: 0; display: flex; flex-direction: column; }
.mega .mh { display: block; font-size: 17px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.mega .mh:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega .msub { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--text-muted); margin: 5px 0 12px; }
.mega .mrule { height: 1px; background: rgba(16,64,59,0.1); margin-bottom: 10px; }
.mega .mlist { display: flex; flex-direction: column; gap: 1px; }
.mega .mlist a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 6px; font-size: 14.5px;
  color: var(--text-secondary); letter-spacing: -0.01em;
}
.mega .mlist a:hover { background: #ECF3E1; color: var(--ink); }
.mega .mlist a em { font-style: normal; font-size: 12.5px; color: var(--text-muted); flex: none; }
.mega .mlist a.soon { color: var(--text-muted); cursor: default; }
.mega .mlist a.soon:hover { background: transparent; color: var(--text-muted); }
.mega .mfoot {
  margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.mega .mfoot svg { width: 14px; height: 14px; }
.mega .mfoot:hover { gap: 10px; }

/* ── the foot ────────────────────────────────────────────────────────── */
footer { background: var(--deep); color: var(--paper); padding: 64px 0 48px; margin-top: 20px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.foot-top .wordmark { color: var(--signal); }
.foot-links { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col h4 { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); margin: 0 0 16px; font-weight: 500; }
.foot-col a { display: block; font-size: 15px; color: var(--on-dark-secondary); margin-bottom: 10px; }
.foot-col a:hover { color: var(--signal); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(244,239,228,0.14);
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--on-dark-muted); flex-wrap: wrap;
}
.foot-bottom a { color: var(--on-dark-secondary); }
.foot-bottom a:hover { color: var(--signal); }

/* ── narrow ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  /* the bar's links move into the panel nav-menu.js opens */
  .menu { display: none; }
}
/* phones: the bar has to stay one line — the second word goes first */
@media (max-width: 620px) {
  .nav-inner { height: 62px; }
  .brand { gap: 9px; }
  .brand .byline { display: none; }
  .brand .wordmark { font-size: 19px; white-space: nowrap; }
}
/* the mark alone, once the three-line button is in the bar too */
@media (max-width: 520px) {
  .brand .wordmark { display: none; }
  .nav-inner > .btn { padding: 14px 15px; font-size: 13.5px; white-space: nowrap; }
  .nav-inner > .btn svg { display: none; }
}