/* Edges Pizza - shared styles */

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Oatmeal Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/oatmeal-pro-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../assets/fonts/archivo-700-900.woff2') format('woff2');
}

/* Type, per the brand guide (2.5 Typography). Four roles, two faces:
     headline + subheading - Oatmeal Pro Bold, upper or sentence case / sentence case
     feature text + body   - DM Mono Regular, sentence case
   Both at 0 letter spacing and 1.22 leading, which is why every font shorthand
   below ends in /1.22 and nothing in this file sets letter-spacing.
   Archivo stays in the display stack only as a fallback: the Oatmeal Pro cut we
   have carries 73 glyphs and has no apostrophe, ampersand, colon, slash,
   bracket, dash above a hyphen, or accented capital. No heading needs one
   today, so Archivo is never actually fetched - if one ever does, it renders
   rather than dropping to a system face. */
:root {
  --font-display: 'Oatmeal Pro', 'Archivo', sans-serif;
  --font-text: 'DM Mono', ui-monospace, monospace;
  --display-weight: 700;
  /* One duration and one curve for every state change, so a hover, a focus
     ring and a whole page all move at the same speed. */
  --swift: .18s cubic-bezier(.2, 0, 0, 1);
  /* The guide separates FEATURE TEXT from BODY COPY. Same face and weight, so
     size is the only thing telling them apart - which only works if every page
     steps between the same two. */
  --size-feature: 19px;
  --size-body: 15px;
  /* The cream, as paper. paper.webp is texture-plate-paper.jpg with its light
     falloff taken out and its grain laid onto #faf0e0 at a whisper, so it
     averages to the flat colour and nothing drawn on it shifts. Fixed to the
     viewport so every cream surface - the page, the sticky nav over it -
     shows the same sheet, with no seam where one ends. */
  --paper: #faf0e0 url(../assets/paper.webp) 0 0 / 429px auto fixed;
  /* Navy sits a hair above the paper: a tight contact shadow and a wider soft
     one, both in a warm brown rather than black so they read as shade on the
     cream, not grey. --flat is the same two shadows at nothing, so a hover
     that lays a surface back down can transition rather than snap. */
  --lift: 0 1px 1px rgb(60 44 24 / .16), 0 3px 9px -2px rgb(60 44 24 / .22);
  --flat: 0 0 0 0 rgb(60 44 24 / 0), 0 0 0 0 rgb(60 44 24 / 0);
  /* and the other way: paper set into navy, shaded under the top edge */
  --set-in: inset 0 2px 4px rgb(20 20 32 / .38), inset 0 -1px 1px rgb(255 255 255 / .35);
}
@media (max-width: 560px) {
  :root { --size-feature: 17px; --size-body: 15px; }
}

@view-transition {
  navigation: auto;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  font: 400 15px/1.22 var(--font-text);
  color: #343544;
}

