/* Design: Lagunita shown the way a type foundry shows a face (huge live
   type, a tester, its drawings), in the site's own paper, ink, type and
   left edge. */

.sheet--design {
  --dg-face: "Lagunita", "Iowan Old Style", Georgia, serif;
  --dw-pt: #a01e28;
  --dg-big: clamp(3rem, 10.5vw, 9.75rem);
}

.sheet--design .sheet__page {
  max-width: 80rem;
}

.dg {
  padding-top: clamp(2.5rem, 7vw, 5.5rem);
  overflow-wrap: break-word;
}

/* the big type: Lagunita at its own x-height, optical size held where
   asked (WebKit only listens with optimizeLegibility off) */
.dg-spec,
.dg-name--big,
.dg-sample {
  font-family: var(--dg-face);
  font-size-adjust: none;
  font-variant-numeric: normal;
  text-rendering: auto;
  font-kerning: normal;
  font-weight: 400;
  color: var(--color-fg);
}

.dg-label {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- Lagunita: its two cuts, then what it is ---------- */

.dg-hero {
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.dg-hero__lines {
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

.dg-spec {
  display: block;
  font-size: var(--dg-big);
  line-height: 1.14;
  letter-spacing: -0.01em;
  font-optical-sizing: none;
  font-variation-settings: "opsz" var(--o);
  padding-bottom: 0.04em;
}

.dg-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
}

.dg-name--big {
  font-size: var(--dg-big);
  line-height: 1.12;
  letter-spacing: -0.01em;
  padding-bottom: 0.04em;
}

.dg-line {
  max-width: 36rem;
  margin: 0.5rem 0 0;
  color: var(--color-muted);
}

.dg-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.75rem 0 0;
}

/* ---------- Try it ---------- */

.dg-tester {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.dg-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  color: var(--color-quiet);
  font-size: 0.9375rem;
}

.dg-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.dg-words { gap: 0.85rem; }

.dg-words button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-quiet);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.dg-words button:hover { color: var(--color-muted); }
.dg-words button[aria-pressed="true"] { color: var(--color-fg); }

.dg-range {
  -webkit-appearance: none;
  appearance: none;
  width: 7.5rem;
  height: 1.4rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.dg-range::-webkit-slider-runnable-track { height: 1px; background: var(--color-quiet); }
.dg-range::-moz-range-track { height: 1px; background: var(--color-quiet); }
.dg-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: calc(-0.475rem + 0.5px);
  border: 0;
  border-radius: 50%;
  background: var(--color-fg);
}
.dg-range::-moz-range-thumb {
  width: 0.95rem;
  height: 0.95rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-fg);
}

.dg-words button:focus-visible,
.dg-range:focus-visible,
.dg-sample:focus-visible {
  outline: 1.5px solid var(--color-fg);
  outline-offset: 3px;
  border-radius: 3px;
}

.dg-sample {
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
  font-size: 132px;
  line-height: 1.12;
  padding-bottom: 0.1em;
  outline: none;
  cursor: text;
  overflow-wrap: anywhere;
  caret-color: var(--color-fg);
  transition: color 0.6s ease, caret-color 0.6s ease;
}

/* type "stanford": the wordmark's cardinal */
.dg-sample.is-cardinal { color: #8c1515; caret-color: #8c1515; }
@media (prefers-reduced-motion: reduce) { .dg-sample { transition: none; } }

.dg-hint {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--color-quiet);
}

/* ---------- Drawings: outlines, points and handles ---------- */

