/* ==========================================================================
   Suttons Business Park — Base
   Webfonts, reset, global element typography, layout primitives, utilities.
   Depends on: tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. WEBFONTS
   --------------------------------------------------------------------------
   Inter, self-hosted as a variable font. One file covers weights 100–900
   plus the optical-size axis, so there is no per-weight request.

   The supplied .ttf was 854KB and every page paid it. These are subsetted
   woff2 builds of the same file: 68KB for the roman a UK property site
   actually renders. Rebuild them from the masters in
   _resources/supplied/font with the recipe in _resources/README.md.

   Split on unicode-range, the way Google Fonts ships its own: latin loads
   always, latin-ext only if a character in that block is ever rendered — a
   Polish or Turkish tenant name, say. Nothing downloads on spec.

   Halyard Display (Figma spec for button labels + the legal note) was not
   supplied. Add its @font-face here and --font-display in tokens.css picks
   it up automatically.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-Italic-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable-Italic-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 100%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links must clear the fixed header */
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol { margin: 0; }

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}


/* --------------------------------------------------------------------------
   3. DOCUMENT
   -------------------------------------------------------------------------- */

body {
  background-color: var(--color-bg);
  color: var(--color-text);

  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-variation-settings: 'opsz' var(--font-opsz-text);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  min-height: 100vh;

  /* clip, not hidden. `overflow-x: hidden` makes the body a scroll container
     — the computed overflow-y goes to auto with it — and a position:sticky
     descendant then sticks inside that container rather than to the window,
     which is to say it does not stick at all. `clip` cuts off the same
     horizontal spill without creating a scrollport. The pinned image frames
     depend on this. */
  overflow-x: clip;
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   --------------------------------------------------------------------------
   The design's signature heading treatment is a two-tone line: light or
   letter-spaced first half, bold second half —

       EXCEPTIONAL PARK, / INSPIRED LOCATION
       READING'S PREMIER / INDUSTRIAL AND LOGISTICS PARK

   Mark the emphatic half with <strong> or .is-bold inside the heading.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-variation-settings: 'opsz' var(--font-opsz-display);
  text-wrap: balance;
  color: var(--color-text);
}

h1 { font-size: var(--fs-display-s); line-height: var(--lh-display-s); }
h2 { font-size: var(--fs-h1);        line-height: var(--lh-h1); }
h3 { font-size: var(--fs-h2);        line-height: var(--lh-h2); font-weight: var(--fw-light); }
h4 { font-size: var(--fs-h3);        line-height: var(--lh-h3); }
h5 { font-size: var(--fs-body-l);    line-height: var(--lh-body-l); }
h6 {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

p { text-wrap: pretty; }
p + p { margin-top: var(--space-sm); }

strong, b { font-weight: var(--fw-bold); }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--color-accent); }

hr {
  border: 0;
  border-top: var(--border-thin) solid var(--color-border-subtle);
  margin: var(--space-lg) 0;
}

::selection {
  background: var(--color-accent);
  color: var(--sbp-ink);
}


/* Display steps — apply to any element, not tied to heading level.
   Use these when the semantic level and the visual scale disagree. */
.t-watermark {
  font-size: var(--fs-watermark);
  line-height: var(--lh-watermark);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
}
.t-display-l  { font-size: var(--fs-display-l); line-height: var(--lh-display-l); letter-spacing: var(--ls-display); }
.t-display-m  { font-size: var(--fs-display-m); line-height: var(--lh-display-m); letter-spacing: var(--ls-display); }
.t-display-s  { font-size: var(--fs-display-s); line-height: var(--lh-display-s); }
.t-h1         { font-size: var(--fs-h1);        line-height: var(--lh-h1); }
.t-h2         { font-size: var(--fs-h2);        line-height: var(--lh-h2); }
.t-h3         { font-size: var(--fs-h3);        line-height: var(--lh-h3); }
.t-lead       { font-size: var(--fs-lead);      line-height: var(--lh-lead); }
.t-body-l     { font-size: var(--fs-body-l);    line-height: var(--lh-body-l); }
.t-body       { font-size: var(--fs-body);      line-height: var(--lh-body); }
.t-body-s     { font-size: var(--fs-body-s);    line-height: var(--lh-body-s); }
.t-caption    { font-size: var(--fs-caption);   line-height: var(--lh-caption); }
.t-legal      { font-size: var(--fs-legal);     line-height: var(--lh-legal); }

