/*
  Dokpa Garment, wholesale lookbook study.
  Shared stylesheet for index.html, linesheet.html, capabilities.html, inquiry.html.

  Layout debt this file deliberately does NOT repeat from the static reference
  (see TECHNIQUE.md for the full account):
  - no global `* { color: antiquewhite }` reset
  - no fixed absolute-path body background image
  - no decorative star ratings or fake review blocks
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --paper: #f3f2ee;
  --paper-alt: #e8e6df;
  --paper-deep: #dedbd2;
  --ink: #14140f;
  --line: #14140f;
  --muted: #57544a;
  --signal: #b3401c;
  --signal-ink: #fbf7f0;
  --radius: 2px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-head: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
  --maxw: 1440px;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.35;
  min-width: 320px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* The external source citation prints a full Yandex Maps URL, which is a single
   unbreakable token about 318px wide. At 320px it pushed the whole document
   sideways. Scoped to links in body copy so nav and footer links are untouched. */
p a {
  overflow-wrap: anywhere;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}

h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
h3 { font-size: 1rem; letter-spacing: 0.04em; }
h4 { font-size: 0.85rem; letter-spacing: 0.03em; }

p {
  margin: 0 0 var(--space-3);
  max-width: 62ch;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- focus ---------- */

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
label:focus-within,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- skip link ---------- */

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-4);
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- shell ---------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ---------- design study notice ---------- */

.study-notice {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.study-notice .wrap {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
}

.study-notice strong {
  color: var(--signal-ink);
  background: var(--signal);
  padding: 0 var(--space-2);
}

/* ---------- header / nav ---------- */

.site-header {
  border-bottom: 2px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  gap: var(--space-4);
}

.wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.primary-nav {
  display: flex;
}

.primary-nav ul {
  display: flex;
  gap: var(--space-5);
}

.primary-nav a {
  text-decoration: none;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  border-bottom-color: var(--signal);
}

.primary-nav .inquiry-link {
  color: var(--signal-ink);
  background: var(--signal);
  padding: var(--space-2) var(--space-4);
  border-bottom: none !important;
}

@media (max-width: 720px) {
  /* The nav below is width 100% and order 3, so the header row has to be
     allowed to wrap. Without this it stays on one line and overflows at 320px. */
  .site-header .wrap {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .primary-nav {
    width: 100%;
    order: 3;
  }

  .primary-nav ul {
    flex-direction: column;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--line);
  }

  .primary-nav li {
    border-bottom: 1px solid var(--paper-deep);
  }

  .primary-nav a {
    display: block;
    padding: var(--space-3) 0;
  }

  .js .primary-nav {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  .js .primary-nav.is-open {
    max-height: 40rem;
    visibility: visible;
  }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 2px solid var(--line);
  margin-top: var(--space-7);
  background: var(--paper-alt);
  font-size: 0.75rem;
}

.site-footer .wrap {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.site-footer h3 {
  font-size: 0.72rem;
  margin-bottom: var(--space-2);
}

.site-footer address {
  font-style: normal;
  color: var(--muted);
}

.site-footer li {
  margin-bottom: var(--space-1);
}

.site-footer a {
  text-decoration: underline;
}

.footer-note {
  border-top: 1px solid var(--paper-deep);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  color: var(--muted);
  font-size: 0.68rem;
}

/* ---------- hero / section rhythm ---------- */

.section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.section-tight {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.rule {
  border: none;
  border-top: 2px solid var(--line);
  margin: 0 0 var(--space-6);
}

.rule-thin {
  border: none;
  border-top: 1px solid var(--paper-deep);
}

.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 var(--space-2);
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: end;
}

.hero-copy p {
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-signal {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}

.btn-signal:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------- stat / fact rows ---------- */

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.fact-grid div {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-4);
}

.fact-grid dt {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.fact-grid dd {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1rem;
  text-transform: uppercase;
}

/* ---------- featured strip (home) ---------- */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.featured-grid figure {
  margin: 0;
  background: var(--paper);
}

.featured-grid .thumb {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-alt);
}

.featured-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-grid figcaption {
  padding: var(--space-2) var(--space-3);
  font-size: 0.68rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.featured-grid figcaption .code {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 900px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- line sheet layout ---------- */

.ls-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 860px) {
  .ls-layout {
    grid-template-columns: 1fr;
  }
}

.ls-rail {
  border: 1px solid var(--line);
  position: sticky;
  top: calc(3.5rem + 1px);
}

.ls-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
}

.ls-rail-head h2 {
  margin: 0;
  font-size: 0.85rem;
}

.ls-reset {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none;
  border: 1px solid var(--line);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}

.facet {
  border-bottom: 1px solid var(--line);
  padding: var(--space-3);
}

.facet:last-child {
  border-bottom: none;
}

.facet legend {
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 0 var(--space-2);
  width: 100%;
}

.facet-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: 0.75rem;
  cursor: pointer;
}

.facet-option input {
  width: 14px;
  height: 14px;
  accent-color: var(--signal);
  cursor: pointer;
}

.facet-option .count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.68rem;
}

.facet-option:has(input:checked) {
  color: var(--signal);
  font-weight: 600;
}

@media (max-width: 860px) {
  .ls-rail {
    position: static;
  }
}

/* ---------- results toolbar ---------- */

.ls-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--line);
  border-bottom: none;
  padding: var(--space-3);
  background: var(--paper-alt);
}

