/* =========================================================================
   Vigtek — Vignelli Technik
   A house style built on three ideas: meaning, structure, clarity.

   Type:   Instrument Sans, self-hosted, so the page renders the same on
           Windows, macOS, and Linux. Helvetica Neue stands in while it loads.
   Grid:   A twelve-column field. Tight at the edges for tension, generous
           inside for breath.
   Colour: Black ink on paper. One red, used only as a signal.
   Rule:   The horizontal rule does the dividing. Type hangs from it.
   ========================================================================= */

/* ------------------------------------------------------------- typeface */
/* Instrument Sans, self-hosted so the page renders identically on every
   platform rather than depending on what is installed. Helvetica Neue stands
   in while it loads. Subsets and ranges match Google Fonts' own slicing. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper:      #fbfaf7;
  --ink:        #1a1a1a;
  --ink-soft:   #6b6b66;
  --red:        #d8211c;
  --hairline:   rgba(26, 26, 26, 0.16);
  --rule:       #1a1a1a;
  --field:      #ffffff;

  --serif:  "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:   "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* A modular field. The page is a grid; everything sits on it. */
  --measure:   38rem;          /* comfortable reading width */
  --gutter:    clamp(1.25rem, 4.5vw, 4rem);
  --col-gap:   clamp(1rem, 2.4vw, 2rem);
  --row:       clamp(3rem, 7vw, 6rem);   /* vertical rhythm between sections */
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------- baseline */
html {
  font-size: 112.5%;                 /* 18px */
  background: var(--paper);
}
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The white space is the silence. Keep the measure honest. */
p { max-width: var(--measure); }
p + p { margin-top: 1.1rem; }

a { color: inherit; }

::selection { background: var(--red); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 10;
  text-decoration: none;
}
.skip:focus { left: var(--gutter); top: 0.5rem; }

/* ----------------------------------------------------------------- layout */
.page {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The shared twelve-column field. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: var(--row);
}

main { flex: 1 0 auto; }

section { padding-block: var(--row); }

/* ------------------------------------------------------- rules (the ruler) */
hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}
hr.bold {                 /* a 2pt rule for the major divisions */
  height: 2px;
  background: var(--rule);
}
hr.red {
  height: 3px;
  background: var(--red);
}

/* --------------------------------------------------------------- masthead */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 0.7rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark .mark {           /* the red square — a primary shape, a primary colour */
  width: 0.74em;
  height: 0.74em;
  background: var(--red);
  align-self: center;
  flex: none;
}
.wordmark .full {
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-self: center;
}

/* navigation */
.nav { display: flex; align-items: baseline; gap: clamp(1rem, 2.5vw, 2rem); }
.nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 0.15rem;
  position: relative;
  transition: color 0.15s ease;
}
.nav a:hover { color: var(--red); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.2rem;
  height: 2px;
  background: var(--red);
}

/* ---------------------------------------------------------------- eyebrow */
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0;
}
.eyebrow .dot { color: var(--red); }

/* index numbers, set in the red */
.num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------- hero */
.hero { padding-top: var(--row); padding-bottom: var(--row); }
.hero .eyebrow { margin-bottom: 1.4rem; }
.hero h1 {
  font-weight: 700;
  font-size: clamp(2.3rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin: 0;
  text-wrap: balance;
}
.hero .lede {
  margin-top: 1.8rem;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  max-width: 34rem;
  color: var(--ink);
}
/* the company tagline, set hanging from a short rule */
.hero .tagline {
  display: inline-block;
  margin-top: 2.4rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--rule);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* generic section heading block */
.head { grid-column: 1 / -1; }
.head .eyebrow { margin-bottom: 0.9rem; }
.head h2 {
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 24ch;
  text-wrap: balance;
}
.head .note { margin-top: 1rem; color: var(--ink-soft); }

/* ----------------------------------------------------------- the method */
/* Three ideas, three columns, divided by rules. The quiet centre of it all. */
.method-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
}
.idea {
  border-top: 2px solid var(--rule);
  padding-top: 1rem;
}
.idea .num { font-size: 0.8rem; display: block; margin-bottom: 1.4rem; }
.idea h3 {
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}
.idea p { color: var(--ink); font-size: 0.96rem; }

