/*
  Dokpa Garment, study 06, Night Signal.
  Shared stylesheet for index.html, signal-lookbook.html, shortlist.html, contact.html.

  Direction: near black ground, electric cobalt and acid green as two live accents,
  oversized condensed display type, modular rails with hard edges, sharply cropped
  photography. Nothing here flashes, strobes or moves on its own.

  Contrast notes, measured against the actual ground colours in this file:
  - --acid on --void is about 17:1, safe at any size.
  - --cobalt on --void is about 3.9:1, so it is used ONLY for large display type,
    rules, borders and filled blocks. Body sized accent text uses --cobalt-lite,
    about 8.8:1 on --void.
  - --muted on --void is about 9:1 and on --panel about 8.3:1.
  - White on a --cobalt fill is about 5.1:1. Near black on an --acid fill is about 17:1.
*/

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

:root {
  --void: #06070a;
  --panel: #0d0f14;
  --panel-2: #12151c;
  --line: #262c3d;
  --line-soft: #1a1f2c;
  --text: #f4f6fa;
  --muted: #a9b2c3;
  --cobalt: #2b5cff;
  --cobalt-lite: #8fa8ff;
  --acid: #c8ff33;
  --acid-ink: #06070a;

  --font-display: 'Anton', 'Haettenschweiler', 'Franklin Gothic Bold', 'Impact', sans-serif;
  --font-body: 'Chivo', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --gut: clamp(1rem, 3.5vw, 3.25rem);
  --rail-max: 1600px;
  --read-max: 66ch;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.875rem;
  --s4: 1.25rem;
  --s5: 2rem;
  --s6: 3.25rem;
  --s7: 5rem;

  --dur: 280ms;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  background: var(--void);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

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

a {
  color: var(--cobalt-lite);
}

a:hover {
  color: var(--acid);
}

p {
  margin: 0 0 var(--s3);
  max-width: var(--read-max);
}

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

/* ---------- display type ---------- */

h1,
h2,
h3,
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: 0.005em;
  margin: 0 0 var(--s4);
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.6rem, 11vw, 7.5rem);
}

h2 {
  font-size: clamp(2rem, 7vw, 4.5rem);
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  line-height: 0.95;
}

h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--acid);
  margin: 0 0 var(--s2);
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--text);
  max-width: 54ch;
}

.small {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

.tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--line);
  color: var(--muted);
}

.tag-acid {
  background: var(--acid);
  color: var(--acid-ink);
  border-color: var(--acid);
}

.tag-cobalt {
  background: var(--cobalt);
  color: #ffffff;
  border-color: var(--cobalt);
}

.idx {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1;
  color: var(--acid);
  letter-spacing: 0.02em;
}

.idx-sm {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--acid);
  letter-spacing: 0.04em;
}

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

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  transform: translateY(-140%);
  background: var(--acid);
  color: var(--acid-ink);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  padding: var(--s2) var(--s4);
  text-decoration: none;
}

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

/* ---------- rails, the layout unit of this study ---------- */

.rail {
  width: 100%;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.rail-inner {
  max-width: var(--rail-max);
  margin: 0 auto;
}

.strip {
  border-top: 1px solid var(--line);
}

.strip-acid {
  border-top: 3px solid var(--acid);
}

.strip-cobalt {
  border-top: 3px solid var(--cobalt);
}

.block {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}

.block-tight {
  padding-top: var(--s5);
  padding-bottom: var(--s5);
}

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

.study-bar {
  background: var(--acid);
  color: var(--acid-ink);
}

.study-bar .rail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  padding: 0.55rem 0;
}

.study-bar strong {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
}

.study-bar span {
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 600;
}

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

.site-header {
  background: var(--void);
  border-bottom: 1px solid var(--line);
}

.header-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
}

.wordmark b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.wordmark span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acid);
}

.wordmark:hover b {
  color: var(--acid);
}

.nav-toggle,
.sl-trigger {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  cursor: pointer;
}

.nav-toggle:hover,
.sl-trigger:hover {
  border-color: var(--acid);
  color: var(--acid);
}

.sl-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-color: var(--cobalt);
}

