/* Physical Realm — draft stylesheet (first look, 2026-09-13).
   Tone: graphite on off-white, the Aesop register Qing asked about. One typeface, Jost — the geometric
   of the PHYSICAL REALM wordmark: light for headings, regular for sentences, wide tracking for the capitals —
   hairline rules, uppercase tracked labels, photography carrying the page.
   Two grounds: --bg for Physical Realm (warm off-white, the parent), --bg-cool for ICETANK. */

:root {
  --bg: #F7F5EF;          /* the light band: the room's own white (#F3F2F0, measured off the photograph) carried
                             two points toward paper, because the owner's brief asks for "warm rather than
                             corporate" (§7). Aesop's cream was warmer still and turned the white room grey */
  --bg2: #EDEDE0;         /* panel: the ground with 9.5% of the ink mixed in, not a second colour. Mixing toward yellow (#F2F0E0) read as beige; mixing toward the ink keeps it the same paper with a shadow on it (Qing, 2026-09-13) */
  --ink: #2F2F2C;         /* graphite, near-black — every heading */
  --ink2: #3A3A36;        /* sentences: nearly the heading's tone. Aesop sets 789 elements in #333 and almost nothing lighter (Qing, 2026-09-13: the text was too light) */
  --ink3: #66655E;        /* captions, labels: their muted grey, four steps darker than the one it replaces */
  --line: #DAD9CE;        /* one grey for every hairline: the same mix at 18% */
  --ph: #E6E5DA;          /* placeholder photography: the same mix at 12% */
  --sans: 'Jost', 'Futura', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --pad: 20px;
  --measure: 680px;
  --fs-micro: 12px;       /* uppercase tracked: labels, nav, buttons */
  --fs-body: 17px;
  --fs-lead: 20px;
  --fs-h2: clamp(26px, 3.2vw, 40px);
  --fs-display: clamp(30px, 4.3vw, 56px);
}
@media (min-width: 900px)  { :root { --pad: 48px; --fs-micro: 13px; --fs-body: 18px; --fs-lead: 23px; } }
@media (min-width: 1280px) { :root { --pad: 72px; } }

/* the venue's ground is a cooler off-white — same value, less yellow */
.icetank { --bg: #F8F8F6; --bg2: #EDEDE9; --line: #DCDCD6; --ph: #E2E2DD; }  /* the venue's own pair, as it was before the company's palette work */

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--ink2); font-family: var(--sans); font-size: var(--fs-body);
       font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.1; letter-spacing: -0.005em; color: var(--ink); }

.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.label { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); }
/* the label that names a section is a heading in its own right, not a caption (Qing) */
.head > .label, .stack > .label { font-size: 14px; letter-spacing: 0.20em; }
@media (min-width: 900px) { .head > .label, .stack > .label { font-size: 16px; } }
.rule { height: 1px; background: var(--line); }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); max-width: var(--measure); letter-spacing: -0.01em; }
.measure { max-width: var(--measure); }

/* ── header ───────────────────────────────────────────── */
header.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent);
       backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { font-size: var(--fs-micro); letter-spacing: 0.30em; text-transform: uppercase; color: var(--ink); font-weight: 400; }  /* the wordmark's tracking */
.nav { display: none; gap: 34px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); }
.nav a:hover, .nav a.on { color: var(--ink); }
@media (min-width: 900px) { .nav { display: flex; align-items: center; } }
.burger { display: grid; gap: 5px; background: none; border: 0; padding: 8px 0; cursor: pointer; }
.burger span { display: block; width: 22px; height: 1px; background: var(--ink); }
@media (min-width: 900px) { .burger { display: none; } }

/* ── buttons ──────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px;
       background: var(--ink); color: var(--bg); border: 1px solid var(--ink); font-size: var(--fs-micro);
       font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); }
.link { display: inline-block; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 5px; }

/* ── photography, and the placeholders still waiting for it ─ */
.pic { display: block; width: 100%; height: auto; object-fit: cover; background: var(--ph); }
.ph { position: relative; background: var(--ph); overflow: hidden; }
.ph::after { content: attr(data-note); position: absolute; left: 16px; bottom: 14px; font-size: var(--fs-micro);
             letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); }
.r-hero { aspect-ratio: 16 / 9; }
.r-tall { aspect-ratio: 3 / 4; }
.r-wide { aspect-ratio: 4 / 3; }
.r-sq   { aspect-ratio: 1 / 1; }

