/* Ghost Foundry: layout only.
   Type, colour and components come from vendor/swiss-poster: use its classes
   in the markup. scripts/check-design.mjs fails the build if this file sets
   type, colour or decoration directly. */

@import url("/vendor/swiss-poster/css/swiss-poster.css");

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip { position: absolute; left: var(--swiss-gutter); top: 0; z-index: 10; transform: translateY(-120%); }
.skip:focus { transform: none; }

/* ---------- header ---------- */
.site {
  padding: var(--swiss-gap) var(--swiss-gutter);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem var(--swiss-gap);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--swiss-space-2xs);
  font-size: var(--swiss-type-brand);
  text-decoration: none;
}
.brand-mark { display: block; width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.brand-mark-sm { width: 1.75rem; height: 1.75rem; }
.brand-mark-lg { width: 7rem; height: 7rem; }
.brand-word { font-size: var(--swiss-type-brand); }
.brand:hover { color: var(--swiss-accent); }
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.35rem var(--swiss-gap); }
.site-nav a { color: var(--swiss-text); text-decoration: none; }
.site-nav a:hover { color: var(--swiss-accent); }
.site-nav a[aria-current="page"] {
  color: var(--swiss-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ---------- 12-column sections ---------- */
.hero,
.page-head,
.poster-head,
.poster-main,
.block,
.legal,
.site-foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--swiss-gap);
}

.hero,
.page-head,
.poster-head {
  padding: var(--swiss-pad) var(--swiss-gutter) calc(var(--swiss-pad) * 2);
  row-gap: var(--swiss-gap);
}
.poster-head { padding-bottom: 0; }
.hero > h1,
.page-head > h1,
.poster-head > h1 {
  grid-column: 1 / -1;
  padding-bottom: var(--swiss-pad);
  margin-bottom: 0.5rem;
  border-bottom: 2px solid var(--swiss-rule);
}
.poster-artist {
  padding-top: calc(var(--swiss-pad) * 1.25);
  border-top: 0;
}
.head-lede { grid-column: 1 / span 8; max-width: 54ch; }
.cta-row { grid-column: 1 / span 8; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.block {
  padding: calc(var(--swiss-pad) * 2) var(--swiss-gutter);
  border-top: 2px solid var(--swiss-rule);
  row-gap: var(--swiss-gap);
  align-items: start;
}
.block-flush { padding-top: 0; border-top: 0; }
.block-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--swiss-space-s);
  margin-bottom: var(--swiss-pad);
}
.block-head > h2 { grid-column: 1 / span 7; }
.block-head > p,
.era-about { grid-column: 1 / span 8; max-width: 62ch; }
.era-about { display: flex; flex-direction: column; gap: 0.85rem; }
.block-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}
.block-actions .rows { width: 100%; }

/* Side-head layout: title in the left columns, reading text on the right. */
.side > h2,
.side > .side-id { grid-column: 1 / span 4; }
.side > .side-body { grid-column: 5 / span 7; }
.prose { display: flex; flex-direction: column; gap: 1rem; max-width: 68ch; }

/* ---------- lists ---------- */
.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--swiss-rule); }
.rows > li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--swiss-gap);
  row-gap: 0.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--swiss-hair);
}
.side-body .rows { margin-top: var(--swiss-gap); }

.index-list { list-style: none; margin: 0.6rem 0 0; padding: 0; border-top: 2px solid var(--swiss-rule); }
.index-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--swiss-hair);
}

.steps {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--swiss-gap);
}
.steps li { display: flex; flex-direction: column; gap: 1rem; }
.steps p { max-width: 34ch; }

/* ---------- poster wall ---------- */
.wall {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--swiss-pad) * 1.5) var(--swiss-gap);
}
.wall-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.wall-card:hover .type-subhead,
.wall-card:focus-visible .type-subhead { color: var(--swiss-accent); }
.wall-image {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 2px solid var(--swiss-rule);
  padding-bottom: 0.75rem;
}
.wall-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
}
.wall-card > .type-subhead {
  margin: 0;
  padding-top: 0;
}

/* ---------- filters: system buttons inside system expand rows ---------- */
.button-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filters { row-gap: var(--swiss-gap); }
.filter-sort { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.filter-groups,
.filter-active { grid-column: 5 / -1; }
.filter-groups { border-top: 1px solid var(--swiss-hair); }
.filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem var(--swiss-gap); }
.empty { grid-column: 1 / -1; }

