/* Shoshin Labs — built to docs/design/site-redesign/drops/2026-09-19/spec_one-pager.md
   Static HTML + CSS. No build step, no framework, no JavaScript.
   The clamp() coefficients are fitted through the two approved frames (390px and 1100px)
   — do not round them (spec §2). */

:root {
  /* Height-aware settle (user direction, 2026-09-19): 0 at the approved 1100×690
     frame, grows as the window gets taller. Text and wave shift by the SAME amount,
     so the name-above-crest relationship is preserved and the top gains empty ink. */
  --settle: 0px;
  --ink: #201e1d;
  --paper: #f3f2f2;
  --type-primary: #f8f4f4;
  --type-secondary: #d7d3d3;
  --link: #99e0ff;
  --link-hover: #cbeeff;
  --focus-ring: #0088b0;
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--type-secondary);
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: pretty;
}

/* ---- the panel ---------------------------------------------------------- */

.panel {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding:
    clamp(64px, calc(50.8px + 3.38vw), 104px)
    clamp(36px, calc(7.44px + 7.32vw), 112px)
    clamp(56px, calc(38.4px + 4.51vw), 104px);
}

/* Sized by width and centred, which is how the design was approved: the whole print
   spans the page. min-height keeps it covering a window taller than the art, where
   width-sizing alone would letterbox (spec §4). Opacity 0.14 is a measured value —
   re-measure before changing the art. */
.wave {
  position: absolute;
  left: 0;
  top: calc(50% + var(--settle));
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: 36% 50%;
  opacity: 0.14;
  pointer-events: none;
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ---- the mark ----------------------------------------------------------- */

.mark {
  display: block;
  margin-top: var(--settle);
  width: clamp(64px, calc(53px + 2.82vw), 108px);
  height: clamp(64px, calc(53px + 2.82vw), 108px);
}

/* ---- type --------------------------------------------------------------- */

.name {
  margin: clamp(36px, calc(31.6px + 1.13vw), 60px) 0 0;
  font-size: clamp(44px, calc(33px + 2.82vw), 88px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--type-primary);
}

.lead {
  margin: clamp(20px, calc(17.8px + 0.56vw), 32px) 0 0;
  font-size: clamp(21px, calc(18.8px + 0.56vw), 34px);
  line-height: 1.4;
  /* Contained at every width — the desktop-only cap made the tagline snap to full
     measure just under the breakpoint (user-caught, 2026-09-19). */
  max-width: 21ch;
}

.spacer { flex: 1; min-height: 40px; }

.contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.products {
  margin: 0;
  font-size: clamp(17px, calc(16.45px + 0.14vw), 22px);
  line-height: 1.5;
}

/* ---- links -------------------------------------------------------------- */

a {
  width: fit-content;
  font-size: clamp(18px, calc(17.45px + 0.14vw), 23px);
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover { color: var(--link-hover); }

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- desktop ------------------------------------------------------------ */

@media (min-width: 900px) {
  :root { --settle: clamp(0px, calc(14svh - 96.6px), 110px); }

  .name { line-height: 1; }

  .spacer { min-height: 56px; }

  .contact { gap: 14px; }
}