/* iamu.ltd — the Cornerstone board, the ruled teal field, the mesostic labels.
   Grown from docs/mockups/2026-09-21-landing/site.css. */

:root {
  --teal: #029898;
  --square: #232620;
  --ink: #e2f1e6;
  --wordmark: var(--square); /* mark and hexagram share the square's charcoal */
  --shadow: 0 2px 5px rgba(0, 0, 0, 0.35); /* ADRIEN WILD's */

  /* Everything scales from the board. site.js keeps these exact; the CSS
     values are first-paint approximations. */
  --board-w: min(100vw, calc(88svh * 1358 / 1159));
  --pitch: calc(var(--board-w) * 1159 / 1358 * 0.057);
  --rule: calc(var(--board-w) * 1159 / 1358 * 0.0022);
  --cap: clamp(15px, calc(var(--board-w) * 0.028), 34px);
  --gutter: max(16px, calc(var(--board-w) * 0.032));

  /* One line of the logo's weight: mark 004's cradle, its one long horizontal
     stroke, is 4.08% of the mark's width, and the mark is 25.5% of the board. */
  --t: calc(var(--board-w) * 0.255 * 0.0408);
}

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

html { background: var(--teal); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  color: var(--ink);
  /* The rules belong to the page, not the board, so they run on below it at
     the board's own pitch. */
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--pitch) - var(--rule)),
      rgba(0, 0, 0, 0.62) calc(var(--pitch) - var(--rule)) var(--pitch)
    ),
    var(--teal);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the board ---- */

.board-wrap {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc(88svh * 1358 / 1159));
}

.board { position: relative; aspect-ratio: 1358 / 1159; user-select: none; }

.square {
  position: absolute;
  left: 0;
  top: 21.6%;
  width: 66.3%;
  height: 78.4%;
  background: var(--square);
  z-index: 1;
}

.square iamu-alea {
  position: absolute;
  inset: 0;
  --chip-field: var(--square);
  --chip-ink: var(--ink);
}

.square iamu-alea > img { display: block; width: 100%; height: 100%; }

.name { margin: 0; font: inherit; }

.across,
.down {
  position: absolute;
  z-index: 2;
  font: 400 19.5cqw/0.78 Cinzel, "Times New Roman", serif;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-shadow: var(--shadow);
}

.across { left: 3.2%; top: 1.5%; }
.down { left: 69.5%; top: 17.5%; writing-mode: vertical-rl; text-orientation: mixed; }

/* The publisher's mark, landing page only: out of the board and
   right-justified to the page, just below the square, where it can't meet the
   chip at any width. The asterisk's edge is what lines up with the gutter. */
.imprint {
  display: flex;
  justify-content: flex-end;
  padding: calc(var(--pitch) * 0.6) var(--gutter) 0;
}

.publisher {
  position: relative;
  display: block;
  width: calc(var(--board-w) * 0.255);
  margin-right: calc(var(--board-w) * 0.255 * 0.124);
  aspect-ratio: 1200 / 374;
}

.publisher .mark {
  position: absolute;
  inset: 0;
  background-color: var(--wordmark);
  -webkit-mask: url("brand/iamu-wordmark-004.png") no-repeat center / 100% 100%;
          mask: url("brand/iamu-wordmark-004.png") no-repeat center / 100% 100%;
  filter: drop-shadow(0 calc(var(--board-w) * 0.0035) calc(var(--board-w) * 0.005) rgba(0, 0, 0, 0.28));
}

/* The footnote mark. Drawn rather than set, because no font's asterisk shares
   the logo's geometry: six round-ended arms, monoline, at three-quarters of the
   cradle's weight. Its top sits level with the top of the u. */
.asterisk { display: inline-block; overflow: visible; }
.asterisk path { fill: none; stroke: currentColor; stroke-width: 27; stroke-linecap: round; }

.publisher .asterisk {
  position: absolute;
  left: calc(100% + 1.2%);
  top: 19.5%;
  width: 11.2%;
  height: auto;
  aspect-ratio: 1;
  color: var(--wordmark);
  filter: drop-shadow(0 calc(var(--board-w) * 0.0035) calc(var(--board-w) * 0.005) rgba(0, 0, 0, 0.28));
}

