/* Largami — paper, ink and one cobalt accent. Self-hosted fonts (SIL OFL 1.1, licences in /assets/fonts/licenses/). */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.62981321d9.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree.4ba7d3d096.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f6f4ef;
  --paper-2: #eeebe3;
  --sheet: #fffdf9;
  --ink: #1b1915;
  --ink-2: #46423b;
  --ink-3: #66615a;
  --cobalt: #2f4fd8;
  --cobalt-text: #2a43b8;
  --cobalt-deep: #16206b;
  --crease: #0d1450;
  --hair: rgba(27, 25, 21, 0.12);
  --hair-2: rgba(27, 25, 21, 0.07);
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: 16px;
  color-scheme: light;
}
@media (min-width: 640px) { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cobalt-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cobalt-deep); }
::selection { background: rgba(47, 79, 216, 0.18); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap.wide { max-width: 1320px; }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; color: var(--paper); }

/* ---------- Header ---------- */
.site-header { padding: 18px 0; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.mark { width: 30px; height: 30px; overflow: visible; }
.mark-front { fill: var(--cobalt); }
.mark-back { fill: var(--cobalt-deep); }
.mark-crease { fill: var(--crease); opacity: 0.55; }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.015em; line-height: 1; }

.nav { display: flex; align-items: center; gap: 22px; font-size: 0.95rem; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a:not(.pill) { display: none; }
@media (min-width: 720px) { .nav a:not(.pill) { display: inline; } }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--hair); border-radius: 999px;
  background: var(--sheet); font-size: 0.875rem; color: var(--ink) !important;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 3px rgba(47, 79, 216, 0.14); }

/* ---------- Type ---------- */
.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow span { color: var(--cobalt); padding: 0 0.15em; }

