/* Scrawl — paper surface, near-invisible chrome. */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Great Vibes';
  src: url('../fonts/greatvibes.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Allura';
  src: url('../fonts/allura.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Alex Brush';
  src: url('../fonts/alexbrush.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Mr De Haviland';
  src: url('../fonts/mrdehaviland.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Mrs Saint Delafield';
  src: url('../fonts/mrssaintdelafield.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Herr Von Muellerhoff';
  src: url('../fonts/herrvonmuellerhoff.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Italianno';
  src: url('../fonts/italianno.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Pinyon Script';
  src: url('../fonts/pinyonscript.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Parisienne';
  src: url('../fonts/parisienne.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Sacramento';
  src: url('../fonts/sacramento.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Style Script';
  src: url('../fonts/stylescript.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Tangerine';
  src: url('../fonts/tangerine.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Yellowtail';
  src: url('../fonts/yellowtail.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Satisfy';
  src: url('../fonts/satisfy.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Dancing Script';
  src: url('../fonts/dancingscript.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Homemade Apple';
  src: url('../fonts/homemadeapple.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Zeyada';
  src: url('../fonts/zeyada.woff2') format('woff2');
  font-display: swap;
}

:root {
  --paper: #FAF8F4;
  --paper-deep: #F4F1EA;
  --ink: #14161A;
  --rule: #C9C0AD;
  /* Deliberately darker than a typical "muted" grey. The first build was so
     low-contrast the controls were easy to miss entirely. */
  --muted: #5F5A4E;
  --muted-soft: #857F70;
  /* The surroundings. Only these flip with the theme. */
  --page: #FAF8F4;
  --page-deep: #F4F1EA;
  --page-text: #14161A;
  --page-muted: #5F5A4E;
  --page-muted-soft: #857F70;
  --page-line: #C9C0AD;
  --page-btn: rgba(255, 255, 255, .35);
  --page-wash: rgba(255, 255, 255, .55);
  --glow: none;
  --orbit: rgba(0, 185, 255, .55);
  --orbit-soft: rgba(0, 185, 255, .10);
  --orbit-blur: 7px;
  --orbit-reach: -2px;
  --orbit-speed: 7s;
  --orbit-opacity: .9;

  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Pathworth Blue — the toolbox accent from the free-tools master plan. */
  --accent: #00B9FF;
}

/* Dark is the surroundings only. The sheet stays paper, because black ink has
   to stay visible while drawing and the download must be black either way. */
[data-theme="dark"] {
  /* Authority black, not navy. The blue cast was tinting every neutral on the
     page and flattening the contrast of the typed font samples. */
  --page: #06070A;
  --page-deep: #030405;
  --page-text: #F2F0EA;
  --page-muted: #BFBAAF;
  --page-muted-soft: #8E8880;
  --page-line: #262A31;
  --page-btn: rgba(255, 255, 255, .04);
  /* Barely a lift, not a wash. At .55 white this smeared grey across the top
     of a dark page and buried the subtitle under it. */
  --page-wash: rgba(120, 150, 190, .07);
  /* Neon, and moving quickly enough to read as a light rather than a border. */
  --orbit: rgba(0, 200, 255, 1);
  --orbit-soft: rgba(0, 185, 255, .30);
  --orbit-blur: 13px;
  --orbit-reach: -4px;
  --orbit-speed: 4.2s;
  --orbit-opacity: 1;
  /* The bright white he liked, in the one place it can actually read. */
  --glow: 0 0 1px rgba(255, 255, 255, .5), 0 0 12px rgba(255, 255, 255, .25),
          0 0 30px rgba(0, 185, 255, .25);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--page-text);
  font-family: var(--font-body);
  transition: background-color .4s var(--ease), color .4s var(--ease);
  -webkit-font-smoothing: antialiased;
}

/* Paper: a barely-there warmth toward the edges, plus fine grain. */
body {
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background-image:
    radial-gradient(120% 90% at 50% 0%, var(--page-wash) 0%, transparent 55%),
    radial-gradient(100% 80% at 50% 100%, var(--page-deep) 0%, transparent 60%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

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

/* ---------- Theme switch ---------- */

/* Tucked in the corner. It is a preference, not a feature, so it should be
   findable and otherwise silent. */
.theme {
  position: fixed;
  top: clamp(.6rem, 1.6vh, 1rem);
  right: clamp(.6rem, 1.6vw, 1.1rem);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 40px; height: 40px;
  padding: 0 .6rem 0 .55rem;
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.theme:hover { border-color: var(--page-line); }

/* Names the thing it switches TO, so it reads as an offer rather than a
   status. Quiet until noticed. */
.theme-label {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--page-muted-soft);
  opacity: .8;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}

.theme:hover .theme-label { color: var(--page-text); opacity: 1; }

/* A disc that a crescent bites into for dark. One element, no icon files. */
.theme-icon {
  position: relative;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--page-muted);
  overflow: hidden;
  transition: border-color .25s var(--ease);
}

.theme-icon::after {
  content: '';
  position: absolute;
  top: -30%; right: -45%;
  width: 100%; height: 160%;
  border-radius: 50%;
  background: var(--page);
  box-shadow: -2px 0 0 0 var(--page-muted);
  transform: translateX(120%);
  transition: transform .4s var(--ease), background .4s var(--ease);
}

[data-theme="dark"] .theme-icon::after { transform: none; }
.theme:hover .theme-icon { border-color: var(--page-text); }

/* ---------- Masthead ---------- */

.masthead {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(1rem, 3.2vh, 2rem) 1.5rem .35rem;
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.8vw, 2.3rem);
  letter-spacing: -0.02em;
  text-shadow: var(--glow);
}

.promise {
  margin: .4rem 0 0;
  color: var(--page-muted);
  font-size: clamp(.95rem, 2.3vw, 1.08rem);
}

/* ---------- Modes ---------- */

main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem) .75rem;
}

.modes {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin: clamp(.7rem, 2vh, 1.15rem) 0 clamp(.5rem, 1.2vh, .8rem);
}

.mode {
  appearance: none;
  background: none;
  border: 0;
  padding: .35rem 0;
  font-family: var(--font-body);
  font-size: .84rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--page-muted-soft);
  cursor: pointer;
  position: relative;
  transition: color .25s var(--ease);
}

.mode::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--page-text);
  transform: scaleX(0);
  transition: transform .3s var(--ease);
}

.mode:hover { color: var(--page-muted); }
.mode.is-active { color: var(--page-text); }
.mode.is-active::after { transform: scaleX(1); }

.panel { display: none; }

/* The active panel and its field grow into whatever height is left over, so
   there is never a dead gap between the box and the footer, and the signing
   line lands low on the page instead of floating near the top. */
.panel.is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---------- Help ---------- */

/* A native details element: no script, no library, and nothing rendered until
   it is opened, so it costs the page nothing on the way in. */
.help {
  align-self: center;
  max-width: 46rem;
  margin: 0 0 clamp(.45rem, 1.2vh, .7rem);
}

.help summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .1rem;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--page-muted-soft);
  cursor: pointer;
  transition: color .2s var(--ease);
}

.help summary::-webkit-details-marker { display: none; }

.help summary::before {
  content: '';
  width: 13px; height: 13px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: currentColor;
  mask: center / 3px 7px no-repeat
    linear-gradient(currentColor, currentColor);
  -webkit-mask: center / 3px 7px no-repeat
    linear-gradient(currentColor, currentColor);
}

.help summary:hover { color: var(--page-text); }
.help[open] summary { color: var(--page-text); }

.help-body {
  margin-top: .5rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--page-line);
  border-radius: 10px;
  text-align: left;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--page-muted);
}

.help-body p { margin: 0 0 .55rem; }
.help-body p:last-child { margin-bottom: 0; }
.help-body b { color: var(--page-text); font-weight: 600; }

/* Open, it needs room, and the sheet is what should give it up. */
.help[open] ~ .panel.is-active .halo { min-height: 0; }

@media (max-width: 720px) {
  .help-body { font-size: .8rem; padding: .75rem .9rem; }
}

/* ---------- The field ---------- */

/* A light that travels around the sheet. The field clips its own contents so
   the crop frame cannot push the layout wide, which means the glow cannot live
   inside it — the halo is the wrapper it orbits.
   Rotating a conic gradient needs a registered custom property; without
   @property the angle is not interpolatable and it simply sits still, which
   still looks correct. */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.halo {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: clamp(170px, 26vh, 260px);
  border-radius: 12px;
}

.halo::before {
  content: '';
  position: absolute;
  inset: var(--orbit-reach);
  border-radius: 15px;
  background: conic-gradient(from var(--angle),
    transparent 0deg,
    var(--orbit-soft) 40deg,
    var(--orbit) 85deg,
    var(--orbit) 110deg,
    var(--orbit-soft) 155deg,
    transparent 215deg,
    transparent 360deg);
  filter: blur(var(--orbit-blur));
  opacity: var(--orbit-opacity);
  animation: orbit var(--orbit-speed) linear infinite;
  pointer-events: none;
}

@keyframes orbit { to { --angle: 360deg; } }

/* Move mode stills the light, so the change of state is unmistakable. */
body.moving .halo::before { animation-play-state: paused; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .halo::before { animation: none; }
}


.field {
  position: absolute;
  inset: 0;
  width: 100%;
  /* The crop frame sits a margin outside the ink, so signing near an edge
     would otherwise push the frame past the field and scroll the page. */
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid rgba(0, 185, 255, .22);
}

/* Move mode makes the glow solid, so it is obvious the box is in a different
   state and the ink is now draggable. */
body.moving .field {
  border-color: rgba(0, 185, 255, .75);
  box-shadow: 0 0 0 1px rgba(0, 185, 255, .16), 0 0 30px rgba(0, 185, 255, .3);
}

#field, #typed-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

/* One hairline rule with an × at the left — a real signature line.
   Sits low in the box so there is no dead gap beneath it, and so the room
   above it (where signing actually happens) is as generous as possible. */
.rule {
  position: absolute;
  left: 1.25rem; right: 1.25rem;
  bottom: 20%;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
  transition: opacity .4s var(--ease);
}

.mark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rule);
  font-size: 1.1rem;
  line-height: 1;
}

.hint {
  position: absolute;
  left: 0; right: 0;
  bottom: 20%;
  transform: translateY(1.15rem);
  margin: 0;
  text-align: center;
  color: var(--muted-soft);
  font-size: .82rem;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

/* The crop frame that snaps around the ink after a stroke. */
.crop {
  position: absolute;
  border: 1px solid rgba(20, 22, 26, .22);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease), all .28s var(--ease);
}

body.has-ink .hint,
body.typing .hint { opacity: 0; }
body.has-ink .rule { opacity: .45; }
body.has-ink .crop { opacity: 1; }

.rotate-hint {
  display: none;
  margin: .75rem 0 0;
  text-align: center;
  color: var(--muted-soft);
  font-size: .8rem;
}

/* ---------- Typed mode ---------- */

.field--typed { cursor: default; }
.field--typed #typed-preview { cursor: default; }

.typed-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: .75rem;
}

#typed-name {
  width: min(420px, 100%);
  padding: .6rem .25rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--page-line);
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--page-text);
  text-align: center;
  outline: none;
  transition: border-color .25s var(--ease);
}

