/* ============================================================
   LAYOUT — shell, global chrome, navigation, footer
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  position: relative;
  padding-block: var(--sec-y);
  overflow-x: clip;          /* contains the bled ghost numerals */
}
.section > .container { position: relative; z-index: 1; }

/* Hairline between stacked sections */
.section + .section::before,
.process + .section::before {
  content: "";
  position: absolute;
  inset-inline: var(--pad-x);
  top: 0;
  height: 1px;
  background: var(--rule-soft);
}

/* ── Film grain ────────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 7s steps(6) infinite;
  will-change: transform;
}

/* ── Scroll progress ───────────────────────────────────────── */
.scrollbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
  background: var(--rule-soft);
}
.scrollbar i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent-deep);
}

/* ── Custom cursor (fine pointers only) ─────────────────────
   One element: the arrow artwork, tracking the pointer exactly.
   The trailing ring and its label were removed with the deck that
   used them — nothing carried data-cursor any more, so the whole
   is-hover / is-view state machine was styling a dead feature. */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: var(--z-cursor);
    pointer-events: none;
  }

  /* The artwork carries its own glow, so it sits on the page
     unblended — difference blending, which the old white ring
     needed to stay visible, turns the neon to mud. */
  .cursor__arrow {
    position: absolute;
    top: 0; left: 0;
    /* Sized so the drawn arrow is 20px tall — a native pointer's own
       size. The box is larger than that because the neon halo sits
       around the stroke; only the stroke should match the OS cursor. */
    width: 14.5px; height: 22.8px;
    background: url('../assets/cursor.webp') center / contain no-repeat;
    /* Scale from the tip so a press does not shift the point. */
    transform-origin: 15.97% 5.96%;
    transition: transform var(--dur-fast) var(--ease-out);
  }

  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button,
  body.has-cursor [data-tilt],
  body.has-cursor [data-magnetic] { cursor: none; }
  body.has-cursor input,
  body.has-cursor textarea,
  body.has-cursor select { cursor: auto; }
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* ── The bar: a floating liquid-glass capsule ──────────────────
   .nav is only a transparent layer across the top of the screen; the
   bar you see is .nav__inner, inset from the edges and rounded into a
   capsule. js/nav.js hands it to js/liquid-glass.js, which bends what
   scrolls past its rim (Chromium) or frosts it (Safari, Firefox). The
   rules below are the material — tint, top highlight, 1px rim, drop
   shadow — and on their own, with no script, a plain frosted bar.

   The geometry lives on :root because the menu's close button (a
   sibling, not a child) has to land exactly on the burger. */
:root {
  --nav-top: calc(12px + var(--safe-t, 0px));
  --nav-h: 64px;
  --nav-pad-l: clamp(1rem, 1.8vw, 1.4rem);
  --nav-pad-r: clamp(.5rem, 1.2vw, .7rem);
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding-top: var(--nav-top);
  /* the gutters around the capsule never block the page */
  pointer-events: none;
  transition: transform .6s var(--ease-out), opacity .4s var(--ease-out);
}
.nav .nav__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(calc(100% - 2 * var(--pad-x) - var(--safe-l, 0px) - var(--safe-r, 0px)),
             calc(var(--maxw) - 2 * var(--pad-x)));
  height: var(--nav-h);
  margin-inline: auto;
  padding-inline: var(--nav-pad-l) var(--nav-pad-r);
  border-radius: 999px;
  /* A tint, not a fill. Measured against the worst case — pure white
     scrolling behind — the links (--ink-2) still clear 4.5:1 through
     it, while ~20-28% of the backdrop still shows as glass. */
  background: linear-gradient(180deg, rgba(16, 16, 24, .72), rgba(12, 12, 18, .82));
  box-shadow:
    0 18px 44px -18px rgba(0, 0, 0, .75),
    inset 0 1px 1px rgba(255, 255, 255, .28),
    inset 0 -8px 18px rgba(255, 255, 255, .04),
    inset 0 0 0 1px rgba(255, 255, 255, .11);
  /* frosted until js/liquid-glass.js swaps in the refraction */
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  transition: background var(--dur) var(--ease-out);
}
.nav.is-stuck .nav__inner {
  background: linear-gradient(180deg, rgba(16, 16, 24, .78), rgba(12, 12, 18, .86));
}
/* Held above the viewport while the portal hero is on screen. */
.nav.is-away {
  transform: translateY(-102%);
  opacity: 0;
}
.nav.is-away .nav__inner { pointer-events: none; }

