/* ==========================================================================
   The Edit Studio: website design system
   Layout concept: a publication. One large opening statement that interlocks
   with an offset image, then quieter, asymmetrical features on a 12-column
   grid. The site commits to one light look; there is no dark theme.
   ========================================================================== */

:root {
  /* Brand palette */
  --cream: #FAF7F2;       /* page background */
  --sand: #D6C7B4;        /* image areas, panels */
  --rule: #E5D8CE;        /* thin rules and outlines */
  --terracotta: #C47A5A;  /* accent only: underlines, focus, fine detail. Never body text (3.1:1 on cream) */
  --brown: #6B4C3B;       /* all text on cream (7.2:1) */
  --deep: #2C1F1A;        /* one inverse panel per page at most */

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --step--1: 0.875rem;                                   /* 14px: legal, captions */
  --step-0: 1.125rem;                                    /* 18px: body */
  --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);    /* standfirsts */
  --step-2: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);   /* section heads */
  --step-3: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);        /* statements */
  --step-4: clamp(2.75rem, 1.9rem + 3.6vw, 5rem);        /* feature titles */
  --display: clamp(3.25rem, 1.6rem + 7vw, 8.25rem);      /* the opening line */

  /* Space */
  --gutter: clamp(16px, 4.5vw, 64px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --section: clamp(5rem, 3rem + 8vw, 11rem);
  --maxw: 1440px;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--brown);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

figure { margin: 0; }

a { color: inherit; }

strong { font-weight: 400; }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  background: var(--brown);
  color: var(--cream);
  padding: 0.75rem 1rem;
  font-weight: 400;
  z-index: 50;
}
.skip-link:focus { top: 16px; }

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

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.grid > * { min-width: 0; grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Text components
   -------------------------------------------------------------------------- */

.label {
  font-weight: 400;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

.standfirst {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
}

.prose { max-width: 36rem; display: grid; gap: 1.1em; }

.link {
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-thickness 0.15s ease;
}
.link:hover { text-decoration-thickness: 2px; }

.price {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

/* Text still to be supplied, e.g. trader details. Visible in previews so nothing ships blank. */
.tbc {
  border-bottom: 1px dashed var(--terracotta);
  padding-inline: 0.1em;
}

/* --------------------------------------------------------------------------
   Buttons. Rounded, matching the Payhip buttons.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--brown);
  border-radius: 999px;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--deep); border-color: var(--deep); }

.btn--on-dark { background: var(--cream); border-color: var(--cream); color: var(--deep); }
.btn--on-dark:hover { background: var(--sand); border-color: var(--sand); }
.btn--on-dark:focus-visible { outline-color: var(--cream); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* --------------------------------------------------------------------------
   Image slots. Real photography replaces the placeholder; the frame stays.
   -------------------------------------------------------------------------- */

.slot {
  position: relative;
  max-width: 100%;
  background: var(--sand);
  overflow: hidden;
}
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot--portrait { aspect-ratio: 4 / 5; }
.slot--tall { aspect-ratio: 3 / 4; }
.slot--landscape { aspect-ratio: 3 / 2; }

.slot__todo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid rgba(250, 247, 242, 0.55);
  outline: 1px solid var(--sand);
  outline-offset: -1px;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--brown);
}
.slot__todo b { font-weight: 400; }

.caption {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  line-height: 1.5;
  max-width: 28rem;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.site-header { position: relative; z-index: 20; }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.1rem, 2vw, 1.75rem);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.nav { display: none; position: relative; }

.nav__list,
.nav__sub,
.mobile-nav__list,
.mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }

.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brown);
  font: 400 1rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.nav__link:hover,
.nav__trigger:hover,
.nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-underline-offset: 0.45em;
}

.chevron {
  display: block;
  width: 11px; height: 11px;
  overflow: visible;
  transform-origin: 50% 50%;
  transition: transform 0.15s ease;
}
[aria-expanded="true"] > .chevron { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(19rem, calc(100vw - 32px));
  padding: 0.75rem 0;
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px -24px rgba(44, 31, 26, 0.35);
}

.nav__sub a {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1.5rem;
  text-decoration: none;
}
.nav__sub a:hover .nav__sub-title { text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: 0.3em; }
.nav__sub-title { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.25; }
.nav__sub-note { font-size: var(--step--1); line-height: 1.4; }
.nav__sub li + li { border-top: 1px solid var(--rule); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--brown);
  font: 400 1rem/1 var(--font-body);
  cursor: pointer;
}