/* Eyebrow — "SUTTONS CENTRAL", "Our Occupiers:", "Unit Availability:" */
.t-eyebrow {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

/* The oversized brushed-metal word that bleeds off-canvas behind Location.
   Parent needs overflow:hidden. */
.t-metal {
  background: var(--grad-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Weight + colour helpers */
.t-light    { font-weight: var(--fw-light); }
.t-regular  { font-weight: var(--fw-regular); }
.t-bold     { font-weight: var(--fw-bold); }
.t-muted    { color: var(--color-text-muted); }
.t-subtle   { color: var(--color-text-subtle); }
.t-accent   { color: var(--color-accent); }
.t-upper    { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.t-center   { text-align: center; }


/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

/* Full-bleed: 100% wide with a flat 80px gutter each side. The gutter steps
   down on small screens via --container-inset in tokens.css. */
.container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--container-inset);
}

/* Capped: stops growing at 1600px and centres. Because box-sizing is
   border-box, the cap is the OUTER width — content settles at
   1600 − (80 × 2) = 1440px, the artboard measure.
   Use for anything that shouldn't stretch across a very wide monitor
   (the Inspired drum, spec rows, availability list…). */
.container--capped { max-width: var(--container-cap); }

/* Long-form copy measure */
.container--narrow {
  max-width: calc(var(--container-narrow) + var(--container-inset) * 2);
}

/* Full-bleed band. Set the surface with a modifier or data-theme. */
.section {
  position: relative;
  padding-block: var(--section-padding-y);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.section--flush     { padding-block: 0; }

/* --------------------------------------------------------------------------
   BAND — one continuous wash behind several sections.
   --------------------------------------------------------------------------
   Each .section paints its own --color-bg, so consecutive sections show a
   hard seam wherever their surfaces differ. Wrapping them in a .band moves
   the background up to the wrapper and makes the children transparent, so a
   single gradient stretches across the whole group with no join.

       <div class="band">
         …section… …section… …section…
       </div>
   -------------------------------------------------------------------------- */
.band { background: var(--grad-band); }
.band > .section { background: transparent; }

/* Second surface — vertical, darkest at the top edge so the change of band
   is legible without a hard rule between them. */
.band--alt { background: var(--grad-band-alt); }
/* The header is fixed and overlays the page. A section that opens a page
   WITHOUT a hero above it must clear it. */
.section--below-header { padding-top: calc(var(--section-padding-y) + var(--header-height)); }
.section--tight     { padding-block: calc(var(--section-padding-y) * 0.5); }
.section--deep      { background-color: var(--color-bg-deep); }
.section--gradient  { background: var(--grad-section); }
.section--gradient-alt { background: var(--grad-section-alt); }
.section--gradient-deep { background: var(--grad-deep); }

/* Stacks & grids */
.stack > * + * { margin-top: var(--stack-gap, var(--space-sm)); }
.stack--sm { --stack-gap: var(--space-2xs); }
.stack--md { --stack-gap: var(--space-md); }
.stack--lg { --stack-gap: var(--space-lg); }
.stack--xl { --stack-gap: var(--space-xl); }

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-lg));
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-sm));
}

@media (max-width: 900px) {
  .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   6. MEDIA
   -------------------------------------------------------------------------- */

/* Aspect-locked image frame. Pair with .kenburns for the drifting effect. */
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--media-ratio, 16 / 9);
  background-color: var(--sbp-ink);
}
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-position, center);
}
.media--square    { --media-ratio: 1 / 1; }
.media--portrait  { --media-ratio: 3 / 4; }
.media--wide      { --media-ratio: 21 / 9; }
.media--card      { --media-ratio: 4 / 3; }
.media--rounded   { border-radius: var(--radius-card); }

/* Gradient scrims for type-over-image */
.media--scrim::after,
.has-scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-scrim-image);
  pointer-events: none;
}
.has-scrim-top::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--grad-scrim-top);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   7. ACCESSIBILITY & UTILITIES
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-3xs, 2px);
}

.screen-reader-text,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-modal);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--sbp-white);
  color: var(--sbp-ink);
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.u-relative      { position: relative; }
.u-overflow-hidden { overflow: hidden; }
.u-no-scroll     { overflow: hidden; }
.u-full-height   { min-height: 100svh; }

@media (max-width: 900px) { .u-hide-mobile  { display: none !important; } }
@media (min-width: 901px) { .u-hide-desktop { display: none !important; } }