/* ---- mesostic labels ---- */

.label { position: absolute; font-family: Cinzel, serif; }
.line { position: absolute; white-space: nowrap; line-height: 1; word-spacing: 0.2em; }
.line > span { letter-spacing: 0.02em; }
.baseline { display: inline-block; width: 0; height: 0; }

/* ---- landing: the menu ---- */

.menu { padding: calc(var(--pitch) * 0.6) var(--gutter) calc(var(--pitch) * 3); }

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--cap) * 18)), 1fr));
  /* Sparse placement keeps the menu in written order, which is also reading
     and tab order. Each box is exactly as tall as its label (landing.js sets
     min-height), so the air between labels is this gap and nothing else. */
  gap: calc(var(--cap) * 1.8) calc(var(--cap) * 1.2);
}

.item {
  position: relative;
  display: block;
  height: 100%;
  padding: calc(var(--cap) * 0.35) calc(var(--cap) * 0.5);
  color: var(--ink);
  text-decoration: none;
  text-shadow: var(--shadow);
}

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

/* Each item is nudged off its place a little, as cast (landing.js, hang.js):
   the grid still holds the order, the reading and the tabbing. */
#menu > li:not(.hexcell) { translate: calc(var(--nx, 0) * var(--cap)) calc(var(--ny, 0) * var(--pitch)); }

/* The hexagram that cast the menu, and the button that casts it again. Always
   in the grid's last column and flush right, sharing the mark's right edge. */
.hexcell {
  grid-column: -2 / -1;
  justify-self: end;
  align-self: end;
  padding: calc(var(--cap) * 0.35) 0 calc(var(--cap) * 0.77);
}

.hexagram {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wordmark);
  cursor: pointer;
  filter: drop-shadow(0 calc(var(--t) * 0.35) calc(var(--t) * 0.5) rgba(0, 0, 0, 0.28));
}
.hexagram svg { display: block; width: calc(var(--t) * 11); height: calc(var(--t) * 10.5); overflow: visible; }
.hexagram line { stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.hexagram g { transition: opacity 0.08s; }
.hexagram:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(var(--t) * 1.2); }

/* ---- the footnote ---- */

/* A band of the square's charcoal across the foot of the page, covering the
   rules, with the note in the board's pale ink at bottom left. On a short page
   it still sits at the bottom of the window. */
.colophon {
  margin-top: auto;
  padding: calc(var(--pitch) * 0.9) var(--gutter);
  background: var(--square);
  color: var(--ink);
  font: 400 max(11px, calc(var(--cap) * 0.55)) / 1.4 "Varela Round", system-ui, sans-serif;
  letter-spacing: 0.02em;
}
.colophon p { margin: 0; }
.colophon a { color: inherit; text-decoration: none; }
.colophon a:hover, .colophon a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.colophon .asterisk { width: 0.72em; height: 0.72em; vertical-align: 0.38em; margin-right: 0.2em; }

/* ---- division pages ---- */

/* The division's name takes ADRIEN's place: the whole top band. */
.title {
  position: absolute;
  z-index: 2;
  left: 3.2%;
  top: 1.5%;
  width: 93.3%;
  height: 19.2%;
  margin: 0;
  color: var(--ink);
  text-shadow: var(--shadow);
}

/* The back of the box — a line of copy and the ways out — takes the square's
   place. On a phone it drops below the board, the way the landing menu does. */
.links {
  padding: var(--pitch) var(--gutter) calc(var(--pitch) * 3);
  color: var(--ink);
  text-shadow: var(--shadow);
  font-family: Cinzel, serif;
}

/* The copy sits in a box of the square's charcoal, like the footer. */
.links .blurb {
  margin: 0 0 1.6em;
  max-width: 34ch;
  padding: 0.9em 1.1em;
  background: var(--square);
  text-shadow: none;
  font-size: max(15px, 1.75cqw);
  line-height: 1.4;
}