.mobile-nav {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: 0.5rem 1.5rem;
}

.mobile-nav__list > li { border-bottom: 1px solid var(--rule); }
.mobile-nav__list > li:last-child { border-bottom: 0; }

.mobile-nav__link,
.mobile-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brown);
  font: 400 1.5rem/1.2 var(--font-display);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mobile-nav__trigger .chevron { width: 12px; height: 12px; }

.mobile-nav__sub { padding: 0 0 1rem; display: grid; gap: 0.25rem; }
.mobile-nav__sub a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.5rem 0;
  font-weight: 400;
  font-size: 1.0625rem;
  text-decoration: none;
}
.mobile-nav__sub span { font-weight: 300; font-size: var(--step--1); }

@media (min-width: 760px) {
  .nav { display: block; }
  .menu-toggle, .mobile-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--section);
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 5rem) 2.5rem;
  font-size: 1rem;
}

.site-footer__top { row-gap: 2.5rem; }

.site-footer__brand { grid-column: 1 / -1; }

.footer-col h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step--1);
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: 0.3em; }

.footer-col { grid-column: span 2; }

@media (min-width: 900px) {
  .site-footer__brand { grid-column: 1 / span 4; }
  .footer-col { grid-column: span 2; }
  .footer-col:first-of-type { grid-column: 6 / span 2; }
}

.site-footer__legal {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  line-height: 1.6;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 900px) {
  .site-footer__legal { grid-template-columns: 1fr auto; align-items: end; }
}

/* --------------------------------------------------------------------------
   Signup form (MailerLite will receive submissions)
   -------------------------------------------------------------------------- */

.signup { display: grid; gap: 1rem; max-width: 34rem; }

.signup__row {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 560px) {
  .signup__row { grid-template-columns: 1fr auto; align-items: end; }
}

.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 400; font-size: var(--step--1); }
.field input {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--brown);
  border-radius: 0;
  background: transparent;
  color: var(--brown);
  font: 300 var(--step-0)/1.4 var(--font-body);
}
.field input::placeholder { color: var(--brown); opacity: 0.6; }
.field input:focus-visible { outline: none; border-bottom: 2px solid var(--terracotta); }

.signup__note { font-size: var(--step--1); line-height: 1.55; }

.signup__status { font-size: 1rem; font-weight: 400; }
.signup__status:empty { display: none; }

/* ==========================================================================
   Homepage
   ========================================================================== */

/* Opening ----------------------------------------------------------------- */

/* Type-led, like a magazine opener: the headline takes the full measure at
   display size, and the lede steps down into the right-hand columns, so the
   page reads on a diagonal from the headline to the first action. */
.opening { padding-top: clamp(2rem, 5vw, 5rem); row-gap: clamp(2.5rem, 5vw, 4.5rem); }

.opening__title {
  font-size: var(--display);
  line-height: 0.96;
  letter-spacing: -0.02em;
}

.opening__lede { display: grid; gap: 2rem; align-content: start; }
.opening__lede p { max-width: 30rem; font-size: var(--step-1); line-height: 1.55; }

@media (min-width: 900px) {
  .opening__title { grid-column: 1 / span 11; }
  .opening__lede  { grid-column: 7 / span 5; }
}

/* Point of view ------------------------------------------------------------ */

/* Answers the opening from the left: statement and text sit side by side, so
   the page alternates left and right into The Style Brief feature below. */
.pov { margin-top: var(--section); row-gap: clamp(2rem, 4vw, 3rem); }

.pov__statement {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.22;
  letter-spacing: -0.005em;
  max-width: 22ch;
}

.pov__body { display: grid; gap: 1.75rem; align-content: start; }

@media (min-width: 900px) {
  .pov__statement { grid-column: 1 / span 6; max-width: 20ch; }
  .pov__body      { grid-column: 7 / span 5; padding-top: 0.6rem; } /* same edge as the opening lede */
}

/* The Style Brief feature ------------------------------------------------- */

.feature { margin-top: var(--section); row-gap: 2rem; }

.feature__meta { display: grid; gap: 1.25rem; align-content: end; }

.feature__title { font-size: var(--step-4); line-height: 1; letter-spacing: -0.01em; }

.feature__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.feature__buy .label { font-weight: 300; }