.sl-count {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
  min-width: 1.6rem;
  padding: 0.18rem 0.3rem;
  text-align: center;
  background: var(--cobalt);
  color: #ffffff;
}

.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.primary-nav a {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line-soft);
  margin-left: -1px;
}

.primary-nav a i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--cobalt-lite);
}

.primary-nav a:hover {
  background: var(--panel-2);
  color: var(--acid);
}

.primary-nav a:hover i {
  color: var(--acid);
}

.primary-nav a[aria-current='page'] {
  background: var(--acid);
  color: var(--acid-ink);
  border-color: var(--acid);
}

.primary-nav a[aria-current='page'] i {
  color: var(--acid-ink);
}

/* The nav collapses on small screens, but only when JS is running to expand it. */
.nav-toggle {
  display: none;
}

@media (max-width: 860px) {
  .js .nav-toggle {
    display: inline-block;
  }

  .js .primary-nav {
    display: none;
    width: 100%;
  }

  .js .primary-nav.is-open {
    display: block;
  }

  .primary-nav ul {
    flex-direction: column;
  }

  .primary-nav a {
    margin-left: 0;
    margin-top: -1px;
  }
}

/* ---------- ticker rule, static by design ---------- */

.ticker {
  background: var(--cobalt);
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
}

.ticker .rail-inner {
  display: flex;
  gap: 1.6rem;
  padding: 0.5rem 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ticker span::before {
  content: '/ ';
  color: var(--acid);
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: end;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--s6);
  }
}

.hero h1 {
  margin-bottom: var(--s4);
}

.hero h1 em {
  font-style: normal;
  color: var(--acid);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--acid);
  color: var(--acid);
}

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

.btn-acid:hover {
  background: transparent;
  color: var(--acid);
}

.btn-cobalt {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: #ffffff;
}

.btn-cobalt:hover {
  background: transparent;
  color: var(--cobalt-lite);
  border-color: var(--cobalt-lite);
}

/* ---------- crops ---------- */

