/* ============================================================
   ALEX MUREȘAN — personal brand
   Light / premium / pastel theme (daydream-leaning)
   Warm white + soft charcoal + soft pastel blocks
   Bricolage Grotesque · Hanken Grotesk · Space Mono
   Single accent: tangerine. ✦ sparkle + am monogram retained.
   ============================================================ */

:root {
  /* Surfaces + ink */
  --bone:  #FFFFFB;   /* warm near-white: page + light text on dark */
  --ink:   #232323;   /* soft charcoal: text + dark sections */

  /* Accent (single pop). --lime aliased to accent so legacy uses unify. */
  --tang:  #FF5A2A;
  --lime:  #FF5A2A;
  --ultra: #1E2BD8;   /* used sparingly for small accents / links */
  --violet:#7B4DFF;   /* small accents / sticker */

  /* Soft pastel section + card blocks */
  --lilac: #EED1FF;
  --sky:   #B7EBFF;
  --peach: #FEE3CC;
  --mint:  #C3F2D0;
  --pink:  #FFCADF;

  /* Working tints */
  --ink-70: rgba(35,35,35,.72);
  --ink-55: rgba(35,35,35,.56);
  --ink-12: rgba(35,35,35,.14);
  --ink-08: rgba(35,35,35,.07);
  --bone-70: rgba(255,255,251,.74);
  --bone-55: rgba(255,255,251,.58);
  --bone-15: rgba(255,255,251,.16);
  --line: rgba(35,35,35,.14);

  /* Type */
  --disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  /* Radius */
  --r-card: 18px;
  --r-badge: 22px;
  --r-pill: 9999px;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--bone);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* ---------- helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.tang { color: var(--tang); }
.ultra { color: var(--ultra); }
.violet { color: var(--violet); }
.spark { color: var(--tang); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* sparkle glyph */
.sparkle { display:inline-block; width:.78em; height:.78em; vertical-align:.04em; flex:none; fill: var(--tang); }

/* ---------- mono eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-55);
}
/* on-dark now resolves to charcoal because these contexts became light;
   genuinely-dark sections (cta-band, foot) override below. */
.eyebrow.on-dark { color: var(--ink-55); }

/* ---------- display type ---------- */
.display {
  font-family: var(--disp);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -0.02em;
}
h1.display { font-size: clamp(54px, 11vw, 150px); }
h2.section-title {
  font-family: var(--disp);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -0.02em;
  font-size: clamp(38px, 6.5vw, 76px);
}
h3 { font-family: var(--disp); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,251,.85);
  backdrop-filter: saturate(120%) blur(14px);
  -webkit-backdrop-filter: saturate(120%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a {
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-70); transition: color .15s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { color: var(--bone) !important; }

/* monogram badge */
.mono-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--ink); color: var(--bone);
  font-family: var(--disp); font-weight: 800; letter-spacing: -0.04em;
  border-radius: var(--r-badge);
  width: 44px; height: 44px; font-size: 22px; line-height:1;
}
.mono-badge.bone { background: var(--bone); color: var(--ink); border: 1.5px solid var(--ink); }

/* ============================================================
   BUTTONS / PILLS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--body); font-weight: 700; font-size: 16px;
  padding: 14px 24px; border-radius: var(--r-pill);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: var(--bone); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(35,35,35,.18); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-lime { background: var(--tang); color: var(--bone); }
.btn-lime:hover { box-shadow: 0 10px 26px rgba(255,90,42,.28); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline.on-dark { color: var(--ink); border-color: var(--ink); }
.btn .ico { width:18px; height:18px; }

/* tag pills */
.tags { display:flex; flex-wrap:wrap; gap:12px; }
.tag {
  display:inline-flex; align-items:center; gap:9px;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  padding: 9px 18px 9px 16px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--ink);
}
.tag .ico { width:16px; height:16px; flex:none; }
.tag.on-dark { border-color: var(--ink); color: var(--ink); }
.tag.fill-lime { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.tag.fill-violet { background: var(--lilac); border-color: var(--lilac); color: var(--ink); }

/* rotated sticker */
.sticker {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--violet); color: var(--bone);
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  padding: 11px 20px; border-radius: var(--r-pill);
  transform: rotate(-4deg);
  box-shadow: 0 8px 22px rgba(123,77,255,.22);
}

/* ============================================================
   HERO (light)
   ============================================================ */