@media (min-width: 900px) {
  .feature__image { grid-column: 1 / span 8; margin-left: calc(-1 * var(--gutter)); }
  .feature__meta  { grid-column: 9 / span 4; padding-bottom: 1rem; }
}
@media (min-width: 1440px) {
  .feature__image { margin-left: calc((1440px - 100vw) / 2 - var(--gutter)); }
}
/* A cut-out product image sits inside the grid instead of bleeding to the edge. */
.feature__image--object { margin: 0; }
.feature__image--object .cutout { width: min(100%, 36rem); margin-inline: auto; }
@media (min-width: 900px) {
  .feature__image--object { grid-column: 1 / span 8; margin-left: 0; align-self: center; }
  .feature__image--object .cutout { width: min(100%, 38rem); margin-inline: auto; }
}
@media (min-width: 1440px) {
  .feature__image--object { margin-left: 0; }
}

/* The Formula panel -------------------------------------------------------- */

.formula {
  margin-top: var(--section);
  background: var(--deep);
  color: var(--cream);
  padding-block: clamp(4rem, 3rem + 6vw, 8.5rem);
}
.formula h2, .formula h3 { color: var(--cream); }
.formula .grid { row-gap: 2.5rem; }

.formula__head { display: grid; gap: 1.25rem; align-content: start; }
.formula__title { font-size: var(--step-4); line-height: 1; letter-spacing: -0.01em; }
.formula__status { color: var(--sand); }

.formula__body { display: grid; gap: 2.25rem; }
.formula__body .prose { max-width: 34rem; }

.facts { margin: 0; display: grid; border-top: 1px solid rgba(214, 199, 180, 0.35); }
.facts div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid rgba(214, 199, 180, 0.35);
}
.facts dt { color: var(--sand); font-size: var(--step--1); padding-top: 0.2rem; }
.facts dd { margin: 0; }
.facts .price { font-size: var(--step-1); }

.formula .link { text-decoration-color: var(--sand); }
.formula :focus-visible { outline-color: var(--cream); }

@media (min-width: 900px) {
  .formula__head { grid-column: 1 / span 5; }
  .formula__body { grid-column: 7 / span 6; }
}

/* The Edit ---------------------------------------------------------------- */

.edit { margin-top: var(--section); row-gap: 2rem; }
.edit__head { display: grid; gap: 1rem; align-content: start; }
.edit__title { font-size: var(--step-3); }

@media (min-width: 900px) {
  .edit__head { grid-column: 1 / span 5; }
  .edit .signup { grid-column: 7 / span 6; align-self: end; }
}

/* ==========================================================================
   Shared page components
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  background: var(--deep);
  color: var(--cream);
  font: 400 0.9375rem/1.35 var(--font-body);
  z-index: 100;
  box-shadow: 0 10px 30px -12px rgba(44, 31, 26, 0.5);
}

/* Page opening for inner pages */
.page-head { padding-top: clamp(2rem, 5vw, 5rem); row-gap: 1.5rem; }
.page-head__title { font-size: var(--step-4); line-height: 1; letter-spacing: -0.01em; }
.page-head__lede { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; max-width: 26ch; }
@media (min-width: 900px) {
  .page-head__title { grid-column: 1 / span 7; }
  .page-head__lede { grid-column: 1 / span 8; }
}

/* A section heading with its text beside it on wide screens */
.block { margin-top: var(--section); row-gap: 1.75rem; }
.block__title { font-size: var(--step-3); }
@media (min-width: 900px) {
  .block > .block__title { grid-column: 1 / span 4; }
  .block > .block__body { grid-column: 6 / span 7; }
}

.big-statement {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.22;
  max-width: 22ch;
}

/* Bands */
.band { margin-top: var(--section); padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); }
.band--sand { background: var(--sand); }
.band--sand .label, .band--sand .facts dt { color: var(--brown); }
.band--deep { background: var(--deep); color: var(--cream); }
.band--deep h1, .band--deep h2, .band--deep h3 { color: var(--cream); }
.band--deep .link { text-decoration-color: var(--sand); }
.band--deep :focus-visible { outline-color: var(--cream); }
.band--deep .slot { background: #4A3A31; }
.band--deep .slot__todo { color: var(--cream); outline-color: #4A3A31; border-color: rgba(250, 247, 242, 0.25); }
.band + .site-footer, .band--flush { margin-top: 0; }

/* Numbered contents: used only where the order is real (chapters, sections, steps) */
.contents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.contents li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.contents__n {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--terracotta);
  font-variant-numeric: lining-nums;
}
.contents__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
.contents__note { font-size: 1rem; line-height: 1.55; }
.band--deep .contents, .band--deep .contents li { border-color: rgba(214, 199, 180, 0.3); }
.band--deep .contents__n { color: var(--sand); }

.contents-group + .contents-group { margin-top: 2.5rem; }
.contents-group h3 { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); margin-bottom: 0.75rem; }