#typed-name:focus { border-bottom-color: var(--page-text); }
#typed-name::placeholder { color: var(--page-muted-soft); }

.fonts {
  display: flex;
  gap: .5rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .2rem .25rem .45rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--page-line) transparent;
}

.fonts::-webkit-scrollbar { height: 5px; }
.fonts::-webkit-scrollbar-thumb { background: var(--page-line); border-radius: 3px; }
.fonts::-webkit-scrollbar-track { background: transparent; }

.font-btn {
  appearance: none;
  flex: 0 0 auto;
  scroll-snap-align: center;
  max-width: 15rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: .3rem .7rem;
  font-size: 1.55rem;
  line-height: 1.5;
  color: var(--page-muted);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.font-btn:hover { color: var(--page-text); border-color: var(--page-line); }
.font-btn.is-active { color: var(--page-text); border-color: var(--page-text); }

/* ---------- Controls ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .7rem clamp(1rem, 2.6vw, 2rem);
  flex: 0 0 auto;
  margin-top: clamp(.85rem, 2.2vh, 1.4rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}

body.has-ink .controls,
body.typing .controls {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  max-width: 100%;
}

/* Sliders: a hairline track, a small solid ink dot. No chrome. */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 92px;
  height: 18px;
  background: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--page-line);
}
input[type="range"]::-moz-range-track {
  height: 1px;
  background: var(--page-line);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--page-text);
  transition: transform .2s var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--page-text);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); }

