/* two64.ai home, the engraved note.
   One light theme, locked. Fonts are self-hosted under CSP font-src 'self'.
   Every ambient motion is gated on prefers-reduced-motion. */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-vf-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
/* Geist is Argus's own face, used only inside the Argus proof in the work
   window; the note itself is set in Archivo alone. */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* The note: teal paper is the island, green ink is the machine. Never swapped. */
:root {
  --field: #4dbfb0;
  --paper: #e4f1ed;
  --paper-bright: #eef7f4;
  --ink: #0c1f1a;
  --ink-soft: #2f5a52;
  --ink-field: #12403a;
  --machine: #086240;
  --machine-on-field: #05462d;
  --island: #1f8f82;
  --line: rgba(12, 31, 26, 0.28);
  --line-strong: rgba(12, 31, 26, 0.55);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: 72px;
  --section: 132px;
  --fast: 120ms;
  --mid: 280ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --sea-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%3E%3Cdefs%3E%3Cmask%20id='m'%3E%3Crect%20width='1000'%20height='1000'%20fill='%23fff'/%3E%3Cpath%20d='M573.0%20434.7L571.6%20436.2L566.2%20433.1L562.3%20438.2L561.1%20444.1L558.0%20447.3L554.5%20447.8L554.8%20448.8L549.7%20447.8L549.8%20449.3L547.5%20448.8L547.3%20452.2L544.2%20452.5L547.4%20455.6L551.6%20457.0L552.1%20458.7L557.3%20462.0L558.6%20464.6L564.6%20468.7L564.3%20470.9L562.8%20470.8L562.6%20473.8L563.7%20475.2L562.6%20478.7L563.7%20479.9L562.6%20480.4L565.4%20484.3L563.0%20487.9L563.2%20489.7L568.5%20493.9L569.2%20498.3L564.7%20508.0L554.9%20518.2L541.9%20526.3L534.0%20532.9L524.6%20534.7L517.5%20539.0L514.2%20539.0L503.5%20543.1L485.0%20546.0L473.1%20554.5L461.3%20566.5L469.3%20567.7L472.4%20565.8L477.6%20568.7L479.3%20571.9L479.3%20582.0L477.5%20587.9L474.4%20593.4L467.3%20600.2L462.5%20602.1L457.0%20602.4L448.6%20599.4L446.5%20600.2L442.5%20598.5L434.7%20598.5L425.4%20600.7L420.1%20603.5L407.7%20605.3L394.9%20612.3L388.6%20611.6L383.8%20612.6L377.9%20610.9L367.4%20611.2L362.1%20610.0L357.7%20610.9L356.9%20613.4L351.4%20615.8L336.0%20613.7L326.7%20615.6L320.3%20618.9L314.1%20625.7L311.7%20626.2L313.2%20627.0L312.0%20630.5L313.8%20630.8L314.1%20633.6L308.5%20642.4L301.0%20650.5L286.5%20660.5L280.1%20662.5L277.0%20660.6L277.4%20659.6L271.8%20662.9L269.8%20661.5L267.6%20662.8L268.7%20666.7L264.4%20672.4L249.2%20683.0L245.7%20683.4L245.6%20684.9L241.1%20686.0L241.8%20687.3L238.4%20688.9L238.6%20691.4L235.4%20694.2L228.7%20696.1L223.7%20694.9L222.5%20691.7L219.2%20692.1L218.2%20693.5L214.0%20693.1L211.6%20694.5L211.5%20696.0L209.3%20695.6L208.5%20697.8L206.4%20698.7L208.5%20699.1L207.4%20699.6L208.6%20701.6L206.6%20702.1L207.7%20704.1L205.9%20704.6L205.6%20708.1L201.7%20708.3L201.2%20710.9L199.9%20710.4L199.2%20712.1L197.7%20711.8L196.4%20713.0L195.4%20714.1L196.2%20716.1L194.2%20716.9L193.1%20719.7L190.7%20720.4L186.5%20726.6L179.6%20726.8L176.2%20730.2L176.9%20731.4L173.7%20733.1L172.6%20736.4L170.5%20737.0L170.1%20738.4L171.5%20739.5L177.5%20739.0L183.1%20740.3L187.5%20736.7L194.0%20736.4L197.1%20734.5L197.1%20732.7L198.9%20732.3L198.9%20730.4L201.7%20728.1L206.0%20726.8L213.1%20728.8L213.2%20732.0L216.5%20728.9L214.9%20728.9L215.1%20727.8L218.4%20723.4L225.1%20720.7L235.4%20722.0L244.0%20728.4L246.1%20732.1L252.1%20732.1L253.5%20734.7L256.9%20735.7L263.1%20730.5L261.6%20728.6L268.2%20721.8L274.5%20719.3L280.3%20719.4L287.2%20722.7L284.7%20726.8L285.9%20732.7L288.0%20733.5L291.1%20723.0L293.2%20719.8L300.6%20712.5L307.7%20703.1L312.7%20699.3L326.3%20697.2L335.2%20700.9L336.4%20703.3L335.1%20704.0L335.9%20706.4L341.2%20706.0L344.3%20704.5L347.1%20699.5L351.2%20698.0L353.6%20694.9L362.9%20689.2L380.4%20674.7L390.0%20671.1L401.9%20670.4L407.7%20671.2L423.0%20677.2L427.0%20680.0L426.6%20685.9L431.7%20693.1L431.8%20695.0L426.5%20705.3L427.8%20708.3L435.7%20706.9L443.6%20702.1L456.3%20701.2L458.1%20702.2L464.1%20695.8L473.0%20693.0L477.6%20694.1L482.9%20698.4L486.8%20698.2L489.1%20695.9L488.9%20693.0L492.1%20689.1L498.8%20689.8L501.7%20687.5L506.1%20687.1L508.4%20683.1L513.1%20682.5L511.6%20681.2L512.3%20680.0L517.8%20680.7L524.2%20679.3L527.5%20676.5L529.0%20677.9L529.7%20676.1L527.8%20675.3L527.7%20673.8L534.3%20670.4L538.6%20662.2L538.7%20657.3L543.3%20649.5L551.3%20645.5L554.9%20641.4L554.9%20638.2L557.4%20635.2L557.0%20627.4L558.0%20625.2L563.4%20624.3L565.9%20627.9L563.6%20639.6L557.5%20646.4L560.9%20644.7L565.9%20636.8L576.8%20629.2L577.5%20625.0L578.8%20623.6L582.2%20623.1L582.5%20624.9L584.8%20627.0L590.0%20627.7L591.2%20629.0L593.5%20627.7L595.4%20628.5L594.2%20627.2L595.3%20623.9L598.1%20621.8L599.5%20618.9L603.2%20619.4L604.7%20621.1L608.7%20619.9L615.9%20620.0L621.5%20617.3L623.1%20615.3L630.7%20613.1L634.8%20601.2L640.4%20600.4L641.0%20599.2L642.7%20592.4L647.3%20588.8L658.6%20592.0L670.7%20590.5L669.6%20592.1L670.5%20592.3L675.0%20589.0L676.4%20589.6L676.5%20588.3L678.6%20588.5L681.8%20584.9L686.0%20586.0L685.1%20583.2L686.4%20583.2L686.5%20579.7L689.2%20576.8L684.9%20571.3L688.6%20568.6L687.8%20567.1L689.5%20565.8L695.4%20564.3L700.6%20564.8L701.6%20565.8L706.4%20565.1L710.0%20562.0L715.1%20561.9L730.7%20552.0L740.3%20549.9L746.7%20544.5L758.1%20542.4L763.5%20538.5L765.9%20538.2L766.9%20540.0L773.2%20538.5L774.1%20537.1L770.4%20533.4L773.6%20530.6L774.3%20528.6L773.2%20526.9L774.7%20525.5L767.9%20525.7L766.4%20522.6L767.2%20520.5L768.8%20519.4L771.0%20520.1L772.4%20518.7L769.4%20518.6L768.3%20515.1L770.8%20513.0L774.3%20513.5L774.7%20511.0L777.7%20508.5L784.6%20505.4L788.7%20497.4L787.8%20495.7L788.0%20490.9L791.4%20486.8L797.8%20487.3L801.3%20492.4L805.6%20493.3L812.1%20500.0L813.9%20498.9L818.3%20499.1L820.4%20497.6L829.0%20496.9L832.0%20493.6L834.9%20487.5L833.7%20486.4L843.2%20485.0L845.4%20486.8L851.7%20487.1L861.2%20481.0L855.5%20471.1L858.4%20466.7L861.2%20465.3L869.8%20465.2L871.8%20468.2L874.4%20467.8L874.2%20465.9L876.3%20462.2L874.3%20455.1L877.0%20452.8L876.4%20450.6L873.7%20449.2L876.1%20439.3L874.8%20431.2L877.3%20428.6L881.1%20428.6L885.7%20423.3L889.1%20423.5L890.3%20425.3L891.0%20418.7L894.3%20415.4L895.5%20409.2L894.1%20405.7L890.6%20402.8L888.4%20403.4L884.4%20407.4L879.9%20404.5L878.6%20401.0L877.1%20402.1L876.0%20401.6L869.0%20391.2L869.9%20383.6L876.7%20377.2L883.2%20376.4L886.8%20367.1L892.2%20360.3L896.7%20359.4L900.0%20356.7L908.7%20355.5L910.3%20353.4L913.5%20352.4L915.2%20350.2L916.1%20345.2L919.1%20342.3L919.6%20338.6L926.2%20332.4L929.5%20327.4L930.0%20321.7L936.0%20320.0L942.7%20321.3L947.4%20317.4L941.9%20313.2L941.0%20309.7L942.8%20307.4L938.0%20305.5L937.9%20300.6L938.8%20298.5L945.4%20293.9L947.1%20287.3L949.8%20284.0L949.6%20280.8L949.1%20279.8L942.2%20281.9L940.6%20279.8L937.3%20279.8L933.5%20284.3L934.5%20288.3L930.8%20289.1L928.5%20291.8L926.4%20297.0L927.2%20300.6L926.1%20302.3L920.0%20304.9L918.1%20308.5L913.4%20310.2L914.2%20308.9L912.5%20309.2L912.6%20308.3L900.4%20316.0L894.5%20322.0L896.2%20327.6L893.0%20331.6L887.9%20330.9L884.6%20332.0L881.2%20329.6L875.2%20329.4L863.0%20330.9L847.7%20341.8L830.7%20347.4L823.5%20353.7L815.4%20357.4L808.3%20354.2L803.2%20348.6L803.0%20346.1L806.4%20340.4L806.6%20337.8L800.3%20339.9L791.3%20339.6L774.3%20347.8L765.3%20349.4L762.9%20352.4L758.7%20353.6L747.5%20361.3L743.2%20362.1L737.9%20365.9L729.6%20365.2L719.9%20354.5L715.5%20353.1L712.6%20354.5L708.8%20359.7L693.3%20369.1L678.6%20373.3L673.8%20376.2L664.0%20379.6L660.0%20378.7L654.3%20380.7L653.1%20380.1L646.5%20383.8L636.7%20392.5L630.7%20393.1L617.2%20398.1L608.2%20405.7L608.0%20409.1L605.1%20408.8L588.2%20419.4L588.7%20421.7L585.7%20425.3L584.5%20424.0L581.3%20426.0L579.6%20424.8L574.5%20427.5L575.1%20426.1L572.2%20429.8Z'%20fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect%20width='1000'%20height='1000'%20fill='%23fff'%20mask='url(%23m)'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (max-width: 1200px) {
  :root {
    --gutter: 48px;
    --section: 104px;
  }
}
@media (max-width: 760px) {
  :root {
    --gutter: 20px;
    --section: 76px;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 24px;
  scrollbar-color: var(--ink-soft) var(--paper);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--display);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ink);
}
::selection {
  background: var(--ink);
  color: var(--paper);
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
button {
  font: inherit;
  color: inherit;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
p,
h1,
h2,
h3,
dl,
dd,
figure {
  margin: 0;
}
sup {
  font-size: 0.55em;
  line-height: 0;
  vertical-align: 0.62em;
  letter-spacing: 0;
}
.skip {
  position: absolute;
  left: 20px;
  top: -80px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

/* Microprint: real copy at the note's edge, hidden from readers. */
.micro {
  font: 500 7px/16px var(--display);
  font-stretch: 70%;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 var(--gutter);
  background: var(--field);
  color: var(--ink);
  opacity: 0.62;
  user-select: none;
}

/* Issuing line: the wordmark is the authority. */
.issue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 26px var(--gutter) 0;
  background: var(--field);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-ai {
  color: var(--machine);
}
/* The Pixel-Island mark: twelve cells of the 8x8 grid, Anguilla's silhouette,
   The Valley as the one teal cell. Drawn inline so the ink follows the text. */
.mark {
  display: block;
  flex: none;
  height: 0.76em;
  width: auto;
  fill: currentColor;
  overflow: visible;
}
.mark .valley {
  fill: var(--island);
}
.mark-stub {
  height: 18px;
  color: var(--ink);
}
.issue nav {
  display: flex;
  margin-left: auto;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}
.issue nav a {
  padding: 12px 0;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .issue nav a:hover {
    text-decoration-color: var(--ink);
  }
}

/* Print fields. On the teal field the machine ink runs darker for contrast. */
.note,
.issue,
.issue-foot,
.micro {
  --machine: var(--machine-on-field);
}
.note {
  position: relative;
  background: var(--field);
  color: var(--ink);
}
.paper {
  background: var(--paper);
  padding: var(--section) var(--gutter);
}
.ruling {
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: calc(100% - 2 * var(--gutter));
  height: 100%;
  pointer-events: none;
  color: var(--ink);
  opacity: 0.16;
}
.ruling path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.band {
  height: 26px;
  margin: 0 var(--gutter);
  color: var(--ink);
  opacity: 0.55;
}
.band svg {
  display: block;
  width: 100%;
  height: 100%;
}
.band use,
.band path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.rosette {
  position: absolute;
  z-index: 0;
  width: 320px;
  height: 320px;
  color: var(--ink);
  opacity: 0.85;
  pointer-events: none;
}
.rosette svg {
  display: block;
  width: 100%;
  height: 100%;
}
.rosette use,
.rosette ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
/* Side microprint: the note's left and right edges, inside the gutter. */
.micro-side {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  overflow: hidden;
  writing-mode: vertical-rl;
  font: 500 7px/16px var(--display);
  font-stretch: 70%;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.62;
  user-select: none;
  pointer-events: none;
}
.micro-side.left {
  left: 22px;
  bottom: 150px;
}
.micro-side.right {
  right: 22px;
  top: 440px;
}

/* Hero: the note front. The clear window is the whole front: the island in
   an engraved sea that breathes, sheds pixels at its shore and drifts under
   the weather. */
.hero {
  --pool: 170px;
  overflow: hidden;
  padding: 22px var(--gutter) 0;
}
.hero .band {
  margin: 0;
}
.sea-window {
  position: relative;
  z-index: 1;
  height: calc(100svh - 230px);
  min-height: 540px;
  max-height: 1040px;
  margin-top: 12px;
  padding: 20px;
  background: var(--paper-bright);
  overflow: hidden;
}
.plate,
.sea-window .layer,
.sea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.plate {
  transform-origin: 50% 50%;
}
.sea-window svg {
  display: block;
}
.grid-layer .ruling-lines {
  stroke: var(--ink);
  stroke-opacity: 0.16;
  stroke-width: 1;
}
/* The sea: two swell layers and the foam, masked out of the island. */
.sea {
  color: var(--ink);
  -webkit-mask-image: var(--sea-mask);
  mask-image: var(--sea-mask);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Each swell layer is one wavelength wider than the plate and loops by that
   wavelength, so the raster is 120 percent of the plate, not 200. */
.swell {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
}
.swell use {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}
.swell-a {
  opacity: 0.48;
}
.swell-b {
  opacity: 0.3;
  transform: translateX(-16.667%);
}
.swell-c {
  width: 125%;
  opacity: 0.2;
}

.foam circle {
  fill: var(--ink);
  fill-opacity: 0.55;
}
.foam .far {
  fill-opacity: 0.3;
}
/* The pixels: the island as bits, shown inside a soft pool under the pointer.
   The pool is a small masked window that moves with the pointer; the pixel
   layer moves the opposite way inside it, so the island stays put and both
   moves are compositor transforms: nothing repaints while the pointer runs. */
.pool {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--pool) * 2);
  height: calc(var(--pool) * 2);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(
    circle closest-side,
    #000 0%,
    rgba(0, 0, 0, 0.85) 42%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle closest-side,
    #000 0%,
    rgba(0, 0, 0, 0.85) 42%,
    transparent 100%
  );
  transition: opacity var(--mid) var(--ease);
  will-change: transform;
}
.js .is-lit .pool {
  opacity: 1;
}
.pool .bits-layer {
  inset: auto;
  left: 0;
  top: 0;
  will-change: transform;
}
.bits-layer .pixels rect {
  fill: var(--island);
  fill-opacity: 0.94;
}
.bits-layer .pixels .px-b {
  fill-opacity: 0.8;
}
.bits-layer .pixels .px-c {
  fill-opacity: 0.66;
}
.bits-layer .pixels .px-edge {
  fill: var(--ink);
  fill-opacity: 0.88;
}
/* The glint: a second hatch, half a period over, that fades in and out so
   the lines seem to drift like light on water. Hidden until the coast draws. */
.glint-layer {
  opacity: 0;
}
.glint-layer .coast-glint {
  fill: url(#hatch-glint);
  stroke: none;
}
.coast-layer .hatch-glint-line {
  stroke: var(--ink);
  stroke-opacity: 0.3;
  stroke-width: 1.4;
}
/* The motes: a pool of tiny squares the compositor moves. Each is placed at
   its start and transitioned to its end in steps, so nothing redraws per
   frame; the dust loops on keyframes. Tones by class. */
.motes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.motes i {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  background: currentColor;
  opacity: 0;
}
.motes .i-ink {
  color: rgba(12, 31, 26, 0.85);
}
.motes .i-island {
  color: rgba(31, 143, 130, 0.9);
}
.motes .i-foam {
  color: rgba(238, 247, 244, 0.92);
}
.motes .i-paper {
  color: rgba(238, 247, 244, 0.9);
}
.motes .i-faint {
  color: rgba(12, 31, 26, 0.28);
}
.motes .i-sea {
  color: rgba(77, 191, 176, 0.8);
}
.motes .dust {
  will-change: transform, opacity;
  animation: dust-drift var(--life) linear var(--delay) infinite;
}
@keyframes dust-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(40px, -36px, 0);
  }
}
.sea-paused .motes .dust {
  animation-play-state: paused;
}
.lite .motes .dust {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .motes {
    display: none;
  }
}
.coast-layer .coast {
  fill: url(#hatch);
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.coast-layer .hatch-line {
  stroke: var(--island);
  stroke-width: 1.7;
}
/* The weather: three cloud shadows cross the plate on long linear loops.
   Each rests at its loop's opening position when it does not move. */
.weather {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.weather span {
  position: absolute;
  left: 0;
  top: var(--top);
  width: var(--w);
  height: var(--h);
  background:
    radial-gradient(
      closest-side at 44% 48%,
      rgba(12, 31, 26, 0.17),
      rgba(12, 31, 26, 0.1) 42%,
      rgba(12, 31, 26, 0) 72%
    ),
    radial-gradient(
      closest-side at 62% 54%,
      rgba(12, 31, 26, 0.13),
      rgba(12, 31, 26, 0.07) 42%,
      rgba(12, 31, 26, 0) 72%
    );
  transform: translateX(var(--rest));
  will-change: transform;
}
.weather span:nth-child(1) {
  --w: 58%;
  --h: 34%;
  --top: 4%;
  --rest: -8%;
  --run: 173%;
  --run-time: 38s;
  --run-delay: -21s;
}
.weather span:nth-child(2) {
  --w: 65%;
  --h: 40%;
  --top: 36%;
  --rest: 78%;
  --run: 154%;
  --run-time: 50s;
  --run-delay: -55s;
}
.weather span:nth-child(3) {
  --w: 52%;
  --h: 32%;
  --top: 62%;
  --rest: -41%;
  --run: 193%;
  --run-time: 30s;
  --run-delay: -9s;
}
/* Sun between the clouds: the paper brightens and the lines wash out. */
.weather .sun {
  background: radial-gradient(
    closest-side at 50% 50%,
    rgba(238, 247, 244, 0.6),
    rgba(238, 247, 244, 0.32) 42%,
    rgba(238, 247, 244, 0) 72%
  );
}
.weather span:nth-child(4) {
  --w: 48%;
  --h: 30%;
  --top: 16%;
  --rest: 34%;
  --run: 210%;
  --run-time: 34s;
  --run-delay: -12s;
}
.weather span:nth-child(5) {
  --w: 42%;
  --h: 28%;
  --top: 50%;
  --rest: -28%;
  --run: 240%;
  --run-time: 42s;
  --run-delay: -30s;
}

.register {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
.register:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}
/* The copy prints over the sea on its own paper. */
.hero-copy {
  position: absolute;
  z-index: 3;
  left: clamp(20px, 3.6%, 56px);
  bottom: clamp(22px, 5%, 56px);
  max-width: min(900px, 72%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
.hero-copy > * {
  pointer-events: auto;
}
.hero-copy::before {
  pointer-events: none;
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80px -180px -60px -140px;
  pointer-events: none;
  background: radial-gradient(
    ellipse closest-side at 50% 52%,
    rgba(238, 247, 244, 0.94) 30%,
    rgba(238, 247, 244, 0.78) 55%,
    rgba(238, 247, 244, 0.35) 78%,
    rgba(238, 247, 244, 0) 100%
  );
}
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  font-size: clamp(30px, 3.9vw, 58px);
  line-height: 1.02;
  font-stretch: 104%;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 24ch;
}
.hero-line {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.5;
  max-width: 40ch;
  color: var(--ink-soft);
}
.actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.button {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--fast) var(--ease),
    color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: var(--ink);
    color: var(--paper);
  }
}
.button:active {
  transform: scale(0.97);
}
.link {
  display: inline-block;
  padding: 12px 0;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover {
    text-decoration-color: var(--ink);
  }
}
.window-caption {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding-bottom: 28px;
  font: 600 12px/1.4 var(--display);
  font-stretch: 82%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-field);
}
.window-caption .register-hint {
  margin-left: auto;
}
.rosette-hero {
  z-index: 2;
  top: -118px;
  right: -150px;
  opacity: 0.7;
}
.rosette-hero-left {
  z-index: 2;
  bottom: -150px;
  left: -180px;
}

/* Headings on the paper and the note */
h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 60px;
  font-size: clamp(34px, 4.3vw, 60px);
  line-height: 1.03;
  font-stretch: 108%;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 18ch;
}
.lead {
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* The studio: one claim, then what we make as printed fields with real visuals */
.studio-columns {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 32px 6%;
  align-items: start;
  margin-top: clamp(28px, 3vw, 44px);
  max-width: 1120px;
}
.studio-columns p:not(.lead) {
  color: var(--ink-soft);
  max-width: 58ch;
  padding-top: 6px;
}
.fields-grid {
  list-style: none;
  margin: clamp(56px, 7vw, 104px) 0 0;
  padding: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 4%;
  border-top: 1px solid var(--line-strong);
}
.fields-grid li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.field-window,
.window-wide {
  background-color: var(--paper-bright);
  background-image:
    linear-gradient(to right, rgba(12, 31, 26, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(12, 31, 26, 0.1) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}
.field-window {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 14px;
  overflow: hidden;
}
/* Engraved plates: one ink keyed onto the window paper, lit from behind on hover. */
.plate-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fields-grid h3 {
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  font-stretch: 105%;
  letter-spacing: -0.02em;
}
.fields-grid p:not(.field-caption) {
  margin-top: 10px;
  color: var(--ink-soft);
  max-width: 36ch;
  text-wrap: pretty;
}
.field-caption {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  font: 600 12px/1.4 var(--display);
  font-stretch: 82%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Selected work: Argus, an engraved proof that develops into the product */
.work {
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--line-strong);
}
.work-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px 48px;
  flex-wrap: wrap;
}
.work-head h2 {
  font-size: clamp(66px, 9.4vw, 138px);
  font-stretch: 118%;
  letter-spacing: -0.045em;
  line-height: 0.92;
  max-width: none;
}
.period {
  color: var(--machine);
}
.work-head p {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 500;
  line-height: 1.3;
  max-width: 16ch;
  letter-spacing: -0.01em;
}
.work-proof {
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
}
.window-wide {
  padding: 28px;
}
.work-caption {
  padding-bottom: 0;
  color: var(--ink-soft);
}
.work-caption-end {
  margin-left: auto;
}
.work-intro {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 18px 6%;
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}
.work-intro .lead {
  max-width: 18ch;
}
.work-copy p {
  color: var(--ink-soft);
  max-width: 56ch;
  padding-top: 6px;
}
.work-copy .actions {
  margin-top: 22px;
}

/* The proof stage: Argus in its own material (the Dawn wallpaper, glass,
   Geist, the Beacon's violet, crimson once), the one place on the note it
   appears, as the captures were before it. home.js clones the render as
   .ar-proof, the same layout in the note's ink on window paper, and slides
   it off by two compositor transforms as the window scrolls into place. */
.proof-stage {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(60% 45% at 18% 18%, rgba(255, 227, 204, 0.75) 0%, rgba(255, 227, 204, 0) 70%),
    radial-gradient(55% 40% at 82% 12%, rgba(196, 214, 238, 0.95) 0%, rgba(196, 214, 238, 0) 70%),
    radial-gradient(70% 50% at 50% 110%, rgba(86, 150, 168, 0.85) 0%, rgba(86, 150, 168, 0) 70%),
    linear-gradient(180deg, #e9eef6 0%, #dce4ee 45%, #bfd3d8 100%);
}
.ar {
  --a-ink: #20242b;
  --a-dim: #4f5763;
  --a-faint: #626d7a;
  --a-line: rgba(32, 36, 43, 0.09);
  --a-line-strong: rgba(32, 36, 43, 0.18);
  --a-edge: rgba(255, 255, 255, 0.8);
  --a-surface: rgba(253, 253, 254, 0.9);
  --a-chrome: rgba(247, 248, 252, 0.72);
  --a-recessed: #eff1f4;
  --a-violet: #7651a6;
  --a-violet-ink: #5b3d86;
  --a-wash: rgba(118, 81, 166, 0.08);
  --a-crimson: #c0232a;
  padding: 4.6cqw 5.4cqw;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-size: clamp(12px, 1.34cqw, 15px);
  line-height: 1.4;
  color: var(--a-ink);
  -webkit-font-smoothing: antialiased;
}
.ar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar-win {
  border-radius: 1.5em;
  background: var(--a-surface);
  box-shadow:
    inset 0 1px 0 var(--a-edge),
    0 2px 4px rgba(16, 22, 34, 0.05),
    0 40px 90px -40px rgba(16, 22, 34, 0.45);
  overflow: hidden;
}
.ar-top {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.65em 1.1em;
  border-bottom: 1px solid var(--a-line);
  background: var(--a-chrome);
}
.ar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  font-size: 1.05em;
  letter-spacing: -0.03em;
}
.ar-beacon {
  width: auto;
  height: 1.05em;
  fill: var(--a-ink);
}
.ar-beacon .band-signal,
.ar-dot {
  fill: var(--a-violet);
  color: var(--a-violet);
}
.ar-search {
  flex: 1;
  max-width: 22em;
  margin: 0 auto;
  padding: 0.45em 0.85em;
  border: 1px solid transparent;
  border-radius: 0.65em;
  background: var(--a-recessed);
  color: var(--a-faint);
  font-size: 0.92em;
}
.ar-me {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border: 1px solid var(--a-line-strong);
  border-radius: 50%;
  font-size: 0.78em;
  font-weight: 600;
}
.ar-body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
}
.ar-rail {
  padding: 1.15em 1.2em 1.3em;
  border-right: 1px solid var(--a-line);
}
.ar-rail-k {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.55em;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--a-dim);
}
.ar-meets-k {
  margin-top: 1.5em;
}
.ar-meets li {
  padding: 0.75em 0;
  border-top: 1px solid var(--a-line);
}
.ar-sig {
  position: relative;
  padding: 0.75em 0 0.75em 1.1em;
  border-top: 1px solid var(--a-line);
  transition: opacity var(--mid) var(--ease);
}
.ar-sig::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 0.45em;
  height: 0.45em;
  border: 1px solid var(--a-violet);
  border-radius: 50%;
  background: var(--a-violet);
  transition: transform var(--mid) var(--ease);
}
.ar-tag {
  display: block;
  font-size: 0.74em;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--a-faint);
}
.ar-sig-t {
  display: block;
  margin-top: 0.15em;
  font-weight: 500;
}
.ar-acct {
  padding: 1.25em 1.5em 1.4em;
}
.ar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
}
.ar-name {
  font-size: 1.8em;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.ar-sub {
  margin-top: 0.25em;
  font-size: 0.86em;
  color: var(--a-dim);
}
.ar-pill {
  flex: none;
  padding: 0.35em 0.75em;
  border: 1px solid var(--a-line-strong);
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--a-dim);
}
.ar-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.15em;
  border-top: 1px solid var(--a-line);
  border-bottom: 1px solid var(--a-line);
}
.ar-stats div {
  padding: 0.75em 1em 0.8em;
}
.ar-stats div:first-child {
  padding-left: 0;
}
.ar-stats div + div {
  border-left: 1px solid var(--a-line);
}
.ar-stats dt {
  font-size: 0.78em;
  color: var(--a-dim);
}
.ar-stats dd {
  margin-top: 0.15em;
  font-size: 1.4em;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ar-quads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ar-quad {
  position: relative;
  padding: 0.9em 1em 0.95em;
  border-bottom: 1px solid var(--a-line);
}
.ar-quad:nth-child(odd) {
  padding-left: 0;
}
.ar-quad:nth-child(even) {
  border-left: 1px solid var(--a-line);
}
/* The feed: a signal arriving draws a violet rule over the quarter it fills. */
.ar-quad::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--a-violet);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform var(--mid) var(--ease),
    opacity var(--mid) var(--ease);
}
.ar-quad.is-fed::after {
  opacity: 1;
  transform: none;
}
.ar-k {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--a-dim);
  transition: color var(--mid) var(--ease);
}
.ar-quad.is-fed .ar-k {
  color: var(--a-violet-ink);
}
.ar-v {
  margin-top: 0.3em;
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.ar-risk .ar-v {
  color: var(--a-crimson);
}
.ar-s {
  margin-top: 0.1em;
  font-size: 0.8em;
  color: var(--a-dim);
}
.ar-next {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  margin-top: 1.1em;
  padding: 0.75em 0.95em;
  border: 1px solid transparent;
  border-radius: 0.85em;
  background: var(--a-wash);
  font-weight: 500;
  transition: background-color var(--mid) var(--ease);
}
.ar-next-k {
  font-size: 0.76em;
  font-weight: 500;
  color: var(--a-violet-ink);
  transition: color var(--mid) var(--ease);
}
/* Before the signals arrive (home.js arms the stage when motion is allowed):
   the rail waits at half strength and the next step is not yet drafted. */
.proof-stage.is-armed .ar-live .ar-sig:not(.is-in) {
  opacity: 0.45;
}
.proof-stage.is-armed .ar-live .ar-sig:not(.is-in)::before {
  transform: scale(0.4);
}
.proof-stage.is-armed .ar-live .ar-next:not(.is-in) {
  background-color: transparent;
}
.proof-stage.is-armed .ar-live .ar-next:not(.is-in) .ar-next-k {
  color: var(--a-dim);
}

/* The engraved proof: the same render in the note's one ink on window paper
   with its ruling, hatched where the product has tone. */
.proof-sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.proof-plate {
  position: absolute;
  inset: 0;
  background-color: var(--paper-bright);
  background-image:
    linear-gradient(to right, rgba(12, 31, 26, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(12, 31, 26, 0.1) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}
.proof-stage.is-near .proof-sheet,
.proof-stage.is-near .proof-plate {
  will-change: transform;
}
.ar-proof {
  --a-ink: var(--ink);
  --a-dim: var(--ink-soft);
  --a-faint: var(--ink-soft);
  --a-line: var(--line);
  --a-line-strong: var(--line-strong);
  --a-edge: var(--ink);
  --a-surface: transparent;
  --a-chrome: transparent;
  --a-recessed: transparent;
  --a-violet: var(--ink);
  --a-violet-ink: var(--ink);
  --a-wash: transparent;
  --a-crimson: var(--ink);
}
.ar-proof .ar-win {
  box-shadow: inset 0 0 0 1px var(--ink);
}
.ar-proof .ar-top,
.ar-proof .ar-risk {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='7'%3E%3Cpath%20d='M-1%208L8%20-1'%20stroke='%230c1f1a'%20stroke-opacity='.3'/%3E%3C/svg%3E");
}
.ar-proof .ar-search,
.ar-proof .ar-next {
  border-color: var(--line-strong);
}
.ar-proof .ar-sig::before {
  background: transparent;
}
.ar-proof .ar-beacon,
.ar-proof .ar-beacon .band-signal {
  fill: none;
  stroke: var(--ink);
  stroke-width: 9;
}
/* The burin: the ink line at the developing edge, with a run of the note's
   microprint engraved along the proof side of it. */
.proof-burin {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mid) var(--ease);
}
.proof-burin span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  padding: 0 3px;
  overflow: hidden;
  background: var(--paper-bright);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font: 500 7px/16px var(--display);
  font-stretch: 70%;
  letter-spacing: 0.03em;
  color: var(--ink);
  opacity: 0.62;
}
.proof-stage.is-developing .proof-burin {
  opacity: 1;
}
@container (max-width: 720px) {
  .ar {
    padding: 5cqw 4.4cqw;
    font-size: 13px;
  }
  .ar-meets-k,
  .ar-meets {
    display: none;
  }
  .ar-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ar-rail {
    order: 2;
    padding: 0.9em 1.1em 1em;
    border-right: 0;
    border-top: 1px solid var(--a-line);
  }
  .ar-search {
    visibility: hidden;
  }
  .ar-acct {
    padding: 1.1em 1.1em 1.2em;
  }
  .ar-name {
    font-size: 1.5em;
  }
  .ar-stats div {
    padding: 0.65em 0.6em 0.7em;
  }
  .ar-stats dd {
    font-size: 1.15em;
  }
  .ar-quad {
    padding: 0.8em 0.7em 0.85em;
  }
}

/* Contact: the counterfoil, the loudest printed field on the note */
.tear-edge {
  position: absolute;
  top: -2px;
  left: -1.5px;
  right: -1.5px;
  height: 4px;
}
.tear-edge svg {
  display: block;
  width: 100%;
  height: 4px;
}
.tear {
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}
.tear-draw {
  stroke: #fff;
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.contact {
  overflow: hidden;
  padding: 72px var(--gutter) var(--section);
}
.contact h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(48px, 7.6vw, 116px);
  font-stretch: 118%;
  letter-spacing: -0.045em;
  line-height: 0.92;
  max-width: 11ch;
}
.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px 6%;
  align-items: start;
  margin-top: clamp(32px, 4vw, 56px);
}
.contact-copy > p {
  line-height: 1.55;
  color: var(--ink-field);
  max-width: 34ch;
  text-wrap: pretty;
  font-size: clamp(18px, 1.6vw, 21px);
}
.contact-email {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.3vw, 48px);
  line-height: 1.15;
  font-stretch: 108%;
  letter-spacing: -0.03em;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .contact-email:hover {
    text-decoration-color: var(--ink);
  }
}
.draft-kinds {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.draft-kinds[hidden] {
  display: none;
}
.draft-kinds button {
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--fast) var(--ease),
    color var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .draft-kinds button:hover {
    border-color: var(--ink);
  }
}
.draft-kinds button:active {
  transform: scale(0.97);
}
.draft-kinds button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.contact-desk {
  min-width: 0;
}
.draft-card {
  position: relative;
  min-width: 0;
  padding: 34px 34px 0;
  border: 1.5px solid var(--ink);
  border-top-color: transparent;
  background-color: var(--paper-bright);
  background-image:
    linear-gradient(to right, rgba(12, 31, 26, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(12, 31, 26, 0.08) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}
.draft-micro {
  margin: 24px -34px 0;
  padding: 0 34px;
  border-top: 1px solid var(--line);
  font: 500 7px/16px var(--display);
  font-stretch: 70%;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink);
  opacity: 0.62;
  user-select: none;
}
.draft-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
  font: 600 12px/1.4 var(--display);
  font-stretch: 82%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.draft-address {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.draft-address > span:first-child {
  color: var(--ink-soft);
}
#draft-subject {
  transition: opacity var(--fast) var(--ease);
}
#draft-subject.is-swapping {
  opacity: 0;
}
.draft-address a {
  display: inline-block;
  padding: 11px 0;
  margin: -11px 0;
  text-decoration-color: var(--line-strong);
}
.draft-label {
  display: block;
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
textarea {
  display: block;
  width: 100%;
  min-height: 148px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: #f7fbf9;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  border-radius: 0;
}
textarea::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}
textarea:disabled {
  background: var(--paper);
  color: var(--ink-soft);
}
.draft-card-bottom {
  display: flex;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.draft-card-bottom > span {
  font-size: 13px;
  color: var(--ink-soft);
}
.draft-overflow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  font-size: 14px;
  color: var(--ink-soft);
}
.draft-overflow[hidden] {
  display: none;
}
.draft-copy {
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .draft-copy:hover {
    border-color: var(--ink);
  }
}
.draft-copy:active {
  transform: scale(0.97);
}
.draft-send {
  display: inline-flex;
  align-items: center;
  padding: 16px 26px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--fast) var(--ease),
    color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .draft-send:hover {
    background: transparent;
    color: var(--ink);
  }
}
.draft-send:active {
  transform: scale(0.97);
}
.rosette-contact {
  left: -140px;
  bottom: -90px;
  opacity: 1;
}
.rosette-contact-right {
  right: -170px;
  top: -120px;
  opacity: 1;
}