.hero { background: var(--bone); color: var(--ink); position: relative; overflow: hidden; }
.hero .wrap { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(48px, 8vw, 88px); }
.hero-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.hero-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px,5vw,64px); align-items:center; margin-top: 0; }
.hero-copy h1 { margin: 0; color: var(--ink); font-size: clamp(44px, 7.5vw, 104px); }
.hero h1 .line2 { display:flex; align-items:center; gap:.2em; flex-wrap:wrap; }
.hero-lead {
  margin-top: 28px; max-width: 540px;
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; color: var(--ink-70);
}
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top: 34px; }
.hero-tags { margin-top: clamp(28px, 4vw, 40px); }

.hero-graphic {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  background: var(--lilac); aspect-ratio: 4 / 5; align-self: stretch;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(24px,4vw,44px); box-shadow: 0 24px 54px rgba(35,35,35,.10);
}
.hero-spark { position:absolute; width: 26%; top: 9%; right: 9%; fill: var(--tang); }
.hero-phrases { display:flex; flex-direction:column; gap: 16px; align-items:center; z-index:1; }
.ph {
  font-family: var(--disp); font-weight:700; letter-spacing:-0.01em; line-height:1;
  font-size: clamp(19px, 2.3vw, 30px); padding: 13px 24px; border-radius: var(--r-pill);
}
.ph-violet  { background: var(--violet); color: var(--bone); transform: rotate(-4deg); }
.ph-ink     { background: var(--ink); color: var(--bone); transform: rotate(3deg); }
.ph-mint    { background: var(--mint); color: var(--ink); transform: rotate(-2deg); }
.ph-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); transform: rotate(2deg); }
.hero-graphic-mark { position:absolute; bottom: 20px; right: 20px; }

@media (max-width: 880px){
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-graphic { aspect-ratio: 16 / 11; max-height: 420px; }
}
@media (max-width: 560px){
  .hero-top { flex-direction: column; gap: 6px; }
}

/* ============================================================
   CREDIBILITY STRIP
   ============================================================ */
.proof { background: var(--bone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof .wrap { display:grid; gap: 28px; grid-template-columns: repeat(2,1fr); padding-block: clamp(40px,6vw,62px); }
@media (min-width: 760px){ .proof .wrap { grid-template-columns: repeat(4,1fr); } }
.proof .stat .n { font-family: var(--disp); font-weight:800; font-size: clamp(36px,5vw,58px); letter-spacing:-0.02em; line-height:1; }
.proof .stat .n .tang { color: var(--tang); }
.proof .stat .l { font-family: var(--mono); font-size: 12.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-55); margin-top: 12px; }

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding-block: clamp(64px, 9vw, 116px); }
/* hero / page-head / proof manage their own vertical padding via .wrap,
   so cancel the generic section padding to avoid doubled dead space. */
.hero, .page-head, .proof { padding-block: 0; }
.sec-cream { background: var(--bone); }
.sec-ink { background: var(--lilac); color: var(--ink); }
.sec-ultra { background: var(--sky); color: var(--ink); }
.sec-violet { background: var(--peach); color: var(--ink); }

.sec-head { max-width: 760px; }
.sec-head .eyebrow { display:block; margin-bottom: 18px; }
.sec-head p.kicker { margin-top: 22px; font-size: clamp(18px,2.2vw,22px); line-height:1.5; color: var(--ink-70); }

/* ---------- beliefs / theses ---------- */
.beliefs { margin-top: clamp(40px,6vw,70px); display:grid; gap:20px; }
@media (min-width: 880px){ .beliefs { grid-template-columns: repeat(3,1fr); } }
.belief {
  background: var(--bone); color: var(--ink);
  border-radius: var(--r-card); padding: 32px 30px 34px;
  border: 1px solid var(--line); position: relative;
  display:flex; flex-direction:column; min-height: 320px;
  box-shadow: 0 12px 30px rgba(35,35,35,.05);
}
.belief .num { font-family: var(--mono); font-size: 13px; letter-spacing:.18em; color: var(--ink-55); }
.belief h3 { font-size: 27px; margin: 18px 0 14px; }
.belief p { font-size: 16.5px; color: var(--ink-70); line-height:1.55; }
.belief .chip {
  align-self:flex-start; font-family:var(--mono); font-size:12px;
  letter-spacing:.04em; padding:7px 14px; border-radius: var(--r-pill);
  margin-top: auto; padding-top: 7px;
  background: var(--ink); color: var(--bone);
}
.belief p { margin-bottom: 26px; }
.belief--ultra { background: var(--sky); }
.belief--tang  { background: var(--peach); }
.belief--lime  { background: var(--mint); }