/* ----------------------------------------------------------- work index */
/* An index of documents — the oldest idea on the web, kept in order. */
.index { grid-column: 1 / -1; }
.index-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 0 var(--col-gap);
  align-items: baseline;
  padding: 1.15rem 0;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
}
.index-item:first-of-type { border-top: 2px solid var(--rule); }
.index-item:last-of-type { border-bottom: 1px solid var(--hairline); }
.index-item .num { font-size: 0.82rem; }
.index-item .name {
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.index-item .said { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.25rem; max-width: 44ch; }
.index-item .go {
  font-size: 1.2rem;
  color: var(--ink-soft);
  transition: transform 0.18s ease, color 0.18s ease;
}
.index-item:hover .name { color: var(--red); }
.index-item:hover .go { color: var(--red); transform: translateX(0.25rem); }

/* ----------------------------------------------------------- work entries */
.entry {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: 1rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--rule);
}
.entry .meta { grid-column: 1 / 4; }
.entry .body { grid-column: 4 / 12; }
.entry .num { font-size: 0.82rem; display: block; margin-bottom: 0.8rem; }
.entry .eyebrow { margin-bottom: 0.4rem; }
.entry h2 {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -0.022em;
  line-height: 1.04;
}
.entry .expand {
  color: var(--ink-soft);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.35rem;
}
.entry .body p { margin-top: 1rem; max-width: 42rem; }
.entry .links {
  margin-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

/* a quiet, signalling link for live work */
.link {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.link::after { content: " \2197"; color: var(--ink-soft); }
.link:hover { color: var(--red); border-color: var(--red); }
.link:hover::after { color: var(--red); }

/* ---------------------------------------------------------------- prose */
.prose { grid-column: 1 / -1; max-width: var(--measure); }
.prose p { margin-top: 1.1rem; }
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.prose a:hover { color: var(--red); text-decoration-color: var(--red); }
.prose .lead { font-size: 1.15rem; }
.prose h2 {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 2.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-weight: 700; font-size: 1rem; margin-top: 1.5rem; }
.prose ul { margin-top: 0.9rem; padding-left: 1.1rem; max-width: var(--measure); }
.prose li { margin-top: 0.5rem; }
.prose li::marker { color: var(--red); }
.prose .meta-line { color: var(--ink-soft); font-size: 0.9rem; }

/* -------------------------------------------------------------- contact */
.contact-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); row-gap: var(--row); }
.contact-grid .aside { grid-column: 1 / 5; }
.contact-grid .form-col { grid-column: 5 / 12; }
.aside h2 { font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.06; }
.aside p { margin-top: 1rem; color: var(--ink-soft); font-size: 0.96rem; }

form { display: block; }
.field { margin-bottom: 1.6rem; }
.field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.field .opt { color: var(--ink-soft); font-weight: 400; letter-spacing: 0.08em; }
.field input,
.field textarea {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.field textarea { resize: vertical; min-height: 8rem; }

/* honeypot — kept far off-screen for bots only */
.gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 0.72rem 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.button:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.button:disabled { opacity: 0.5; cursor: progress; }

.form-status {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  min-height: 1.4rem;
}
.form-status[data-state="ok"] { color: var(--ink); }
.form-status[data-state="error"] { color: var(--red); }
.form-status .tick { color: var(--red); font-weight: 700; }

/* ---------------------------------------------------------------- footer */
.footer {
  flex-shrink: 0;
  margin-top: var(--row);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.footer .inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap);
  row-gap: 1.5rem;
  padding-top: 1.2rem;
}
.footer .sig { grid-column: 1 / 6; }
.footer .sig .wordmark { font-size: 1.1rem; }
.footer .sig .tagline { margin-top: 0.5rem; font-size: 0.92rem; color: var(--ink); max-width: 22rem; }
.footer .creed {
  grid-column: 6 / 9;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  align-self: end;
}
.footer .creed .dot { color: var(--red); }
.footer .foot-nav {
  grid-column: 9 / 13;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  align-self: end;
}
.footer .foot-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer .foot-nav a:hover { color: var(--red); }
.footer .fine {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer .fine .legal { display: inline-flex; gap: 1.1rem; }
.footer .fine .legal a { color: var(--ink-soft); text-decoration: none; }
.footer .fine .legal a:hover { color: var(--red); }

/* ----------------------------------------------------------- responsive */
@media (max-width: 800px) {
  .method-list { grid-template-columns: 1fr; }
  .idea { border-top-width: 2px; }
  .entry .meta { grid-column: 1 / -1; }
  .entry .body { grid-column: 1 / -1; }
  .contact-grid .aside,
  .contact-grid .form-col { grid-column: 1 / -1; }
  .contact-grid { row-gap: var(--row); }
  .footer .sig,
  .footer .creed,
  .footer .foot-nav { grid-column: 1 / -1; }
  .footer .foot-nav { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
}

@media (max-width: 540px) {
  .index-item { grid-template-columns: 1.8rem 1fr auto; }
  .nav { gap: 1rem; }
  .hero h1 { letter-spacing: -0.02em; }
}

/* honour those who prefer stillness */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}