.dg-draw {
  margin-top: clamp(6rem, 13vw, 11rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 1.5rem;
}

.dg-sub {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
}

.dg-draw__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.dw-fig { margin: 0; min-width: 0; }
.dw-fig--wide { grid-column: 1 / -1; }

.dw {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dw-fill {
  fill: color-mix(in srgb, var(--color-fg) 9%, transparent);
  stroke: var(--color-fg);
  stroke-width: 1.1px;
  vector-effect: non-scaling-stroke;
}
.dw-guide { fill: none; stroke: var(--color-border); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.dw-lab { fill: var(--color-quiet); font-family: var(--font-sans); }
.dw-h { fill: none; stroke: var(--dw-pt); stroke-width: 0.8px; vector-effect: non-scaling-stroke; opacity: 0.8; }
.dw-on { fill: var(--dw-pt); }
.dw-off circle { fill: var(--color-bg); stroke: var(--dw-pt); stroke-width: 0.9px; vector-effect: non-scaling-stroke; }
.dw-ol { fill: none; stroke: var(--color-fg); stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.dw-ol--0 { stroke: var(--color-quiet); }
.dw-ol--2 { stroke: var(--dw-pt); }

/* the annotation layer: metric values, measurements and axes, set in the
   face itself with lining tabular figures, each label knocked out of
   whatever it crosses so it reads cleanly */
.sheet--design { --dw-dim: #3f6a96; }
.dw text {
  font-family: var(--font-sans);
  font-size: calc(var(--fs) * 1px);
  font-variant-numeric: lining-nums tabular-nums;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 10;
  paint-order: stroke;
  stroke: var(--color-bg);
  stroke-width: calc(var(--fs) * 0.32px);
  stroke-linejoin: round;
}
.dw .dw-sm { font-size: calc(var(--fs) * 0.88px); }
.dw-num { fill: var(--dw-dim); }
.dw-cell { fill: none; stroke: var(--color-border); stroke-width: 1px; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.dw-band { fill: color-mix(in srgb, var(--dw-dim) 11%, transparent); stroke: none; }
.dw-dim { fill: none; stroke: var(--dw-dim); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.dw-ext { fill: none; stroke: var(--dw-dim); stroke-width: 0.7px; stroke-dasharray: 1 2.5; opacity: 0.75; vector-effect: non-scaling-stroke; }
.dw-axis { fill: none; stroke: var(--dw-dim); stroke-width: 1px; stroke-dasharray: 7 3 1.5 3; vector-effect: non-scaling-stroke; }
.dw-cut { fill: none; stroke: var(--dw-pt); stroke-width: 1px; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }

/* the key above the drawings */
.dw-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-quiet);
}
.dw-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.dw-key svg { width: 0.75rem; height: 0.75rem; overflow: visible; }
.dw-key svg[viewBox="0 0 16 10"] { width: 1.2rem; }
.dw-key-off { fill: var(--color-bg); stroke: var(--dw-pt); stroke-width: 1px; }
.dw-key-dim { fill: none; stroke: var(--dw-dim); stroke-width: 1px; }

.dw-fig figcaption {
  margin: 0.85rem 0 0;
  max-width: 36rem;
  font-size: 0.875rem;
  color: var(--color-quiet);
}
.dw-no {
  display: inline-block;
  min-width: 1.4em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--dw-dim);
}

/* on phones the drawings keep their full detail and scroll sideways
   inside their own frame, rather than shrinking the labels away */
@media (max-width: 40rem) {
  .dw-fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dw-fig .dw { min-width: 34rem; }
  .dw-fig--wide .dw { min-width: 46rem; }
  .dw-fig figcaption { position: sticky; left: 0; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sheet--design { --dw-pt: #e7838a; }
}
:root[data-theme="dark"] .sheet--design { --dw-pt: #e7838a; }

/* ---------- About ---------- */

.dg-about {
  margin-top: clamp(6rem, 13vw, 11rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.dg-about__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  max-width: 56rem;
  margin-top: 1.25rem;
}
.dg-about__cols p { margin: 0 0 1em; }

/* ---------- Phones ---------- */

@media (max-width: 40rem) {
  .dg-controls { gap: 0.6rem 1.5rem; }
  .dg-range { width: 6.5rem; }
  .dg-about__cols { grid-template-columns: 1fr; }
  .dg-draw__grid { grid-template-columns: 1fr; }
}