.swatches { display: flex; gap: .5rem; }

.swatch {
  position: relative;
  width: 18px; height: 18px;
  padding: 0;
  border: 1px solid rgba(20, 22, 26, .16);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

/* An invisible 44px hit area around the dot, so a thumb can actually land it
   without making the dot itself look clumsy. */
.swatch::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

.swatch:hover { transform: scale(1.15); }
.swatch.is-active { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--ink); }

.text-btn, .get {
  appearance: none;
  background: var(--page-btn);
  border: 1px solid var(--page-line);
  border-radius: 999px;
  padding: .45rem .95rem;
  font-family: var(--font-body);
  font-size: .88rem;
  letter-spacing: .02em;
  color: var(--page-text);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease), opacity .2s var(--ease);
}

.text-btn.is-active {
  background: var(--page-text);
  color: var(--page);
  border-color: var(--page-text);
}

body.moving #field { cursor: grab; }
body.grabbed #field { cursor: grabbing; }

.text-btn:hover, .get:hover {
  color: var(--page-text);
  border-color: var(--page-text);
}

/* Small caption above a control so it is obvious what it does. */
.label {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--page-muted-soft);
}

.helper {
  flex-basis: 100%;
  margin: .25rem auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}

.readout {
  min-width: 96px;
  font-size: .8rem;
  color: var(--page-muted);
  font-variant-numeric: tabular-nums;
}