/* ── sections ─────────────────────────────────────────── */
section { padding: clamp(56px, 9vw, 130px) 0; }
section.tight { padding: clamp(40px, 6vw, 80px) 0; }
/* Physical Realm's alternating section is the ink itself — the colour of the words and of the filled button
   (Qing, 2026-09-13: "the bg should be dark gray as the bg of the button"). Every token is flipped inside it,
   so the components need no dark variants of their own: a filled button turns pale, hairlines lift, and the
   muted grey rises to stay legible.
   ICETANK does not take the dark band (Qing, same evening: "no change to the icetank pages") — the venue's
   panels stay the quiet second ground below. Two brands, one stylesheet: the venue's pages carry .icetank. */
body:not(.icetank) header.top, body:not(.icetank) section.panel, body:not(.icetank) footer {
  --bg: #2F2F2C;
  --bg2: #2F2F2C;
  --ink: #F8F8F7;          /* headings and the filled button's ground */
  --ink2: #E2E1DC;         /* sentences on the dark: 11.6:1 */
  --ink3: #A9A79F;         /* labels and captions: 5.9:1 */
  --line: #4A4A45;         /* hairlines lift out of the dark instead of cutting into the light */
  --ph: #3A3A36;
  background: #2F2F2C;
  color: var(--ink2);
}
.head { display: grid; gap: 20px; margin-bottom: clamp(28px, 4vw, 56px); }
.head h2 { font-size: var(--fs-h2); }

/* hero */
.hero { padding-top: clamp(48px, 7vw, 96px); padding-bottom: 0; }
/* the company opens on its sentence alone, so the fold needs the air the photograph used to give it */
.hero.bare { padding-bottom: clamp(56px, 8vw, 110px); }
.hero.bare h1 { font-size: clamp(32px, 4.8vw, 62px); margin-top: 0; } /* no label above it any more, so no gap for one */
.hero h1 { font-size: var(--fs-display); font-weight: 400; letter-spacing: -0.005em; max-width: 20ch; margin-top: 18px; }
.hero .statement { margin-top: 28px; }
.hero .ph, .hero .pic { margin-top: clamp(40px, 6vw, 80px); }

/* two-column: text left, picture right */
.split { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
                            .split.start { align-items: start; }      /* both halves begin at their first line */
                            .split.rev > :first-child { order: 2; } }
.stack { display: grid; gap: 22px; justify-items: start; }

/* the venue card on the parent's homepage */
.venue { display: grid; gap: 24px; }
.venue h2 { font-size: clamp(30px, 4.4vw, 54px); letter-spacing: -0.03em; }

/* list of offerings */
.cols { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .cols.c3 { grid-template-columns: repeat(3, 1fr); } .cols.c4 { grid-template-columns: repeat(4, 1fr); } }
.col { background: var(--bg); padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); display: grid; gap: 14px; align-content: start; }
.col h3 { font-size: 21px; font-weight: 400; letter-spacing: 0; }
.col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; color: var(--ink2); }
.col .state { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); }

/* status strip for a section still in development */
.soon { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-micro); letter-spacing: 0.18em;
        text-transform: uppercase; color: var(--ink3); border: 1px solid var(--line); padding: 9px 15px; font-weight: 500; }

/* facts row */
.facts { display: grid; gap: 28px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts .k { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }

/* footer */
footer { padding: clamp(40px, 5vw, 72px) 0 40px; }
.icetank section.panel, .icetank footer { background: var(--bg2); }  /* the venue keeps light bands */
.foot { display: grid; gap: 32px; }
@media (min-width: 900px) { .foot { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
                            .foot.two { grid-template-columns: 1fr auto; align-items: end; } }  /* the lockup and one column of facts */
.foot h3 { font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: var(--fs-body); color: var(--ink2); }
.legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap;
         gap: 16px; justify-content: space-between; font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--ink3); }
.head .soon, .stack .soon { justify-self: start; }