/* Definition facts on cream */
.facts--light { border-top-color: var(--rule); }
.facts--light div { border-bottom-color: var(--rule); }
.facts--light dt { color: var(--brown); }

/* Questions and answers */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding-block: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq details > div { padding-bottom: 1.4rem; max-width: 40rem; display: grid; gap: 0.9em; }

/* Prose pages: legal, confirmations */
.text-page { padding-top: clamp(2rem, 5vw, 5rem); }
.text-page__inner { max-width: 44rem; display: grid; gap: 1.1em; }
.text-page h1 { font-size: var(--step-3); margin-bottom: 0.5rem; }
.text-page h2 { font-size: var(--step-1); margin-top: 1.5em; }
.text-page ul { margin: 0; padding-left: 1.2em; display: grid; gap: 0.4em; }
.draft-note {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--terracotta);
  font-size: 1rem;
}

/* ==========================================================================
   Shop all
   ========================================================================== */

.collection { margin-top: clamp(3rem, 6vw, 6rem); }
.collection__item { row-gap: 2rem; }
.collection__meta { display: grid; gap: 1.1rem; align-content: center; }
.collection__title { font-size: var(--step-4); line-height: 1; letter-spacing: -0.01em; }
.collection__title a { text-decoration: none; }
.collection__title a:hover { text-decoration: underline; text-decoration-color: var(--terracotta); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
@media (min-width: 900px) {
  .collection__item--image .collection__image { grid-column: 1 / span 7; }
  .collection__item--image .collection__meta { grid-column: 9 / span 4; }
  .collection__item--type .collection__title { grid-column: 1 / span 6; }
  .collection__item--type .collection__meta { grid-column: 7 / span 6; }
}
/* A product cover in the shop: catalogue size, centred in its column, no panel. */
.collection__image--object { margin: 0; }
.collection__image--object .cutout { width: min(100%, 24rem); margin-inline: auto; }
@media (min-width: 900px) {
  .collection__image--object .cutout { width: min(100%, 26rem); }
}

.choose { margin-top: var(--section); row-gap: 2rem; }
.choose__title { font-size: var(--step-3); }
.choose__options { display: grid; gap: 2rem; }
.choose__options > div { display: grid; gap: 0.75rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--brown); }
.choose__options h3 { font-size: var(--step-1); }
@media (min-width: 900px) {
  .choose__title { grid-column: 1 / span 4; }
  .choose__options { grid-column: 6 / span 7; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
}

/* ==========================================================================
   Product pages
   ========================================================================== */

.product-open { padding-top: clamp(1.5rem, 4vw, 4rem); row-gap: 2.5rem; }
.product-open__text { display: grid; gap: 1.25rem; align-content: start; }
.product-open__title { font-size: var(--display); line-height: 0.98; letter-spacing: -0.015em; }
.buybox {
  display: grid;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.buybox__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.buybox__price { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.buybox__note { font-size: var(--step--1); line-height: 1.5; }
.band--deep .buybox { border-top-color: rgba(214, 199, 180, 0.35); }
@media (min-width: 900px) {
  .product-open__text { grid-column: 1 / span 6; padding-top: 1rem; }
  .product-open__image { grid-column: 8 / span 5; }
  /* No image yet (The Formula): give the text a little more width. */
  .product-open--text .product-open__text { grid-column: 1 / span 7; padding-bottom: 1rem; }
}

.split { margin-top: var(--section); row-gap: 2rem; }
@media (min-width: 900px) {
  .split__lead { grid-column: 1 / span 6; }
  .split__body { grid-column: 8 / span 5; align-self: end; }
}

/* Look inside: three spreads at different sizes */
.inside { margin-top: var(--section); row-gap: 2rem; }
.inside__title { font-size: var(--step-3); }
.inside__a, .inside__b, .inside__c { min-width: 0; }
.slot--phone { aspect-ratio: 9 / 16; }
/* Look inside flip-through: a silent loop. Plays only when motion is allowed (site.js). */
.flip__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No panel behind the flip-through: the video's cream matches the page, and its edges fade out
   so any tiny colour difference from video decoding never shows as a box. */
.flip { background: none; }
.flip__video {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.flip__toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  min-height: 36px;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(250, 247, 242, 0.88);
  color: var(--brown);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step--1);
  line-height: 1.2;
  cursor: pointer;
}
.flip__toggle:hover { background: var(--cream); }
@media (max-width: 600px) {
  .flip__toggle { right: 0.4rem; bottom: 0.4rem; min-height: 28px; padding: 0.2rem 0.65rem; font-size: 0.75rem; }
}
/* On phones the flip-through runs edge to edge so the pages are legible; the caption keeps the gutter. */
@media (max-width: 899px) {
  .inside__a .flip {
    max-width: none;
    margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));
  }
}
/* A cut-out object (the phone): no frame or background, shown whole at its own proportions. */
.cutout { width: 100%; height: auto; }
.inside__b { grid-column: 1 / span 2; }
.inside__c { grid-column: 3 / span 2; align-self: end; }
@media (min-width: 900px) {
  .inside__title { grid-column: 1 / span 5; }
  .inside__a { grid-column: 1 / span 7; grid-row: 2; }
  .inside__b { grid-column: 8 / span 3; grid-row: 2; align-self: end; }
  .inside__c { grid-column: 11 / span 2; grid-row: 2; align-self: end; }
}