.presets { display: flex; gap: .85rem; }

.preset {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .8rem;
  color: var(--page-muted);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.preset:hover { color: var(--page-text); border-color: var(--page-line); }
.preset.is-active { color: var(--page-text); border-color: var(--page-text); }

.group--get { gap: .75rem; }

.get--primary {
  padding: .62rem 1.5rem;
  border-radius: 999px;
  border-color: var(--page-text);
  background: var(--page-text);
  color: var(--page);
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.get--primary:hover {
  color: var(--page);
  background: var(--page-text);
  border-color: var(--page-text);
  transform: translateY(-1px);
}

.controls button:disabled,
.controls input:disabled {
  opacity: .42;
  pointer-events: none;
}

.note {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-size: .78rem;
  color: var(--page-muted-soft);
  min-height: 1.1em;
}

/* ---------- Colophon ---------- */

.colophon {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: .25rem 1.5rem clamp(.5rem, 1.2vh, .8rem);
}




.by {
  margin: .45rem 0 0;
  font-size: .78rem;
  color: var(--muted-soft);
}


/* ---------- Colophon ---------- */

/* Quiet type on the same paper as everything else. An earlier version put this
   on a dark card so a white mark could glow; it read as a slab bolted to the
   bottom of a restrained page, which is the opposite of the tool. */

.privacy, .by {
  margin: 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--page-muted-soft);
}

.by + .by { margin-top: .3rem; }
.privacy { margin-top: .3rem; }

/* The mark is the one line here allowed a little more presence, and only a
   little: darker than its neighbours, still small. */
.stamp {
  position: relative;
  display: inline-grid;
  padding: .3rem .2rem;
  min-height: 36px;
  align-content: center;
  text-decoration: none;
  line-height: 1.4;
}

.stamp-face {
  grid-area: 1 / 1;
  align-self: center;
  white-space: nowrap;
  font-size: .8rem;
  letter-spacing: .015em;
  color: var(--page-muted);
  text-shadow: var(--glow);
  opacity: 0;
  transition: opacity .6s var(--ease), color .25s var(--ease);
  pointer-events: none;
}

.stamp-face.is-on { opacity: 1; }
.stamp-sep { opacity: .5; margin: 0 .1em; }
.stamp:hover .stamp-face.is-on { color: var(--page-text); }

/* In dark mode the mark is the bright white, which is the one place it reads. */
[data-theme="dark"] .stamp-face { color: #FFFFFF; }

/* The font samples ARE the choice being made, so they read at full strength
   rather than as muted labels. */
[data-theme="dark"] .font-btn { color: #D8D4CA; }
[data-theme="dark"] .font-btn.is-active,
[data-theme="dark"] .font-btn:hover { color: #FFFFFF; }

/* Nothing should blink at someone who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
  .stamp { display: block; }
  .stamp-face { opacity: 1; white-space: normal; }
}

/* ---------- Responsive ---------- */

/* Thumb-sized targets. 44px is the accepted floor for touch. Applied by both
   pointer type and viewport width, because a phone matches one or the other
   and a touchscreen laptop matches only the first. */
@media (pointer: coarse), (max-width: 720px) {
  /* The mark is a link, so on a touch screen it needs a thumb-sized target
     like every other control. It stays visually small either way. */
  .stamp { min-height: 44px; padding: .5rem .3rem; }
  /* Help is a control, so it needs a thumb-sized target like the rest. */
  .help summary { min-height: 44px; padding: .55rem .3rem; }
  .mode { padding: .75rem .25rem; }
  .preset { padding: .75rem .95rem; }
  .text-btn, .get { padding: .72rem 1.1rem; }
  .get--primary { padding: .8rem 1.6rem; }
  .font-btn { padding: .6rem .5rem; font-size: 1.6rem; }
  .swatches { gap: .9rem; }
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -8px; }
  input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
}

@media (max-width: 720px) {
  .halo { min-height: clamp(150px, 22vh, 220px); }
    .stamp-face { font-size: .92rem; white-space: normal; }
  
    .colophon { padding-top: .25rem; padding-bottom: .5rem; }
  .controls { gap: .7rem 1.2rem; }
  .masthead { padding-top: 1rem; }
  .promise { font-size: .85rem; }
  .font-btn { font-size: 1.25rem; }
    /* The size row needs its own line on a phone: slider, readout and three
     presets together are wider than a 375px viewport. */
  .group--size { order: 3; flex-basis: 100%; }
  .group--get { order: 4; flex-basis: 100%; }
  input[type="range"] { width: 76px; }
  .readout { min-width: 0; }
}

@media (max-width: 640px) and (orientation: portrait) {
  .rotate-hint { display: block; }
}

/* Short laptop screens: Type mode carries an input and the font strip on top
   of everything Draw mode has, so it needs its own trim to stay on one screen. */
@media (min-width: 721px) and (max-height: 780px) {
  .masthead { padding-top: .75rem; }
  .promise { font-size: .88rem; }
  .halo { min-height: clamp(150px, 22vh, 220px); }
  .typed-input { margin-top: .5rem; gap: .6rem; }
  .fonts { padding-bottom: .3rem; }
  .font-btn { font-size: 1.25rem; padding: .2rem .6rem; }
  .controls { margin-top: .7rem; gap: .55rem 1.6rem; }
  .colophon { padding-top: .35rem; }
  }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* The maker's mark. Quiet by default, because it is a signature and not a
   call to action. It should be findable, not loud. Brightens on hover so
   somebody who wonders who made this can tell it is a door. */
.colophon .colophon .colophon .mbm:focus-visible { color: var(--ink); }