/* ---------- Hero ---------- */
.hero { padding: 56px 0 24px; }
@media (min-width: 1024px) { .hero { padding: 96px 0 40px; } }
.hero h1 {
  margin-top: 18px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem);
  line-height: 1.02; letter-spacing: -0.028em;
  max-width: 14.5ch;
}
.hero h1 em { font-style: normal; color: var(--cobalt); }
.lede { margin-top: 24px; max-width: 37em; font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 0 20px; border-radius: 10px; font-weight: 600; font-size: 0.98rem; text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.button.primary { background: var(--cobalt); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 16px -6px rgba(47, 79, 216, 0.55); }
.button.primary:hover { background: #2743bf; color: #fff; transform: translateY(-1px); }
.button.quiet { border: 1px solid var(--hair); color: var(--ink-2); background: transparent; }
.button.quiet:hover { color: var(--ink); background: var(--sheet); }

/* ---------- Screenshots on paper ---------- */
.shot { margin: 0; }
.paper { position: relative; isolation: isolate; }
.sheet {
  position: relative; overflow: hidden; border-radius: 14px; background: var(--sheet);
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(27, 25, 21, 0.06), 0 14px 34px -12px rgba(27, 25, 21, 0.22), 0 44px 80px -36px rgba(22, 32, 107, 0.26);
}
.sheet img { width: 100%; }
/* A second sheet of paper underneath, a touch askew. */
.paper::before {
  content: ""; position: absolute; z-index: -1; inset: 10px -8px -10px 8px;
  border-radius: 14px; background: var(--paper-2); border: 1px solid var(--hair-2);
  transform: rotate(1.1deg);
}
.shot figcaption { margin-top: 22px; max-width: 62ch; font-size: 0.92rem; line-height: 1.5; color: var(--ink-3); }
.hero-shot { margin-top: 56px; }
@media (min-width: 1024px) { .hero-shot { margin-top: 72px; } .hero-shot .sheet { border-radius: 18px; } .hero-shot .paper::before { border-radius: 18px; inset: 16px -14px -16px 14px; } }

/* The film, when one is added (see site.js). */
.film-button {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 14px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(27, 25, 21, 0.86); color: #fff; font: 600 1rem/1 var(--sans);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.film-button:hover { background: var(--ink); transform: translate(-50%, -50%) scale(1.03); }
.film-button .play { width: 34px; height: 34px; border-radius: 50%; background: var(--cobalt); display: grid; place-items: center; }
.film-button .play svg { width: 13px; height: 13px; fill: #fff; margin-left: 2px; }
.film-button .len { font-weight: 400; opacity: 0.75; }
.sheet video { width: 100%; height: auto; background: #000; }

/* ---------- Sections ---------- */
.how { padding: 104px 0 40px; }
.how .wrap { max-width: 1280px; }
@media (min-width: 1024px) { .how { padding: 160px 0 64px; } }
.section-head { max-width: 760px; }
.section-head h2 {
  margin-top: 14px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.022em;
}
.section-head p:not(.eyebrow) { margin-top: 18px; font-size: 1.08rem; color: var(--ink-2); max-width: 40em; }

.steps { list-style: none; margin: 72px 0 0; padding: 0; display: grid; gap: 88px; }
@media (min-width: 1024px) { .steps { margin-top: 112px; gap: 136px; } }
.step { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) {
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .step:nth-child(even) .step-text { order: 2; }
}
.step-label {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(47, 79, 216, 0.35); color: var(--cobalt-text); background: var(--sheet);
  font-size: 0.75rem; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.step h3 {
  margin-top: 18px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -0.018em;
}
.step-text p:not(.step-label) { margin-top: 16px; color: var(--ink-2); max-width: 34em; }

.principles { margin-top: 112px; padding: 96px 0 104px; background: var(--paper-2); border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
@media (min-width: 1024px) { .principles { margin-top: 160px; padding: 128px 0 136px; } }
.tenets { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 720px) { .tenets { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .tenets { grid-template-columns: repeat(4, 1fr); } }
.tenets li {
  background: var(--sheet); border: 1px solid var(--hair-2); border-radius: 14px; padding: 26px 24px 28px;
  box-shadow: 0 1px 2px rgba(27, 25, 21, 0.04);
}
.tenets svg { width: 28px; height: 28px; fill: none; stroke: var(--cobalt); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tenets h3 { margin-top: 18px; font-size: 1.1rem; font-weight: 650; letter-spacing: -0.005em; line-height: 1.3; }
.tenets p { margin-top: 8px; font-size: 0.98rem; color: var(--ink-2); }

.preview { padding: 112px 0 128px; }
@media (min-width: 1024px) { .preview { padding: 160px 0 176px; } }
.note {
  --fold: 46px;
  position: relative; max-width: 780px; padding: 44px 28px 40px;
  background: var(--sheet); border-radius: 18px;
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}
/* The shadow sits on the wrapper: a clip-path would cut it off the card itself. */
.preview .wrap { filter: drop-shadow(0 1px 1px rgba(27, 25, 21, 0.08)) drop-shadow(0 18px 30px rgba(27, 25, 21, 0.1)); }
@media (min-width: 640px) { .note { padding: 56px 56px 52px; } }
/* The folded-down corner. */
.note::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--fold); height: var(--fold);
  background: linear-gradient(to bottom left, transparent 50%, #e2ddd2 50%);
  border-bottom-left-radius: 7px;
  box-shadow: -3px 3px 6px -2px rgba(27, 25, 21, 0.14);
}
.note h2 { margin-top: 14px; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
.note p:not(.eyebrow) { margin-top: 18px; color: var(--ink-2); font-size: 1.06rem; max-width: 36em; }
.note .button { margin-top: 28px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hair); padding: 40px 0 56px; font-size: 0.92rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; }
.footer-brand { display: flex; gap: 12px; align-items: center; }
.footer-brand .mark { width: 34px; height: 34px; }
.footer-brand .wordmark { font-size: 1.35rem; }
.footer-brand .muted { margin-top: 4px; }
.footer-meta { display: grid; gap: 6px; }
@media (min-width: 720px) { .footer-meta { text-align: right; } }
.muted { color: var(--ink-3); }

/* ---------- Motion: arrive once, gently ---------- */
.rise { animation: rise 760ms var(--ease) both; }
.d0 { animation-delay: 40ms; } .d1 { animation-delay: 120ms; } .d2 { animation-delay: 220ms; }
.d3 { animation-delay: 320ms; } .d4 { animation-delay: 440ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.site-header .mark-back { transform-box: fill-box; transform-origin: 0 100%; animation: fold 900ms 280ms var(--ease) both; }
.site-header .mark-crease { animation: crease 900ms 280ms var(--ease) both; }
@keyframes fold { from { transform: scaleX(0.05) skewX(-20deg); } }
@keyframes crease { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .site-header .mark-back, .site-header .mark-crease { animation: none; }
  .button, .film-button { transition: none; }
}
@media print {
  .site-header nav, .actions, .film-button { display: none; }
  .paper::before { display: none; }
}

/* 404 */
.lost { margin-top: 14px; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }