/* Precium — one stylesheet.
   Field / section / notation. Three voices. Colour only in photographs. */

@font-face { font-family: 'Archivo'; src: url('../fonts/Archivo-Variable.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Sentient'; src: url('../fonts/Sentient-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sentient'; src: url('../fonts/Sentient-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink: #0e0e0d;
  --ink-2: #6b6b68;
  --paper: #ffffff;
  --rule: rgb(14 14 13 / 0.16);
  --m: clamp(16px, 2.25vw, 32px);   /* outer margin */
  --g: clamp(12px, 1.4vw, 20px);    /* gutter */
  --col: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12);
  --grotesk: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Sentient', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --section: clamp(72px, 9vw, 140px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 56px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 clamp(15px, 0.9rem + 0.15vw, 17px) / 1.55 var(--grotesk); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { top: 10px; }

/* ---------- voices ---------- */
.declare { font-family: var(--grotesk); font-weight: 900; font-stretch: 62%; line-height: 0.84; letter-spacing: -0.015em; text-transform: uppercase; }
.think { font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
.think em { font-style: italic; }
.note { font: 400 11px/1.45 var(--mono); letter-spacing: 0.02em; }
.caps { text-transform: uppercase; letter-spacing: 0.05em; }
.dim { color: var(--ink-2); }
.disc { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; background: currentColor; vertical-align: 0; margin-right: 0.6em; }
.disc--open { background: none; border: 1px solid currentColor; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.grid > * { grid-column: 1 / -1; }
.section { position: relative; padding-top: var(--section); }
.head { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ink); padding-top: 12px; }

/* ---------- masthead ---------- */
.mast { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--m); color: #fff; transition: background-color 0.3s, color 0.3s, padding 0.3s, box-shadow 0.3s; }
.mast.is-solid { background: rgb(255 255 255 / 0.96); color: var(--ink); padding-block: 14px; box-shadow: 0 1px 0 var(--rule); }
@supports (backdrop-filter: blur(8px)) { .mast.is-solid { background: rgb(255 255 255 / 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
.lockup { display: inline-flex; align-items: center; font: 600 15px/1 var(--grotesk); text-decoration: none; }
.lockup .disc { width: 20px; height: 20px; margin-right: 10px; }
.mast__nav { display: flex; gap: clamp(20px, 2.8vw, 40px); font: 500 13px/1 var(--grotesk); }
.mast__nav a { position: relative; text-decoration: none; }
.mast__nav a:hover { text-decoration: underline; }
.mast__nav a::before { content: ''; position: absolute; left: -0.95em; top: 50%; width: 0.42em; height: 0.42em; margin-top: -0.21em; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform 0.25s; }
.mast__nav a[aria-current='true']::before { transform: none; }
.mast__toggle { display: none; }
@media (max-width: 760px) {
  .mast__toggle { display: block; font: 400 11px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: inherit; background: none; border: 0; padding: 12px 0 12px 16px; margin: -12px 0; cursor: pointer; position: relative; z-index: 2; }
  .mast__nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 4px; padding: 0 var(--m); background: var(--paper); color: var(--ink); font: 900 clamp(48px, 15vw, 72px)/1 var(--grotesk); font-stretch: 62%; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
  .mast.is-open .mast__nav { opacity: 1; visibility: visible; transition: opacity 0.25s; }
  .mast.is-open .mast__toggle, .mast.is-open .lockup { color: var(--ink); position: relative; z-index: 2; }
  .mast__nav a::before { left: -0.6em; width: 0.22em; height: 0.22em; margin-top: -0.11em; }
  .mast__nav a { padding-left: 0.1em; }
}

/* ---------- fields (photographs) ---------- */
.field { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: #fff; background: #6f7f8c; }
.field__img, .field__cloud { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.field__notes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.field__fig { position: absolute; z-index: 4; right: var(--m); width: min(250px, 44vw); color: #fff; }
.field__fig .dim { color: rgb(255 255 255 / 0.78); }
.field__fig { text-shadow: 0 0 10px rgb(0 0 0 / 0.45), 0 0 2px rgb(0 0 0 / 0.3); }

.field--line .field__name { position: absolute; left: var(--m); top: clamp(72px, 9vh, 96px); margin: 0; color: var(--ink); white-space: nowrap; font-size: 28vw; }
/* the statement declares, a weight lighter than the name above it */
.field__statement { position: absolute; z-index: 4; left: var(--m); right: var(--m); bottom: clamp(32px, 7vh, 64px); font-family: var(--grotesk); font-weight: 700; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.9; font-size: clamp(30px, 0.9rem + 3.3vw, 66px); text-shadow: 0 1px 24px rgb(0 0 0 / 0.2); }
.field__statement span { display: block; }
.field__statement .o1 { padding-left: calc(1 * (var(--col) + var(--g))); }
.field__statement .o2 { padding-left: calc(2 * (var(--col) + var(--g))); }
.field__statement .o3 { padding-left: calc(3 * (var(--col) + var(--g))); }
.field--line .field__fig { bottom: calc(clamp(32px, 7vh, 64px) + 70px); }
@media (max-width: 760px) {
  .field__statement { bottom: 78px; }
  .field__statement .o1 { padding-left: 6%; } .field__statement .o2 { padding-left: 12%; } .field__statement .o3 { padding-left: 18%; }
  .field--line .field__fig { left: var(--m); right: var(--m); bottom: 16px; width: auto; }
  .field--line .field__fig br { display: none; }
  .field--founder .field__fig { top: 72px; }
}

.field--founder::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(rgb(10 9 8 / 0.42), transparent 34%, transparent 50%, rgb(10 9 8 / 0.62)); }
.field--founder .field__img { object-position: 50% 28%; }
.field--founder .field__fig { top: clamp(84px, 14vh, 140px); }
.founder__text { position: absolute; z-index: 4; left: var(--m); right: var(--m); bottom: clamp(36px, 7vh, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
.founder__name { grid-column: 1 / span 7; font-size: clamp(52px, 1rem + 6.6vw, 128px); color: #fff; }
.founder__role { grid-column: 1 / span 7; grid-row: 2; margin-top: 14px; color: #fff; }
.founder__bio { grid-column: 9 / span 4; grid-row: 1 / span 2; color: #fff; max-width: 26em; }
@media (max-width: 1023px) {
  .founder__name, .founder__role, .founder__bio { grid-column: 1 / -1; grid-row: auto; }
  .founder__bio { margin-top: 18px; }
}

/* ---------- 01 the record ---------- */
.record { min-height: 0; }
.record .wrap { position: relative; }
.vert { display: none; }
.record__copy { max-width: 34em; margin-top: clamp(28px, 4vw, 56px); }
.record__statement { font-size: clamp(30px, 1rem + 2.7vw, 52px); margin-bottom: 0.6em; }
.record__copy p + p { margin-top: 0.8em; }
.record__rings { width: calc(100% + 2 * var(--m)); margin: 28px calc(-1 * var(--m)) 0; aspect-ratio: 1 / 1.02; height: auto; }
.record__events { counter-reset: ev; display: grid; gap: 0; margin-top: 8px; }
.record__events li { counter-increment: ev; display: grid; grid-template-columns: 2.4em 1fr; column-gap: 8px; padding: 10px 0 11px; border-top: 1px solid var(--rule); }
.record__events li::before { content: counter(ev); grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; border: 1px solid var(--ink); font-size: 10px; }
.record__events li.is-now::before { background: var(--ink); color: var(--paper); }
.record__events b { font-weight: 400; color: var(--ink-2); display: block; }
.record__fig { margin-top: 20px; max-width: 28em; }

@media (min-width: 640px) and (max-width: 1199px) {
  .record__rings { aspect-ratio: 1 / 0.82; }
  .record__events { grid-template-columns: 1fr 1fr; column-gap: var(--g); }
}

/* wide: the print bleeds off the right edge; labels lead into their rings */
@media (min-width: 1200px) {
  .record { height: 1180px; padding-top: 0; }
  .record .wrap { position: static; }
  .record .head { position: absolute; z-index: 2; left: var(--m); top: 48px; width: calc(50% - var(--m)); }
  .vert { display: block; position: absolute; left: var(--m); top: 132px; writing-mode: vertical-rl; letter-spacing: 0.32em; color: var(--ink-2); }
  .record__copy { position: absolute; z-index: 2; left: calc(var(--m) + var(--col) + var(--g)); top: 130px; width: calc(5 * var(--col) + 4 * var(--g)); max-width: 500px; margin: 0; }
  .record__statement { font-size: clamp(34px, 0.6rem + 2.2vw, 48px); }
  .record__rings { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; }
  .record__events { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; display: block; }
  .record__events li { position: absolute; width: 250px; display: block; padding: 0; border: 0; }
  .record__events li::before { display: none; }
  .record__fig { position: absolute; z-index: 2; left: calc(var(--m) + var(--col) + var(--g)); bottom: 48px; width: 300px; margin: 0; }
}

/* ---------- 02 the model ---------- */
.model { padding-bottom: var(--section); }
.verbs { margin-top: clamp(36px, 5vw, 72px); font-size: clamp(64px, 1rem + 11.2vw, 180px); }
.verb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
.verb__d { font: 400 clamp(15px, 0.9rem + 0.2vw, 17px)/1.4 var(--grotesk); text-transform: none; letter-spacing: 0; padding-bottom: 0.9em; max-width: 22em; }
.v1 .verb__w { grid-column: 1 / span 8; } .v1 .verb__d { grid-column: 9 / span 3; }
.v2 .verb__w { grid-column: 3 / span 6; } .v2 .verb__d { grid-column: 9 / span 3; }
.v3 .verb__w { grid-column: 6 / span 4; } .v3 .verb__d { grid-column: 10 / span 3; }
@media (max-width: 1023px) {
  .verb { margin-bottom: 18px; }
  .verb__w { grid-column: 1 / -1 !important; }
  .v2 .verb__w { padding-left: 8%; } .v3 .verb__w { padding-left: 16%; }
  .verb__d { grid-column: 1 / -1 !important; padding: 8px 0 0; }
  .v2 .verb__d { padding-left: 8%; } .v3 .verb__d { padding-left: 16%; }
}

.strata { position: relative; margin-top: clamp(56px, 8vw, 110px); }
.strata__line { font-size: clamp(28px, 1rem + 2.2vw, 44px); max-width: 12em; }
.strata__print { width: calc(100% + 2 * var(--m)); margin: 28px calc(-1 * var(--m)) 0; height: clamp(180px, 22vw, 300px); }
.strata__layers { counter-reset: ly; margin-top: 12px; display: grid; }
.strata__layers li { counter-increment: ly; display: grid; grid-template-columns: 2.4em 1fr; column-gap: 8px; padding: 10px 0 11px; border-top: 1px solid var(--rule); }
.strata__layers li::before { content: counter(ly); grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; border: 1px solid var(--ink); font-size: 10px; }
.strata__layers li.is-us::before { background: var(--ink); color: var(--paper); }
.strata__layers b { font-weight: 400; color: var(--ink-2); display: block; }
.strata__cap { margin-top: 16px; max-width: 28em; }
@media (min-width: 640px) and (max-width: 1199px) { .strata__layers { grid-template-columns: 1fr 1fr; column-gap: var(--g); } }
@media (min-width: 1200px) {
  .strata { height: 520px; }
  .strata__line { position: absolute; left: 0; top: 0; width: 520px; }
  .strata__print { position: absolute; left: calc(-1 * var(--m)); width: calc(100% + 2 * var(--m)); top: 140px; margin: 0; height: 300px; }
  .strata__layers { position: absolute; inset: 0; display: block; margin: 0; }
  .strata__layers li { position: absolute; width: 240px; display: block; padding: 0; border: 0; }
  .strata__layers li::before { display: none; }
  .strata__cap { position: absolute; left: 0; top: 476px; margin: 0; }
}

.holdings { margin-top: clamp(56px, 7vw, 96px); }
.holding { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: baseline; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.holding:first-child { border-top: 1px solid var(--rule); }
.holding > .note:first-child { grid-column: 1; }
.holding__name { grid-column: 2 / span 4; font-size: clamp(28px, 1rem + 1.8vw, 44px); line-height: 1.05; }
.holding__desc { grid-column: 6 / span 4; }
.holding__when { grid-column: 10 / span 2; }
.holding__status { grid-column: 12; justify-self: end; white-space: nowrap; }
@media (max-width: 1023px) {
  .holding__name { grid-column: 2 / -1; }
  .holding__desc { grid-column: 2 / span 8; margin-top: 10px; }
  .holding__when { grid-column: 2 / span 5; margin-top: 10px; }
  .holding__status { grid-column: 7 / -1; margin-top: 10px; }
}
@media (max-width: 639px) {
  .holding > .note:first-child { grid-column: 1 / span 2; }
  .holding__name, .holding__desc { grid-column: 1 / -1; }
  .holding__name { margin-top: 6px; }
  .holding__when { grid-column: 1 / span 6; }
  .holding__status { grid-column: 7 / -1; }
}

/* ---------- 03 thinking ---------- */
.thinking { padding-bottom: var(--section); }
.thinking__copy { grid-column: 1 / span 6; margin-top: clamp(36px, 5vw, 72px); }
.thinking__statement { font-size: clamp(32px, 1rem + 3vw, 64px); margin-bottom: 0.55em; }
.thinking__copy p:last-child { max-width: 32em; }
.lists { grid-column: 8 / span 5; grid-row: 2; margin-top: clamp(36px, 5vw, 84px); align-self: start; }
.lists h3 { margin-bottom: 10px; }
.lists li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 12px 0 13px; border-top: 1px solid var(--rule); align-items: baseline; }
.essays li { display: block; padding: 0; }
.essays a { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0 13px; text-decoration: none; }
.essays a:hover .think { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.elsewhere { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.elsewhere a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.lists li.pending { display: block; color: var(--ink-2); }
.lists .think { font-size: 21px; }
.lists section + section { margin-top: 40px; }
.todo { color: var(--ink-2); }
@media (max-width: 1023px) { .thinking__copy, .lists { grid-column: 1 / -1; grid-row: auto; } }

/* ---------- 04 contact ---------- */
.contact { padding-bottom: clamp(48px, 6vw, 80px); }
.contact__call { margin-top: clamp(36px, 5vw, 64px); font-size: clamp(64px, 1rem + 13.5vw, 220px); }
.contact__mail { grid-column: 1 / span 7; justify-self: start; margin-top: 28px; font: 400 clamp(16px, 0.8rem + 0.8vw, 22px)/1.2 var(--mono); text-decoration: none; border-bottom: 1px solid; padding-bottom: 5px; word-break: break-all; }
.contact__note { grid-column: 8 / span 4; margin-top: 28px; color: var(--ink-2); }
@media (max-width: 1023px) { .contact__mail, .contact__note { grid-column: 1 / -1; } }

.foot { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 28px; color: var(--ink-2); }
.foot::before { content: ''; flex-basis: 100%; border-top: 1px solid var(--ink); margin-bottom: 0; order: -1; height: 0; }