/* industryapproved.com. Built to IA_Design_Spec.md (19 Sept 2026); section
   numbers below are the spec's. Phone first: every clamp() runs from its
   phone value at 390 to its desktop value at 1280, and nothing grows above
   1280. Black on white, IBM Plex Mono, letter spacing 0. */

:root {
  --bg: #fff;
  --ink: #000;
  --grey: #767676;
  /* 2. Type */
  /* One size for all the home copy (Matt, 19 Sept: "should be pared back and
     same"): the middle block's size taken up 2, so 18px at desktop and 15px
     on a phone. Below 390 the type scales with the screen instead of
     wrapping, so Matt's line breaks hold on the narrowest phones: the longest
     line is 36 characters, each 0.6em wide, in a column of 100vw less 36px. */
  --copy: min(clamp(15px, 13.69px + 0.3371vw, 18px), calc((100vw - 36px) / 21.6));
  --large: var(--copy);
  --small: var(--copy);
  --head: clamp(12px, 11.12px + 0.225vw, 14px);
  --menu: clamp(14px, 13.12px + 0.225vw, 16px);
  /* 4.2 Header */
  --header-h: clamp(54px, 42.61px + 2.921vw, 80px);
  --header-pt: clamp(19px, 12px + 1.893vw, 36px);
  /* Header baseline: in a 1.5 line box Plex Mono's baseline sits 1.125em down
     (half leading 0.1em plus ascent 1.025em). */
  --header-base: calc(var(--header-pt) + 1.125 * var(--head));
  --bar-len: clamp(42px, 32.36px + 2.472vw, 64px);
  --bar-t: clamp(1.25px, 0.92px + 0.084vw, 2px);
  --bar-gap: clamp(6.75px, 5.22px + 0.393vw, 10.25px);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-weight: 400;
  letter-spacing: 0;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 4.1 Column */
.wrap { width: min(880px, 100% - 36px); margin-inline: auto; }

/* 5. Links. Black in every state; a hairline, or the bold link below. */
a, a:visited { color: var(--ink); }
a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-skip-ink: none;
}
@media (hover: hover) {
  a:hover { text-decoration-thickness: 2px; }
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* 4.2 Header. Not sticky. */
.top {
  position: relative;
  height: var(--header-h);
  padding-top: var(--header-pt);
  font-size: var(--head);
  line-height: 1.5;
}
.home { display: inline-block; }

/* The menu button: two lines, the bottom one centred on the header baseline,
   in a hit area of at least 44 x 44 whose centre sits between the lines. */
.menu summary {
  position: absolute;
  right: 0;
  top: calc(var(--header-base) - var(--bar-gap) / 2 - 22px);
  width: max(44px, var(--bar-len));
  height: 44px;
  list-style: none;
  cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::marker { content: ""; }
.bars {
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--bar-len);
  height: calc(var(--bar-gap) + var(--bar-t));
  transform: translateY(-50%);
}
.bars::before, .bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--bar-t);
  background: var(--ink);
}
.bars::before { top: 0; }
.bars::after { bottom: 0; }

/* 6. Menu open. The button gives way to the two links, and becomes a
   transparent layer over the whole page, so a click anywhere else closes
   the menu. Nothing below moves. */
.menu[open] summary {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 10;
  cursor: default;
}
.menu[open] .bars { display: none; }
.menu[open] summary:focus-visible { outline-offset: -6px; }

.menu-links {
  position: absolute;
  right: 0;
  z-index: 11;
  font-size: var(--menu);
  line-height: 2.2;
  /* Instagram's baseline 8px below the header baseline; in a 2.2 line box
     the baseline sits 1.475em down. Gallery follows one line (2.2em) on. */
  top: calc(var(--header-base) + 8px - 1.475 * var(--menu));
  text-align: right;
}
.menu-links ul { list-style: none; margin: 0; padding: 0; }

/* The page fades to 0.18 under the open menu; the header stays. */
main { transition: opacity 150ms ease; }
body:has(.menu[open]) main { opacity: 0.18; }
@media (prefers-reduced-motion: reduce) {
  main { transition: none; }
}

/* 4.3 The home image */
.mark { margin: 0; }
.mark img { display: block; width: 100%; height: auto; border: 0; }

/* 4.4 The three copy blocks */
.copy { margin: 0; overflow-wrap: normal; }
/* One size and one line spacing for all three (Matt, 19 Sept). Every gap is
   one blank line (1.75em), between blocks and inside them alike: closed up
   twice at Matt's word, from two blank lines. */
.copy-large { font-size: var(--large); line-height: 1.75; }
.copy-small { font-size: var(--small); line-height: 1.75; }
.copy-small p { margin: 0; }
.copy-small p + p { margin-top: 1.75em; }

.home-page { padding-bottom: 90px; }
.home-page .mark + .copy { margin-top: clamp(32px, 19.73px + 3.146vw, 60px); }
.home-page .copy + .copy { margin-top: calc(1.75 * var(--copy)); }

/* "Approved by you." The bold link: 2px, 0.3em below. Unchanged on hover. */
.approved {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
@media (hover: hover) {
  .approved:hover { text-decoration-thickness: 2px; }
}

/* 9. The 404 */
.not-found { padding-top: clamp(32px, 19.73px + 3.146vw, 60px); padding-bottom: 90px; }
.not-found h1 { font-weight: 400; }
.not-found .go-here { margin-top: calc(2 * var(--large)); }