@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root {
  --font-name: sans-serif;
  --bg2: #161513;
  --ink: inherit;
  --ink-dim: #E5E0E0;
  --gray: #999999;
  /* Subtle -- matches the pill background (#EBE5E5) at low opacity rather
     than a hard-contrast line. */
  --rule: rgba(235, 229, 229, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* iOS Safari has a well-known bug where 100vw (used by .tabs' full-bleed
     breakout below) is sized off the viewport WITHOUT the address bar --
     wider than the actual visible layout width -- creating a real,
     scrollable horizontal overflow on-device that Chrome/desktop testing
     never shows. Once that overflow exists, anything else that's correctly
     centered relative to the full document (e.g. the Custom-tab text) can
     render visually shifted within the on-screen viewport, since the page
     loads scrolled to the left edge of that wider-than-visible document.
     Clipping it here, at the true outermost box, is safe -- unlike the
     earlier .grain overflow-x bug (see .grain below), this box's width is
     ALWAYS the real viewport by definition, so it can't clip the bleed at
     the wrong edge the way a nested/offset ancestor did. */
  overflow-x: hidden;
}

body {
  color: var(--ink);
}

.grain {
  position: relative;
  /* NOTE: no overflow-x:hidden here -- .tabs below intentionally bleeds to
     100vw, and clipping overflow at this wrapper (which Squarespace nests
     inside its own narrower, offset "fluid-engine" column) cuts the bleed
     off at THIS box's edges instead of the true viewport edge, silently
     defeating the whole effect. The calc(-50vw + 50%) math is exact, so it
     doesn't introduce a stray scrollbar in practice -- verified against a
     live page (body.scrollWidth === documentElement.clientWidth). */
}

.wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 56px 32px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  /* Breaks the row out of .wrap's max-width/padding so the flanking rules
     can reach the true viewport edges. calc(-50vw + 50%) is the standard
     full-bleed-inside-a-centered-container trick -- works regardless of
     .wrap's own width/padding as long as its ancestors stay centered. */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.tabs.single-font {
  justify-content: center;
}

/* Flanks the select + tab-group on either side. flex: 1 (rather than a
   fixed width) means the two rules always eat exactly the leftover space
   in the row, keeping the select/tab-group cluster perfectly centered no
   matter the container width -- doesn't rely on justify-content at all. */
.tabs-rule {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: var(--rule);
  align-self: center;
}

/* Applied via JS whenever the select and tab-group no longer fit on one
   line -- catches every width where wrapping happens, not just the fixed
   mobile breakpoint below. Restores .wrap's horizontal inset (lost when
   .tabs went full-bleed above) since the rules are hidden here anyway and
   the select/tab-group need to stay clear of the true screen edges. */
.tabs.stacked {
  flex-direction: column;
  align-items: stretch;
  padding: 0 56px;
  box-sizing: border-box;
}

.tabs.stacked .tabs-rule {
  display: none;
}

.tabs.stacked .font-select {
  width: 100%;
}

.tabs.stacked .tab-group {
  width: 100%;
  gap: 6px;
}

.tabs.stacked .tab-group .tab {
  flex: 1;
  text-align: center;
}

.tab-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab {
  background: none;
  border: none;
  color: var(--gray);
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.tab:hover {
  color: #0E1009;
}

.tab.active {
  background: #EBE5E5;
  color: #0E1009;
}

/* Matches trvco.studio's "P3" body-copy style (small paragraph /
   sqsrte-small: 16px, 400, normal letter-spacing, 1.8 line-height). Their
   P3 face, freight-text-pro, is served through a domain-locked Adobe Fonts
   kit and can't be embedded here, so this substitutes a system serif with
   the same proportions. Apply this class wherever site-matched body copy
   is needed -- it's the single source other elements inherit from. */
.default-p3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  line-height: 1.8;
}

.font-select {
  -webkit-appearance: none;
  appearance: none;
  background: #EBE5E5;
  color: #0E1009;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%230E1009'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 9px 6px;
}

.font-select:focus {
  outline: none;
}

@media (max-width: 600px) {
  .wrap {
    padding: 24px 20px 24px;
  }

  .tabs.stacked {
    padding: 0 20px;
  }

  .tabs {
    gap: 10px;
  }

  .tab-group {
    gap: 6px;
  }

  .tab {
    padding: 10px 18px;
  }

  .font-select {
    padding-right: 34px;
    background-position: right 12px center;
  }
}

@media (max-width: 380px) {
  .tab {
    padding: 9px 14px;
  }

  .font-select {
    padding-right: 30px;
    background-position: right 10px center;
  }
}

.panel {
  display: none;
  min-height: 300px;
  padding: 64px 0 24px;
}

.panel.active {
  display: block;
}

.footer-cap {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--gray);
  margin-top: 24px;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #0E1009;
  margin: 28px 0 0;
}

.field-label {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 0.08em;
}

.field-row input, .field-row textarea {
  background: var(--bg2);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 13px;
  letter-spacing: 0.03em;
  flex: 1;
  border-radius: 2px;
}

.field-row textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.4;
}

.field-row input:focus, .field-row textarea:focus {
  outline: none;
  border-color: var(--ink-dim);
}

.field-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: #E5E0E0;
  border: none;
  padding: 0;
}

.field-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  cursor: pointer;
}

.field-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  border: none;
  cursor: pointer;
}

.glyph-row {
  font-family: var(--font-name), serif;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 0.95;
  margin-bottom: 2px;
}

/* The uppercase/lowercase rows are hardcoded splits -- A-M / N-Z on desktop,
   A-I / J-Q / R-Z on mobile (see GLYPH_SPLIT_DESKTOP/GLYPH_SPLIT_MOBILE and
   applyGlyphSplit() in specimen.js) -- rather than one wrapping string. That
   guarantees the same line shape on every font, instead of the wrap point
   drifting with each font's own letter widths. Each row is sized to always
   fit on its own single line, so no wrapping is needed here. The upper3/
   lower3 rows only render content on mobile; they're empty and hidden via
   inline style otherwise. */
#gs-row-upper1, #gs-row-upper2, #gs-row-upper3,
#gs-row-lower1, #gs-row-lower2, #gs-row-lower3 {
  white-space: nowrap;
}

/* Gap between the letterform rows and the numbers row. Fixed here (rather
   than conditionally targeting whichever row is visually last) because the
   lowercase rows' visibility is toggled live via JS (display: none), not
   baked in at build time -- see detectHasLowercase in specimen.js. */
#gs-row3 {
  margin-top: 20px;
}

.ramp-row {
  padding: 10px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.ramp-word {
  font-family: var(--font-name), serif;
  white-space: nowrap;
  line-height: 1;
  overflow: hidden;
}

.ramp-label {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.poster-lines {
  font-family: var(--font-name), serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 240px;
  line-height: 0.85;
  text-align: center;
  outline: none;
  cursor: text;
}

.poster-lines:empty:before {
  content: "Try out your own text";
  color: var(--ink-dim);
}

[contenteditable="true"] {
  outline: none;
  cursor: text;
}