/* ============================================================================
   CARIPRINTSTUDIO — DIRECTION CONTRACT

   THESIS         A sheet on the press bed. Content sits on white stock inset into
                  press-shop ink, with the nav floating above it like a registration
                  bar. Refuses the SaaS scaffold: no headline hero, no row of three
                  equal icon cards. The home hero carries no text at all.
   OWN-WORLD      Warm ink ground (#17110E), white stock sheets at 28px radius,
                  brand flame (#EA580C) running hot across whole regions. Crop marks
                  and a Pantone colour bar are the only ornament, and only on the
                  hero sheet. Archivo throughout, tight and workmanlike.
   STORY          This shop makes things, right now — then: price it yourself in
                  under a minute, or book the studio. Send it to a human on WhatsApp.
   FIRST VIEWPORT One wide white sheet, edge to edge of the ink margin, empty but for
                  two figures at work who never stop moving. Capsule nav overlapping
                  its top edge. Primary action lives in that capsule.
   FORM           Owner-pinned: reference supplied a floating capsule over a dark
                  ground with an inset white panel. Executed at full fidelity rather
                  than re-rolled. No seed — the brief pinned the world.
   ============================================================================ */

/* ---------------------------------------------------------------- fonts --- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens --- */
:root {
  --ink: #17110e;
  --ink-raised: #221a15;
  --ink-line: #34281f;
  --stock: #ffffff;
  --stock-warm: #fff7f3;
  --stock-line: #f0e2da;

  --flame: #ea580c;
  --flame-deep: #c2410c;
  --flame-hot: #f4623a;
  /* the coral is only 4.4:1 on the raised ink surface — this one clears 4.5 */
  --flame-on-ink: #ff8a5b;
  --flame-wash: #ffede5;
  --heart: #dc2626;

  --on-stock: #17110e;
  --on-stock-soft: #5c4a40; /* 7.4:1 on white — tinted, never gray */
  --on-ink: #fdfaf8;
  --on-ink-soft: #c9b8ae; /* 8.1:1 on ink */
  --good: #15803d;

  --lift-1: 0 1px 2px rgba(23, 17, 14, 0.06), 0 4px 12px rgba(23, 17, 14, 0.05);
  --lift-2: 0 2px 4px rgba(23, 17, 14, 0.08), 0 12px 32px rgba(23, 17, 14, 0.1);
  --lift-3: 0 8px 16px rgba(23, 17, 14, 0.12), 0 32px 64px rgba(23, 17, 14, 0.18);

  --r-sheet: 28px;
  --r-control: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;

  --gutter: 16px;
  --maxw: 1240px;
  --nav-h: 60px;
}

@media (min-width: 860px) {
  :root {
    --gutter: 32px;
    --nav-h: 64px;
  }
}

/* ----------------------------------------------------------------- base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.cps {
  margin: 0;
  background: var(--ink);
  color: var(--on-stock);
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* several hidden elements are flex/grid containers, so the UA rule loses */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
  border-radius: 6px;
}

.on-ink :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--on-ink);
}

.cps-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--stock);
  color: var(--on-stock);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.cps-skip:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------- type --- */
/* These two are resets, so they are wrapped in :where() to carry NO specificity.
   Written plainly, `.cps h2` (0,1,1) outranks a class like `.faq-title` (0,1,0)
   and silently eats its margin — which is exactly what was happening to the FAQ
   heading and to every `<p>` given spacing by a class. */
:where(.cps h1, .cps h2, .cps h3, .cps h4) {
  margin: 0;
}

.cps h1,
.cps h2,
.cps h3,
.cps h4 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

:where(.cps p) {
  margin: 0;
}

.d-xl {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
}
.d-lg {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
}
.d-md {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
}
.d-sm {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  letter-spacing: -0.02em;
}

.lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  max-width: 62ch;
  color: var(--on-stock-soft);
}

.prose {
  max-width: 68ch;
  line-height: 1.65;
}

/* --------------------------------------------------------------- layout --- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The sheet: white stock inset into the ink ground. */
.sheet {
  background: var(--stock);
  border-radius: var(--r-sheet);
  box-shadow: var(--lift-3);
  overflow: hidden;
}

@media (max-width: 559px) {
  .sheet {
    border-radius: 20px;
  }
}