/* ── the phone's menu ─────────────────────────────────── */
.menu-sheet { display: none; border-top: 1px solid var(--line); background: var(--bg); }
.menu-sheet.open { display: grid; }
.menu-sheet a { padding: 18px var(--pad); border-bottom: 1px solid var(--line); font-size: var(--fs-micro);
                letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.menu-sheet a:last-child { border-bottom: 0; }
@media (min-width: 900px) { .menu-sheet { display: none !important; } }

/* ── the venue in pictures ────────────────────────────── */
.gallery { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.gallery figure { margin: 0; display: grid; gap: 10px; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }

/* a photograph the width of the page, with its place written under it */
.band { padding: 0; }
.band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.band figure { margin: 0; }
.band figcaption { padding: 14px var(--pad) 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.12em;
                   text-transform: uppercase; color: var(--ink3); }

/* ── the mark ─────────────────────────────────────────── */
/* the PR monogram, cut from the owner's lockup as graphite on nothing, so it sits on either ground */
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; }
.mark { height: 22px; width: auto; }
@media (min-width: 900px) { .mark { height: 25px; } }
.foot-lockup { width: 200px; max-width: 62%; height: auto; }

/* the venue's own wordmark, as ICETANK draws it — their grey, never recoloured (repository rule 1) */
.icetank-mark { height: 30px; width: auto; }
.venue-mark { height: 26px; margin-bottom: 4px; }
@media (min-width: 900px) { .icetank-mark { height: 34px; } .venue-mark { height: 30px; } }
.foot .icetank-mark { height: 15px; }
.hero-mark { margin: 18px 0 6px; }

/* ── the venue's own header ───────────────────────────── */
/* on the venue's page (and on icetank.com later) ICETANK's mark leads and Physical Realm endorses it,
   the way a group's venue signs its own door */
.brand-venue { display: grid; gap: 4px; justify-items: start; }
.brand-venue .icetank-mark { height: 22px; }
@media (min-width: 900px) { .brand-venue .icetank-mark { height: 26px; } }
.endorse { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); }
@media (min-width: 900px) { .endorse { font-size: 12px; } }
.endorse:hover { color: var(--ink); }

/* the lockup was cut as graphite on nothing, so on the dark footer it is inverted rather than re-cut */
body:not(.icetank) footer .foot-lockup { filter: invert(1) brightness(1.06); }

/* the company's header is the top of the dark field, not a pale strip above it (Qing, 2026-09-13: start the
   graphite from the top, including the header — the venue photograph beneath it is white) */
body:not(.icetank) header.top { background: #2F2F2C; backdrop-filter: none; -webkit-backdrop-filter: none;
                          border-bottom-color: transparent; }  /* exactly the hero's ink, not 92% of it: one field, no seam (Qing) */
body:not(.icetank) header.top .mark { filter: invert(1) brightness(1.06); }   /* the monogram was cut in graphite */
/* contact and the footer are one closing band of ink — the alternation is paper, ink, paper, ink, and the
   page ends on the last one rather than striping twice (Qing) */
body:not(.icetank) footer { border-top: 0; padding-top: 0; }
body:not(.icetank) #contact { padding-bottom: clamp(40px, 5vw, 72px); }

/* ── ICETANK is not Physical Realm ────────────────────────────────────────
   Everything after the Aesop measurement of 2026-09-13 — the darker text, the heavier tracked capitals, the
   larger micro type, the graphite bands — was asked for on physicalrealm.co.uk and only there (Qing, that
   evening, twice). One stylesheet serves both brands, so the venue's pages take back their own values here.
   If the venue is ever to have the same treatment, it is this block that goes. */
.icetank {
  --ink: #32322E; --ink2: #55534C; --ink3: #8B887E;
  --fs-micro: 11px; --fs-body: 16px; --fs-lead: 19px;
}
@media (min-width: 900px) { .icetank { --fs-micro: 12px; --fs-body: 17px; --fs-lead: 22px; } }
.icetank h1, .icetank h2, .icetank h3 { font-weight: 300; }
.icetank .label, .icetank .nav, .icetank .btn, .icetank .link, .icetank .col .state, .icetank .facts .k,
.icetank .gallery figcaption, .icetank .band figcaption, .icetank .endorse, .icetank .foot h3,
.icetank .soon { font-weight: 400; }
.icetank .col h3 { font-weight: 400; }

/* a section whose two halves are both text: what it is called on the left, what it says on the right */
.editorial .head { margin-bottom: 0; }
.editorial .head h2 { font-size: clamp(24px, 2.6vw, 34px); }
@media (max-width: 899px) { .editorial .head { margin-bottom: 28px; } }

/* the company's contact facts sit next to each other, sized by their own words. On a 1136 px grid of three
   equal columns two short e-mail addresses and an address drifted apart and read as three unrelated things
   (Qing). The venue's facts keep their grid — its three are long enough to fill it. */
body:not(.icetank) .facts { display: flex; flex-wrap: wrap; gap: 30px clamp(48px, 7vw, 104px); }
body:not(.icetank) .facts > div { max-width: 40ch; }