/* Condei — condei.app
 * The home page. Reads every colour, type and space token from
 * assets/styles.css (docs/site-design-plan.md); nothing is redefined here
 * and nothing third-party is loaded.
 *
 * Order down the page: parchment hero (the pen writes the wordmark), the
 * product straddling the seam into the ink band (security), paper (writing
 * features), parchment (which vault), ink (Condei Nor), paper (get Condei).
 */

/* ----------------------------------------------------------------- hero */

.hero { background: var(--parchment); }

.hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(36px, 1rem + 4vw, 88px) clamp(40px, 1.5rem + 3vw, 72px);
}

/* The wordmark, and the stage the nib writes on (assets/site.js measures
   both at runtime, so their sizes can change freely). */
.hero-figure {
  position: relative;
  --wm-h: clamp(52px, 2.2rem + 3.6vw, 96px);
  margin-bottom: clamp(28px, 1rem + 2.4vw, 52px);
}
.hero-figure h1 { margin: 0; line-height: 0; }

.wordmark-svg {
  height: var(--wm-h);
  width: calc(var(--wm-h) * 4.384);
  color: var(--ink);
  overflow: visible;
}

.penstage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--wm-h) * 3.3);
  height: calc(var(--wm-h) * 3.3);
  margin-left: calc(var(--wm-h) * -1.65);
  /* The c is written in the wordmark's own place (hidden while the pen
     writes), centre stage, a touch low (0.35 × its height) so the nib — which
     stands tall above its tip — clears the sticky header when it lifts to the
     dot. It used to sit 2.9 × the wordmark's height up, which put the writing
     behind the header: the hero has nowhere near that much room above the
     wordmark (20 Oct 2026). */
  margin-top: calc(var(--wm-h) * -1.3);
  color: var(--ink);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}
.nib-body { fill: var(--brass); }
.nib-cut { stroke: var(--parchment); stroke-width: 7; stroke-linecap: round; fill: none; }
.nib-hole { fill: var(--parchment); }

/* Sized once and moved with transform alone; its centre sits at the hero
   figure's origin. */
.flydot {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  background: var(--brass);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* The launch sequence hides only the wordmark it is about to write. The
   inline head script sets data-launch before first paint (and removes it
   after 4s whatever happens); site.js removes it the moment the sequence
   ends or is skipped. Every other element on the page is visible from the
   first frame, script or no script. */
html[data-launch] .hero-figure h1 .wm-l,
html[data-launch] .hero-figure h1 #wmC,
html[data-launch] .hero-figure h1 #wmDot {
  opacity: 0;
}

/* The one display line on the page. WONK gives it Fraunces' quirked forms;
   opsz steps up with the size, the way a metal cut would. */
.hero-line {
  max-width: 17ch;
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--t-hero);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  color: var(--ink);
  text-wrap: balance;
}
.opt-break { display: none; }
@media (min-width: 760px) {
  .hero-line { max-width: none; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1; }
  .opt-break { display: inline; }
}

.hero-lede {
  margin-top: clamp(18px, 0.8rem + 1vw, 28px);
  max-width: 40ch;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(22px, 1rem + 1vw, 32px);
  font-size: var(--t-small);
  color: var(--muted);
  text-align: left;
}
.hero-status img { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.hero-status b { color: var(--ink); font-weight: 700; }

/* The plate: the product sits across the seam between parchment and ink.
   The split is a hard stop in the plate's own background, at the same
   proportion of its height as the window's lower third, so it lines up at
   every width without measuring anything.
   Three devices, one family: the Mac window at the back, the unfolded
   iPhone Duo in front of its lower left, the iPhone in front of its lower
   right. The window stays in flow (its width/height set the stage's height,
   so nothing shifts as images arrive); the two handhelds hang off it in
   percentages of the stage, so the group scales as one picture.
   assets/img/hero/duo-open-*.webp is the Duo's inner display, open, as the
   App Store set frames it (design/build-appstore-screenshots.mjs, kind
   duoInner: 951x669 pt screen, crease at x 475.5; its black system status
   column is painted out in the note pane's colour, 15 Oct 2026) with DuoOpenEditorAttachments.dc.html lifted in, light theme to
   match the other two, rendered with a transparent ground. */
.plate {
  background: linear-gradient(to bottom, var(--parchment) 0 58%, var(--band) 58% 100%);
}
.plate-stage {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
}
.plate-mac { width: 79%; margin-left: 10%; }
.plate-duo {
  position: absolute;
  left: 0;
  bottom: clamp(-56px, -3vw, -14px);
  width: 40%;
  filter: drop-shadow(0 22px 28px rgba(27, 42, 65, 0.26));
}
.plate-phone {
  position: absolute;
  right: 0;
  bottom: clamp(-56px, -3vw, -14px);
  width: 21%;
}
/* Phone widths: the window keeps most of the width, the Duo and the iPhone
   grow relative to it so their screens still read as screens. */
@media (max-width: 699px) {
  .plate-mac { width: 84%; margin-left: 8%; }
  .plate-duo { width: 56%; bottom: -16%; }
  .plate-phone { width: 27%; bottom: -24%; }
  .plate { padding-bottom: 6%; background: linear-gradient(to bottom, var(--parchment) 0 52%, var(--band) 52% 100%); }
}
@media (prefers-color-scheme: dark) {
  .plate-duo { filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.5)); }
}

