/* ==========================================================================
   Contact (round 2)

   One violet field. On the left, a note to Bassel: the form, set straight on
   the colour, with his casual photo as the postage stamp in its corner. On the right,
   BasselTutor in its own colours (the indigo of its logo, its warm paper),
   with real screens in real devices. Sending the note postmarks the stamp.
   Then a paper band with his three profiles, then the shared footer.

   Local overrides of the system (reported): the form's labels, focus rings
   and errors are restyled for a saturated violet ground.
   ========================================================================== */

/* Layout stability (CLS). Chrome counts text that moves inside its box (a
   baseline that drops, a word that reflows to the next line), so the web
   fonts must swap in without moving a glyph. Metric-matched fallbacks do
   that: measured in Chrome against Arial, Hanken 400-500 sets the same width
   as Arial, Hanken 600 is 94.6% of Arial Bold, and Geologica 650-700 (its
   sharp instance) is 104% (from the fonts' advance widths, with its typo
   metrics for the baselines). The topics also sit in a fixed 2 x 2 grid, and
   BasselTutor's line keeps three lines.
   Bold faces end with local("Arial"): WebKit on Windows doesn't resolve the
   "Arial Bold" full name, but matches the family's bold from it. */
@font-face { font-family: "Hanken Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 100.3%; ascent-override: 99.7%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 550 900; size-adjust: 94.6%; ascent-override: 105.7%; descent-override: 31.7%; line-gap-override: 0%; }
@font-face { font-family: "Geologica Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 550 900; size-adjust: 104.2%; ascent-override: 93.6%; descent-override: 26.4%; line-gap-override: 0%; }
:root {
  --font-display: "Geologica", "Geologica Fallback", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Hanken Fallback", system-ui, "Helvetica Neue", Arial, sans-serif;
}
:root {
  /* BasselTutor's own colours, sampled from its logo and its globals.css */
  --bt-ink: #1e1f2a;
  --bt-paper: #faf6ed;
  --bt-indigo: #4842d2;      /* the logo's deep crescent */
  --bt-primary: #4f49e1;     /* its buttons */
  --bt-iris: #6870f0;
  --bt-periwinkle: #909cfc;  /* the logo's sprout */
  --bt-pad: clamp(26px, 2.5vw, 42px);   /* the panel's padding; the note's content edges match it */
  --stamp-w: clamp(84px, 6.4vw, 112px);
}

.c-wrap { width: min(100% - 2 * var(--gutter), 1360px); margin-inline: auto; }
.c-nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   First screen: the note and BasselTutor, on violet
   --------------------------------------------------------------------------- */
.c-first {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100dvh;
  padding: calc(var(--chrome-h) + clamp(12px, 2.6vh, 36px)) 0 clamp(40px, 6vh, 88px);
}
.c-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr);
  column-gap: clamp(40px, 5.4vw, 104px);
  align-items: stretch;
}

/* The note's content lines up with the panel's content: "Say hi." with
   BasselTutor's name, Send with "Create an account". */
.c-note { display: flex; flex-direction: column; min-width: 0; padding-block: var(--bt-pad); }
.c-title {
  margin: 0 0 clamp(22px, 3.2vh, 40px);
  font: 700 clamp(64px, 7.6vw, 132px)/.86 var(--font-display);
  letter-spacing: -.045em;
  color: #ffffff;
}

