/* Kettal components. Every rule here is described in ../DESIGN.md, section Components.
   Shapes: photos carry an arch top, everything else is square. */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--k-header-h) + 16px); }

body {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-ink);
  font-family: var(--k-sans);
  font-size: var(--k-body-md);
  line-height: 1.6;
  font-feature-settings: "ss01" 0;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

.k-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--k-ink); color: var(--k-on-ink); padding: 12px 16px; text-decoration: none;
}
.k-skip:focus { top: 8px; }

:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }

.k-wrap { width: 100%; max-width: var(--k-container); margin-inline: auto; padding-inline: var(--k-gutter); }
.k-measure { max-width: var(--k-text); }

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

.k-display {
  font-size: var(--k-display-xl);
  line-height: .86;
  letter-spacing: var(--k-track-display);
  font-weight: 600;
}
.k-h1 {
  font-size: var(--k-headline-lg);
  line-height: .92;
  letter-spacing: var(--k-track-display);
}
.k-h2 {
  font-size: var(--k-headline-md);
  line-height: 1;
  letter-spacing: var(--k-track-display);
}
.k-title { font-size: var(--k-title-md); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.k-lead { font-size: var(--k-body-lg); line-height: 1.55; color: var(--k-text-2); }
.k-small { font-size: var(--k-body-sm); font-weight: 500; line-height: 1.5; }
.k-muted { color: var(--k-muted); }
.k-label {
  font-size: var(--k-label); font-weight: 700; letter-spacing: var(--k-track-label);
  text-transform: uppercase; line-height: 1.3;
}
.k-serif { font-family: var(--k-serif); font-weight: 400; font-size: var(--k-accent-serif); line-height: 1.1; letter-spacing: 0; }
.k-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; line-height: 1; }

/* ---------- links: marker fill rises from the bottom ---------- */

.k-link, .k-prose a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--k-tint), var(--k-tint)), linear-gradient(var(--k-primary), var(--k-primary));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 100% 0%, 100% 2px;
  transition: background-size var(--k-mid) var(--k-ease);
  padding-inline: 1px;
}
.k-link:hover, .k-prose a:hover { background-size: 100% 100%, 100% 2px; }
.k-ink .k-link, .k-ink .k-prose a {
  background-image: linear-gradient(var(--k-primary), var(--k-primary)), linear-gradient(var(--k-primary-on-ink), var(--k-primary-on-ink));
}

/* ---------- buttons: text slides left, arrow slides in from the right ---------- */

.k-btn {
  --btn-bg: var(--k-ink); --btn-fg: var(--k-on-ink); --btn-bd: var(--k-ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; overflow: hidden;
  background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bd); border-radius: 0;
  font: 700 var(--k-label)/1 var(--k-sans); letter-spacing: var(--k-track-label); text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.k-btn__text { display: inline-block; transition: transform var(--k-mid) var(--k-ease), opacity var(--k-mid) var(--k-ease); }
.k-btn__arrow {
  position: absolute; right: 18px; top: 50%; width: 22px; height: 12px; margin-top: -6px;
  transform: translateX(48px); transition: transform var(--k-mid) var(--k-ease);
}
.k-btn:hover .k-btn__text, .k-btn:focus-visible .k-btn__text { transform: translateX(-14px); opacity: .0; }
.k-btn:hover .k-btn__arrow, .k-btn:focus-visible .k-btn__arrow { transform: translateX(-30%); }
.k-btn--ghost { --btn-bg: transparent; --btn-fg: var(--k-ink); }
.k-btn--light { --btn-bg: var(--k-on-ink); --btn-fg: var(--k-ink); --btn-bd: var(--k-on-ink); }
.k-btn--block { width: 100%; }
.k-btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- chips ---------- */

.k-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.k-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 2px solid currentColor; border-radius: 0; color: inherit; text-decoration: none;
  font: 700 var(--k-label)/1 var(--k-sans); letter-spacing: var(--k-track-label); text-transform: uppercase;
  transition: background-color var(--k-fast) linear, color var(--k-fast) linear;
}
.k-chip:hover, .k-chip[aria-current="page"] { background: var(--k-ink); color: var(--k-on-ink); border-color: var(--k-ink); }
.k-ink .k-chip:hover, .k-ink .k-chip[aria-current="page"] { background: var(--k-on-ink); color: var(--k-ink); border-color: var(--k-on-ink); }

/* ---------- ruled grid: 4 columns, 2px ink rules between cells ---------- */

.k-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--k-rule-w);
  background: var(--k-rule); border: var(--k-rule-w) solid var(--k-rule); list-style: none;
}
.k-grid > * { background: var(--k-bg); min-width: 0; }
@media (min-width: 600px) { .k-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .k-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .k-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .k-span-2 { grid-column: span 2; }
}

/* ---------- arch photo ---------- */