/* The Style Brief: start and finish, as text. Start is loose on cream; finish sits on a sand panel. */
.shift { margin-top: var(--section); row-gap: 2rem; }
.shift__pair { display: grid; gap: 1rem; }
.shift__start, .shift__end { margin: 0; display: grid; gap: 1.25rem; align-content: start; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.shift__start { border-top: 1px solid var(--rule); padding-left: 0; padding-right: 0; }
.shift__end { background: var(--sand); }
.shift__label { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brown); }
.shift__quote { margin: 0; }
.shift__quote p { margin: 0; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; max-width: 22ch; }
.shift__words { margin: 0; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.15; color: var(--deep); }
.shift__words span { display: block; }
.shift__note { display: grid; gap: 0.75rem; }
.shift__note p { margin: 0; max-width: 38rem; }
@media (min-width: 900px) {
  .shift__title { grid-column: 1 / span 5; }
  .shift__pair { display: contents; }
  .shift__start { grid-column: 1 / span 5; }
  .shift__end { grid-column: 6 / span 7; }
  .shift__start { padding-top: 2.5rem; }
  .shift__note { grid-column: 6 / span 7; }
}

/* The Style Brief: what you finish with */
.outcome { margin-top: var(--section); row-gap: 2.5rem; }
/* A second buy point after "What you finish with", for phones only (the page is short enough on desktop). */
.buy-again { margin-top: 2.5rem; }
.buy-again .buybox { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 900px) { .buy-again { display: none; } }
.outcome__intro { display: grid; gap: 1.25rem; align-content: start; }
.outcome__parts { margin: 0; display: grid; border-top: 1px solid var(--rule); }
.outcome__parts div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1rem; padding-block: 0.85rem; border-bottom: 1px solid var(--rule); }
.outcome__parts dt { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.4; }
.outcome__parts dd { margin: 0; font-size: 1rem; }
@media (min-width: 900px) {
  .outcome__intro { grid-column: 1 / span 5; }
  .outcome__parts { grid-column: 7 / span 6; }
}

/* The Shopping Card, drawn in HTML so it stays sharp and editable */
.card-demo { margin-top: var(--section); row-gap: 2.5rem; align-items: center; }
.card-demo__text { display: grid; gap: 1.25rem; }
.shopping-card {
  justify-self: center;
  width: min(100%, 22rem);
  padding: 1.75rem 1.6rem 2rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 28px;
  box-shadow: 0 30px 60px -36px rgba(44, 31, 26, 0.45);
  display: grid;
  gap: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.shopping-card__name { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.1; }
.shopping-card__row { display: grid; gap: 0.2rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); }
.shopping-card__row b { font-weight: 400; }
.shopping-card__blank { letter-spacing: 0.08em; color: var(--brown); opacity: 0.7; }
.shopping-card ol { margin: 0; padding-left: 1.2em; display: grid; gap: 0.25rem; }
@media (min-width: 900px) {
  .card-demo__text { grid-column: 1 / span 5; }
  .card-demo .shopping-card { grid-column: 8 / span 4; }
}