/* The letter: stamp, form and the thank-you share this box */
.c-letter { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.c-form { display: flex; flex-direction: column; flex: 1 1 auto; }
.c-form[hidden] { display: none; }

/* ---------- The stamp: his casual photo as the postage on the note ---------- */
.c-stamp {
  position: absolute; z-index: 2; top: -4px; right: 2px;
  width: var(--stamp-w); margin: 0;
  transform: rotate(4deg);
  filter: drop-shadow(0 1px 1px rgba(24, 12, 80, .18)) drop-shadow(0 12px 18px rgba(24, 12, 80, .28));
}
/* Perforations: a grid of holes centred on the edges. The padding stays under
   one hole pitch, so only the edge row shows; the window's own white border
   gives the stamp its margin. */
.c-stamp__paper {
  --r: 4px;                                  /* perforation radius */
  --gap: 3.2px;                              /* paper between holes */
  padding: calc(var(--r) + var(--gap) / 2);  /* halfway to the next row, which 'round' may pull closer */
  background: #fffdf8;
  -webkit-mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1 * var(--r) - var(--gap) / 2) calc(-1 * var(--r) - var(--gap) / 2) / calc(2 * var(--r) + var(--gap)) calc(2 * var(--r) + var(--gap)),
    linear-gradient(#000 0 0) content-box;
          mask:
    radial-gradient(var(--r), #0000 97%, #000) round calc(-1 * var(--r) - var(--gap) / 2) calc(-1 * var(--r) - var(--gap) / 2) / calc(2 * var(--r) + var(--gap)) calc(2 * var(--r) + var(--gap)),
    linear-gradient(#000 0 0) content-box;
}
/* His casual photo, cropped head and shoulders to the window's 4:5 (see
   build/make-assets.mjs). The warm red is the storefront behind him, shown
   only for the moment before the photo decodes. */
.c-stamp__window {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 5px solid #fffdf8;
  background: #b9503c;
}
.c-stamp__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The postmark lands when the note is sent. Its circle bites the stamp's
   lower left, below his face; the cancel waves run right across his tee and
   into the gap between the columns, never over the thank-you. */
.c-stamp__mark {
  --mark-rot: -14deg;
  position: absolute; z-index: 3; left: -26%; bottom: -20%; width: 165%; max-width: none;
  color: rgba(28, 24, 48, .78);
  opacity: 0; transform: rotate(var(--mark-rot)) scale(1.18); transform-origin: 28% 50%;
  pointer-events: none;
}
.c-stamp__date { font: 500 11.5px/1 var(--font-mono); fill: currentColor; stroke: none; }
.c-stamp.is-posted .c-stamp__mark {
  opacity: 1; transform: rotate(var(--mark-rot)) scale(1);
  transition: opacity 90ms ease-out 140ms, transform 300ms var(--ease-out) 140ms;
}

/* ---------- Topics: each wears its sticker from the rest of the site (system.css, Stickers) ---------- */
.c-topics { min-width: 0; margin: 0; padding: 0 calc(var(--stamp-w) + 28px) 0 0; border: 0; }
.c-topics__legend { padding: 0; margin-bottom: 8px; font: 600 15.5px/1.4 var(--font-body); color: #ffffff; }
.c-topics__set { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 30px; }
.c-topic { position: relative; display: inline-flex; }
.c-topic input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.c-topic__face {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 48px; padding-right: 6px;
  border-radius: 12px;   /* the focus ring's shape */
  font: 600 15.5px/1 var(--font-body); letter-spacing: -.005em; color: #ffffff;
  pointer-events: none;
  /* Hover animates transform only; the word's ink changes on check (a click, never on scroll or hover) */
  transition: transform var(--dur-micro) var(--ease-out);
}
.c-topic .sticker { width: 34px; height: 34px; }
/* The chosen topic gets the nav's highlighter, swept in left to right, in
   the topic's full hue (a wash would go muddy on violet), under ink */
.c-topic__word { position: relative; isolation: isolate; transition: color var(--dur-micro) ease-out; }
.c-topic .hl {
  position: absolute; z-index: -1; left: -.42em; top: calc(50% - 1.01em); width: calc(100% + .84em); max-width: none; height: 1.9em;
  pointer-events: none;
  clip-path: inset(0 100% 0 0); transition: clip-path 380ms var(--ease-out);
}
.c-topic .hl__ink { fill: var(--hue); }
.c-topic .hl__pool { fill: var(--hue-deep); fill-opacity: .17; }
.c-topic:hover .c-topic__face { transform: translateY(-2px); }
.c-topic input:checked + .c-topic__face .hl { clip-path: inset(0 -1px 0 -1px); }
.c-topic input:checked + .c-topic__face .c-topic__word { color: var(--ink-fixed); }
.c-topic input:focus-visible + .c-topic__face { outline: 2.5px solid #ffffff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .c-topic .hl { transition: none; } }

/* ---------- Fields (system .field, restyled for the violet ground) ---------- */
.c-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.c-field { min-width: 0; }
.c-field--grow { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 18px; }
.c-field--grow .field { flex: 1 1 auto; grid-template-rows: auto 1fr; }
.c-first .field > span { font: 600 15.5px/1.4 var(--font-body); color: #ffffff; }
.c-first .field input, .c-first .field textarea {
  border-color: transparent;
  box-shadow: 0 1px 1px rgba(24, 12, 80, .12), 0 8px 18px -12px rgba(24, 12, 80, .4);
}
.c-first .field textarea { min-height: 136px; height: 100%; resize: none; }
.c-first .field input:focus, .c-first .field textarea:focus {
  border-color: transparent;
  box-shadow: 0 1px 1px rgba(24, 12, 80, .12);
  outline: 2.5px solid #ffffff; outline-offset: 3px;
}
.c-first .field input[aria-invalid="true"], .c-first .field textarea[aria-invalid="true"] { border-color: var(--coral-deep); }

.c-err {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px;
  font: 600 14.5px/1.35 var(--font-body); color: #ffffff;
}
.c-err[hidden] { display: none; }
.c-err::before, .c-status::before {
  content: ""; width: 18px; height: 18px; flex: none; margin-top: -1px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23ffb81c'/%3E%3Cpath d='M9 4.6v5.2' stroke='%231c1830' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='13' r='1.25' fill='%231c1830'/%3E%3C/svg%3E");
}

/* ---------- Send ---------- */
.c-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.c-send__btn { min-width: 136px; min-height: 52px; padding: 0 30px; font-size: 16px; }
.c-first .c-send__btn:hover { background: #ffffff; color: var(--violet-deep); }
/* The note takes the colour of its topic */
.c-form:has([value="tutoring"]:checked) { --send: var(--marigold); }
.c-form:has([value="project"]:checked)  { --send: var(--mint); }
.c-form:has([value="medicine"]:checked) { --send: var(--coral); }
.c-form:has([value="hello"]:checked)    { --send: var(--orchid); }
.c-first .c-form:has(.c-topic input:checked) .c-send__btn,
.c-first .c-form:has(.c-topic input:checked) .c-send__btn:hover { background: var(--send); color: var(--ink-fixed); }
.c-send__btn:focus-visible { outline: 2.5px solid #ffffff; outline-offset: 3px; }
.c-send__note { font: 500 15.5px/1.4 var(--font-body); color: #ffffff; }
.c-status { display: flex; align-items: flex-start; gap: 8px; font: 600 15px/1.4 var(--font-body); color: #ffffff; }
.c-status:empty { display: none; }
.c-status:not(:empty) { margin-top: 14px; }

/* ---------- The thank-you, in place ---------- */
.c-done { padding-right: calc(var(--stamp-w) + 52px); }
.c-done[hidden] { display: none; }
.c-done__title {
  font: 700 clamp(38px, 3.6vw, 60px)/1 var(--font-display); letter-spacing: -.03em; color: #ffffff;
}
/* Focus lands here so screen readers hear the thank-you; it isn't a control, so no ring */
.c-done__title:focus { outline: none; }
.c-done__text { max-width: 34ch; margin-top: 18px; font: 400 var(--step-lede)/1.5 var(--font-body); color: #ffffff; overflow-wrap: anywhere; }
.c-done__text b { font-weight: 650; }
.c-done__again {
  margin-top: 28px; background: transparent; color: #ffffff;
  border-color: rgba(255, 255, 255, .6);
}
.c-done__again:hover { border-color: #ffffff; }
@media (prefers-reduced-motion: no-preference) {
  .c-done:not([hidden]) { animation: c-in var(--dur-ui) var(--ease-out) both; }
}
@keyframes c-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------------
   BasselTutor, in its own colours
   --------------------------------------------------------------------------- */
.c-bt {
  --bg: var(--bt-indigo); --ink: #ffffff; --focus: #ffffff;
  position: relative; min-width: 0;
  display: flex; flex-direction: column;
  contain: layout paint;
  padding: var(--bt-pad);
  border-radius: var(--radius-lg);
  background: var(--bt-indigo); color: #ffffff;
  box-shadow: 0 2px 4px rgba(20, 8, 72, .12), 0 60px 90px -60px rgba(20, 8, 72, .75);
}
.c-bt__head { display: flex; align-items: center; gap: 14px; }
.c-bt__logo {
  width: 54px; height: 54px; flex: none; padding: 6px;
  border-radius: 50%; background: var(--bt-paper);
}
.c-bt__title { font: 700 clamp(28px, 2.3vw, 38px)/1 var(--font-display); letter-spacing: -.025em; }
/* Keeps three lines (two-column layout), so the devices above never move if
   a browser's fallback sets it in two; the text starts at the top. */
.c-bt__line {
  min-height: 4.5em;
  max-width: 32em; margin-top: 26px; font: 400 var(--step-lede)/1.5 var(--font-body); text-wrap: pretty;
}

.c-bt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(18px, 1.7vw, 28px); margin-top: 22px; }
.c-bt__cta {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 clamp(18px, 1.5vw, 24px);
  border-radius: var(--pill); background: var(--bt-paper); color: var(--bt-indigo);
  font: 650 16px/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out);
}
.c-bt__cta:hover { transform: translateY(-2px); background: #ffffff; }
.c-bt__go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 16px/1 var(--font-body); color: #ffffff; text-decoration: none; white-space: nowrap;
}
.c-bt__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-micro) var(--ease-out); }
.c-bt__go:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.c-bt__go:hover svg { transform: translateX(3px); }
.c-bt a:focus-visible { outline: 2.5px solid #ffffff; outline-offset: 3px; border-radius: var(--pill); }

/* Devices: a browser for the public site, an iPhone for messages and booking.
   The stage takes whatever height the note leaves it (a size container), and
   both devices size themselves to fit it: the phone is 2.087 times as tall as
   it is wide, the browser is a 40 px bar over a 16:10 view. */
.c-bt__stage {
  --gap: 22px;
  --phone: min(27cqw, 100cqh / 2.09);
  container-type: size;
  flex: 1 1 0; min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 28px;
}
/* The pair keeps a shared baseline and sits in the middle of whatever room it has */
.c-bt__devices { display: flex; align-items: flex-end; justify-content: center; gap: var(--gap); }
.c-bt__browser {
  flex: none; width: min(100cqw - var(--phone) - var(--gap), (100cqh - 40px) * 1.6);
  box-shadow: 0 0 0 1px rgba(20, 8, 72, .2), 0 2px 6px rgba(20, 8, 72, .18), 0 34px 60px -30px rgba(10, 4, 50, .7);
}
.c-bt__browser .browser__view { background: var(--bt-paper); }
.c-bt__phone { --w: var(--phone); }
.c-bt__phone--second { display: none; }
.c-bt .iphone { box-shadow:
  inset 0 0 0 1px color-mix(in srgb, var(--edge-hi) 60%, transparent),
  0 2px 6px rgba(10, 4, 50, .2),
  0 calc(var(--w) * .12) calc(var(--w) * .2) calc(var(--w) * -.06) rgba(10, 4, 50, .55); }

/* Real BasselTutor screens (captured with invented data). The phone's stack
   follows the links below it: messages at rest, register for "Create an
   account", the booking for the free consultation. */
/* Each layer carries its own status band (54/393 of the glass width, the
   same height as the system's status bar), so switching screens is a pure
   opacity crossfade. */
.c-screens { position: relative; }
.c-bt__glass { padding-top: 0; }
.c-screen {
  position: absolute; inset: 0; padding-top: 13.74%;
  background: #ffffff;
  opacity: 0; transition: opacity var(--dur-ui) ease-out;
}
.c-screen--paper { background: var(--bt-paper); }
.c-screen.is-on { opacity: 1; }
.c-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------------------------------------------------------------------------
   Elsewhere: the three profiles, in one sentence
   --------------------------------------------------------------------------- */
.c-also {
  --focus: var(--violet-deep);
  padding-block: clamp(72px, 8.4vw, 136px);
  background: var(--paper); color: var(--violet-deep);
}
.c-also__line {
  max-width: 13em;   /* em, not ch: ch follows each font's "0", so it would rewrap when the web font swaps in */
  font: 650 clamp(34px, 4.1vw, 66px)/1.42 var(--font-display); letter-spacing: -.028em;
  text-wrap: balance;
}
.c-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: .26em;
  padding: .1em .48em .1em .3em; margin-block: .06em;
  border-radius: var(--pill); background: #ffffff; color: var(--ink-fixed);
  line-height: 1.1; text-decoration: none; white-space: nowrap; vertical-align: .04em;
  box-shadow: 0 1px 2px rgba(28, 24, 48, .1), 0 16px 30px -18px rgba(40, 24, 110, .45);
  transition: transform var(--dur-micro) var(--ease-out);
}
.c-pill::before { content: ""; position: absolute; inset: -6px -3px; }   /* 44 px hit area on small phones */
.c-pill svg { width: .72em; height: .72em; flex: none; }
.c-pill.linkedin svg { fill: #0a66c2; }
.c-pill.github svg   { fill: #181717; }
.c-pill.youtube svg  { fill: #ff0000; width: .8em; }
.c-pill:hover { transform: translateY(-3px); }
.c-pill:focus-visible { outline: 3px solid var(--violet-deep); outline-offset: 4px; border-radius: var(--pill); }

/* While the page scrolls under a still pointer, nothing hovers (page.js sets
   the class and clears it 150 ms after the last scroll) */
@media (hover: hover) {
  .is-scrolling .c-grid, .is-scrolling .c-also { pointer-events: none; }
}

/* ---------------------------------------------------------------------------
   Smaller screens
   --------------------------------------------------------------------------- */
@media (max-width: 1366px) {
  /* Keeps BasselTutor's three actions on one line at 1280, with room to spare
     in every browser's fallback font (so the row never rewraps on a font swap) */
  .c-bt__cta, .c-bt__go { font-size: 15px; }
  .c-bt__actions { column-gap: 14px; }
  .c-bt__cta { padding: 0 16px; }
  .c-bt__go { gap: 6px; }
}
@media (max-width: 1079px) {
  .c-first { display: block; min-height: 0; }
  .c-grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 6vw, 64px); }
  .c-note { padding-block: 0; }
  .c-first .field textarea { height: auto; resize: vertical; }
  /* Stacked, the panel sets its own height: the stage sizes by width again,
     and the line needs no reserved height (nothing above it depends on it) */
  .c-bt__stage { container-type: inline-size; flex: none; min-height: 0; --phone: 25cqw; display: block; }
  .c-bt__line { min-height: 0; }
  .c-bt__browser { width: calc(100cqw - var(--phone) - var(--gap)); }
  /* Stacked, the thank-you starts below the stamp, so the waves can run left */
  .c-done { padding-right: 0; padding-top: calc(var(--stamp-w) * 1.25 + 56px); }
  /* The circle sits left of the stamp; a flatter tilt keeps the waves on his tee, below his face */
  .c-stamp__mark { --mark-rot: -6deg; left: -84%; bottom: -30%; }
}

@media (max-width: 600px) {
  :root { --stamp-w: 80px; }
  .c-first { padding-bottom: 56px; }
  .c-title { font-size: clamp(60px, 18vw, 76px); margin-bottom: 26px; }
  /* The stamp moves up beside "Say hi." (the corner of the envelope), so the
     topics get the full width as a fixed 2 x 2 grid that can't rewrap when
     the fonts swap in. */
  .c-note { position: relative; }
  .c-letter { position: static; }
  .c-stamp { top: 2px; right: 0; }
  .c-topics { padding-right: 0; }
  .c-topics__set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
  .c-topic { display: flex; }
  .c-topic__face { flex: 1 1 auto; min-width: 0; gap: 10px; padding-right: 0; font-size: 15px; }
  .c-topic .sticker { width: 32px; height: 32px; }
  .c-done { padding-top: 56px; }   /* clears the postmark, which lands just under the stamp */
  .c-pair { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .c-send { gap: 12px; }
  .c-send__btn { width: 100%; }
  .c-bt { padding: 24px 20px 26px; border-radius: 24px; }
  .c-bt__line { font-size: 17px; }
  .c-bt__actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .c-bt__actions li { display: flex; }
  .c-bt__actions li > a { flex: 1 1 auto; }
  .c-bt__cta { justify-content: center; min-height: 52px; margin-bottom: 6px; }
  .c-bt__go { justify-content: space-between; min-height: 48px; padding: 0 4px; }
  .c-bt__browser { display: none; }
  .c-bt__devices { gap: 18px; }
  .c-bt__phone { --w: min(43cqw, 190px); }
  .c-bt__phone--second { display: block; }
  .c-also__line { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.5; }
}