/* Footer */
.issue-foot {
  display: flex;
  align-items: center;
  gap: 16px 36px;
  flex-wrap: wrap;
  padding: 26px var(--gutter) 24px;
  background: var(--field);
  font-size: 14px;
  color: var(--ink-field);
}
.issue-foot .brand {
  color: var(--ink);
}
.issue-foot a:not(.brand) {
  display: inline-block;
  padding: 12px 0;
  text-decoration-color: var(--line-strong);
}
@media (hover: hover) and (pointer: fine) {
  .issue-foot a:not(.brand):hover {
    text-decoration-color: var(--ink);
  }
}
.issue-foot .foot-end {
  margin-left: auto;
}

/* Motion: one ambient loop (the sea), one authored interaction (the light),
   one entrance (the note prints itself), press impressions on controls. */
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.motion-ready .reveal.in {
  opacity: 1;
  transform: none;
}
@keyframes print {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sweep {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes engrave {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
/* The print-in and the sea's loops start at first paint; only the visitor's
   motion preference gates them, never the script's arrival. */
@media (prefers-reduced-motion: no-preference) {
  /* Order of printing: masthead (0.2s), headline (0.4s), ruling (0.3s), then
     the sea rises at 0.6s and the coast fades in at 0.9s (opacity only: a
     clip-path wipe on a layer this size may still be painted per frame). The
     first half second moves only text, so the browser can rasterise the sea's
     layers before they have to move. */
  .grid-layer {
    animation: fadein 0.8s var(--ease) 0.3s both;
  }
  /* The sea holds still: its lines are engraved, not moving. Only the fade
     in remains; the weather passes over it and the shore sheds pixels. */
  .sea {
    animation: sweep 1.4s var(--ease) 0.6s both;
  }
  .foam {
    animation:
      fadein 0.9s var(--ease) 1.6s backwards,
      foam-drift 12s ease-in-out 2.5s infinite;
  }
  .glint-layer {
    animation: glint 6s ease-in-out 2.6s infinite alternate backwards;
  }
  .coast-layer {
    animation: fadein 0.9s var(--ease) 0.9s both;
  }
}
/* Weather: the one ambient loop over the sea, resting with it off screen. */
@keyframes glint {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes foam-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(7px, -4px);
  }
}
@keyframes weather-drift {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(var(--run));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .weather span {
    animation: weather-drift var(--run-time) linear var(--run-delay) infinite;
  }
}
.sea-paused .foam,
.sea-paused .glint-layer,
.sea-paused .weather span {
  animation-play-state: paused;
}
/* The thinner note (html.lite, set by home.js when frames are slow): the
   weather and the dust go; the engraved sea and the shore's pixels stay.
   ?sea=0 (html.nosea) hides the swell lines altogether, for comparison. */
.lite .weather,
.lite .glint-layer {
  display: none;
}
.nosea .swell {
  display: none;
}
/* ?still=1 (html.still): every hero loop and entrance held, no motes. */
.still .sea,
.still .foam,
.still .glint-layer,
.still .weather span,
.still .grid-layer,
.still .coast-layer,
.still .brand,
.still .hero-copy > *,
.still .hero .window-caption {
  animation: none;
}
.still .motes {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .sea-window .glint-layer {
    display: none;
  }
  .weather span {
    opacity: 0.5;
  }
}
@media (max-width: 900px) {
  /* Portrait plate: two shadows, flatter. */
  .weather {
    height: 130%;
  }
  .weather span:nth-child(1) {
    --w: 74%;
    --h: 20%;
    --run: 136%;
  }
  .weather span:nth-child(2) {
    --w: 82%;
    --h: 24%;
    --run: 122%;
  }
  .weather span:nth-child(3),
  .weather span:nth-child(5) {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .brand {
    animation: engrave 0.7s var(--ease) 0.2s backwards;
  }
  .hero-copy > * {
    animation: print 0.75s var(--ease) both;
    animation-delay: 0.4s;
  }
  .hero-copy > :nth-child(2) {
    animation-delay: 0.48s;
  }
  .hero-copy > :nth-child(3) {
    animation-delay: 0.56s;
  }
  .hero .window-caption {
    animation: print 0.9s var(--ease) 1s both;
  }
}
/* The three printed fields print one after the other, 60ms apart. */
.motion-ready .fields-grid.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.motion-ready .fields-grid > li {
  opacity: 0;
}
.motion-ready .fields-grid.in > li {
  animation: print 0.6s var(--ease) both;
}
.motion-ready .fields-grid.in > li:nth-child(2) {
  animation-delay: 60ms;
}
.motion-ready .fields-grid.in > li:nth-child(3) {
  animation-delay: 120ms;
}
/* Each plate engraves in after its field prints, left to right. */
.motion-ready .fields-grid > li .plate-img {
  clip-path: inset(0 100% 0 0);
}
.motion-ready .fields-grid.in > li .plate-img {
  animation: engrave 0.9s var(--ease) 0.25s both;
}
.motion-ready .fields-grid.in > li:nth-child(2) .plate-img {
  animation-delay: 0.31s;
}
.motion-ready .fields-grid.in > li:nth-child(3) .plate-img {
  animation-delay: 0.37s;
}
/* The counterfoil: the tear line draws itself once, then the card lifts. */
.motion-ready .contact-desk .tear-draw {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s var(--ease) 0.5s;
}
.motion-ready .contact-desk.in .tear-draw {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .button,
  .draft-send,
  .draft-kinds button {
    transition:
      background var(--fast) var(--ease),
      color var(--fast) var(--ease),
      border-color var(--fast) var(--ease);
  }
}

/* Narrow: the note folds to one column; the island crops, never shrinks. */
@media (max-width: 900px) {
  .hero {
    --pool: 120px;
  }
  .sea-window {
    height: calc(100svh - 200px);
    min-height: 480px;
    max-height: 760px;
  }
  .hero-copy::before {
    inset: -40px -60px -30px -50px;
  }
  .plate {
    transform: translateY(-17%) scale(0.96);
  }
  /* The sea runs 30% past the plate so the shifted plate still fills the
     window; its island mask stays anchored to the plate's own height. */
  .sea {
    height: 130%;
    -webkit-mask-size: auto 76.92%;
    mask-size: auto 76.92%;
    -webkit-mask-position: 50% 0;
    mask-position: 50% 0;
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
  }
  .hero-copy {
    max-width: calc(100% - 40px);
  }
  .window-wide {
    padding: 14px;
  }
  .draft-card {
    padding: 20px 20px 0;
  }
  .draft-micro {
    margin: 20px -20px 0;
    padding: 0 20px;
  }
  .contact {
    padding-top: 56px;
  }
  .studio-columns,
  .work-intro,
  .contact-grid,
  .fields-grid {
    grid-template-columns: 1fr;
  }
  .fields-grid {
    gap: 40px;
  }
  .contact h2 {
    max-width: none;
  }
  .rosette-contact-right {
    display: none;
  }
  .rosette-hero,
  .rosette-hero-left {
    display: none;
  }
  .micro-side {
    display: none;
  }
  .rosette-contact {
    left: -200px;
    bottom: -60px;
    opacity: 0.35;
  }
}
@media (max-width: 560px) {
  .issue {
    padding-top: 20px;
  }
  .issue nav {
    gap: 20px;
    font-size: 14px;
  }
  .brand {
    font-size: 30px;
  }
  .hero-line {
    font-size: 17px;
  }
  .actions {
    gap: 12px 18px;
  }
  .window-caption {
    gap: 12px 16px;
  }
  .work-caption-end {
    margin-left: 0;
  }
  .draft-address {
    grid-template-columns: 62px 1fr;
  }
  .draft-card-bottom > span {
    width: 100%;
  }
}

/* ?perf=1: the first six seconds of frame timing, printed on screen. */
.perf-box {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 99;
  max-width: 420px;
  margin: 0;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  font: 12px/1.5 ui-monospace, Menlo, monospace;
  white-space: pre-wrap;
}