a {
  color: #343544;
  /* The underline is always drawn and only its colour changes, so it washes in
     instead of snapping - text-decoration-line itself is a discrete property
     and would appear in one frame however long you gave it. */
  text-decoration-color: currentColor;
  transition: color var(--swift), text-decoration-color var(--swift);
}
a:hover { color: #1d1d1d; }

img { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 8px; top: -48px;
  background: #343544; color: #faf0e0;
  padding: 10px 16px;
  text-decoration: none;
  font: 400 14px/1.22 var(--font-text);
  transition: top .15s;
  z-index: 100;
}
.skip-link:focus { top: 8px; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* .page is a full-height flex column, so letting the shell and the home
   screen grow lets the hero take all the height the first screen has left
   after the nav - no magic numbers, and it still shrinks on a short window. */
.shell { flex: 1; display: flex; flex-direction: column; }
.shell > main { flex: 1; display: flex; flex-direction: column; }
.shell > main > [data-screen-label="Home"] { flex: 1; display: flex; flex-direction: column; }
.shell {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* nav */
.nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 34px clamp(20px, 5vw, 48px) 28px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #343544;
  text-decoration: none;
  cursor: pointer;
}
.nav-link .bar {
  height: 20px;
  background: #343544;
  box-sizing: border-box;
  /* Declared solid at zero width so the hover can grow it. border-style is
     discrete: left as `none` it would jump to `solid` in a single frame and
     take the whole border with it. */
  border: 0 solid #343544;
  transition: background var(--swift), border-width var(--swift), box-shadow var(--swift);
}
.nav-link .bar.grow { flex: 1; }
.nav-link .label {
  font: 400 16px/1.22 var(--font-text);
  white-space: nowrap;
  height: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 16px;
  margin: 0 -16px;
  transition: background var(--swift), color var(--swift), box-shadow var(--swift);
}
.nav-link:hover .bar { background: transparent; border-top-width: 2px; border-bottom-width: 2px; }
.nav-link:hover .label { background: #343544; color: #faf0e0; }
.nav-link:focus-visible { outline: 2px solid #343544; outline-offset: 4px; }

@media (max-width: 640px) {
  .nav { gap: 12px; padding: 24px clamp(20px, 5vw, 48px) 20px; }
  .nav-link { gap: 10px; }
  .nav-link .bar { height: 15px; }
  .nav-link .label { font-size: 12px; height: 15px; padding: 0 10px; margin: 0 -10px; }
}

/* main / view transitions */
/* @starting-style is the style an element is interpolated FROM the first time
   it renders, which is the only way to transition something that was not on
   the page a frame ago. A boosted navigation swaps a brand new #content in,
   so this runs on every page change as well as on the first paint.
   A fade only, deliberately: the overlay measures the hero to know where to
   close down onto and where to stand its copy of the wordmark, and it measures
   on the same frame this starts. Anything here that moves layout - a rise, a
   scale - moves the hero out from under those measurements and the wordmark
   lands twice, a few pixels apart. Opacity moves nothing. */
#content { transition: opacity .34s ease; }
@starting-style {
  #content { opacity: 0; }
}
main { view-transition-name: edges-main; }
::view-transition-group(edges-main) { overflow: hidden; animation: none; z-index: 1; }
::view-transition-image-pair(edges-main) { isolation: auto; }
::view-transition-old(edges-main),
::view-transition-new(edges-main) { width: 100%; height: auto; object-fit: none; object-position: top left; }
::view-transition-old(edges-main) { animation: edges-slide-out .45s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(edges-main) { animation: edges-slide-in .45s cubic-bezier(.4,0,.2,1) both; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(edges-footer) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4,0,.2,1); z-index: 2; }
::view-transition-old(edges-footer) { display: none; }
::view-transition-new(edges-footer) { animation: none; }
@keyframes edges-slide-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes edges-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(edges-main), ::view-transition-new(edges-main),
  ::view-transition-group(edges-footer) { animation: none !important; }
}

.footer { view-transition-name: edges-footer; }

/* Keep the sliding content underneath the menu. The view-transition snapshots
   are painted in the top layer, above all page content, so .nav's z-index:10
   cannot hold them back - the nav has to be captured as its own group and
   stacked above edges-main. The nav is identical on every page, so only the
   new snapshot is shown and it does not animate. */
.nav { view-transition-name: edges-nav; }
::view-transition-group(edges-nav) { z-index: 20; }
::view-transition-old(edges-nav) { display: none; }
::view-transition-new(edges-nav) { animation: none; }

/* section title */
.section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}
.section-title h1, .section-title h2 {
  font: var(--display-weight) 24px/1.22 var(--font-display);
  white-space: nowrap;
  margin: 0;
}
.section-title .bar { height: 18px; flex: 1; background: #343544; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 400 15px/1.22 var(--font-text);
  text-decoration: none;
  padding: 14px 26px;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background var(--swift), color var(--swift), border-color var(--swift), box-shadow var(--swift);
}
/* The same paper, multiplied by a colour so the hover can still darken it:
   white leaves it as it is, and #f5f1e9 takes it to the old #f0e3cd. */
/* The cream buttons and fields only ever sit on navy, and are set into it rather than
   on it: the navy's top edge shades the paper below it, and a faint light
   catches the bottom lip. The wordmark has the same cut baked into its image
   (edges-wordmark-paper.webp), since a shadow cannot follow the letterforms. */
.btn-light {
  color: #343544; background: var(--paper); background-color: #fff; background-blend-mode: multiply;
  box-shadow: var(--set-in);
}
.btn-light:hover { background-color: #f5f1e9; color: #343544; }
.btn-outline-light {
  color: #faf0e0;
  background: transparent;
  border: 2px solid #faf0e0;
  padding: 12px 24px;
}
.btn-outline-light:hover { background: rgba(250,240,224,.15); color: #faf0e0; }
/* Hover inverts it to paper and navy, ringed in navy. Same multiply trick as
   .btn-light: navy times the paper is navy, white times it is the paper, so
   the whole change is one colour that can transition. The ring is a shadow
   rather than a border so nothing moves - see the lift below. */
.btn-dark { color: #faf0e0; background: var(--paper); background-color: #343544; background-blend-mode: multiply; }
.btn-dark:hover { background-color: #fff; color: #343544; }

/* hero (home) */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 1;                                     /* fill the first screen */
  margin: 8px clamp(20px, 5vw, 48px) 0;
  background: #343544;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(88px, 10vw, 100px) 24px clamp(76px, 9vw, 88px);
  gap: 26px;
}
.hero h1 { margin: 0; width: 100%; }
.hero img { display: block; width: min(680px, 80%); height: auto; margin: 0 auto; transform: translate(-0.5%, 3.215%); }
.hero-actions { display: flex; gap: 14px; margin-top: -18px; flex-wrap: wrap; justify-content: center; }
/* Pre-order only, said on the way in, so nobody turns up hoping to walk in */
.hero-note {
  font: 400 var(--size-body)/1.4 var(--font-text);
  color: #faf0e0;
  text-align: center;
  max-width: 34em;
  margin: -8px auto 0;
  /* the times wrap into even halves on a phone rather than leaving one word behind */
  text-wrap: balance;
}
/* PRE-ORDER ONLY is its own line, the times the line under it */
.hero-note strong { display: block; margin-bottom: 4px; font-weight: inherit; text-transform: uppercase; letter-spacing: .06em; }
.hero-title {
  font: var(--display-weight) clamp(44px, 9vw, 108px)/1.22 var(--font-display);
  color: #faf0e0;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}
.hero-sub {
  font: 400 var(--size-feature)/1.22 var(--font-text);
  color: #faf0e0;
  opacity: .8;
  text-align: center;
  max-width: 460px;
  margin: -10px auto 0;
}

/* generic page padding */
.page-body { padding: 48px clamp(20px, 5vw, 48px) 20px; }
.page-body .section-title { margin-bottom: 10px; }

/* events */
.coming-soon {
  font: var(--display-weight) clamp(44px, 10vw, 112px)/1.1 var(--font-display);
  margin: clamp(40px, 8vw, 96px) 0;
  text-align: center;
}

/* forms: cream fields set into a navy panel */
.enquiry-form { background: #343544; color: #faf0e0; padding: 34px; display: flex; flex-direction: column; gap: 16px; }
.enquiry-form h2 { font: var(--display-weight) 22px/1.22 var(--font-display); margin: 0; }
.field {
  font: 400 var(--size-body)/1.22 var(--font-text);
  padding: 13px 14px;
  border: none;
  background: var(--paper);
  box-shadow: var(--set-in);
  color: #343544;
  /* a ring that is always there and only coloured in, so it can fade */
  outline: 2px solid transparent;
  outline-offset: 2px;
  width: 100%;
  transition: outline-color var(--swift);
}
.field:focus-visible { outline-color: #faf0e0; }
textarea.field { resize: vertical; font-family: var(--font-text); }

/* about */
/* Narrow screens wrap the copy around the floorplan, which is why the image
   leads the section in the markup: a float only affects what comes after it.
   Everything here is plain blocks on purpose - a flex container sidesteps a
   float as one solid box instead of letting its lines run past it, so the
   column, the lede and the paragraphs all stay block level at this width. */
.about-grid { display: block; }
.about-copy { max-width: 560px; }
.about-copy .lede { font: 400 var(--size-feature)/1.22 var(--font-text); }
.about-copy .lede p { margin: 0 0 20px; }
.about-copy .lede p:last-child { margin-bottom: 0; }
.about-photo {
  float: right;
  width: 46%;
  max-width: 215px;
  height: auto;
  margin: 2px 0 14px 18px;
  mix-blend-mode: multiply;
}
/* the address is a flex block, so it would stand beside a tall float rather
   than flow under it */
.find-us { clear: right; padding-top: 34px; }
.find-us { display: flex; flex-direction: column; gap: 8px; }
.find-us .label { font: var(--display-weight) 14px/1.22 var(--font-display); }
.find-us a { font: 400 var(--size-body)/1.22 var(--font-text); color: #343544; }
/* address and hours side by side, so the column stays about as tall as the
   floorplan beside it; they stack only when there is no room for both */
.visit { clear: right; padding-top: 34px; display: flex; flex-wrap: wrap; gap: 28px 48px; }
.visit .find-us { clear: none; padding-top: 0; }
.hours-list { margin: 0; font: 400 var(--size-body)/1.22 var(--font-text); display: flex; flex-direction: column; gap: 6px; }
.hours-list div { display: flex; justify-content: space-between; gap: 16px; }
.hours-list dt, .hours-list dd { margin: 0; }
/* Wide enough for two columns: the float comes off and the pair goes back to
   being side by side, with order putting the illustration on the right even
   though it is first in the markup. The negative top margin lifts it towards
   the heading, kept under the section title's 34px margin so it stays clear of
   the title's bar, which it would otherwise multiply against. */
@media (min-width: 760px) {
  .about-grid { display: flex; flex-wrap: wrap; gap: 34px 56px; align-items: flex-start; }
  .about-copy { display: flex; flex-direction: column; gap: 34px; flex: 1; min-width: 300px; order: 1; }
  .about-copy .lede { display: flex; flex-direction: column; gap: 20px; }
  .about-copy .lede p { margin: 0; }
  .about-photo {
    float: none;
    order: 2;
    flex: 1;
    width: auto;
    min-width: 280px;
    max-width: 440px;
    margin: -32px 0 0;
  }
  .find-us { clear: none; padding-top: 0; }
  .visit { clear: none; padding-top: 0; }
}

/* contact */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  grid-template-areas: "rows aside" "write aside";
  gap: 0 clamp(32px, 6vw, 64px); align-items: start;
}
/* The form sits under the rows in the wide column, with the aside (links and
   careers) running down beside both; narrow, the aside comes before the form. */
.contact-rows { grid-area: rows; }
.contact-aside { grid-area: aside; }
.write { grid-area: write; }
/* The address is sized off its own column, so the longest one always fits with
   room left for the bar and the arrow, however wide that column is. */
.contact-rows { container-type: inline-size; border-bottom: 2px solid #343544; }
.contact-row { display: block; padding: 24px 0 28px; border-top: 2px solid #343544; color: #343544; text-decoration: none; }
.contact-label { display: block; margin: 0; font: 400 13px/1.22 var(--font-text); color: #343544; }
.contact-value { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.contact-text { font: 400 clamp(18px, 5.9cqi, 44px)/1.22 var(--font-text); white-space: nowrap; }
.contact-value .bar {
  flex: 1; min-width: 12px; height: .5em; font-size: clamp(18px, 5.9cqi, 44px);
  background: #343544; border: 0 solid #343544;
  transition: background var(--swift), border-width var(--swift), box-shadow var(--swift);
}
.contact-arrow { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; }
.contact-row:hover .bar { background: transparent; border-top-width: 2px; border-bottom-width: 2px; }
.contact-row:focus-visible { outline-offset: 4px; }
.contact-copy { margin: 0 0 28px; padding-top: 24px; font: 400 var(--size-feature)/1.22 var(--font-text); }
.contact-more { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.contact-more a { display: flex; align-items: center; gap: 12px; font: 400 var(--size-body)/1.22 var(--font-text); color: #343544; text-decoration: none; }
.contact-more .bar {
  flex: none; width: 24px; height: 10px;
  background: #343544; border: 0 solid #343544;
  transition: background var(--swift), border-width var(--swift), box-shadow var(--swift);
}
.contact-more a:hover .bar { background: transparent; border-top-width: 2px; border-bottom-width: 2px; }
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rows" "aside" "write"; gap: 32px; }
  .contact-copy { padding-top: 0; }
}

.careers { margin-top: 36px; padding-top: 24px; border-top: 2px solid #343544; }
.careers-copy { margin: 12px 0 0; font: 400 var(--size-body)/1.4 var(--font-text); }

/* contact: write to us */
.write { display: block; margin-top: 48px; container-type: inline-size; }
@media (max-width: 820px) { .write { margin-top: 16px; } }
.write .section-title { margin-bottom: 24px; }
.write-form { gap: 26px; }
.write-subjects { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.write-subjects legend { padding: 0; margin-bottom: 12px; font: 400 13px/1.22 var(--font-text); text-transform: uppercase; letter-spacing: .06em; }
/* the subjects are chips: outlined in cream, and filled when picked */
.write-subjects label span {
  display: block; padding: 9px 14px; cursor: pointer;
  font: 400 14px/1.22 var(--font-text);
  border: 2px solid #faf0e0;
  transition: background var(--swift), color var(--swift);
}
.write-subjects label:hover span { background: rgba(250,240,224,.15); }
.write-subjects input:checked + span { background: #faf0e0; color: #343544; }
.write-subjects input:focus-visible + span { outline: 2px solid #faf0e0; outline-offset: 3px; }
/* each note shows only under its own subject; CSS alone, so it needs no JS */
.write-note { display: none; margin: 0; max-width: 46em; font: 400 var(--size-body)/1.4 var(--font-text); }
.write-form:has(input[value="Corporate orders"]:checked) .write-note[data-for="Corporate orders"] { display: block; }
.write-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 20px; }
@container (min-width: 560px) { .write-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.write-field { display: flex; flex-direction: column; gap: 8px; font: 400 13px/1.22 var(--font-text); }
.write-field.full { grid-column: 1 / -1; }
.write-field em { font-style: normal; opacity: .7; }
.write-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.write-foot p { margin: 0; font: 400 13px/1.4 var(--font-text); opacity: .8; }
.write-form[hidden], .write-done[hidden] { display: none; }
.write-done p { margin: 0; font: 400 var(--size-body)/1.4 var(--font-text); }
.write-done a { color: inherit; }
.write-done .btn { align-self: flex-start; }
@media (max-width: 560px) {
  .enquiry-form { padding: 24px 20px; }
  .write-foot .btn { width: 100%; }
}

/* footer */
.site-footer { margin-top: auto; padding: 30px clamp(20px, 5vw, 48px); }
.site-footer .row { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 1064px; margin: 0 auto; }
.site-footer .bar { height: 18px; background: #343544; }
.site-footer .bar.left { width: 80px; }
.site-footer .bar.mid { flex: 1; }
.site-footer .bar.right { width: 60px; }
.site-footer a { font: 400 14px/1.22 var(--font-text); color: #343544; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; white-space: nowrap; }
.site-footer a:hover { text-decoration-color: currentColor; }

/* how to order */
.order-copy { display: flex; flex-direction: column; gap: 46px; max-width: 700px; margin-inline: auto; text-align: center; }

/* feature text, so it sits a size above the step copy */
.order-lede { font: 400 var(--size-feature)/1.22 var(--font-text); margin: 0; }

/* The A-board outside the shop says PRE-ORDER ONLY inside a hand-ruled box.
   Same statement here: a navy block with the rule drawn inside it by an
   outline, offset inwards so it sits off the block's own edge. */
.order-banner {
  font: var(--display-weight) clamp(38px, 9vw, 72px)/1.22 var(--font-display);
  text-transform: uppercase;
  text-align: center;
  color: #faf0e0;
  background: #343544;
  margin: 0;
  padding: clamp(30px, 6vw, 46px) 20px;
  outline: 2px solid #faf0e0;
  outline-offset: -16px;
}
/* The board has a painted squiggle either side of ONLY. Drawn rather than
   typed: Oatmeal Pro has no tilde, so a literal ~ drops out of the headline
   face mid-word and pulls a whole fallback font down with it. */
.order-banner .squiggle {
  display: inline-block;
  width: .82em;
  height: .444em;            /* the viewBox's own ratio, so nothing letterboxes */
  margin: 0 .2em;
  vertical-align: .14em;     /* optical: centred on the cap height, not the baseline */
  overflow: visible;
}
.order-banner-ink { display: block; filter: url(#set-in-ink); }
.order-banner .squiggle path {
  fill: none;
  stroke: currentColor;      /* scales with the type, unlike a fixed pixel stroke */
  stroke-width: 6;
  stroke-linecap: round;
}

/* Each step is a nav row: the number, the title, then a bar running out to
   the edge of the column. Same motif as the main navigation, so the list
   belongs to the site rather than looking like a generic ordered list. */
.order-steps { display: flex; flex-direction: column; gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.order-steps li { counter-increment: step; text-align: left; }
.order-step h2 {
  font: var(--display-weight) 17px/1.22 var(--font-display);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.order-step h2::before {
  content: counter(step, decimal-leading-zero);
  font: 400 12px/1.22 var(--font-text);
  color: #faf0e0;
  background: #343544;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 22px;
  flex: none;
}
.order-step h2 .bar { height: 22px; flex: 1; background: #343544; }
/* line the copy up with the title rather than the number: 34px chip + 14px gap */
.order-step p { font: 400 var(--size-body)/1.22 var(--font-text); margin: 0; padding-left: 48px; }
.order-step p a { color: #343544; }

/* the fine print along the bottom of the board - the part people actually
   need, so it gets its own ruled box rather than being dropped to
   .order-note's 75% */
.order-rules {
  font: 400 var(--size-body)/1.22 var(--font-text);
  margin: 0;
  padding: 24px 28px;
  border: 2px solid #343544;
}
/* the question people ask most, so it is set like a heading */
.order-rules { text-wrap: balance; }
.order-rules strong {
  display: block;
  margin-bottom: 8px;
  font: var(--display-weight) 20px/1.22 var(--font-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.order-cta { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
.order-cta .btn { padding: 22px 26px; font-size: 16px; }
/* The button is a nav row: a bar running in from each edge to the label, here
   ending in a head so it points at it. Same stroke and mitred head as the
   contact page's arrows, drawn in currentColor so it inverts with the hover;
   the heads close in on the words as it does. */
.btn-pointed { gap: 14px; transition: background var(--swift), color var(--swift), box-shadow var(--swift), gap var(--swift); }
.btn-pointed:hover { gap: 8px; }
.btn-arrow { position: relative; flex: 1; height: 3px; background: currentColor; }
/* the head: two sides of a square turned 45deg, so its point is a true mitre */
.btn-arrow::after {
  content: ""; position: absolute; top: 50%; right: 1px;
  width: 10px; height: 10px; box-sizing: border-box;
  border: solid currentColor; border-width: 3px 3px 0 0;
  transform: translateY(-50%) rotate(45deg);
}
.btn-arrow.from-right::after { right: auto; left: 1px; border-width: 0 0 3px 3px; }
.order-notes { display: flex; flex-direction: column; gap: 9px; }
.order-note { font: 400 14px/1.22 var(--font-text); opacity: .75; margin: 0; }
.order-note a { color: #343544; }

@media (max-width: 560px) {
  .order-copy { gap: 36px; }
  .order-step p { padding-left: 0; }
  .order-rules { padding: 20px; }
}

.page-body .order-title { margin-bottom: 34px; }

/* On desktop the whole page fits one screen, so the column becomes a board: the
   banner and the button on the left, the instructions on the right. Placement
   only, so the reading order stays the source order. --air is the height the
   window has to spare beyond the tightest fit; the gaps below share it out, and
   their fractions add up to just under 1 so they can never cause a scroll. */
@media (min-width: 1000px) {
  .order-page {
    --air: clamp(0px, 100vh - 760px, 160px);
    padding-top: calc(16px + var(--air) * .25); padding-bottom: 8px;
  }
  .page-body .order-title { margin-bottom: calc(16px + var(--air) * .15); }
  .order-copy {
    display: grid; max-width: none; text-align: left;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas: "banner rules" "banner lede" "cta steps";
    gap: calc(14px + var(--air) * .15) 48px;
  }
  .order-banner { grid-area: banner; align-content: center; font-size: 44px; padding: 28px 20px; outline-offset: -10px; }
  .order-lede { grid-area: lede; }
  .order-steps { grid-area: steps; display: grid; grid-template-columns: 1fr 1fr; gap: calc(14px + var(--air) * .15) 32px; }
  .order-step h2 { margin-bottom: calc(6px + var(--air) * .05); }
  .order-step p { padding-left: 0; }
  .order-rules { grid-area: rules; align-content: center; padding: 14px 18px; }
  .order-cta { grid-area: cta; gap: 6px; text-align: center; align-self: end; }
  .order-cta .btn { padding: 14px 26px; }
}
/* A laptop-height window: the nav gives back a little, on every page alike, and
   what it gives back goes to the board. */
@media (min-width: 1000px) and (max-height: 760px) {
  .nav { gap: 12px; padding-top: 20px; padding-bottom: 16px; }
  .order-page { --air: clamp(0px, 100vh - 700px, 40px); }
}

/* The IZE credit, under the footer's bar row. Its own font, so .site-footer's
   link rule does not resize the link inside it. */
.footer-credit { margin: 26px auto 0; text-align: center; font: 400 clamp(7px, .85vw, 9px)/1.22 var(--font-text); color: #343544; opacity: .7; }
.footer-credit a { font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Every navy surface on the paper is lifted off it. Hovers that turn a bar
   hollow lay it back down, since an outline has nothing to lift. */
.nav-link .bar, .nav-link:hover .label, .section-title .bar, .hero,
.enquiry-form, .contact-value .bar, .contact-more .bar, .site-footer .bar,
.order-banner, .order-step h2::before, .order-step h2 .bar, .skip-link { box-shadow: var(--lift); }
.nav-link:hover .bar, .contact-row:hover .bar, .contact-more a:hover .bar { box-shadow: var(--flat); }
/* the ring is there at rest too, navy on navy, so the hover only has to fade
   the lift out */
.btn-dark { box-shadow: var(--lift), inset 0 0 0 2px #343544; }
.btn-dark:hover { box-shadow: var(--flat), inset 0 0 0 2px #343544; }

/* Intro: arriving at the home page, the navy fills the screen with the wordmark
   on it, then closes down onto the hero panel, which is the same navy. */
.intro {
  position: fixed; inset: 0; z-index: 90; overflow: hidden;
  background: #343544; pointer-events: none;      /* the artwork is cream, drawn on the Edges navy */
  /* Held on the navy until script has measured the hero: on a cold load the
     scripts can land after the animation would have finished, and it would
     close onto nothing. intro-failsafe clears the overlay if they never land,
     so a failed script cannot leave the page covered. */
  animation: intro-leave 1.44s cubic-bezier(.66, 0, .24, 1) forwards paused,
             intro-failsafe .3s ease 4s forwards;
  /* The going away is a transition, not part of the animation above, so that
     the same fade serves both endings: the overlay finishing its contraction,
     and someone scrolling before it has. display is a discrete property - left
     to itself it would flip to none on the first frame and cut the fade off -
     so allow-discrete holds the element displayed for the whole fade and hides
     it on the last frame. The hide and the fade can no longer drift apart,
     which is what a setTimeout matched to this duration by hand used to do. */
  opacity: 1;
  transition: opacity .3s ease, display .3s allow-discrete;
}
/* Script has the rect: drop the failsafe and let the contraction run. */
.intro.is-playing { animation-name: intro-leave; animation-play-state: running; }
@keyframes intro-failsafe { to { opacity: 0; } }
/* has to out-specify html[data-home] .intro below, which sets display */
html[data-home] .intro.is-gone { opacity: 0; display: none; }
/* The wordmark is in the overlay from the first frame, standing exactly where
   the panel's own one is - script measures it and matches it - so nothing
   moves when the navy finishes closing in and the overlay goes. (The panel
   itself cannot simply be raised above the overlay: main carries a
   view-transition-name, which makes it a stacking context of its own.) */
.intro-logo { position: fixed; display: block; }
/* The navy does not fade away - it closes down onto the hero's own panel,
   which is the same colour and already sitting there on the page underneath.
   The rect comes from script, which measures it and starts this; with no
   script it never starts, and intro-failsafe fades the overlay instead. */
@keyframes intro-leave {
  0%, 18% { clip-path: inset(0); }
  100%    { clip-path: inset(var(--hero-t, 0px) var(--hero-r, 0px) var(--hero-b, 0px) var(--hero-l, 0px)); }
}
/* The intro is how you arrive at the home page - on a cold load and again
   every time you come back to it from another page. Everywhere else it is not
   shown at all. */
.intro { display: none; }
html[data-home] .intro { display: block; }
/* has to match html[data-home] .intro above, or it loses on specificity and
   the overlay plays in full for someone who asked for no motion */
@media (prefers-reduced-motion: reduce) { html[data-home] .intro { display: none; } }

:focus-visible { outline: 2px solid #343544; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
}