/* ---------- poster page ---------- */
.crumbs {
  padding: 0 var(--swiss-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.poster-main {
  padding: 0 var(--swiss-gutter) calc(var(--swiss-pad) * 2);
  row-gap: var(--swiss-pad);
  align-items: start;
}
.poster-figure { grid-column: 1 / span 7; margin: 0; position: sticky; top: var(--swiss-pad); }
.poster-figure a { display: block; }
.poster-figure img { width: 100%; }
.poster-figure figcaption { margin-top: 0.75rem; }
.poster-aside { grid-column: 8 / -1; display: flex; flex-direction: column; gap: var(--swiss-pad); }
.is-landscape .poster-figure { grid-column: 1 / span 8; }
.is-landscape .poster-aside { grid-column: 9 / -1; }

.facts { display: grid; grid-template-columns: minmax(6rem, 30%) 1fr; margin: 0; border-top: 2px solid var(--swiss-rule); }
.facts dt,
.facts dd { margin: 0; padding: 0.7rem 0; border-bottom: 1px solid var(--swiss-hair); }
.facts dt { padding-top: 0.85rem; padding-right: 1rem; }

/* ---------- fonts and panels ---------- */
#fonts { scroll-margin-top: var(--swiss-pad); }
.fonts-tabs { grid-column: 1 / -1; }
.fonts-tabs .swiss-tabs-list { margin-bottom: var(--swiss-pad); }

.font-panel { display: flex; flex-direction: column; gap: var(--swiss-pad); }
.swiss-tabs:not(.is-tabbed) .font-panel + .font-panel {
  margin-top: calc(var(--swiss-pad) * 2);
  padding-top: calc(var(--swiss-pad) * 2);
  border-top: 2px solid var(--swiss-rule);
}

.panel-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--swiss-gap);
  row-gap: var(--swiss-space-s);
  align-items: start;
}
.panel-row + .panel-row { padding-top: var(--swiss-gap); border-top: 1px solid var(--swiss-hair); }
.panel-label { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--swiss-space-2xs); }
.panel-body { grid-column: 5 / -1; display: flex; flex-direction: column; gap: var(--swiss-space-xs); min-width: 0; }
.panel-body > figure { margin: 0; }
.panel-body > figure img { width: 100%; }

.letter-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--swiss-gap);
  align-items: start;
}
.letter-detail { display: flex; flex-direction: column; gap: var(--swiss-space-2xs); }
.letter-detail-figure {
  margin: 0;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--swiss-space-l);
  background: var(--swiss-surface);
  border: 1px solid var(--swiss-hair);
}
.letter-detail-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.letter-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--swiss-space-2xs);
}
.letter-thumb {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--swiss-space-3xs);
  width: 100%;
  margin: 0;
  padding: var(--swiss-space-3xs);
  color: inherit;
  background: var(--swiss-bg);
  border: 1px solid var(--swiss-hair);
  border-radius: 0;
  cursor: pointer;
}
.letter-thumb-frame {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--swiss-space-3xs);
  background: var(--swiss-surface);
  overflow: hidden;
}
.letter-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.letter-thumb:hover,
.letter-thumb:focus-visible,
.letter-thumb.is-active {
  border-color: var(--swiss-ink);
}
.letter-thumb:focus-visible {
  outline: 2px solid var(--swiss-accent);
  outline-offset: 2px;
}
.letter-thumb.is-missing {
  cursor: default;
  color: var(--swiss-muted);
}
.letter-thumb.is-missing .letter-thumb-frame {
  background: var(--swiss-bg);
  border: 1px dashed var(--swiss-hair);
}
.letter-detail-figure.is-missing {
  background: var(--swiss-bg);
}
.typeface-body {
  display: flex;
  flex-direction: column;
  gap: var(--swiss-gap);
}
.typeface-case {
  margin: 0;
}
.typeface-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--swiss-gap);
  align-items: start;
}
.typeface-preview {
  display: flex;
  flex-direction: column;
  gap: var(--swiss-space-2xs);
}
.typeface-preview-frame {
  margin: 0;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--swiss-space-l);
  background: var(--swiss-surface);
  border: 1px solid var(--swiss-hair);
}
.typeface-preview-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.typeface-preview-glyph {
  fill: var(--swiss-ink);
}
.typeface-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--swiss-space-2xs);
}
.typeface-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--swiss-space-3xs);
  width: 100%;
  margin: 0;
  padding: var(--swiss-space-3xs);
  color: inherit;
  background: var(--swiss-bg);
  border: 1px solid var(--swiss-hair);
  border-radius: 0;
  cursor: pointer;
}
.typeface-glyph {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--swiss-space-3xs);
  background: var(--swiss-surface);
  overflow: hidden;
  color: var(--swiss-ink);
}
.typeface-cell:hover,
.typeface-cell:focus-visible,
.typeface-cell.is-active {
  border-color: var(--swiss-ink);
}
.typeface-cell:focus-visible {
  outline: 2px solid var(--swiss-accent);
  outline-offset: 2px;
}
.typeface-cell.is-missing {
  cursor: default;
  color: var(--swiss-muted);
}
.typeface-cell.is-missing .typeface-glyph {
  background: var(--swiss-bg);
  border: 1px dashed var(--swiss-hair);
}

.download-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem var(--swiss-gap); }
.download-row p { max-width: 44ch; }