.k-arch { border-radius: 999px 999px 0 0; overflow: hidden; background: var(--k-studio); }
.k-arch img { width: 100%; height: 100%; object-fit: cover; }
.k-arch--contain img { object-fit: contain; }

/* photo hover: lifts 8px, a 2px ink line-shadow grows from the centre under it */
.k-lift { position: relative; display: block; padding-bottom: 10px; }
.k-lift > picture, .k-lift > .k-arch, .k-lift > img { display: block; transition: transform var(--k-mid) var(--k-ease); }
.k-lift::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--k-ink);
  transform: scaleX(0); transition: transform var(--k-mid) var(--k-ease);
}
.k-lift:hover > picture, .k-lift:hover > .k-arch, .k-lift:hover > img { transform: translateY(-8px); }
.k-lift:hover::after { transform: scaleX(1); }

/* ---------- collection card: inverts to ink ---------- */

.k-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%;
  padding: 16px 16px 20px; color: var(--k-ink); text-decoration: none;
  transition: background-color var(--k-mid) var(--k-ease), color var(--k-mid) var(--k-ease);
}
.k-card__num { color: var(--k-muted); transition: color var(--k-mid) var(--k-ease); }
.k-card__img { aspect-ratio: 4 / 5; }
.k-card__img img { mix-blend-mode: multiply; }
.k-card__name { font-size: 28px; font-weight: 600; letter-spacing: var(--k-track-display); line-height: 1; }
.k-card__meta { font-size: var(--k-body-sm); font-weight: 500; color: var(--k-text-2); transition: color var(--k-mid) var(--k-ease); }
.k-card:hover, .k-card:focus-visible { background: var(--k-ink); color: var(--k-on-ink); }
.k-card:hover .k-card__num, .k-card:focus-visible .k-card__num { color: var(--k-primary-on-ink); }
.k-card:hover .k-card__meta, .k-card:focus-visible .k-card__meta { color: var(--k-on-ink-muted); }
.k-card:hover .k-card__img img { mix-blend-mode: normal; }

/* ---------- ink band ---------- */

.k-ink { background: var(--k-ink); color: var(--k-on-ink); }
.k-ink .k-muted { color: var(--k-on-ink-muted); }

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

.k-field { display: flex; flex-direction: column; gap: 8px; }
.k-field label, .k-field .k-field__label { font: 700 var(--k-label)/1.3 var(--k-sans); letter-spacing: var(--k-track-label); text-transform: uppercase; }
.k-input, .k-select, .k-textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  border: 2px solid var(--k-ink); border-radius: 0; background: var(--k-bg); color: var(--k-ink);
  font: 400 17px/1.4 var(--k-sans); appearance: none;
}
.k-textarea { min-height: 132px; resize: vertical; }
.k-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--k-ink) 50%), linear-gradient(135deg, var(--k-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}
.k-input:focus, .k-select:focus, .k-textarea:focus { border-color: var(--k-primary); outline: 2px solid var(--k-primary); outline-offset: 2px; }
.k-input[aria-invalid="true"] { border-color: var(--k-error); }
.k-field__error { color: var(--k-error); font-size: var(--k-body-sm); font-weight: 600; }
.k-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

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

.k-table-wrap { overflow-x: auto; border: 2px solid var(--k-ink); -webkit-overflow-scrolling: touch; }
.k-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.k-table caption { caption-side: bottom; text-align: left; padding: 12px 14px; font-size: var(--k-body-sm); color: var(--k-muted); border-top: 1px solid var(--k-ink); }
.k-table th, .k-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--k-ink); }
.k-table thead th { background: var(--k-ink); color: var(--k-on-ink); font: 700 var(--k-label)/1.3 var(--k-sans); letter-spacing: var(--k-track-label); text-transform: uppercase; white-space: nowrap; }
.k-table tbody th, .k-table tbody td:first-child { font-weight: 700; }
.k-table tbody tr:last-child > * { border-bottom: 0; }
.k-table tbody th:first-child, .k-table tbody td:first-child { position: sticky; left: 0; background: var(--k-bg); }
.k-table thead th:first-child { position: sticky; left: 0; }

/* ---------- infographic: one-line drawing ---------- */

.infographic { overflow-x: auto; }
.infographic svg { width: 100%; height: auto; min-width: 320px; }
.infographic .ln { fill: none; stroke: var(--k-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.infographic .ln-accent { fill: none; stroke: var(--k-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.infographic .dot { fill: var(--k-bg); stroke: var(--k-primary); stroke-width: 2; }
.infographic text { font-family: var(--k-sans); font-size: 13px; font-weight: 600; fill: var(--k-ink); }
.infographic .t-num { font-family: var(--k-serif); font-size: 30px; font-weight: 400; fill: var(--k-primary); }
.infographic .t-cap { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--k-text-2); }