/* ---------- NOD framework ---------- */
.nod-grid { margin-top: clamp(36px,5vw,56px); display:grid; gap:20px; }
@media (min-width: 780px){ .nod-grid { grid-template-columns: repeat(3,1fr); } }
.nod-item { background: var(--bone); border:1px solid var(--line); border-radius: var(--r-card); padding: 30px 28px; }
.nod-k { font-family:var(--disp); font-weight:800; font-size:26px; letter-spacing:-0.01em; display:block; margin-bottom:12px; }
.nod-item p { color: var(--ink-70); font-size:16px; line-height:1.55; }
.nod-foot { margin-top: clamp(32px,4vw,48px); display:flex; flex-wrap:wrap; gap: 28px; align-items:center; justify-content:space-between; }
.nod-line { font-family:var(--disp); font-weight:700; font-size: clamp(20px,2.6vw,28px); line-height:1.18; letter-spacing:-0.01em; max-width: 26ch; }
.nod-line strong { color: var(--tang); }
.nod-related { margin-top: 14px; }
.nod-related a { font-family:var(--mono); font-size:13px; letter-spacing:.04em; color: var(--ink-70); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.nod-related a:hover { color: var(--tang); }

/* ---------- What I run / plays ---------- */
.plays-grid { margin-top: clamp(36px,5vw,56px); display:grid; gap:20px; }
@media (min-width: 760px){ .plays-grid { grid-template-columns: 1fr 1fr; } }
.play { background: var(--bone); border:1px solid var(--line); border-radius: var(--r-card); padding: 30px 30px 32px; box-shadow: 0 10px 26px rgba(35,35,35,.04); }
.play-n { font-family:var(--mono); font-size:13px; letter-spacing:.18em; color:var(--tang); }
.play h3 { font-size:24px; margin:14px 0 12px; letter-spacing:-0.01em; }
.play p { color:var(--ink-70); font-size:16px; line-height:1.55; }
.plays-foot { margin-top: clamp(32px,4vw,48px); display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; }
.plays-note { font-family:var(--disp); font-weight:700; font-size:clamp(20px,2.6vw,28px); line-height:1.2; letter-spacing:-0.01em; max-width:30ch; }
.plays-note strong { color:var(--tang); }

/* ---------- story / about ---------- */
.story-grid { display:grid; gap: clamp(32px,5vw,64px); align-items:center; }
@media (min-width: 900px){ .story-grid { grid-template-columns: 0.85fr 1.15fr; } }
.story-portrait {
  border-radius: var(--r-card); overflow:hidden; background: var(--ink);
  border: 1px solid var(--line); align-self:stretch;
  box-shadow: 0 18px 40px rgba(35,35,35,.10);
}
.story-portrait img { width:100%; height:100%; object-fit: cover; object-position: center top; }
.story-body h2 { margin-bottom: 22px; }
.story-body p { color: var(--ink-70); font-size: 18px; margin-bottom: 18px; max-width: 56ch; }
.story-body p strong { color: var(--ink); font-weight: 700; }
.story-facts { display:flex; flex-wrap:wrap; gap:12px; margin-top: 30px; }

/* pull quote */
.pull {
  font-family: var(--disp); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em;
  font-size: clamp(30px, 5.2vw, 60px); max-width: 16ch; color: var(--ink);
}
.pull .src { display:block; font-family: var(--mono); font-weight:400; font-size: 14px; letter-spacing:.12em; text-transform:uppercase; margin-top: 26px; color: var(--ink-55); }

/* ---------- say / don't say ---------- */
.saygrid { margin-top: clamp(36px,5vw,56px); display:grid; gap:20px; }
@media (min-width: 760px){ .saygrid { grid-template-columns: 1fr 1fr; } }
.saycard { border-radius: var(--r-card); padding: 30px 28px; border:1px solid var(--line); }
.saycard .lbl { font-family: var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px; display:block; }
.saycard .quote { font-family: var(--disp); font-weight:700; font-size: clamp(20px,2.6vw,27px); line-height:1.2; letter-spacing:-0.01em; }
.say-yes { background: var(--mint); }
.say-yes .lbl { color: var(--ink-55); }
.say-no { background: var(--bone); color: var(--ink-55); }
.say-no .quote { color: var(--ink-55); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ============================================================
   WRITING CARDS
   ============================================================ */
.writing-grid { margin-top: clamp(40px,6vw,64px); display:grid; gap: 22px; }
@media (min-width: 820px){ .writing-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card {
  display:flex; flex-direction:column; background: var(--bone); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; overflow:hidden;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(35,35,35,.08); border-color: rgba(35,35,35,.22); }
/* thin graphic accent tick (replaces the chunky bar) */
.post-top { height: 2px; width: 40px; border-radius: 2px; margin: 30px 0 0 30px; background: var(--ink); }
.post-card.c-ultra .post-top { background: var(--ultra); }
.post-card.c-tang  .post-top { background: var(--tang); }
.post-card.c-violet .post-top { background: var(--violet); }
.post-body { padding: 18px 30px 30px; display:flex; flex-direction:column; flex:1; }
.post-meta { font-family: var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-55); }
.post-card h3 { font-size: 24px; margin: 14px 0 12px; line-height:1.08; }
.post-card p { font-size: 16px; color: var(--ink-70); line-height:1.5; }
.post-readmore { margin-top: 22px; font-family: var(--mono); font-size:13px; letter-spacing:.06em; display:inline-flex; align-items:center; gap:7px; color: var(--ink); }
.post-readmore .ico { width:15px; height:15px; }

/* Medium archive list */
.medium-list { margin-top: clamp(28px,4vw,44px); list-style:none; border-top:1px solid var(--line); }
.medium-list a { display:flex; align-items:center; gap:18px; padding:20px 6px; border-bottom:1px solid var(--line); color:var(--ink); transition: padding-left .15s ease; }
.medium-list a:hover { padding-left:14px; }
.medium-list .m-title { font-family:var(--disp); font-weight:700; font-size:clamp(17px,2vw,21px); letter-spacing:-0.01em; line-height:1.2; flex:1; }
.medium-list .m-date { font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--ink-55); white-space:nowrap; }
.medium-list a .ico { width:16px; height:16px; color:var(--ink-55); flex:none; }

/* Watch & listen media cards */
.media-grid { margin-top: clamp(28px,4vw,44px); display:grid; gap:22px; }
@media (min-width: 760px){ .media-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   CONTACT CTA BAND (dark)
   ============================================================ */
.cta-band { background: var(--ink); color: var(--bone); text-align:center; }
.cta-band h2 { margin-bottom: 18px; color: var(--bone); }
.cta-band p { max-width: 52ch; margin: 0 auto 34px; font-size: clamp(18px,2.2vw,22px); color: var(--bone-70); }
.cta-band .eyebrow { color: var(--bone-55); }
.cta-band .hero-actions { justify-content:center; }
.cta-band .btn-outline.on-dark { color: var(--bone); border-color: var(--bone-55); }
.cta-band .btn-outline.on-dark:hover { border-color: var(--bone); }

/* ============================================================
   FOOTER (dark)
   ============================================================ */
.foot { background: var(--ink); color: var(--bone); padding-block: clamp(48px,6vw,72px); }
.foot .wrap { display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start; }
.foot-mark { display:flex; align-items:center; gap:14px; }
.foot-mark .name { font-family: var(--disp); font-weight:800; font-size:20px; letter-spacing:-0.02em; }
.foot-tag { font-family: var(--mono); font-size:12.5px; letter-spacing:.04em; color: var(--bone-55); margin-top:10px; max-width: 34ch; }
.foot-links { display:flex; flex-direction:column; gap:10px; }
.foot-links a, .foot-col a { font-family: var(--mono); font-size:13px; letter-spacing:.06em; color: var(--bone-70); }
.foot-links a:hover, .foot-col a:hover { color: var(--tang); }
.foot-col h4 { font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: var(--bone-55); margin-bottom:14px; }
.foot-col { display:flex; flex-direction:column; gap:10px; }
.foot-base { margin-top: 40px; padding-top: 24px; border-top:1px solid var(--bone-15); font-family:var(--mono); font-size:12px; letter-spacing:.04em; color: var(--bone-55); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }

/* ============================================================
   PAGE HEAD (light pastel) + ARTICLE
   ============================================================ */
.page-head { background: var(--peach); color: var(--ink); }
.page-head .wrap { padding-top: clamp(48px,7vw,90px); padding-bottom: clamp(48px,7vw,90px); }
.page-head h1 { color: var(--ink); margin-top: 18px; }
.page-head p { color: var(--ink-70); margin-top: 22px; max-width: 56ch; font-size: clamp(18px,2.2vw,22px); }

/* article */
.article { background: var(--bone); }
.article .wrap { max-width: 760px; }
.article-head .wrap { max-width: 820px; }
.art-meta { font-family: var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-55); display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.art-meta time { color: var(--ink-55); }
.art-dek { margin-top: 26px; max-width: 60ch; font-size: clamp(19px,2.3vw,23px); line-height:1.5; font-weight:500; color: var(--ink-70); }
.prose { padding-block: clamp(48px,7vw,80px); }
.prose > * + * { margin-top: 26px; }
.prose p { font-size: 19px; line-height: 1.68; color: var(--ink); }
.prose h2 { font-family:var(--disp); font-weight:800; font-size: clamp(28px,4vw,40px); letter-spacing:-0.02em; line-height:1.05; margin-top: 52px; }
.prose h3 { font-family:var(--disp); font-weight:700; font-size: 24px; margin-top: 40px; }
.prose blockquote {
  border-left: 4px solid var(--tang); padding: 6px 0 6px 26px; margin-left: 0;
  font-family: var(--disp); font-weight:700; font-size: clamp(22px,3vw,30px); line-height:1.15; letter-spacing:-0.01em;
}
.prose ul, .prose ol { padding-left: 24px; }
.prose li { font-size: 18px; line-height:1.6; margin-top: 10px; }
.prose strong { font-weight: 700; }
.prose a { color: var(--ultra); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.prose hr { border:0; border-top:1px solid var(--line); margin-block: 44px; }
.art-tagrow { display:flex; flex-wrap:wrap; gap:10px; margin-top: 16px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display:grid; gap: clamp(32px,5vw,64px); }
@media (min-width: 900px){ .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-intro h2 { margin-bottom: 20px; }
.contact-intro p { color: var(--ink-70); font-size: 18px; margin-bottom: 18px; max-width: 46ch; }
.contact-channels { margin-top: 30px; display:flex; flex-direction:column; gap:14px; }
.channel {
  display:flex; align-items:center; gap:16px; padding: 18px 20px;
  border:1px solid var(--line); border-radius: var(--r-card); background: var(--bone);
  transition: box-shadow .15s ease, transform .12s ease;
}
.channel:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(35,35,35,.08); }
.channel .ic { width:42px; height:42px; border-radius: 12px; display:flex; align-items:center; justify-content:center; flex:none; color: var(--ink); }
.channel .ic .ico { width:20px; height:20px; }
.channel .ic.ultra { background: var(--sky); }
.channel .ic.tang { background: var(--peach); }
.channel .ic.violet { background: var(--lilac); }
.channel .ic.lime { background: var(--mint); }
.channel .meta { display:flex; flex-direction:column; gap:3px; }
.channel .meta .k { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-55); }
.channel .meta .v { font-weight:700; font-size:17px; }

/* form */
.form-card { background: var(--bone); color: var(--ink); border-radius: var(--r-card); padding: clamp(28px,4vw,40px); border:1px solid var(--line); box-shadow: 0 18px 40px rgba(35,35,35,.06); }
.form-card h3 { font-size: 26px; margin-bottom: 8px; }
.form-card .sub { color: var(--ink-55); font-size:15px; margin-bottom: 26px; }
.field { margin-bottom: 18px; }
.field label { display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-55); margin-bottom:9px; }
.field input, .field textarea {
  width:100%; font-family:var(--body); font-size:16px; color: var(--ink);
  background: rgba(35,35,35,.03); border:1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; transition: border-color .15s ease, background .15s ease;
}
.field input:focus, .field textarea:focus { outline:none; border-color: var(--tang); background: #fff; }
.field textarea { resize: vertical; min-height: 130px; }
.form-card .btn { width:100%; justify-content:center; margin-top: 8px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
.menu-toggle { display:none; }
@media (max-width: 760px){
  .nav-links { display:none; }
  .nav-links.open { display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0;
    background: var(--bone); border-bottom:1px solid var(--line); padding: 8px var(--gutter) 18px; }
  .nav-links.open a { padding: 12px 0; }
  .menu-toggle { display:inline-flex; color: var(--ink); }
  .menu-toggle .ico { width:26px; height:26px; }
  .foot-base { flex-direction:column; }
}