.crop {
  position: relative;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

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

.crop-tall {
  aspect-ratio: 3 / 4;
}

.crop-square {
  aspect-ratio: 1 / 1;
}

.crop-band {
  aspect-ratio: 16 / 6;
}

.crop-wide {
  aspect-ratio: 3 / 2;
}

.crop-hero {
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .crop-hero {
    aspect-ratio: 4 / 3;
  }
}

.crop-mark {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--acid);
  color: var(--acid-ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
}

/* ---------- module grid ---------- */

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

@media (min-width: 700px) {
  .mods-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .mods-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mod {
  background: var(--panel);
  padding: var(--s4);
}

.mod-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.mod p:last-child {
  margin-bottom: 0;
}

/* ---------- fragment strip ---------- */

.frag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

/* A 25% basis plus three gaps overflows one row, so the fourth fragment wrapped
   and then grew to the full width of the page. The basis has to subtract the
   gaps for four to sit in a row, and growth has to be off so a wrapped item
   never stretches. */
.frag {
  flex-basis: 100%;
  flex-grow: 0;
  min-width: 0;
}

@media (min-width: 620px) {
  .frag {
    flex-basis: calc(50% - (var(--s3) / 2));
  }
}

@media (min-width: 1000px) {
  .frag {
    flex-basis: calc((100% - (var(--s3) * 3)) / 4);
  }
}

.frag figcaption {
  margin-top: var(--s2);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

.frag figcaption b {
  display: block;
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* ---------- lookbook cards ----------
   Card sizing logic adapted from the fashion-static `.childprods` utility:
   a flex-basis percentage with a min-width floor so the row rewraps instead of
   crushing. The reference's right aligned price line is deliberately absent. */

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.card {
  flex-basis: 25%;
  flex-grow: 1;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
}

/* A wrapping flex row grows its final row to fill the width, which turns a
   single leftover card into a full bleed block. The lookbook carries thirteen
   cards, so a leftover is guaranteed. This modifier pins the track width
   instead of letting the last card grow. */
.cards-fixed .card {
  flex-grow: 0;
  flex-basis: 100%;
}

@media (min-width: 760px) {
  .cards-fixed .card {
    flex-basis: calc(50% - (var(--s4) / 2));
  }
}

@media (min-width: 1100px) {
  .cards-fixed .card {
    flex-basis: calc((100% - (var(--s4) * 2)) / 3);
  }
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.card h3 {
  margin: var(--s3) 0 var(--s2);
  font-size: 1.35rem;
}

.card .card-note {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: var(--s3);
  flex-grow: 1;
}

.card .add-wrap {
  margin-top: auto;
}

.add-btn {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75rem 0.5rem;
  background: transparent;
  color: var(--acid);
  border: 1px solid var(--acid);
  cursor: pointer;
}

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

.add-btn[data-on='1'] {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: #ffffff;
}

/* The lift is the one motion borrowed from the static reference. It is switched
   off entirely for a visitor who asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .card,
  .frag .crop {
    transition: transform var(--dur) ease, border-color var(--dur) ease;
  }

  .card:hover,
  .frag .crop:hover {
    transform: translateY(-6px);
  }
}

.card:hover,
.frag .crop:hover {
  border-color: var(--acid);
}

/* ---------- data rows ---------- */

.rows {
  border-top: 1px solid var(--line);
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1) var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 700px) {
  .row {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
}

.row dt,
.row .row-k {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt-lite);
}

.row dd,
.row .row-v {
  margin: 0;
  color: var(--text);
}

.row dd a {
  overflow-wrap: anywhere;
}

/* ---------- conflict block ---------- */

.conflict {
  border: 3px solid var(--cobalt);
  background: var(--panel);
}

.conflict-head {
  background: var(--cobalt);
  color: #ffffff;
  padding: var(--s2) var(--s4);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.conflict-body {
  padding: var(--s4);
}

.conflict-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

@media (min-width: 700px) {
  .conflict-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.conflict-col {
  border-left: 3px solid var(--acid);
  padding-left: var(--s3);
}

.conflict-col b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}

/* ---------- live region and shortlist panel ---------- */

.live-region {
  position: fixed;
  left: var(--gut);
  bottom: 1rem;
  z-index: 120;
  max-width: 26rem;
  pointer-events: none;
}

.live-region:empty {
  display: none;
}

.live-region p {
  margin: 0;
  background: var(--acid);
  color: var(--acid-ink);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--acid-ink);
}

.sl-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 7, 0.72);
  z-index: 130;
}

.sl-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(24rem, 100%);
  z-index: 140;
  background: var(--panel);
  border-left: 3px solid var(--acid);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
}

.sl-panel.is-open {
  transform: translateX(0);
}

/* The panel and its backdrop set their own display, so the hidden attribute
   needs a rule of equal weight or the closed panel would still be laid out
   and still be reachable with the Tab key. */
.sl-panel[hidden],
.sl-backdrop[hidden],
[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sl-panel {
    transition: transform var(--dur) ease;
  }
}

.sl-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
}

.sl-panel-head h2 {
  font-size: 1.6rem;
  margin: 0;
}

.sl-close {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}

.sl-close:hover {
  border-color: var(--acid);
  color: var(--acid);
}

.sl-body {
  padding: var(--s4);
  overflow-y: auto;
  flex-grow: 1;
}

.sl-foot {
  padding: var(--s4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.sl-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-soft);
}

.sl-list .sl-name {
  font-size: 0.88rem;
  line-height: 1.4;
}

.sl-list .sl-name i {
  display: block;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--acid);
  letter-spacing: 0.06em;
}

.sl-drop {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 0.4rem 0.55rem;
  cursor: pointer;
}

.sl-drop:hover {
  color: var(--acid);
  border-color: var(--acid);
}

.sl-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

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

.site-footer {
  background: var(--panel);
  border-top: 3px solid var(--acid);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}

@media (min-width: 800px) {
  .foot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.foot-grid a {
  overflow-wrap: anywhere;
}

.foot-nav li {
  margin-bottom: var(--s2);
}

.foot-note {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 90ch;
}

/* ---------- js gating ---------- */

.no-js [data-js-only] {
  display: none;
}

.js [data-no-js] {
  display: none;
}

/* ---------- fail safe reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transition: opacity 420ms ease, transform 420ms ease;
  }
}

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

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

  .sl-panel {
    transition: none;
  }
}