/* Type specimen page: alphabet + type scale in the working face */
.specimen-alphabet {
  display: flex;
  flex-direction: column;
  gap: var(--swiss-space-m);
  overflow-wrap: anywhere;
}
.specimen-scales {
  display: flex;
  flex-direction: column;
  gap: var(--swiss-space-xl);
}
.specimen-scale-case {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.specimen-scale-case .type-subhead,
.specimen-scale-case > .type-meta {
  margin: 0 0 var(--swiss-space-s);
}
.specimen-scale {
  padding: var(--swiss-space-l) 0;
  border-top: 1px solid var(--swiss-hair);
  display: flex;
  flex-direction: column;
  gap: var(--swiss-space-xs);
  overflow-wrap: anywhere;
}
.specimen-scale-case .specimen-scale:first-of-type { border-top: 2px solid var(--swiss-rule); }
.specimen-scale .type-meta { margin: 0; }

.tester input {
  width: 100%;
  margin: 0.5rem 0 1rem;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--swiss-ink);
  background: var(--swiss-bg);
  border: 1px solid var(--swiss-ink);
  border-radius: 0;
}
.tester-preview { overflow-wrap: anywhere; }

/* ---------- pager ---------- */
.pager { padding: 0 var(--swiss-gutter); display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--swiss-rule); }
.pager a { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--swiss-pad) 0; color: inherit; text-decoration: none; }
.pager a:hover .type-subhead { color: var(--swiss-accent); }
.pager-next { align-items: flex-end; text-align: right; padding-left: var(--swiss-gap); border-left: 1px solid var(--swiss-hair); }

/* ---------- tables: swiss-table from the system; local layout only ---------- */
.swiss-table-scroll { grid-column: 1 / -1; }
.swiss-table img { height: 2.75rem; width: auto; max-width: 12rem; object-fit: cover; object-position: left center; vertical-align: middle; }
.side-body .swiss-table-scroll { margin-top: var(--swiss-gap); }

/* ---------- artists ---------- */
.side-id { display: flex; flex-direction: column; gap: var(--swiss-gap); }
.artist-work { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--swiss-gap); }
.artist-work a { display: flex; flex-direction: column; gap: 0.35rem; width: 11rem; color: inherit; text-decoration: none; }
.artist-work a:hover .type-body-strong { color: var(--swiss-accent); }
.artist-thumb { display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 0.4rem; }
.artist-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }

/* ---------- faq ---------- */
.faq-list { border-top: 1px solid var(--swiss-hair); }

/* ---------- legal pages ---------- */
.legal { padding: var(--swiss-pad) var(--swiss-gutter) calc(var(--swiss-pad) * 2); align-items: start; }
.legal > * { grid-column: 5 / span 7; }
.legal > h1 {
  grid-column: 1 / -1;
  padding-bottom: var(--swiss-pad);
  margin-bottom: var(--swiss-pad);
  border-bottom: 2px solid var(--swiss-rule);
}
.legal > h2 { grid-column: 1 / span 3; padding-top: 0.75rem; margin-top: 2.5rem; border-top: 2px solid var(--swiss-rule); }
.legal > h2 + p,
.legal > h2 + ul { margin-top: 2.5rem; padding-top: calc(0.75rem + 2px); }
.legal p,
.legal ul { margin: 0 0 1rem; max-width: 68ch; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.45rem; }

/* ---------- footer ---------- */
.site-foot {
  padding: calc(var(--swiss-pad) * 1.5) var(--swiss-gutter) var(--swiss-pad);
  border-top: 2px solid var(--swiss-rule);
  row-gap: var(--swiss-pad);
}
.foot-brand { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.foot-brand p { max-width: 30ch; }
.foot-cols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--swiss-gap); }
.foot-cols div { display: flex; flex-direction: column; gap: 0.45rem; }
.foot-cols a { color: var(--swiss-text); text-decoration: none; }
.foot-cols a:hover { color: var(--swiss-accent); }
.foot-base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem var(--swiss-gap);
  padding-top: var(--swiss-gap);
  border-top: 1px solid var(--swiss-hair);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .poster-figure,
  .is-landscape .poster-figure { grid-column: 1 / span 6; }
  .poster-aside,
  .is-landscape .poster-aside { grid-column: 7 / -1; }
}

@media (max-width: 900px) {
  .head-lede,
  .cta-row,
  .block-head > h2,
  .block-head > p,
  .era-about,
  .block-actions,
  .filter-sort,
  .filter-groups,
  .filter-active,
  .side > h2,
  .side > .side-id,
  .side > .side-body,
  .panel-label,
  .panel-body,
  .letter-viewer,
  .typeface-viewer,
  .poster-figure,
  .is-landscape .poster-figure,
  .poster-aside,
  .is-landscape .poster-aside,
  .foot-brand,
  .foot-cols,
  .legal > *,
  .legal > h2 { grid-column: 1 / -1; }
  .poster-figure { position: static; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; gap: calc(var(--swiss-pad) * 1.5); }
  .letter-viewer,
  .typeface-viewer { grid-template-columns: 1fr; }
  .legal > h2 + p,
  .legal > h2 + ul { margin-top: 0.75rem; padding-top: 0; }
}

@media (max-width: 600px) {
  .wall,
  .rows > li { grid-template-columns: 1fr; }
  .site-nav { margin-left: 0; width: 100%; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager { grid-template-columns: 1fr; }
  .pager-next { align-items: flex-start; text-align: left; padding-left: 0; border-left: 0; border-top: 1px solid var(--swiss-hair); }
  .cta-row .btn-primary,
  .cta-row .btn-ghost { width: 100%; }
}