/* Nalar v2 - "literary journal beside a bonfire" - generated from context/design-system.md */
:root {
  --parchment: #fefffc;
  --paper: #ffffff;
  --linen: #f9faf7;
  --ink: #171717;
  --graphite: #2c2c2c;
  --charcoal: #444141;
  --ash: #646464;
  --mist: #dee2de;
  --twilight: #282834;
  --dusk: #1f1f29;
  --signal: #41a1cf;
  --cerulean: #0081c0;
  --shadow-card: rgba(0,0,0,0.08) 0px 1px 1px 0px, rgba(0,0,0,0.08) 0px 4px 5px 0px;
  --shadow-nav: rgba(0,0,0,0.15) 0px 2px 6px 0px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--parchment);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
a { color: inherit; }

/* display type - the serif speaks quietly */
.display, h1 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 3.75rem); color: var(--graphite); }
h2.display { font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--graphite); margin-bottom: 1.4rem; }

/* editorial kickers (were mono annotations) */
.anno {
  font-size: 13px; color: var(--ash); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem;
}
.anno b { color: var(--graphite); font-weight: 500; }
.anno::before, .anno::after { content: none; }

/* nav - frosted floating pill, sticky */
.nav-outer { padding: 1rem 0; position: sticky; top: 0.75rem; z-index: 40; }
nav {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--twilight); border-radius: 50px; padding: 0.6rem 1.3rem;
  box-shadow: var(--shadow-nav);
}
.wordmark {
  font-family: var(--serif); font-weight: 500; font-size: 1.35rem;
  text-decoration: none; color: var(--graphite); letter-spacing: -0.02em;
}
.wordmark span { color: var(--signal); background: none; padding: 0; }
.nav-links { display: flex; gap: 1.3rem; align-items: center; flex-wrap: wrap; }
.nav-links a { text-decoration: none; color: var(--charcoal); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.on { border-bottom: 2px solid var(--twilight); }

/* buttons - outlined is the identity; one filled variant exists but is rare */
.btn {
  display: inline-block; text-decoration: none; font-weight: 500; font-size: 15px;
  padding: 0.55rem 1.1rem; border-radius: 8px;
  background: transparent; color: var(--signal); border: 1px solid var(--signal);
  transition: background 0.2s ease;
}
.btn::after { content: " →"; }
.btn:hover { background: rgba(65,161,207,0.07); transform: none; }
.btn.ghost { color: var(--twilight); border-color: var(--twilight); }
.btn.ghost:hover { background: rgba(40,40,52,0.05); }
.btn.fill { background: var(--dusk); color: #fff; border-color: var(--twilight); }
.nav-links a.btn, .nav-links a.btn:hover { color: var(--signal); }

/* the marquee is gone - a literary journal does not shout */
.marquee { display: none; }

/* sections */
section { padding: 4rem 0; }
section.hairtop { border-top: 1px solid var(--mist); }
.lede { font-size: clamp(1.02rem, 1.8vw, 1.2rem); color: var(--charcoal); max-width: 40em; line-height: 1.55; }
.lede b, .lede strong { color: var(--ink); font-weight: 600; }

/* hero */
.hero { padding: 4.5rem 0 3.5rem; }
.hero h1 .hl { background: none; padding: 0; font-style: italic; color: var(--graphite); }
.hero .lede { margin-top: 1.5rem; }
.hero .cta-row { margin-top: 2rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* cards - paper, mist hairline, soft shadow */
.grid { display: grid; gap: 1rem; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
  background: var(--paper); border: 1px solid var(--mist); border-radius: 12px;
  padding: 1.5rem; box-shadow: var(--shadow-card);
}
.card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--graphite); letter-spacing: -0.01em; }
.card p { color: var(--charcoal); font-size: 15px; }

/* the one saturated moment per page */
.card.inverted {
  background: var(--cerulean); color: #fff; border: none; border-radius: 24px;
  padding: clamp(1.8rem, 4vw, 3.5rem);
}
.card.inverted p, .card.inverted .lede { color: rgba(255,255,255,0.92); }
.card.inverted h3, .card.inverted .display { color: #fff; }
.card.inverted .anno { color: rgba(255,255,255,0.75) !important; }

.tag {
  display: inline-block; background: var(--linen); border: 1px solid var(--mist);
  border-radius: 999px; font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0.18rem 0.65rem; margin-bottom: 0.7rem; color: var(--charcoal);
}
.tag.ghost { background: none; color: var(--ash); }
.stage { font-size: 12px; color: var(--ash); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.stage em { font-style: normal; color: var(--graphite); background: var(--linen); border: 1px solid var(--mist); border-radius: 4px; padding: 0 0.35rem; }

/* service cards on hub */
.svc { display: block; text-decoration: none; }
.svc .card { transition: transform 0.18s ease, box-shadow 0.18s ease; height: 100%; }
.svc:hover .card { transform: translateY(-3px); box-shadow: rgba(0,0,0,0.1) 0px 6px 14px 0px; }
.svc .slug, .slug { font-size: 13px; color: var(--ash); }

/* lists */
.checks { list-style: none; margin-top: 0.8rem; }
.checks li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; font-size: 15px; color: var(--charcoal); }
.checks li::before { content: "→"; position: absolute; left: 0; font-size: 0.85rem; color: var(--signal); }

/* footer - the colophon */
footer { background: var(--paper); border-top: 1px solid var(--mist); padding: 3.5rem 0 4rem; margin-top: 3rem; }
footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
@media (max-width: 640px) { footer .cols { grid-template-columns: 1fr; } }
footer .wordmark { font-size: 1.6rem; }
footer a { color: var(--charcoal); text-decoration: none; font-size: 15px; display: block; margin-bottom: 0.4rem; }
footer a:hover { color: var(--ink); }
footer .fine { color: var(--ash); font-size: 13px; margin-top: 2rem; }

/* megamenu - paper panel, mist hairline */
.nav-wrap { position: relative; }
.mega-toggle { cursor: pointer; background: none; border: none; font: inherit; color: var(--charcoal); font-weight: 500; font-size: 15px; padding: 0; font-family: var(--sans); }
.mega-toggle::after { content: " ↓"; font-size: 0.75em; }
.mega-toggle.open::after { content: " ↑"; }
.mega {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 0.6rem);
  background: var(--paper); border-radius: 16px; padding: 1.8rem;
  z-index: 50; border: 1px solid var(--mist); box-shadow: var(--shadow-card);
}
.mega.open { display: block; animation: megain 0.25s ease; }
@keyframes megain { from { opacity: 0; transform: translateY(-6px); } }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
.mega .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.6rem; }
.mega .col-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); font-weight: 500; margin-bottom: 0.8rem; }
.mega a.item, .mega span.item { display: block; text-decoration: none; margin-bottom: 0.65rem; }
.mega .item b { display: block; font-weight: 500; font-size: 15px; color: var(--graphite); font-family: var(--serif); }
.mega .item .slug { font-size: 12px; color: var(--ash); }
.mega a.item:hover b { color: var(--signal); background: none; }
.mega span.item b { color: var(--ash); font-weight: 400; }
.mega span.item b::after { content: " · soon"; font-family: var(--sans); font-size: 0.72em; }
.mega .start-row {
  border-top: 1px solid var(--mist); margin-top: 1.4rem; padding-top: 1.2rem;
  display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap;
}
.mega .start-row .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ash); font-weight: 500; }
.mega .start-row .pillbtn {
  background: transparent; border: 1px solid var(--signal); color: var(--signal);
  border-radius: 8px; padding: 0.45rem 0.9rem;
  text-decoration: none; font-weight: 500; font-size: 14px;
}
.mega .start-row .pillbtn:hover { background: rgba(65,161,207,0.07); }
.mega .start-row .meta { margin-left: auto; font-size: 12px; color: var(--ash); }
.mega .all { display: inline-block; margin-top: 1.2rem; font-size: 14px; color: var(--charcoal); text-decoration: none; }
.mega .all:hover { color: var(--signal); background: none; }

