/* Prefrontal Society. Ink on paper: off-white stock, fluid black ink botanicals, typewriter and
   mono text set justified, the seal with its ink burst, black and white film photographs,
   and colour fields taken from the interiors spec for 1 Rawstorne Place. */

:root {
  /* colours from the 1 Rawstorne Place interiors spec (Farrow & Ball, approximate screen colours) */
  --paper: #fafafa;     /* white */
  --paper-hi: #fafafa;  /* Prefrontal white */
  --ink: #1b1916; --soft: #4a453d; --muted: #7d766b;
  --night: #2a3842;     /* Hague Blue No.30, the lounge */
  --cream: #fafafa;   /* white, in place of cream */
  --oxblood: #6b2b27;   /* Eating Room Red No.43, the dining room */
  --dust: #2a3842;      /* Hague Blue No.30, the lounge */
  --clay: #0a0a0a;      /* black, in place of London Clay */
  --serif: "Roboto Mono", ui-monospace, Menlo, monospace;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --type: "Roboto Mono", ui-monospace, Menlo, monospace;
  --hand: "Nothing You Could Do", "Caveat", cursive;
  --g: clamp(18px, 4.4vw, 64px);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.6 var(--mono); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; font-weight: 400; }


.wrap { max-width: 1480px; margin: 0 auto; padding-inline: var(--g); }
.night { background: var(--night); color: var(--cream); }
.oxblood { background: var(--oxblood); color: var(--cream); }
.dust { background: var(--dust); color: var(--cream); }

/* type */
.mono { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
.block { font: 400 clamp(14px, 1.25vw, 19px)/1.28 var(--mono); text-transform: uppercase; text-align: justify; text-align-last: left; word-spacing: .12em; hyphens: none; }
.typed { font: 400 clamp(13px, 1.05vw, 16px)/1.75 var(--type); text-transform: uppercase; text-align: justify; text-align-last: left; letter-spacing: .02em; }
.tag { font: 400 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.by { font: 400 13px/1 var(--type); text-transform: uppercase; letter-spacing: .06em; }
.hand { font-family: var(--hand); font-weight: 400; }
.display { font: 300 clamp(40px, 5.6vw, 92px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: -0.02em; }
.display em { font: 400 1.25em/0.85 var(--hand); font-style: normal; text-transform: none; letter-spacing: 0; }

/* ---------- buttons: mono capitals in a hand-ruled box ---------- */
.btn {
  display: inline-block; font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: transparent; border: 1.5px solid currentColor; border-radius: 999px; padding: 14px 22px 13px; cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); transform: rotate(-1.5deg); }
.night .btn, .oxblood .btn, .dust .btn, .on-dark .btn { color: var(--cream); }
.night .btn:hover, .oxblood .btn:hover, .dust .btn:hover, .on-dark .btn:hover { background: var(--cream); color: var(--ink); }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--sm { padding: 10px 16px 9px; font-size: 11px; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

/* ---------- ink drawings: coloured masks so they can be any ink ---------- */
.ink { display: block; background: var(--c, var(--ink)); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; pointer-events: none; }
.ink--stems { --m: url("ink/stems.png"); aspect-ratio: 616 / 900; }
.ink--vase { --m: url("ink/vase.png"); aspect-ratio: 652 / 900; }
.ink--bloom { --m: url("ink/bloom.png"); aspect-ratio: 854 / 874; }
.ink--daisy { --m: url("ink/daisy.png"); aspect-ratio: 616 / 900; }
.ink--sprig { --m: url("ink/sprig.png"); aspect-ratio: 652 / 900; }
.ink--squiggle { --m: url("ink/squiggle.png"); aspect-ratio: 556 / 900; }
/* stems sway a little, like something alive */
.sway { transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite alternate; animation-delay: var(--sd, 0s); }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
/* drawings grow up from their stems when they arrive */
.js .grow { clip-path: inset(100% 0 0 0); transition: clip-path 1.8s cubic-bezier(.3,.7,.2,1); transition-delay: var(--d, 0s); }
.js .grow.in { clip-path: inset(-10% -10% -10% -10%); }

/* ---------- the seal: two rings with the name, a telescope under stars inside ---------- */
.seal { position: relative; aspect-ratio: 1; }
.seal > span { position: absolute; inset: 0; background: var(--c, var(--ink)); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.seal__rings { --m: url("brand/pfc/rings.png?v=3"); }
/* the centre: a telescope under stars */
.seal__burst { --m: url("brand/pfc/telescope.png?v=3"); }
@keyframes turn { to { transform: rotate(360deg); } }

/* ---------- bar ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 40; transition: background .35s ease, box-shadow .35s ease; }
.bar .wrap { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bar__mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bar__mark .seal { width: 44px; }
.bar__name { font: 500 13px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.bar nav { display: flex; align-items: center; gap: 26px; }
.bar nav a:not(.btn) { font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.bar nav a:not(.btn):hover, .bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.bar--solid { background: var(--paper); box-shadow: 0 1px 0 rgba(29,29,27,.14); }
@media (max-width: 720px) { .bar .wrap { height: 62px; } .bar__mark .seal { width: 36px; } .bar__name { font-size: 11px; letter-spacing: .2em; } .bar nav { gap: 14px; } .bar nav .hide-sm { display: none; } }

/* ---------- 1. the opening: a candlelit crowd, ink drawn over the photograph ---------- */
.open { position: relative; min-height: 100svh; overflow: hidden; color: var(--cream); display: flex; flex-direction: column; justify-content: flex-end; padding-block: 110px 40px; }
.open__bg { position: absolute; inset: -6% 0; z-index: -2; }
.open__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) contrast(1.05); }
.open::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(20,20,18,.85) 0%, rgba(20,20,18,.2) 55%, rgba(20,20,18,.35) 100%); }
.open__ink { position: absolute; pointer-events: none; z-index: 0; }
.open__ink .ink { --c: var(--cream); }
.open__ink--bloom { width: clamp(280px, 38vw, 620px); right: -5%; top: 6%; opacity: .92; }
.open__ink--stems { width: clamp(100px, 10vw, 170px); left: 40%; bottom: 6%; opacity: .9; }
.open__ink--squiggle { width: clamp(80px, 7vw, 120px); right: 4%; bottom: 14%; opacity: .85; }
.open__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px clamp(30px, 6vw, 100px); align-items: end; }
.open__cta { grid-column: 1; justify-self: start; }
.open__offer { grid-column: 1; font: 400 clamp(15px, 1.4vw, 21px)/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.open__offer span { opacity: .6; margin-inline: .35em; }
.open h1 { max-width: 13em; }
.open__side { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; }
.open__side .seal { width: clamp(260px, 34vw, 560px); --c: var(--cream); }
.open__foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 34px; padding-top: 16px; border-top: 1px solid rgba(250,250,250,.3); }
@media (max-width: 820px) {
  .open__grid { grid-template-columns: minmax(0, 1fr); }
  .open__side { grid-column: 1; grid-row: 1; justify-self: center; }
  .open__side .seal { width: min(68vw, 320px); }
  .open__offer { grid-row: 3; font-size: 13px; letter-spacing: .12em; white-space: nowrap; }
  .open__cta { grid-row: 4; }
  .open__ink--bloom { width: 62vw; right: -16%; top: 7%; }
  .open__ink--stems { left: auto; right: 8%; bottom: 30%; width: 90px; }
  .open__ink--squiggle { display: none; }
}