/* Asked for less transparency: a solid bar, no glass. !important beats
   the backdrop-filter the script writes inline. */
@media (prefers-reduced-transparency: reduce) {
  .nav .nav__inner {
    background: rgba(12, 12, 18, .97);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── Brand ─────────────────────────────────────────────────── */
.nav__brand { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }

/* Isolates the "SC" mark out of the full stacked lockup image so the
   nav never shows illegible micro-type. The percentages below are the
   measured bounding box of the mark inside assets/logo-full.png
   (1032x589): x 290..784, y 9..387. Re-measure if the file is replaced. */
.mark {
  position: relative;
  display: block;
  width: 50px;
  aspect-ratio: 495 / 379;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease-out);
}
.mark img {
  position: absolute;
  width: 208.5%;
  max-width: none;
  left: -58.6%;
  top: -2.4%;
}
.mark__fallback {
  display: none;
  font-family: var(--font-brand);
  font-size: 1.4rem;
  font-weight: 600;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  place-items: center;
  height: 100%;
}
.mark.is-missing img { display: none; }
.mark.is-missing .mark__fallback { display: grid; }
@media (hover: hover) { .nav__brand:hover .mark { transform: scale(1.05); } }

.nav__wordmark { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.nav__name {
  font-family: var(--font-brand);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--on-field);
}
.nav__tag {
  font-size: .44rem;
  font-weight: 300;
  letter-spacing: .34em;
  color: var(--on-field-2);
}

/* ── Links — numbered, like an index ───────────────────────── */
.nav__links { display: flex; align-items: center; gap: clamp(.2rem, 1.4vw, 1rem); }
.nav__links a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .5rem .6rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-2);   /* 4.5:1+ through the glass tint */
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a i {
  font-family: var(--font-mono);
  font-size: .55rem;
  font-style: normal;
  letter-spacing: .06em;
  color: var(--accent);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: .6rem; right: .6rem;
  bottom: .25rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease-out);
}
.nav__links a.is-active { color: var(--on-field); }
@media (hover: hover) { .nav__links a:hover { color: var(--on-field); } }
.nav__links a.is-active i { opacity: 1; transform: translateY(0); }
@media (hover: hover) { .nav__links a:hover i { opacity: 1; transform: translateY(0); } }
.nav__links a.is-active::after { transform: scaleX(1); }
@media (hover: hover) { .nav__links a:hover::after { transform: scaleX(1); } }

.nav__actions { display: flex; align-items: center; gap: 1rem; }

/* The primary action, as a button in the bar. */
.nav__cta.btn { padding: .5rem 1.05rem; font-size: .82rem; }

/* Rule-links on the black bar need light type and rule. */
.nav .linkrule { color: var(--on-field); }
.nav .linkrule__line { background: var(--rule-dark); }
.nav .linkrule__line::after { background: var(--accent); }

/* ── Burger ────────────────────────────────────────────────── */
.burger {
  display: none;
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;                  /* round, to sit in the capsule's end */
  border: 1px solid var(--rule-dark);
  flex-shrink: 0;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 16px; height: 1px;
  background: var(--on-field);
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease-out);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateX(-50%) translateY(-3px) rotate(-45deg); }

/* ============================================================
   FULLSCREEN MENU
   ============================================================ */


