/* 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: #F6F5E8;          /* Aesop's *other* cream. Measuring the area of aesop.com: #FFFEF2 covers 15,578 kpx²
                             and #F6F5E8 covers 13,135 — half their page is this deeper, warmer one, and it is
                             what reads as "the Aesop yellow". The brighter cream was our light band until
                             2026-09-13; this is warmer without being another colour (Qing) */
  --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: #252525;         /* their near-black, measured: aesop.com's footer and dark blocks are rgb(37,37,37).
                             Ours had been #2F2F2C, ten points lighter, which is what Qing saw */
  --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, .immersive-text > .label { font-size: 14px; letter-spacing: 0.20em; }
@media (min-width: 900px) { .head > .label, .stack > .label, .immersive-text > .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: #252525;
  --bg2: #252525;
  --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: #252525;
  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: #252525; 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(34px, 4vw, 56px); }

/* ── 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: the name of the section above them both, then the heading and
   the sentences starting on the same line (Qing — the label was pushing the heading down its own column) */
.editorial h2 { font-size: clamp(24px, 2.6vw, 34px); margin-top: -0.14em; }  /* the cap of a 34px line sits lower in its box than an 18px one */
@media (max-width: 899px) { .editorial h2 { margin-bottom: 24px; } }

/* 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. */
/* contact takes the same divided row as the pillars: full width, and the hairlines hold the three apart
   instead of empty space doing it (Qing) */
#contact .col h3 { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; }

/* The company's divided rows lose their vertical rules: four short columns of text do not need to be ruled
   apart like a specification, and the cell padding the rules required was pushing the first column's text
   in to 103 px while every other line on the page starts at 72 (Qing). A rule above and below still holds
   the row as a band. The venue keeps its ruled cells. */
body:not(.icetank) .cols { gap: clamp(24px, 3vw, 48px); background: transparent; border: 0;
                           padding: clamp(8px, 1vw, 16px) 0; }   /* no rules at all: space does the dividing */
body:not(.icetank) .col { background: transparent; padding: 0; }

/* a section label with nothing under it in its own row belongs to what follows: it sits a line above the
   heading, not half a section above it (Qing) */
.head.only-label { margin-bottom: clamp(16px, 1.5vw, 24px); }

/* the contact row is justified across the band: the first item on the left edge, the last ending on the
   right edge, the middle one actually in the middle rather than at the start of a third (Qing) */
#contact .cols { display: grid; gap: 30px clamp(32px, 4vw, 64px); }
#contact .col { max-width: 34ch; }
@media (min-width: 760px) {
  /* three blocks of left-aligned text placed as a row: the first on the left edge, the second centred on the
     page, the third ending on the right edge — the middle one is centred by its box, not by a third of a grid */
  #contact .cols { grid-template-columns: 1fr auto 1fr; align-items: start; }
  #contact .col:nth-child(2) { justify-self: center; }
  #contact .col:nth-child(3) { justify-self: end; }
}

/* the footer is one line: the mark on the left, the legal text on the right, no band of empty ink between */
/* the same hairline the four areas get: it divides two blocks, here the contact facts from the mark and the
   legal line, and it runs the measure rather than the whole window (Qing) */
.footrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap;
           border-top: 1px solid var(--line); padding-top: clamp(26px, 3vw, 40px); }
.footrow .legal { margin: 0; padding: 0; border: 0; gap: 8px 28px; justify-content: flex-end; }
body:not(.icetank) footer { padding: 0 0 clamp(26px, 3vw, 40px); }  /* the space above the rule comes from the contact block, so it is counted once */

/* a second block inside a section is separated by one hairline across the measure, and air either side
   (Qing preferred the line to a label) */
body:not(.icetank) .cols.ruled { border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 88px);
                                 padding-top: clamp(32px, 4vw, 56px); }

/* ── the venue, immersive ─────────────────────────────────
   The room photograph fills the section and the words sit on the empty floor of it (Qing). A gradient of the
   page's own cream, left to right, keeps every line legible without hiding the room — the picture is never
   dimmed, only met. On a phone the photograph goes back to being a picture with the text beneath it: a
   375 px crop has no empty floor to write on. */
.immersive { position: relative; isolation: isolate; padding: 0;
             min-height: clamp(460px, 56vw, 780px); display: flex; align-items: center; }
.immersive-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Solid cream over the left third — which also covers the venue's name projected on that wall, so the page
   shows the wordmark once — and gone by the halfway line: the right half of the photograph is the
   photograph, untouched (Qing). The fall happens over a fifth of the width, so it is a soft edge, not a cut. */
.immersive::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
      var(--bg) 0%,
      var(--bg) 34%,
      color-mix(in srgb, var(--bg) 82%, transparent) 40%,
      color-mix(in srgb, var(--bg) 50%, transparent) 45%,
      color-mix(in srgb, var(--bg) 18%, transparent) 50%,
      transparent 54%); }
.immersive .wrap { width: 100%; display: grid; justify-items: start; gap: 26px;
                   padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }

                   /* a flex item shrinks to its content unless told otherwise, which pushed the block off the page's left edge */
.immersive-text { display: grid; gap: 22px; justify-items: start; max-width: 620px; }
.immersive-text .measure { max-width: 52ch; }

@media (max-width: 899px) {
  /* on a phone the room is a picture again, and it comes after what it illustrates: the venue is described
     first, then shown, then its four areas follow (Qing) */
  .immersive { display: flex; flex-direction: column; min-height: 0; }
  .immersive::before { display: none; }
  .immersive .wrap { display: flex; flex-direction: column; padding-top: clamp(28px, 5vw, 40px);
                     padding-bottom: clamp(26px, 5vw, 36px); gap: 0; }
  /* described, then shown, then asked: the button follows the photograph rather than preceding it (Qing) */
  .immersive-text { order: 1; }   /* the phone's button is not here: it closes the section after the areas */
  .immersive-bg { order: 2; position: static; height: auto; aspect-ratio: 4 / 3;
                  margin: clamp(26px, 5vw, 36px) calc(-1 * var(--pad)) 0; width: calc(100% + 2 * var(--pad)); max-width: none; }
}

/* The same invitation in the place that suits each layout, one of them rendered at a time (display:none
   keeps the other out of the page and out of a screen reader). On a wide screen it stands in the room with
   the sentences, which Qing kept; on a phone, where the room becomes a picture and the four areas follow it,
   it closes the section after Community. */
.areas-cta { display: none; margin-top: clamp(36px, 5vw, 64px); }
@media (max-width: 899px) {
  .immersive-cta { display: none; }
  .areas-cta { display: flex; width: fit-content; margin-left: auto; margin-right: 0; }  /* to the right edge of the column (Qing) */
}