.example-quote {
  margin: 0;
  display: grid;
  gap: 1rem;
}
.example-quote p {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.25;
  max-width: 24ch;
}
.example-quote figcaption { font-size: var(--step--1); }

/* The Formula: ten sections and the process */
.sections { row-gap: 2.5rem; }
.sections__intro { display: grid; gap: 1.25rem; align-content: start; }
.sections__list { columns: 1; }
@media (min-width: 900px) {
  .sections__intro { grid-column: 1 / span 4; position: sticky; top: 2rem; align-self: start; }
  .sections__list { grid-column: 6 / span 7; }
}

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: step; }
.steps li { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--brown); counter-increment: step; }
.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--terracotta);
}
.steps h3 { font-size: var(--step-1); }
.steps p { font-size: 1rem; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col-gap); }
}

/* ==========================================================================
   About
   ========================================================================== */

/* Built exactly like Behind The Edit below it: heading in the left columns,
   lede and text as one column on the right, so the two headings sit in the
   same place and both texts start on the same edge. */
.about-open { padding-top: clamp(2rem, 5vw, 5rem); row-gap: 2.5rem; }
.about-open__title { letter-spacing: 0; } /* match Behind The Edit */
.about-open__body { display: grid; gap: 2rem; align-content: start; }
.about-open__body > * { grid-column: 1 / -1; } /* the shared lede rule would otherwise span 8 columns in here */
@media (min-width: 900px) {
  .about-open__title { grid-column: 1 / span 4; }
  .about-open__body  { grid-column: 6 / span 6; }
}

.behind { row-gap: 2.5rem; }
.behind__title { font-size: var(--step-4); line-height: 1; }
@media (min-width: 900px) {
  .behind__head { grid-column: 1 / span 4; }
  .behind .prose { grid-column: 6 / span 6; }
}

/* ==========================================================================
   The Edit and confirmations
   ========================================================================== */

.edit-page { padding-top: clamp(2rem, 5vw, 5rem); row-gap: 2.5rem; }
.edit-page__head { display: grid; gap: 1.5rem; align-content: start; }
.edit-page__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.edit-page__list li { padding-block: 0.8rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) {
  .edit-page__head { grid-column: 1 / span 6; }
  .edit-page__form { grid-column: 8 / span 5; align-self: end; display: grid; gap: 2rem; }
}

.notice { padding-top: clamp(3rem, 8vw, 8rem); row-gap: 2rem; }
.notice__title { font-size: var(--step-4); line-height: 1.02; }
.notice__body { display: grid; gap: 1.5rem; align-content: start; max-width: 34rem; }
@media (min-width: 900px) {
  .notice__title { grid-column: 1 / span 7; }
  .notice__body { grid-column: 2 / span 6; }
}

/* Sections placed inside a band take the band's spacing instead of their own */
.band .product-open, .band .edit, .band .split { margin-top: 0; padding-top: 0; }

/* Utility: span the full grid */
.grid > .full { grid-column: 1 / -1; }

/* Logo mark beside the wordmark, and the footer logo */
.wordmark__mark { width: 2.5rem; height: 2.5rem; flex: none; }
@media (max-width: 480px) { .wordmark__mark { width: 2.125rem; height: 2.125rem; } }
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo img { width: 5rem; height: 5rem; }

/* Cookie consent. Dormant until cookieConsent is true in src/site.json. */
html[data-consent="false"] .consent,
html[data-consent="false"] .consent-settings { display: none !important; }
.consent {
  position: fixed;
  z-index: 50;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(26rem, calc(100% - 32px));
  padding: 1.5rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 40px rgba(44, 31, 26, 0.12);
}
.consent[hidden] { display: none; }
.consent__title { font-family: var(--font-display); font-size: var(--step-1); margin: 0 0 0.5rem; }
.consent__text { font-size: var(--step--1); line-height: 1.6; margin: 0 0 1.25rem; }
.consent__actions { display: flex; gap: 0.75rem; }
.consent__actions .btn { flex: 1; }
.btn--quiet { background: transparent; color: var(--brown); min-height: 44px; padding: 0.6rem 1.2rem; }
.btn--quiet:hover { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.footer-button { all: unset; cursor: pointer; font: inherit; color: inherit; }
.footer-button:hover { text-decoration: underline; }
.footer-button:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* Price line under the closing buy heading */
.split__lead .standfirst { margin-top: 0.75rem; }