.links ul { list-style: none; margin: 0; padding: 0; }
.links li + li { margin-top: 1em; }

.links .out {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: max(24px, 4.4cqw);
  line-height: 1;
}

.links .out:hover, .links .out:focus-visible { text-decoration: underline; text-underline-offset: 0.12em; }
.links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.links .where {
  display: block;
  margin-top: 0.45em;
  font-size: max(12px, 1.3cqw);
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.links .where a { color: inherit; text-underline-offset: 0.2em; }

/* Where the links drop below, a board with no square would be a title over an
   empty field, so on narrow screens a division's board shrinks to its title. */
@container (max-width: 619px) {
  .division .board { aspect-ratio: 1358 / 300; }
  .division .title { top: 5%; height: 82%; }
}

@container (min-width: 620px) {
  .links {
    position: absolute;
    z-index: 2;
    left: 3.2%;
    right: 36.7%;
    top: 27%;
    padding: 0;
  }
}

/* ---- the Historical Collection ---- */

/* A long page: at every width the board keeps only its title band, and the
   halls run on below it. The ruled field is the gallery wall; exposition hangs
   on it in charcoal, the lobby screen in the name's Cinzel and the wall labels
   in the footnote's small, uniform print. */
.collection .board { aspect-ratio: 1358 / 300; }
.collection .title { top: 5%; height: 82%; }

.hall { padding: calc(var(--pitch) * 0.8) var(--gutter) calc(var(--pitch) * 1.2); }
.hall:last-child { padding-bottom: calc(var(--pitch) * 3); }

.plaque {
  margin: 0 0 0.8em;
  font: 700 max(22px, calc(var(--cap) * 1.1)) / 1.1 Cinzel, serif;
  color: var(--ink);
  text-shadow: var(--shadow);
}

.screen {
  max-width: 38em;
  padding: 1.1em 1.35em 1.25em;
  background: var(--square);
  color: var(--ink);
  font: 400 max(15px, calc(var(--cap) * 0.7)) / 1.5 Cinzel, serif;
}
.screen h2 { margin: 0 0 0.75em; font-size: 1.35em; font-weight: 700; line-height: 1.2; }
.screen p { margin: 0; }
.screen p + p { margin-top: 0.9em; }

.card {
  margin: 0;
  padding: 0.8em 1em 0.9em;
  background: var(--square);
  color: var(--ink);
  font: 400 max(13px, calc(var(--cap) * 0.5)) / 1.5 "Varela Round", system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.card p { margin: 0; }
.card p + p { margin-top: 0.7em; }
.card .stamp { display: block; margin-bottom: 0.2em; font: 700 1.25em/1.2 Cinzel, serif; letter-spacing: 0.04em; }
.card .accession { font-size: 0.8em; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.card p.work { margin-top: 0.25em; font: 700 1.3em/1.25 Cinzel, serif; }
.card .medium, .card .note { opacity: 0.85; }
.card .note { font-style: italic; }
.card sup { font-size: 0.7em; line-height: 0; }

/* Box-back system requirements, as Infocom printed them. */
.requires { display: grid; grid-template-columns: fit-content(8em) 1fr; gap: 0.2em 1em; margin: 0.8em 0 0; }
.requires dt { opacity: 0.75; }
.requires dd { margin: 0; }
.requires + p { margin-top: 0.8em; }

/* The marks hang in the charcoal they're used in, each beside its label. */
.marks {
  list-style: none;
  margin: calc(var(--pitch) * 0.9) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--pitch) * 0.55);
}
.marks li {
  display: grid;
  grid-template-columns: calc(var(--cap) * 10) minmax(0, 24em);
  gap: calc(var(--cap) * 1.1);
  align-items: center;
}
.specimen {
  display: block;
  justify-self: start;
  height: calc(var(--cap) * 2.6);
  background-color: var(--wordmark);
  -webkit-mask: no-repeat left center / contain;
          mask: no-repeat left center / contain;
  filter: drop-shadow(0 calc(var(--board-w) * 0.0035) calc(var(--board-w) * 0.005) rgba(0, 0, 0, 0.28));
}
.m001 { aspect-ratio: 871 / 410; -webkit-mask-image: url("brand/iamu-wordmark-001.png"); mask-image: url("brand/iamu-wordmark-001.png"); }
.m002 { aspect-ratio: 1200 / 374; -webkit-mask-image: url("brand/iamu-wordmark-002.png"); mask-image: url("brand/iamu-wordmark-002.png"); }
.m003 { aspect-ratio: 1200 / 374; -webkit-mask-image: url("brand/iamu-wordmark-003.png"); mask-image: url("brand/iamu-wordmark-003.png"); }
.m004 { aspect-ratio: 1200 / 374; -webkit-mask-image: url("brand/iamu-wordmark-004.png"); mask-image: url("brand/iamu-wordmark-004.png"); }
.m005 { aspect-ratio: 1416 / 383; -webkit-mask-image: url("brand/iamu-wordmark-005.png"); mask-image: url("brand/iamu-wordmark-005.png"); }

.merch { max-width: 38em; margin-top: calc(var(--pitch) * 0.9); }

/* ---- the hang: framed exhibits, both halls ----

   Framed reproductions, each over its wall label, hung like notes on a
   bulletin board: never at an angle, never quite lined up. hang.js casts each
   exhibit's idiom (an .f-<name> class), its size (--size, of a column) and its
   offset (--dx, --dy); without script they hang square, in the idiom their
   HTML names. */

.exhibits {
  /* Three across at the board's width, even at the largest cast size. */
  --col: max(14rem, 27%);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Both gaps are wider than two neighbours can drift apart (hang.js): the
     row gap than the downward drift, the column gap than twice the sideways. */
  gap: max(calc(var(--pitch) * 1.2), 3.6rem) max(3%, 2.2rem);
  padding-inline: 1.2rem; /* room for the offsets */
  /* The ruled field is the wall, and it runs the width of the window: the hang
     uses all of it, though the text above keeps to the board's width. */
  width: max(100%, min(100vw - 2 * var(--gutter), 96rem));
}
.exhibit {
  width: calc(var(--col) * var(--size, 1));
  max-width: 100%;
  margin: 0;
  transform: translate(var(--dx, 0), var(--dy, 0));
}
.exhibit > .card { margin-top: calc(var(--pitch) * 0.45); }

.frame { position: relative; display: block; color: inherit; text-decoration: none; }
.liner { position: relative; display: block; }
.liner img { display: block; width: 100%; height: auto; }

/* The idioms. Right angles only; monochrome, with the site's celadon. The
   pictures carry the colour. */

/* Anodized graphite: a slim matte-black section, one lit edge. */
.f-anodized .frame {
  padding: 3.5%;
  background: linear-gradient(180deg, #3b3e3c, #1c1e1d 55%, #262827);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px #0c0d0c,
    0 8px 16px rgba(0, 0, 0, 0.4);
}
.f-anodized .liner { box-shadow: 0 0 0 1px #000; }

/* Brushed aluminium: a pale section with a directional grain. */
.f-brushed .frame {
  padding: 3%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #d9dddb, #a3a8a6 48%, #c6cac8 52%, #b3b8b6);
  box-shadow:
    inset 0 1px 0 #f4f6f5,
    inset 0 -1px 0 #7d8280,
    inset 0 0 0 1px #8e9391,
    0 8px 16px rgba(0, 0, 0, 0.38);
}
.f-brushed .liner { box-shadow: 0 0 0 2px #5f6462; }

/* A thin black section around a wide celadon mat, as photographs are hung. */
.f-mat .frame { padding: 1.6%; background: #121312; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); }
.f-mat .liner { padding: 9%; background: var(--ink); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); }
.f-mat .liner img { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }

/* Deco lacquer, the fanciest: stepped corners, chrome hairlines. */
.f-deco .frame {
  --step: 5%;
  padding: 7%;
  background: linear-gradient(160deg, #262626, #070707 60%, #1b1b1b);
  clip-path: polygon(
    var(--step) 0, calc(100% - var(--step)) 0, calc(100% - var(--step)) 2%, calc(100% - 2%) 2%, calc(100% - 2%) var(--step),
    100% var(--step), 100% calc(100% - var(--step)), calc(100% - 2%) calc(100% - var(--step)), calc(100% - 2%) calc(100% - 2%),
    calc(100% - var(--step)) calc(100% - 2%), calc(100% - var(--step)) 100%, var(--step) 100%, var(--step) calc(100% - 2%),
    2% calc(100% - 2%), 2% calc(100% - var(--step)), 0 calc(100% - var(--step)), 0 var(--step), 2% var(--step), 2% 2%, var(--step) 2%);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}
.f-deco .frame::before {
  content: "";
  position: absolute;
  inset: 3.5%;
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #f4f6f8, #8a9096 30%, #ffffff 50%, #7b8187 75%, #dfe3e6) 1;
  pointer-events: none;
}
.f-deco .liner { padding: 5%; background: #0d0d0d; box-shadow: inset 0 0 0 1px #9aa0a6; }

/* Deconstructed: a frame reduced to two of its corners, standing off the
   picture. Which two is cast (.v0, .v1). */
.f-brackets .frame { --arm: 22%; --bar: 9px; --off: -12px; }
.f-brackets .frame::before,
.f-brackets .frame::after {
  content: "";
  position: absolute;
  width: var(--arm);
  height: calc(var(--arm) * 4 / 3);
  border: 0 solid var(--square);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
.f-brackets .frame::before { top: var(--off); left: var(--off); border-top-width: var(--bar); border-left-width: var(--bar); }
.f-brackets .frame::after { bottom: var(--off); right: var(--off); border-bottom-width: var(--bar); border-right-width: var(--bar); }
.f-brackets.v1 .frame::before { left: auto; right: var(--off); border-left-width: 0; border-right-width: var(--bar); }
.f-brackets.v1 .frame::after { right: auto; left: var(--off); border-right-width: 0; border-left-width: var(--bar); }
.f-brackets .liner img { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }

/* Unframed, casting a hard block of charcoal, as a print laid on another.
   Which way it falls is cast. */
.f-shadow .liner img { box-shadow: 14px 14px 0 var(--square); }
.f-shadow.v1 .liner img { box-shadow: -14px 14px 0 var(--square); }

/* A single celadon line held off the picture: celadon, so it never reads as
   one of the wall's rules. */
.f-hairline .liner img {
  outline: 2px solid var(--ink);
  outline-offset: 12px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
}

/* Design Ω's own frame: one pixel, shown large, in a frame that has not come
   through unscathed. It isn't cast. */
.f-melted .frame {
  padding: 3%;
  background: var(--square);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.18);
}
.f-melted .liner { padding: 7%; background: var(--ink); }
.f-melted .void { aspect-ratio: 1; image-rendering: pixelated; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.melt {
  position: absolute;
  left: 0;
  top: calc(100% - 0.5px);
  width: 100%;
  height: auto;
  overflow: visible;
  fill: var(--square);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));
}
.final > .card { margin-top: calc(15% + var(--pitch) * 0.45); }

/* The Historical Collection hangs two designs, larger. */
.designs { --col: max(19rem, 40%); }

@container (max-width: 619px) {
  .marks li { grid-template-columns: 1fr; gap: calc(var(--pitch) * 0.3); }
  .specimen { height: calc(var(--cap) * 2.2); }
  /* One column: the exhibits keep their drift down the wall, not across it. */
  .exhibits { --col: 100%; padding-inline: 0; }
  .exhibit { --size: 1 !important; --dx: 0 !important; }
}

/* ---- the manifolds ---- */

.catalogue .work a { color: inherit; text-decoration: none; }
.catalogue .work a:hover, .catalogue .work a:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.catalogue .work a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- not found ---- */

.lost {
  padding: calc(var(--pitch) * 3) var(--gutter);
  font: 400 max(18px, calc(var(--cap) * 1.1)) / 1.4 Cinzel, serif;
  text-shadow: var(--shadow);
}
.lost a { color: inherit; }