/* The Duo's one entrance: it opens from the crease outward, the way the
   device unfolds, on the Large spring's curve. It waits for the pen-to-logo
   launch (html[data-launch], removed the moment that sequence ends, is
   skipped, or after 4s whatever happens) so the two never compete. Without
   the launch, or without script, it plays on load and ends fully open;
   under Reduce Motion it never hides at all. */
@media (prefers-reduced-motion: no-preference) {
  html[data-launch] .plate-duo img { clip-path: inset(0 50% round 4%); opacity: 0; }
  html:not([data-launch]) .plate-duo img {
    animation: duo-open 0.7s var(--ease-spring) 0.12s both;
  }
}
@keyframes duo-open {
  from { clip-path: inset(0 50% round 4%); opacity: 0.4; }
  30% { opacity: 1; }
  to { clip-path: inset(0 0 round 4%); opacity: 1; }
}

/* The one scroll-linked touch outside the product story: as the plate
   leaves the viewport the handhelds rise faster than the window, the phone
   most, so the three devices drift apart across the seam in depth order.
   Native scroll-driven animation only — browsers without it, and Reduce
   Motion, keep them still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plate-phone, .plate-duo {
      animation: plate-drift linear both;
      animation-timeline: view();
      animation-range: cover 45% cover 100%;
    }
    .plate-duo { animation-name: plate-drift-near; }
  }
}
@keyframes plate-drift {
  from { translate: 0 0; }
  to { translate: 0 -72px; }
}
@keyframes plate-drift-near {
  from { translate: 0 0; }
  to { translate: 0 -36px; }
}

/* ------------------------------------------------------------- security */

.security { padding-top: clamp(88px, 4rem + 6vw, 168px); }

.security-grid {
  display: grid;
  gap: clamp(48px, 2rem + 3vw, 88px);
}
@media (min-width: 960px) {
  .security-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
}

.security-title {
  max-width: 15ch;
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 64, "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}

.nor-lockup { width: clamp(180px, 10rem + 6vw, 260px); height: auto; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: clamp(24px, 1rem + 1vw, 36px); }
.actions .btn-primary { margin-top: 0; }

/* ------------------------------------------------------------------ get */

.family {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(24px, 1rem + 3vw, 72px) clamp(20px, 1rem + 3vw, 72px);
  margin-top: clamp(40px, 2rem + 2.4vw, 72px);
}
.family-item { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.family-item img { width: auto; filter: drop-shadow(0 16px 22px rgba(27, 42, 65, 0.2)); }
@media (prefers-color-scheme: dark) { .family-item img { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5)); } }
.family-item--phone img { height: clamp(150px, 6rem + 6vw, 220px); }
.family-item--tablet img { height: clamp(120px, 5rem + 5vw, 176px); }
.family-item--laptop img { height: clamp(120px, 5rem + 5vw, 176px); }
.family-item span { font-size: var(--t-small); font-weight: 600; color: var(--muted); }

.get-soon {
  margin-top: clamp(36px, 1.5rem + 2vw, 56px);
  max-width: 52ch;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--muted);
}
.get-soon b { color: var(--ink); font-weight: 700; }

.collects {
  margin-top: clamp(64px, 3rem + 4vw, 120px);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  max-width: 34ch;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 760px) { .collects { max-width: none; } }

/* --------------------------------------------------------- small screens */

@media (max-width: 480px) {
  .family { gap: 24px 28px; justify-content: flex-start; }
  .family-item--phone img { height: 136px; }
  .family-item--tablet img, .family-item--laptop img { height: 104px; }
}