/* motion - kept from v1, softened to the editorial register */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

.grid .card, .svc .card {
  transition: clip-path 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.18s ease;
}
.reveal:not(.in) .card { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateY(10px); }
.reveal.in .card { clip-path: inset(0 0 -2% 0); }
.reveal.in .grid > :nth-child(1) .card, .reveal.in .grid > .card:nth-child(1) { transition-delay: 0.05s; }
.reveal.in .grid > :nth-child(2) .card, .reveal.in .grid > .card:nth-child(2) { transition-delay: 0.16s; }
.reveal.in .grid > :nth-child(3) .card, .reveal.in .grid > .card:nth-child(3) { transition-delay: 0.27s; }
.reveal.in .grid > :nth-child(4) .card, .reveal.in .grid > .card:nth-child(4) { transition-delay: 0.38s; }

.l-mask { display: block; overflow: hidden; }
.l-mask .l-inner { display: block; transform: translateY(112%); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in .l-mask .l-inner { transform: none; }
.reveal.in .l-mask:nth-of-type(2) .l-inner { transition-delay: 0.1s; }
.reveal.in .l-mask:nth-of-type(3) .l-inner { transition-delay: 0.2s; }

.reveal:not(.in) .checks li { opacity: 0; transform: translateX(-10px); }
.reveal .checks li { transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in .checks li:nth-child(1) { transition-delay: 0.1s; }
.reveal.in .checks li:nth-child(2) { transition-delay: 0.2s; }
.reveal.in .checks li:nth-child(3) { transition-delay: 0.3s; }
.reveal.in .checks li:nth-child(4) { transition-delay: 0.4s; }
.reveal.in .checks li:nth-child(5) { transition-delay: 0.5s; }

/* hero load-time line masks */
h1 .mask { overflow: hidden; display: block; }
h1 .mask > span { display: block; transform: translateY(110%); animation: lineup 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
h1 .mask:nth-of-type(2) > span { animation-delay: 0.12s; }
@keyframes lineup { to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal:not(.in) .card, .reveal:not(.in) .checks li { opacity: 1; transform: none; transition: none; clip-path: none; }
  .l-mask .l-inner, h1 .mask > span { transform: none; transition: none; animation: none; }
  .mega.open { animation: none; }
  .svc:hover .card, .btn:hover { transform: none; }
}

/* mobile nav: one row - text links move into the mega panel */
.mega-pages { display: none; }
@media (max-width: 640px) {
  .nav-links { gap: 0.7rem; }
  .nav-links > a:not(.btn) { display: none; }
  .nav-links a.btn { font-size: 13px; padding: 0.45rem 0.8rem; }
  .mega { padding: 1.3rem; }
  .mega-pages {
    display: flex; gap: 1.2rem; flex-wrap: wrap;
    border-top: 1px solid var(--mist); margin-top: 1.2rem; padding-top: 1.1rem;
  }
  .mega-pages a { text-decoration: none; color: var(--charcoal); font-weight: 500; font-size: 15px; }
  .mega .start-row .meta { display: none; }
}

/* atmospheric hero - the kit's illustrated 100vh hero + frosted overlay card */
.hero-atmo {
  position: relative; height: 92svh; min-height: 540px; max-height: 900px;
  border-radius: 24px; overflow: hidden; margin-top: 0.5rem;
  background: #10131f;
}
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.overlay-card {
  position: absolute; left: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem);
  max-width: 620px; border-radius: 24px; padding: clamp(1.4rem, 3vw, 2.5rem);
  background: rgba(20, 22, 34, 0.42);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(254, 255, 252, 0.18);
}
.overlay-card .anno { color: rgba(254,255,252,0.65); }
.overlay-card .anno b { color: rgba(254,255,252,0.9); }
.overlay-card h1 { color: #fefffc; }
.overlay-card .hl { color: #fefffc; }
.overlay-card .lede { color: rgba(254,255,252,0.85); }
.overlay-card .lede strong { color: #fff; }
.overlay-card .btn { color: #9fd7f2; border-color: #9fd7f2; }
.overlay-card .btn:hover { background: rgba(159,215,242,0.12); }
.overlay-card .btn.ghost { color: rgba(254,255,252,0.85); border-color: rgba(254,255,252,0.5); }
@media (max-width: 640px) {
  .hero-atmo { height: 88svh; border-radius: 16px; }
  .overlay-card { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; }
}