.ls-count {
  font-size: 0.75rem;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
}

.view-toggle button {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--paper);
  border: none;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-left: 1px solid var(--line);
}

.view-toggle button:first-child {
  border-left: none;
}

.view-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- item grid / list ---------- */

.ls-items {
  border: 1px solid var(--line);
  border-top: none;
}

.ls-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}

@media (min-width: 1200px) {
  .ls-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 900px) {
  .ls-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .ls-grid { grid-template-columns: repeat(2, 1fr); }
}

.ls-item {
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.ls-item[hidden] {
  display: none;
}

.ls-thumb {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-alt);
}

.ls-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ls-thumb.ls-thumb-pair {
  display: flex;
}

.ls-thumb.ls-thumb-pair img {
  width: 50%;
}

.ls-item:hover .ls-thumb img {
  transform: scale(1.03);
}

.ls-meta {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-top: 1px solid var(--line);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ls-code {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.ls-desc {
  font-size: 0.68rem;
  color: var(--muted);
  margin: 0;
  max-width: none;
}

.ls-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-1);
}

.ls-tags span {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  padding: 0 var(--space-1);
  color: var(--muted);
}

/* list view */

.ls-items[data-view="list"] .ls-grid {
  grid-template-columns: 1fr;
}

.ls-items[data-view="list"] .ls-item {
  flex-direction: row;
  border-bottom: 1px solid var(--line);
}

.ls-items[data-view="list"] .ls-item:last-child {
  border-bottom: none;
}

.ls-items[data-view="list"] .ls-thumb {
  width: 88px;
  aspect-ratio: 3 / 4;
  flex-shrink: 0;
}

.ls-items[data-view="list"] .ls-meta {
  border-top: none;
  border-left: 1px solid var(--line);
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.ls-items[data-view="list"] .ls-desc {
  flex: 1;
}

.ls-items[data-view="list"] .ls-tags {
  margin-top: 0;
  padding-top: 0;
}

/* ---------- spec table ---------- */

/* The source register and the location table carry three and four columns of
   real values. At 320px they cannot compress below about 550px without becoming
   unreadable, so they scroll sideways inside this container rather than pushing
   the whole document wide. The container is focusable and labelled so a keyboard
   user can reach and scroll it, which a plain overflow:auto div does not allow. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.table-scroll .spec-table {
  min-width: 34rem;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.spec-table td {
  overflow-wrap: anywhere;
}

.spec-table caption {
  text-align: left;
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.spec-table th,
.spec-table td {
  border: 1px solid var(--line);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}

.spec-table th {
  background: var(--paper-alt);
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  width: 30%;
}

.not-published {
  color: var(--muted);
  font-style: italic;
}

/* ---------- capabilities visual blocks ---------- */

.visible-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.visible-grid figure {
  margin: 0;
  background: var(--paper);
}

.visible-grid .thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.visible-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visible-grid figcaption {
  padding: var(--space-2) var(--space-3);
  font-size: 0.68rem;
  color: var(--muted);
}

@media (max-width: 700px) {
  .visible-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- inquiry form ---------- */

.inquiry-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 900px) {
  .inquiry-layout { grid-template-columns: 1fr; }
}

.form-block {
  border: 1px solid var(--line);
  padding: var(--space-5);
}

.field {
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.field textarea {
  resize: vertical;
  min-height: 7rem;
}

.field-note {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: var(--space-1);
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.checkbox-field input {
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  accent-color: var(--signal);
}

.mail-notice {
  border: 1px dashed var(--line);
  padding: var(--space-3);
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.contact-block {
  border: 1px solid var(--line);
  padding: var(--space-5);
}

.contact-list dt {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: var(--space-4);
}

.contact-list dt:first-child {
  margin-top: 0;
}

.contact-list dd {
  margin: var(--space-1) 0 0;
  font-size: 0.9rem;
}

.contact-list a {
  text-decoration: underline;
}

/* ---------- reveal (fail safe motion) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ls-thumb img {
    transition: none;
  }

  .ls-item:hover .ls-thumb img {
    transform: none;
  }
}

/* ---------- misc ---------- */

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

.lede {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 62ch;
}

.page-head {
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--line);
  margin-bottom: var(--space-6);
}