/* ── Close control ──────────────────────────────────────────
   The burger lives in .nav at z-index 80; the open menu is 90 and
   covers it, so it is neither visible nor tappable while the menu
   is up. Escape closes the menu but there is no Escape key on a
   phone, which left tapping a nav link as the only way out.

   This button is a child of .menu, so it always paints above the
   overlay, and it is placed where the burger sits at rest —
   (88px nav - 44px button) / 2 = 22px down, container padding in
   from the right — so the control does not appear to jump when
   the menu opens. js/nav.js finds it via [data-menu-close].      */
.menu__close {
  position: absolute;
  /* exactly over the burger inside the glass capsule */
  top: calc(var(--nav-top) + (var(--nav-h) - 44px) / 2);
  right: calc(var(--pad-x) + var(--safe-r, 0px) + var(--nav-pad-r));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule-dark);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}
@media (hover: hover) { .menu__close:hover { border-color: var(--rule-accent); } }
.menu__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background: var(--on-field);
}
.menu__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.menu__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 6rem var(--pad-x) 3rem;
  background: var(--field);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .75s var(--ease-inout);
}
.menu.is-open { clip-path: inset(0 0 0 0); }

.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: clamp(.5rem, 1.6vh, .95rem) 0;
  border-bottom: 1px solid var(--rule-dark-soft);
  font-size: clamp(1.75rem, 7vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--on-field-2);
  opacity: 0;
  transform: translateY(22px);
  transition: color var(--dur-fast) var(--ease-out);
}
.menu.is-open .menu__nav a {
  animation: menuIn .6s var(--ease-out) forwards;
  animation-delay: calc(.15s + var(--i, 0) * .05s);
}
.menu__nav a em {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-style: normal;
  letter-spacing: .16em;
  color: var(--accent);
}
@media (hover: hover) { .menu__nav a:hover { color: var(--accent); } }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 2rem;
  font-size: .88rem;
  color: var(--on-field-2);
}
@media (hover: hover) { .menu__foot a:hover { color: var(--accent); } }

/* ============================================================
   FOOTER
   ============================================================ */

/* The footer returns to the dark field for the same reason the hero is
   dark: the lockup is chrome-on-black artwork and needs a dark ground. */
.footer {
  position: relative;
  padding-top: clamp(4rem, 8vw, 6rem);
  overflow: hidden;
  background: var(--field);
  color: var(--on-field-2);
}
.footer .mono { color: var(--on-field-2); }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer__brand { display: flex; flex-direction: column; gap: 1rem; }
.brand-lockup--sm { width: 172px; }

.footer__nav { display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.footer__nav a {
  position: relative;
  font-size: .92rem;
  color: var(--on-field);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease-out);
}
@media (hover: hover) { .footer__nav a:hover { color: var(--accent); } }
@media (hover: hover) { .footer__nav a:hover::after { transform: scaleX(1); } }

.footer .linkrule { color: var(--on-field); }
.footer .linkrule__line { background: var(--rule-dark); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--rule-dark-soft);
}

/* Oversized ghost wordmark bleeding off the BOTTOM edge — the sides
   are meant to land flush, not to clip.

   13vw is measured, not chosen: "SKAY CRAFTS" in --font-brand at this
   weight and tracking renders 7.55x its own font-size wide, so 100/7.55
   = 13.24vw is the largest size that still fits the viewport. 13vw
   leaves a hair of tolerance for a different fallback face. The old
   15.5vw with a 15rem cap overflowed by 8% on a desktop and cut the
   final S off.

   No clamp: a floor in rem would overflow a narrow phone and a ceiling
   in rem would stop it reaching the edges on a wide monitor. One
   viewport unit fits at every width by construction. */
.footer__wordmark {
  font-family: var(--font-brand);
  font-size: 13vw;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: .78;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  /* Cuts the mark at half its cap height. Measured, not eyeballed: at
     this line-height the cap top sits .078em below the box top and the
     baseline .80em below it, so the page edge has to land .34em above
     the box bottom to take exactly half the letterform. -.24em showed
     64% of it. Everything here is in em, so the crop holds at every
     viewport width. */
  margin-bottom: -.34em;
  color: rgba(253, 241, 226, .07);
}