/* ---------- 2. the statement: a moving crowd, ink flowers laid over it ---------- */
.statement { position: relative; overflow: hidden; padding-block: clamp(90px, 11vw, 160px); min-height: 100svh; display: flex; align-items: center; color: var(--cream); }
.statement__bg { position: absolute; inset: -8% 0; z-index: -2; }
.statement__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) contrast(1.05); }
.statement::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20,20,18,.42); }
.statement__inks { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 2% 0; gap: 1%; }
.statement__inks .ink { --c: var(--cream); flex: 1 1 0; max-width: 15%; opacity: .78; }
.statement__inks .ink:nth-child(odd) { margin-bottom: -4%; }
.statement__inks .ink:nth-child(3n) { max-width: 19%; }
.statement .wrap { position: relative; z-index: 1; width: 100%; }
.statement__top { font: 400 clamp(12px, 1vw, 15px)/1.6 var(--mono); text-transform: uppercase; text-align: center; max-width: 64em; margin: 0 auto 6vh; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.statement p.big { margin: 0 auto; text-align: center; text-align-last: center; max-width: 14em; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.statement .by { position: relative; z-index: 1; display: block; margin-top: 40px; text-align: center; }
@media (max-width: 820px) { .statement__inks .ink { max-width: 30%; } .statement__inks .ink:nth-child(n+4) { display: none; } }

/* ---------- 3. memberships: a cream sheet in an oxblood field ---------- */
.members { padding: clamp(56px, 7vw, 100px) var(--g); }
.members__top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.sheet { background: var(--paper-hi); color: var(--oxblood); padding: clamp(28px, 4vw, 64px); }
.sheet__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.sheet .ink { --c: var(--oxblood); width: 46%; max-width: 170px; margin-bottom: 24px; }
.sheet .num { font: 400 13px var(--mono); letter-spacing: .1em; }
.sheet h3 { font: 300 clamp(32px, 3.4vw, 52px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; margin: 10px 0 14px; }
.sheet p.block { color: var(--ink); max-width: 320px; }
.members__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 26px; }
@media (max-width: 820px) { .sheet__cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 4. rooms: film photographs with ink drawn over them ---------- */
.rooms { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 110px); }
.rooms__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.rooms__head .block { max-width: 420px; }
.strip { overflow: hidden; }
.strip__track { display: flex; gap: 10px; width: max-content; will-change: transform; }
.strip img { height: clamp(300px, 58vh, 640px); width: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.rooms__ink { position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: difference; }
.rooms__ink .ink { --c: var(--cream); }
.rooms__ink--a { width: clamp(160px, 18vw, 280px); left: 12%; bottom: 4%; }
.rooms__ink--b { width: clamp(130px, 14vw, 220px); right: 9%; bottom: 8%; }

/* ---------- 5. the society cabinet, on dusty blue ---------- */
.cab { position: relative; }
.cab__pin { overflow: hidden; padding-block: clamp(56px, 7vw, 96px); }
.cab__head { display: flex; justify-content: space-between; align-items: start; gap: 24px; padding-inline: var(--g); margin-bottom: 30px; }
.cab__track { display: flex; align-items: flex-end; gap: clamp(30px, 4vw, 72px); padding-inline: var(--g); width: max-content; will-change: transform; background: var(--dust); }
.cab__item img { height: min(58vh, 580px); width: auto; max-width: 78vw; object-fit: contain; filter: grayscale(1) contrast(1.08); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.cab__item figcaption { margin-top: 16px; font: 400 clamp(26px, 2.6vw, 42px)/1 var(--hand); color: var(--cream); }
.cab--pinned .cab__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 84px 36px; }
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .cab__pin { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cab__pin::-webkit-scrollbar { display: none; }
  .cab__head { position: sticky; left: 0; }
  .cab__item { scroll-snap-align: center; }
  .cab__item img { height: 50vh; max-width: 84vw; }
}

/* ---------- 6. the team ---------- */
.team { position: relative; padding-block: clamp(90px, 11vw, 170px); }
.team h2 { font: 300 clamp(44px, 6.4vw, 108px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; letter-spacing: -0.02em; max-width: 12ch; margin-top: 18px; }
.team__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 36px); margin-top: clamp(36px, 5vw, 70px); align-items: end; }
.team__grid img { width: 100%; object-fit: cover; }
.team__board img { aspect-ratio: 1590 / 928; }
.person img { aspect-ratio: 4 / 5; }
.person p { margin-top: 12px; }
.team__ink { position: absolute; right: 5%; top: 7%; width: clamp(90px, 10vw, 160px); }
@media (max-width: 820px) { .team__grid { grid-template-columns: 1fr 1fr; } .team__board { grid-column: span 2; } .team__ink { display: none; } }

/* ---------- 7. host events: a poster pinned over film ---------- */
.host { position: relative; overflow: hidden; padding-block: clamp(80px, 10vw, 150px); }
.host__bg { position: absolute; inset: 0; z-index: -1; }
.host__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.host__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.poster { background: var(--paper-hi); color: var(--ink); padding: clamp(28px, 3.4vw, 52px); box-shadow: 0 30px 60px rgba(0,0,0,.4); transform: rotate(-1.5deg); position: relative; }
.poster h2 { font: 300 clamp(44px, 5.6vw, 92px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; margin: 18px 0 22px; }
.poster .ink { width: 40%; max-width: 200px; margin: 0 0 22px auto; }
.poster p.block { margin-bottom: 26px; }
.collage { position: relative; aspect-ratio: 1 / 1.04; }
.collage .print { position: absolute; width: 47%; padding: 2.3% 2.3% 9.5%; background: #fafafa; box-shadow: 0 6px 10px rgba(0,0,0,.25), 0 22px 44px rgba(0,0,0,.45); transform: rotate(var(--r)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.collage .print img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1); }
.collage .print:hover { transform: rotate(0deg) scale(1.05); z-index: 5; }
.collage .print:nth-child(1) { left: 1%; top: 5%; --r: -7deg; }
.collage .print:nth-child(2) { right: 3%; top: 0; --r: 6deg; }
.collage .print:nth-child(3) { left: 7%; bottom: 0; --r: 3deg; z-index: 2; }
.collage .print:nth-child(4) { right: 0; bottom: 7%; --r: -4deg; }
.note { position: absolute; font: 400 clamp(17px, 1.5vw, 22px)/1.1 var(--hand); color: var(--cream); white-space: nowrap; z-index: 6; }
@media (max-width: 820px) { .host__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 8. discover forever: one flower in the northern lights ---------- */
.forever { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; text-align: center; padding-block: 100px; }
.forever__bg { position: absolute; inset: -8% 0; z-index: -1; }
.forever__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); }
.forever .ink { --c: var(--cream); width: clamp(110px, 12vw, 190px); margin: 0 auto 18px; }
.forever h2 { font: 400 clamp(46px, 7vw, 120px)/1 var(--hand); color: var(--cream); }

/* ---------- 9. newton ---------- */
.newton { padding-block: clamp(90px, 11vw, 170px); }
.newton__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.newton .ink { width: min(100%, 380px); justify-self: center; }
.newton .quote { font: 300 clamp(36px, 4.6vw, 76px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; margin: 18px 0 22px; }
.newton .after { font: 400 clamp(24px, 2.4vw, 34px)/1.2 var(--hand); margin-bottom: 36px; }
@media (max-width: 820px) { .newton__grid { grid-template-columns: minmax(0, 1fr); } .newton .ink { width: 52%; } }

/* ---------- footer ---------- */
.foot { padding-block: 70px 64px; }
.foot__grid { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: end; }
.foot .seal { width: clamp(120px, 14vw, 200px); --c: var(--cream); }
.foot nav { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: end; }
.foot nav a { font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; opacity: .8; }
.foot nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 720px) { .foot__grid { grid-template-columns: minmax(0, 1fr); } .foot nav { justify-content: start; } }

/* ---------- inner pages ---------- */
.page-head { padding-block: 130px 50px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.page-head .ink { width: clamp(110px, 13vw, 200px); }
.prices { padding-bottom: clamp(70px, 9vw, 130px); }
.prices__list { border-top: 1.5px solid var(--ink); }
.prices__row { display: grid; grid-template-columns: 80px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 48px); align-items: baseline; padding-block: clamp(24px, 3vw, 40px); border-bottom: 1px solid rgba(29,29,27,.22); }
.prices__row h2 { font: 300 clamp(30px, 3.4vw, 54px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; }
.prices__row .p { font: 300 clamp(34px, 3.8vw, 60px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; text-align: right; white-space: nowrap; }
.prices__row .p small { display: block; margin-top: 8px; font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.prices__row .p--word { font: 400 clamp(26px, 2.6vw, 38px)/1 var(--hand); }
.prices__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.pair-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px 10px; }
.pair-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 820px) { .prices__row { grid-template-columns: 40px minmax(0, 1fr); } .prices__row .block, .prices__row .p { grid-column: 2; text-align: left; } .page-head { grid-template-columns: 1fr; } .page-head .ink { display: none; } }

/* apply form */
.form-wrap { max-width: 900px; padding-bottom: clamp(70px, 9vw, 130px); }
.apply fieldset { border: 0; margin: 0 0 64px; padding: 0; min-width: 0; }
.apply legend { padding: 0; margin-bottom: 18px; font: 300 clamp(30px, 3.4vw, 50px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; }
.apply legend span { font: 400 12px var(--mono); letter-spacing: .1em; margin-right: 14px; vertical-align: middle; }
.field { display: block; padding: 16px 0; border-bottom: 1px solid rgba(29,29,27,.25); }
.field > span { display: block; font: 400 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; color: var(--soft); }
.field input, .field textarea { width: 100%; font: 400 18px/1.5 var(--serif); color: var(--ink); background: transparent; border: 0; padding: 2px 0; outline: none; resize: vertical; }
.field textarea { font: 400 15px/1.6 var(--mono); background: rgba(255,255,255,.45); padding: 12px 14px; }
.field input:focus, .field textarea:focus { box-shadow: inset 0 -1.5px 0 var(--ink); }
.field input.bad { box-shadow: inset 0 -1.5px 0 var(--oxblood); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.company-only { display: none; }
.apply.is-company .company-only { display: block; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input, .pills input { position: absolute; opacity: 0; pointer-events: none; }
.choice > span { display: block; height: 100%; padding: 20px 18px; border: 1.5px solid var(--ink); background: rgba(255,255,255,.3); }
.choice b { display: block; font: 400 20px/1.1 var(--serif); text-transform: uppercase; margin-bottom: 10px; }
.choice small { font: 400 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.choice:hover > span { background: rgba(255,255,255,.6); }
.choice input:checked + span { background: var(--ink); color: var(--paper); }
.choice input:focus-visible + span, .pills input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.pills { display: flex; gap: 8px; margin-top: 6px; }
.pills label { position: relative; cursor: pointer; }
.pills span { display: inline-block; padding: 9px 20px; border: 1.5px solid var(--ink); border-radius: 999px; font: 400 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pills input:checked + span { background: var(--ink); color: var(--paper); }
.field select { width: 100%; font: 400 18px/1.5 var(--serif); color: var(--ink); background: transparent; border: 0; padding: 2px 0; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select:focus { box-shadow: inset 0 -1.5px 0 var(--ink); }
.field .hint { display: block; margin: -2px 0 8px; font: 400 13px/1.5 var(--mono); color: var(--muted); }
.pills { flex-wrap: wrap; }
.confirm { display: flex; gap: 14px; align-items: flex-start; padding: 22px 0 6px; cursor: pointer; font: 400 14px/1.6 var(--mono); }
.confirm input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.apply__foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.apply__error { font: 400 13px var(--mono); color: var(--oxblood); width: 100%; }
.apply-done h2 { font: 300 clamp(52px, 8vw, 120px)/1.02 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 22px; }
.apply-done p { margin-bottom: 32px; }
@media (max-width: 820px) { .choices { grid-template-columns: minmax(0, 1fr); } .pair { grid-template-columns: 1fr; gap: 0; } }

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js .words .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .22em .12em .14em; margin: -.22em -.12em -.14em; }
.js .words .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2,.75,.15,1); transition-delay: calc(.12s + var(--i) * .05s); }
.js .words.in .w > span { transform: none; }
.js .words.done .w { overflow: visible; }
[data-speed] { will-change: transform; }
.cursor { position: fixed; left: 0; top: 0; z-index: 60; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; transition: width .3s ease, height .3s ease, margin .3s ease, opacity .3s ease; opacity: 0; }
.cursor.on { opacity: 1; }
.cursor.big { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .words .w > span { opacity: 1; transform: none; transition: none; }
  .js .grow { clip-path: none; }
  .sway, .seal__burst { animation: none; }
}
.statement p.big { font: 300 clamp(30px, 4.4vw, 72px)/1.06 var(--type); text-transform: uppercase; letter-spacing: -0.01em; }
/* over the photographic opening the bar is cream until it turns solid */
.home .bar:not(.bar--solid) { color: var(--cream); }
.home .bar:not(.bar--solid) .seal { --c: var(--cream); }
.home .bar:not(.bar--solid) .btn { color: var(--cream); }
.home .bar:not(.bar--solid) .btn:hover { background: var(--cream); color: var(--ink); }
.open .btn { color: var(--cream); }
.open .btn:hover { background: var(--cream); color: var(--ink); }
/* tall drawings in the crowd row stay below the words */
.statement__inks .ink { max-height: 40vh; width: auto; height: 40vh; flex: 0 1 auto; }
.forever .ink--starburst { width: clamp(150px, 16vw, 260px); }
@media (max-width: 820px) { .statement__inks .ink { height: 22vh; max-height: 22vh; } }

/* ================= liquid ink, after the reference set ================= */

/* dust, hairs and scratches over every photograph */

/* the crowd: big black ink laid over the photograph, like the skater spread */
.statement__bg img { filter: brightness(1.05) contrast(1); }
.statement::after { background: rgba(20,20,18,.18); }
.statement__inks { align-items: stretch; padding: 0; }
.statement__inks .ink { position: absolute; height: auto; max-height: none; max-width: none; flex: none; --c: #0f0f0e; opacity: .82; }
.statement__inks .ink:nth-child(1) { width: 26vw; left: -4vw; bottom: -6vh; }
.statement__inks .ink:nth-child(2) { width: 15vw; left: 22vw; bottom: -2vh; }
.statement__inks .ink:nth-child(3) { width: 22vw; left: 40vw; bottom: -14vh; opacity: .7; }
.statement__inks .ink:nth-child(4) { width: 14vw; right: 22vw; bottom: -4vh; }
.statement__inks .ink:nth-child(5) { width: 24vw; right: -5vw; bottom: -10vh; }
.statement__inks .ink:nth-child(6) { width: 16vw; right: 30vw; top: 4vh; opacity: .55; }
.statement p.big { text-shadow: 0 2px 22px rgba(0,0,0,.6); }
.statement__top { position: relative; z-index: 1; }
@media (max-width: 820px) { .statement__inks .ink:nth-child(1) { width: 52vw; } .statement__inks .ink:nth-child(5) { width: 48vw; } .statement__inks .ink:nth-child(n+2):nth-child(-n+4), .statement__inks .ink:nth-child(6) { display: none; } }

/* type running behind giant cream ink, on charcoal */
.inktext { position: relative; overflow: hidden; padding-block: clamp(70px, 9vw, 130px); min-height: 92svh; }
.inktext__copy { font: 400 clamp(16px, 1.9vw, 30px)/1.45 var(--mono); color: var(--cream); opacity: .92; word-spacing: .2em; }
.inktext__copy p + p { margin-top: 1.4em; }
.inktext__ink { position: absolute; z-index: 1; pointer-events: none; }
.inktext__ink .ink { --c: var(--cream); }
.inktext__ink--a { width: clamp(300px, 40vw, 640px); left: -3%; top: 8%; }
.inktext__ink--b { width: clamp(300px, 42vw, 680px); right: -6%; top: -6%; }
.inktext__by { position: relative; z-index: 2; margin-top: 48px; text-align: right; }


/* one big cream drawing on dusty blue, text either side */
.solo { position: relative; min-height: 92svh; display: grid; grid-template-columns: 1fr minmax(0, 1.1fr) 1fr; align-items: center; gap: 24px; padding: 100px var(--g); }
.solo .ink { --c: var(--cream); width: min(100%, 520px); justify-self: center; }
.solo__l { display: flex; justify-content: space-between; gap: 30px; max-width: 360px; }
.solo__r { max-width: 250px; justify-self: end; }
@media (max-width: 820px) { .solo { grid-template-columns: minmax(0, 1fr); text-align: left; } .solo .ink { width: 70%; } .solo__r { justify-self: start; } }

/* handwritten notes with arrows, pinned to the polaroids */
.notes { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.notes .note { position: absolute; font: 400 clamp(17px, 1.5vw, 23px)/1 var(--hand); color: var(--cream); letter-spacing: .04em; text-transform: uppercase; }
.notes svg { position: absolute; overflow: visible; }
.notes path { fill: none; stroke: var(--cream); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* the closing frame: one small flower in a wide field, handwritten */
.forever h2 { text-transform: uppercase; letter-spacing: .04em; font-size: clamp(34px, 4.6vw, 76px); }
.statement__inks .ink:nth-child(1) { width: 24vw; left: -3vw; bottom: 4vh; }
.statement__inks .ink:nth-child(2) { width: 13vw; left: 21vw; bottom: 2vh; }
.statement__inks .ink:nth-child(3) { width: 19vw; left: 39vw; bottom: -6vh; opacity: .75; }
.statement__inks .ink:nth-child(4) { width: 12vw; right: 23vw; bottom: 3vh; }
.statement__inks .ink:nth-child(5) { width: 22vw; right: -3vw; bottom: 2vh; }
.statement__inks .ink:nth-child(6) { width: 12vw; right: 6vw; top: 12vh; opacity: .6; }
.members .sheet { position: relative; z-index: 1; }
.statement__bg img { filter: brightness(1.28) contrast(.95); }
.statement::after { background: rgba(20,20,18,.1); }
.statement p.big, .statement .by { text-shadow: 0 2px 26px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); }
/* the words sit on top and flip to dark wherever they cross the cream ink */
.inktext__copy { position: relative; z-index: 2; mix-blend-mode: difference; color: var(--cream); opacity: 1; }
.inktext__ink { z-index: 1; }
.inktext { min-height: 0; padding-block: clamp(110px, 13vw, 200px); display: flex; flex-direction: column; justify-content: center; }
.inktext__by { z-index: 2; mix-blend-mode: difference; color: var(--cream); }

/* type behind ink, as in the reference: the words fill the whole frame and run off every edge */
.inktext { display: block; min-height: 0; height: min(100svh, 860px); padding: 0; overflow: hidden; }
.inktext__copy { position: absolute; inset: 9% -4% auto -6%; z-index: 2; mix-blend-mode: difference; color: #d9d7d0;
  font: 400 clamp(15px, 1.75vw, 26px)/1.5 var(--mono); text-align: justify; word-spacing: .18em; max-width: none; padding: 0; }
.inktext__ink--a { width: min(54vw, 760px); left: -8%; top: 4%; }
.inktext__ink--b { width: min(62vw, 900px); right: -16%; top: -14%; }
@media (max-width: 820px) { .inktext { height: 80svh; } .inktext__ink--a { width: 86vw; left: -22%; top: 10%; } .inktext__ink--b { width: 96vw; right: -40%; top: 34%; } }
/* the words are black ink: they read sharp over the cream shapes and sink into the charcoal */
.inktext__copy { mix-blend-mode: normal; color: #0b0b0a; }
/* the words are the same colour as the charcoal, so they only show where they cross the cream ink */
.inktext__copy { color: var(--night); }
/* every membership column starts its number and headline on the same line */
.sheet .ink { height: clamp(150px, 15vw, 240px); width: 100%; max-width: none; -webkit-mask-position: left center; mask-position: left center; aspect-ratio: auto; }
.sheet h3 { min-height: 4.1em; }
.poster .ink { width: 26%; max-width: 140px; }

/* fine-line science drawings, in the hand of the original flower sketches */
.ink--brain { --m: url("ink/f-brain.png"); aspect-ratio: 919 / 881; }
.ink--neuron { --m: url("ink/f-neuron.png"); aspect-ratio: 672 / 1000; }
.ink--burst { --m: url("ink/f-burst.png"); aspect-ratio: 785 / 914; }
.ink--molecule { --m: url("ink/f-molecule.png"); aspect-ratio: 725 / 774; }
.ink--helix { --m: url("ink/f-helix.png"); aspect-ratio: 288 / 1000; }
.ink--telescope { --m: url("ink/f-telescope.png"); aspect-ratio: 718 / 1000; }
.ink--atom { --m: url("ink/f-atom.png"); aspect-ratio: 738 / 763; }
.ink--galaxy { --m: url("ink/f-galaxy.png"); aspect-ratio: 906 / 885; }
.ink--network { --m: url("ink/f-network.png"); aspect-ratio: 638 / 779; }
.ink--constellation { --m: url("ink/f-constellation.png"); aspect-ratio: 689 / 835; }
.ink--orbit { --m: url("ink/f-atom.png"); aspect-ratio: 738 / 763; }
.ink--cell { --m: url("ink/f-galaxy.png"); aspect-ratio: 906 / 885; }
.seal__burst { transform-origin: 49.76% 49.76%; }

/* ---------- host events, as a poster pasted on a concrete wall (after the reference spread) ---------- */
.host { padding-block: clamp(70px, 9vw, 130px); color: var(--ink); overflow: visible; }
.host__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(32px, 5vw, 90px); align-items: stretch; }
.host__l { display: flex; flex-direction: column; gap: 34px; }
.host__copy { max-width: 34em; }
.host__ink { width: min(78%, 460px); margin: auto 0 auto 6%; }
.host__foot { display: flex; align-items: center; gap: 28px; }
.wall { position: relative; aspect-ratio: 1000 / 1240; background: url("tex/wall.jpg") center / cover; display: grid; place-items: center; padding: 12% 11%; }
.wall__c { position: absolute; width: 18px; height: 18px; background: var(--ink); }
.wall__c--tl { left: 10px; top: 10px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wall__c--tr { right: 10px; top: 10px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wall__c--bl { left: 10px; bottom: 10px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.wall__c--br { right: 10px; bottom: 10px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.wall::before, .wall::after { content: ""; position: absolute; background: rgba(29,29,27,.55); }
.wall::before { left: 18px; right: 18px; top: 50%; height: 1px; }
.wall::after { top: 18px; bottom: 18px; left: 50%; width: 1px; opacity: .35; }
.poster { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; background: #fafafa; color: var(--ink); text-decoration: none; font-family: var(--hand);
  display: flex; flex-direction: column; padding: 9% 9% 7%; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.28); transform: rotate(-.6deg); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.poster:hover { transform: rotate(0deg) scale(1.02); }
.poster__top { text-align: center; font-size: clamp(14px, 1.3vw, 19px); }
.poster__title { margin-top: 8%; font-size: clamp(26px, 3vw, 46px); line-height: 1.02; text-transform: uppercase; text-align: right; }
.poster__mid { flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6%; margin-block: 4%; }
.poster__mid .ink { height: 100%; max-height: 260px; width: 100%; -webkit-mask-position: center; mask-position: center; aspect-ratio: auto; }
.poster__note { font-size: clamp(15px, 1.35vw, 21px); line-height: 1.15; }
.poster__foot { text-align: center; font-size: clamp(12px, 1.05vw, 16px); line-height: 1.4; }
@media (max-width: 820px) { .host__grid { grid-template-columns: minmax(0, 1fr); } .host__ink { width: 62%; } .wall { max-width: 520px; width: 100%; justify-self: center; } }
.host__copy { grid-column: 1 / -1; max-width: 62em; position: relative; z-index: 2; margin-bottom: -2.4em; }
.host__grid { row-gap: 0; }
.wall { margin-top: 1.2em; }
@media (max-width: 820px) { .host__copy { margin-bottom: 20px; } }

/* ---------- a full-width event photograph with a field of ink in front, after the skater spread ---------- */
.gather { position: relative; overflow: hidden; height: min(100svh, 900px); min-height: 560px; color: var(--cream); }
.gather__bg { position: absolute; inset: -8% 0; z-index: -2; }
.gather__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.95) contrast(1.05); }
.gather::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(236,235,231,.92) 0%, rgba(236,235,231,.35) 22%, rgba(236,235,231,0) 45%); }
.gather__line { position: relative; z-index: 3; max-width: 62em; margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--g) 0; text-align: center; text-align-last: center; color: var(--cream); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.gather__inks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.gather__inks .ink { position: absolute; --c: #0f0f0e; width: auto; aspect-ratio: auto; -webkit-mask-position: bottom center; mask-position: bottom center; width: 12%; }
@media (max-width: 820px) { .gather { height: 78svh; } .gather__inks .ink { width: 22%; } .gather__inks .ink:nth-child(even) { display: none; } }
.gather__inks .ink { width: 17%; }
.gather__line { padding-top: clamp(100px, 10vw, 130px); }
@media (max-width: 820px) { .gather__inks .ink { width: 34%; } }
.gather__bg img { object-position: center 40%; }
.gather__line { display: grid; justify-items: center; gap: 14px; }
.gather__title { font: 300 clamp(34px, 4.6vw, 72px)/1 var(--serif); text-transform: uppercase; letter-spacing: -0.01em; }
.gather .btn { color: var(--cream); margin-top: 8px; text-shadow: none; }
.gather .btn:hover { background: var(--cream); color: var(--ink); }
.gather .btn { background: var(--cream); color: var(--ink); border-color: var(--cream); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.gather .btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* three big drawings in the room, as in the foggy city reference: one see-through white, one smoky, one ghost */
.gather::after { background: linear-gradient(0deg, rgba(20,20,18,.55) 0%, rgba(20,20,18,0) 40%); }
.gather__bg img { object-position: center 45%; filter: none; }
.gather__inks .ink.gather__ink { position: absolute; bottom: auto; top: 12%; height: 74%; width: 22%; opacity: 1; -webkit-mask-position: center; mask-position: center; }
.gather__ink--white { left: 9%; --c: rgba(244,242,236,.82); filter: drop-shadow(0 0 1px rgba(0,0,0,.35)); }
.gather__ink--smoke { left: 39%; width: 26% !important; top: 18% !important; --c: rgba(28,28,26,.72); }
.gather__ink--ghost { right: 8%; --c: rgba(244,242,236,.38); }
.gather__line { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; justify-items: start; text-align: left; text-align-last: left; padding: 0 var(--g) clamp(34px, 5vw, 60px); max-width: none; }
.gather__title { font-size: clamp(30px, 3.6vw, 58px); }
@media (max-width: 820px) { .gather__inks .ink.gather__ink { width: 34%; height: 52%; top: 8%; } .gather__ink--white { left: 2%; } .gather__ink--smoke { left: 33%; } .gather__ink--ghost { right: 0; } }
.gather__inks .ink.gather__ink--white { --c: rgba(244,242,236,.9); }
.gather__inks .ink.gather__ink--smoke { --c: rgba(24,24,22,.62); left: 33%; }
.gather__inks .ink.gather__ink--ghost { --c: rgba(244,242,236,.45); }

/* ---------- host events: one huge see-through burst over a grainy room, after the daisy-field spread ---------- */
.host-field { position: relative; overflow: hidden; height: min(100svh, 900px); min-height: 580px; color: var(--cream); }
.field__bg { position: absolute; inset: -8% 0; z-index: -2; }
.field__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) contrast(1.05); }
.host-field::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,18,16,.65) 0%, rgba(18,18,16,.2) 50%, rgba(18,18,16,0) 75%); }
.field__burst { position: absolute; right: -12%; top: 50%; width: min(78vw, 1050px); aspect-ratio: 1; translate: 0 -50%; pointer-events: none; }
.field__spin { width: 100%; height: 100%; --c: rgba(250,250,250,.72); animation: turn 160s linear infinite; aspect-ratio: auto; }
.field__copy { position: absolute; left: var(--g); top: clamp(90px, 13vh, 150px); max-width: 30em; display: grid; gap: 28px; justify-items: start; }
.field__copy .typed { font-size: clamp(14px, 1.15vw, 18px); line-height: 1.85; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.field__btn { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.field__btn:hover { background: transparent; color: var(--cream); }
.field__by { position: absolute; right: var(--g); bottom: clamp(26px, 4vw, 48px); }
@media (max-width: 820px) { .field__burst { width: 64vw; right: 6%; top: 70%; } .field__copy { right: var(--g); } }
@media (prefers-reduced-motion: reduce) { .field__spin { animation: none; } }
.field__spin { -webkit-mask-image: url("ink/burst-bold.png"); mask-image: url("ink/burst-bold.png"); --c: rgba(250,250,250,.42); }
.field__burst { width: min(38vw, 520px); right: 7%; }
/* the apply page gets straight to the form */
.page-head--tight { padding-block: 104px 28px; }
.page-head--tight .ink { width: clamp(80px, 8vw, 120px); }

/* the rooms strip sits on London Clay, the woodwork colour */
.rooms.night { background: var(--clay); }

/* every illustration at about half its old size, so the drawings are accents rather than features */
.sheet .ink { height: clamp(80px, 8vw, 120px); }
.rooms__ink--a { width: clamp(80px, 9vw, 140px); }
.rooms__ink--b { width: clamp(70px, 7vw, 110px); }
.solo .ink { width: min(100%, 240px); }
.team__ink { width: clamp(50px, 5vw, 80px); }
.field__burst { width: min(20vw, 280px); }
.forever .ink, .forever .ink--starburst { width: clamp(60px, 6vw, 96px); }
.newton .ink { width: min(100%, 180px); }
.page-head .ink { width: clamp(60px, 6vw, 100px); }
.page-head--tight .ink { width: clamp(50px, 5vw, 72px); }
@media (max-width: 820px) {
  .solo .ink { width: 36%; }
  .newton .ink { width: 28%; }
  .field__burst { width: 34vw; }
}

/* ================= a little more members' club: Soho House's own typefaces, Cardo and HK Grotesk (Hanken Grotesk) ================= */
:root {
  --serif: "Cardo", Georgia, serif;
  --type: "Cardo", Georgia, serif;
  --hand: "Cardo", Georgia, serif;
  --label: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}
/* the wordmark in the top bar keeps its spaced IBM Plex Mono, to match the seal */
.bar__name { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
body { font: 400 17px/1.6 var(--sans); }

/* headings in Cardo, sentence case */
.display, .sheet h3, .team h2, .newton .quote, .prices__row h2, .prices__row .p, .apply legend, .apply-done h2, .statement p.big, .choice b {
  font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -0.01em;
}
.display { font-size: clamp(44px, 6vw, 100px); line-height: 1.02; }
.display em { font: inherit; font-weight: 400; font-style: normal; line-height: inherit; letter-spacing: inherit; }
.statement p.big { font-size: clamp(34px, 4.8vw, 78px); line-height: 1.08; }
.team h2 { font-size: clamp(44px, 6vw, 100px); }
.newton .quote { font-size: clamp(36px, 4.4vw, 72px); line-height: 1.08; }
.newton .after, .forever h2, .cab__item figcaption, .prices__row .p--word { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -0.01em; }
.forever h2 { font-size: clamp(48px, 7vw, 120px); }
.choice b { font-size: 22px; }

/* running text in HK Grotesk instead of justified mono capitals */
.block, .typed { font: 400 clamp(16px, 1.2vw, 19px)/1.55 var(--sans); text-transform: none; text-align: left; letter-spacing: 0; word-spacing: normal; }

/* small labels, dates and places in typewriter capitals */
.tag, .by, .bar nav a:not(.btn), .open__offer, .field > span, .num, .members__top, .rooms__head .tag, .cab__head .tag {
  font-family: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: .12em;
}
.tag, .by { font-size: 11px; }
.open__offer { font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .2em; }
.bar nav a:not(.btn) { font-size: 14px; text-transform: none; letter-spacing: 0; }

/* buttons: square, fine-ruled, quiet */
.btn { border-radius: 0; border-width: 1px; padding: 15px 28px; font: 500 14px/1 var(--label); letter-spacing: .01em; text-transform: none; }
.btn--sm { padding: 10px 18px; font-size: 13px; }
.btn:hover { transform: none; }

/* photographs in plain black and white */
.open__bg img { filter: grayscale(1) brightness(.6) contrast(1.06); }
.statement__bg img { filter: grayscale(1) brightness(1.1) contrast(.96); }
.strip img, .team img, .person img, .pair-photos img { filter: grayscale(1) contrast(1.03); }
.field__bg img { filter: grayscale(1) brightness(.7) contrast(1.05); }
.forever__bg img { filter: grayscale(1); }

/* more air between sections */
.members, .team, .newton { padding-block: clamp(110px, 12vw, 190px); }

/* the newton quote no longer has a drawing beside it */
.newton__grid { grid-template-columns: minmax(0, 1fr); max-width: 980px; }

/* ---------- host events: words on white beside a full-height photograph ---------- */
.events { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(92svh, 860px); background: var(--paper); }
.events__copy { align-self: center; display: grid; gap: 26px; justify-items: start; padding: clamp(80px, 9vw, 140px) clamp(28px, 6vw, 110px) clamp(80px, 9vw, 140px) var(--g); }
.events__title { font: 400 clamp(44px, 5.4vw, 88px)/1.04 var(--serif); letter-spacing: -0.01em; max-width: 9ch; }
.events__text { font: 400 clamp(17px, 1.3vw, 20px)/1.55 var(--sans); color: var(--soft); max-width: 22em; }
.events__place { margin-top: 18px; color: var(--muted); }
.events__photo { margin: 0; position: relative; overflow: hidden; }
.events__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 88% 45%; filter: grayscale(1) contrast(1.04); }
@media (max-width: 820px) {
  .events { grid-template-columns: minmax(0, 1fr); }
  .events__photo { order: -1; height: 58svh; }
  .events__copy { padding: 56px var(--g) 80px; }
}