.section {
  padding-block: clamp(56px, 9vw, 104px);
}

.stack > * + * {
  margin-top: var(--gap, 16px);
}

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--flame);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.012em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.btn:hover {
  background: var(--flame-deep);
  transform: translateY(-1px);
  box-shadow: var(--lift-2);
}
.btn:active {
  transform: translateY(0);
  box-shadow: var(--lift-1);
}

.btn--ink {
  background: var(--ink);
}
.btn--ink:hover {
  background: #2c211a;
}

.btn--ghost {
  background: transparent;
  border-color: var(--stock-line);
  color: var(--on-stock);
}
.btn--ghost:hover {
  background: var(--flame-wash);
  border-color: var(--flame);
  color: var(--flame-deep);
  box-shadow: none;
}

.btn--on-ink {
  background: var(--stock);
  color: var(--ink);
}
.btn--on-ink:hover {
  background: var(--stock-warm);
}

.btn--lg {
  min-height: 56px;
  padding: 0 30px;
  font-size: 1.02rem;
}

.btn--block {
  width: 100%;
}

.btn.is-disabled,
.btn[aria-disabled='true'] {
  background: #e9ddd6;
  color: #7a675c; /* 4.6:1 on the disabled fill — inert, still legible */
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.btn .ico {
  width: 19px;
  height: 19px;
  flex: none;
  fill: currentColor;
}

/* ------------------------------------------------------------------- nav -- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 12px var(--gutter) 0;
  pointer-events: none;
}

.nav__bar {
  pointer-events: auto;
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  height: var(--nav-h);
  padding: 0 8px 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-radius: 999px;
  box-shadow: var(--lift-2);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav.is-stuck .nav__bar {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--lift-3);
}

.nav__logo {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
  padding: 6px 4px;
  border-radius: 10px;
}

/* The full lockup is only ~83px wide at this height, so it fits the phone
   capsule alongside the menu button — no need to fall back to the mark. */
.nav__logo img {
  height: 26px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--on-stock);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav__link:hover {
  background: var(--flame-wash);
  color: var(--flame-deep);
}

.nav__link[aria-current='page'] {
  background: var(--flame-wash);
  color: var(--flame-deep);
}

.nav__cta {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.92rem;
  flex: none;
}

/* mobile: capsule keeps the mark and a menu button */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}

.nav__toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (max-width: 859px) {
  .nav__bar {
    padding-right: 8px;
    padding-left: 16px;
  }
  .nav__logo img {
    height: 24px;
  }
  .nav__links,
  .nav__cta {
    display: none;
  }
  .nav__toggle {
    display: inline-flex;
  }
}

/* full-screen menu sheet */
.menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--ink);
  color: var(--on-ink);
  padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu__top {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu__top .mark {
  height: 24px;
  width: auto;
}

.menu__close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: transparent;
  color: var(--on-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* the nav owns the flexible row, so centre inside it rather than on the list */
.menu > nav {
  display: grid;
  align-content: center;
  min-height: 0;
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.menu__list a {
  display: block;
  padding: 14px 0;
  font-size: clamp(2rem, 11vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-line);
}

.menu__list a small {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-ink-soft);
  margin-top: 2px;
}

.menu__foot {
  display: grid;
  gap: 12px;
}

.menu__meta {
  color: var(--on-ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- footer -- */
.foot {
  color: var(--on-ink);
  padding-block: clamp(48px, 7vw, 80px) 28px;
}

.foot__grid {
  display: grid;
  gap: 36px;
}

@media (min-width: 860px) {
  .foot__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
  }
}

.foot__logo {
  height: 30px;
  width: auto;
  margin-bottom: 16px;
}

.foot__blurb {
  color: var(--on-ink-soft);
  max-width: 34ch;
  font-size: 0.95rem;
}

.foot h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  margin-bottom: 12px;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  font-size: 0.95rem;
}

.foot a {
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.foot a:hover {
  color: var(--flame-hot);
  text-decoration: underline;
}

.foot__rule {
  border: 0;
  border-top: 1px solid var(--ink-line);
  margin: 36px 0 20px;
}

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  color: var(--on-ink-soft);
}

/* --------------------------------------------------------------- reveal --- */
.reveal {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
  /* If JS never runs, content must not stay invisible. */
  .no-js .reveal {
    opacity: 1;
    transform: none;
  }
}

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