/* ==========================================================================
   GEOMETRY ONLY. Every colour, background, border-colour, shadow, blend and
   filter has been stripped from this file. They live in _house.css, which is
   the single source of truth for everything visual.

   Why: a `.sec.light::after` in _ornament.css was painting cream at 90% over
   an entire section, on top of a `.light{background:… !important}` that had
   already won. Five stylesheets each adding a layer is not a cascade, it is
   a queue, and the last one to think of something wins. Do not reintroduce a
   colour here.
   ========================================================================== */
/* ==========================================================================
   SARACEN THREADS — LAYOUT
   Loads last. Owns exactly two things: where the header sits, and how much
   air everything gets. Nothing else may set page-level spacing.

   THE HEADER, FROM A DIFFERENT ANGLE
   It was position:fixed, which takes it out of the flow — so every page had
   to reserve the right number of pixels underneath it. I guessed that number
   twice and was wrong twice, because the bar's height changes with the
   viewport, the font, the cart badge and the two-line wordmark.

   A guess that has to be right on every screen is not a fix, it is a bug with
   a delay on it. So the header is now position:sticky. It sits IN the flow,
   occupies its own height whatever that turns out to be, and scrolls to the
   top and stays. Nothing can hide underneath it because there is no longer an
   underneath. No magic number, nothing to keep in sync, and it cannot regress.
   ========================================================================== */

:root{
  /* §8 of the brief. One scale, used everywhere, nowhere overridden. */
  --space-section: 64px;
  --space-block:   32px;
  --space-element: 16px;
  --gutter:        20px;
  --measure:       66ch;
}
@media (min-width: 900px){
  :root{ --space-section: 120px; --gutter: 44px; }
}

/* -------------------------------------------------------------- the header */
.head{
  position: sticky;
  top: 0;
  /* the fixed-position leftovers, neutralised */
  left: auto; right: auto;
  padding-top: env(safe-area-inset-top, 0px);
}
/* Nothing reserves space for it any more, because it takes its own. */
main > section:first-child{ padding-top: var(--space-section) }
.drawer{ padding-top: 0 }
[id]{ scroll-margin-top: 8px }

/* The homepage hero keeps its full-bleed feel by being tall, not by hiding
   under the bar. It is the one place the old overlap was deliberate. */
.ivan{ min-height: min(78vh, 720px); display: grid; place-items: center }
main > .ivan:first-child{ padding-top: var(--space-block) }
@media (max-width: 620px){
  .ivan{ min-height: min(72vh, 560px) }
}

/* ------------------------------------------------------------- the rhythm */
section{ padding-top: var(--space-section); padding-bottom: var(--space-section) }
.wrap, .sec__in{
  padding-left: var(--gutter); padding-right: var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.strip{ padding-top: var(--space-block); padding-bottom: var(--space-block) }

/* Air between blocks, set once rather than per-element. A paragraph that has
   room around it reads as considered; the same paragraph crammed reads as a
   discount site, and at £499 that is the whole argument lost. */
.sec__in > * + *{ margin-top: var(--space-element) }
.sec__in > * + h2, .sec__in > * + .d{ margin-top: var(--space-block) }
.prose > * + *{ margin-top: var(--space-element) }
.prose p{ max-width: var(--measure) }

/* --------------------------------------------------------------- the type */
body{ font-size: 16px; line-height: 1.6 }
p, li, td, th, label, input, select, textarea, button{ font-size: max(1rem, 16px) }
.small, .fine, .muted, figcaption{ font-size: .95rem; line-height: 1.6 }
.d, h1, h2, h3{ line-height: 1.15; text-wrap: balance }

/* ------------------------------------------------------- touch, not hover */
@media (hover: none){
  a:hover, button:hover, .btn:hover, .cta:hover, .folio:hover,
  .room:hover, .consent__b:hover{ all: revert-layer }
  .folio:hover .folio__price{ }
  a:active, button:active, .btn:active, .cta:active{ }
}
a, button, .btn, .cta, input[type=submit], summary, .size, .pick{
  min-height: 48px;
}
nav a, .head__nav a, footer a, .foot a{ min-height: 44px; display: inline-flex; align-items: center }
/* .head__nav gap removed: 8px here overrode the 2.6rem in saracen.css and
   collapsed the gap to roughly the letter-spacing INSIDE each item, so the
   four links read as one long phrase. Owned by _authority.css now. */
.btn + .btn, .cta + .cta{ margin-top: 8px }

/* ------------------------------------------------------------- the phone */
@media (max-width: 620px){
  html, body{ overflow-x: hidden; max-width: 100% }
  img, svg, video, table, pre{ max-width: 100%; height: auto }
  .prose, .sec__in, .wrap{ overflow-wrap: anywhere }
  table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }

  /* two columns is one column on a phone, always */
  /* .folios removed: it is a flex rail, owned by _authority.css. Setting an
     explicit grid track here collapsed the rail to min-content. */
  .why, .vs, .sets, .rooms, .strip__in{ grid-template-columns: 1fr }
  .strip__in{ grid-template-columns: repeat(2, 1fr); gap: var(--space-element) }

  /* sticky things clear the home indicator */
  .stickybuy, .shopbar, .consent{
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  /* one call to action visible at a time */
  .stickybuy.is-up ~ .consent{ display: none }
}
@media (max-width: 380px){
  :root{ --gutter: 16px; --space-section: 52px }
}

/* a blocked call to action must not look like a working one */
.cta--off{
  display:block;cursor:not-allowed;pointer-events:none;
  border:1px dashed rgba(169,139,75,.5);
}

/* ==========================================================================
   THE BELIEF CHAIN (§7.2)
   Six blocks, alternating ground, each one allowed to breathe. The old page
   ran three arguments into one column; these are six rooms, not six
   paragraphs, and the space between them is what makes each read as settled.
   ========================================================================== */
.belief .lede{ font-size: 1.08rem; line-height: 1.7; margin-top: var(--space-block) }
.belief p + p{ margin-top: var(--space-element) }
.belief h2{ margin-top: .5rem }
.belief .fine{ font-size: .92rem; line-height: 1.7;  margin-top: var(--space-block) }

.aside{
  font-family: var(--display); font-style: italic; font-size: clamp(1.2rem,4vw,1.6rem);
  line-height: 1.4;  text-align: center;
  margin: var(--space-block) auto 0; max-width: 24ch;
}

/* ---- the cut input, inside the belief it answers ---- */
.cut{
  margin-top: var(--space-block); padding: var(--space-block);
  border: 1px solid rgba(169,139,75,.4); 
}
.cut__h{ font-family: var(--display); font-size: 1.3rem;  margin: 0 }
.cut__d{ font-size: .92rem;  margin-top: .5rem }
.cut__row{ display: grid; gap: var(--space-element); margin-top: var(--space-element) }
@media (min-width: 560px){ .cut__row{ grid-template-columns: 1fr 1fr } }
.cut__f span{ display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
   margin-bottom: .4rem }
.cut__warn{ font-size: .88rem; line-height: 1.6;  margin-top: var(--space-element);
  padding-left: .9rem; border-left: 2px solid var(--madder-deep) }
.cut__ack{ margin-top: var(--space-element) }
.cut__ack b{ }

/* ---- fixings ---- */
.fixing{ margin-top: var(--space-block); border-top: 1px solid rgba(169,139,75,.3) }
.fixing__r{ display: grid; gap: .3rem; padding: var(--space-element) 0;
  border-bottom: 1px solid rgba(169,139,75,.18) }
@media (min-width: 640px){ .fixing__r{ grid-template-columns: 170px 1fr; gap: var(--space-element) } }
.fixing__k{ font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.fixing__v{  line-height: 1.7 }

.walls{ display: grid; gap: var(--space-element); margin-top: var(--space-element) }
@media (min-width: 760px){ .walls{ grid-template-columns: repeat(3,1fr); gap: var(--space-block) } }
.wall{ border-top: 2px solid var(--gold); padding-top: var(--space-element) }
.wall__t{ display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  }
.wall__b{ font-size: .92rem; line-height: 1.7;  margin-top: .6rem }
.wall__b b{ }

/* ---- after-sale ---- */
.afters{ display: grid; gap: var(--space-block); margin-top: var(--space-block) }
@media (min-width: 720px){ .afters{ grid-template-columns: 1fr 1fr } }
.after b{ display: block; font-family: var(--body); font-size: .96rem; margin-bottom: .4rem }
.after p{ font-size: .94rem; line-height: 1.7;  margin: 0 }

/* ---- the price ladder ---- */
.ladder{ margin-top: var(--space-block) }
.rung{ display: grid; gap: .3rem; padding: var(--space-element) 0;
  border-bottom: 1px solid rgba(169,139,75,.2) }
@media (min-width: 640px){ .rung{ grid-template-columns: 150px 1fr; gap: var(--space-element);
  align-items: baseline } }
.rung__p{ font-family: var(--display); font-size: 1.24rem;  }
.rung__d{  line-height: 1.7; font-size: .94rem }
.rung--ours{  
  padding-left: var(--space-element); padding-right: var(--space-element) }
.rung--ours .rung__p{   font-size: 1.7rem }
.rung--ours .rung__d{ }

.portable{
  font-family: var(--display); font-style: italic; font-size: clamp(1.35rem,5vw,2rem);
  line-height: 1.35;  text-align: center;
  margin: var(--space-section) auto var(--space-element); max-width: 20ch;
}

/* house reviews — real, verified, and about a different piece. Shown as such. */
.house-rev{ margin-top: var(--space-block); padding-top: var(--space-block);
  border-top: 1px solid rgba(169,139,75,.28) }
.house-rev__h{ font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
   margin:0 0 var(--space-element) }
.house-rev__g{ display:grid; gap:var(--space-element) }
@media(min-width:760px){ .house-rev__g{ grid-template-columns:repeat(3,1fr); gap:var(--space-block) } }
.hrev{ margin:0; border-left:2px solid rgba(169,139,75,.4); padding-left:var(--space-element) }
.hrev__stars{  letter-spacing:.14em; font-size:.82rem }
.hrev blockquote{ margin:.6rem 0 0; font-size:.94rem; line-height:1.7; }
.hrev figcaption{ margin-top:.6rem; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; }
.hrev figcaption span{  text-transform:none; letter-spacing:.02em }

/* ---- the service tier: two products, not a product and an extra ----------
   Equal size and equal weight is not a style choice. A cheaper option styled
   to be missed is a dark pattern, and it is what turns a lawful product
   choice back into an additional payment she can reclaim. */
.tier{ border:0; margin: var(--space-block) 0 0; padding:0; display:grid; gap:10px }
.tier__l{ font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
   padding:0; margin-bottom:6px }
.tier__o{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
  padding:var(--space-element); cursor:pointer; min-height:48px;
  border:1px solid rgba(169,139,75,.32); 
  transition:border-color .25s, background .25s }
.tier__o:has(input:checked){  }
.tier__o input{ margin-top:3px; width:18px; height:18px; accent-color:var(--gold) }
.tier__h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.tier__h b{ font-family:var(--body); font-weight:500; font-size:.96rem; }
.tier__p{ font-family:var(--display); font-size:1.15rem;  white-space:nowrap }
.tier__d{ display:block; margin-top:.4rem; font-size:.86rem; line-height:1.65; }
@media(max-width:620px){
  .tier__h{ flex-direction:column; gap:2px }
  .tier__d{ font-size:.82rem }
}

/* ==========================================================================
   FOR HER, NOT FOR A MAN OF TWENTY-FIVE
   Presbyopia begins around forty-five and is universal by sixty. So: nothing
   under 17px, contrast well past the minimum, no thin grey-on-grey, no icon
   without a word beside it, and targets a thumb finds without aiming. None of
   that is "accessibility" bolted on — it is what makes a site feel expensive
   to the person actually holding the phone.
   ========================================================================== */
:root{ --measure: 62ch }
body{ font-size: 17px; line-height: 1.72; letter-spacing: .004em }
p, li, td, label{ font-size: max(1.06rem, 17px) }
.small, .fine, .muted{ font-size: 1rem; }     /* was .82 — too faint */
.sand, .muted{ }                             /* lifted off the ground */
a{ text-underline-offset: 3px }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--gold-lt); outline-offset: 3px }
.btn, .cta, button{ letter-spacing: .1em }

/* ---------------------------------------------------------- the veil ---- */
.veil{ position:fixed; inset:0; z-index:100; display:grid; place-items:center;
   transition:opacity .6s ease, visibility .6s }
.veil.is-gone{  visibility:hidden }
.veil__in{ text-align:center; padding:0 28px; max-width:34ch }
.veil__m{ width:40px; height:40px;  
  animation: breathe 2.6s ease-in-out infinite }
@keyframes breathe{ 0%,100%{transform:scale(.94)} 50%{transform:scale(1)} }
.veil__q{ font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.22rem,4.4vw,1.72rem); line-height:1.45; 
  margin:1.6rem 0 0 }
.veil__c{ display:block; margin-top:1rem; font-family:var(--body); font-style:normal;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; }
.veil__c i{ text-transform:none; letter-spacing:.02em }
@media (prefers-reduced-motion: reduce){ .veil__m{ animation:none } }

/* ---------------------------------------------------- the qualification -- */
.gate{ position:fixed; inset:0; z-index:190; display:grid; place-items:center;
  padding:24px; 
   
   transition:opacity .42s ease }
.gate.is-up{ }
.gate__in{ max-width:44ch; text-align:center; border:1px solid rgba(169,139,75,.4);
  padding:clamp(24px,6vw,44px);  position:relative }
.gate__mark{ width:38px; height:38px; }
.gate__k{ font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
   margin:1rem 0 .6rem }
.gate__h{ font-family:var(--display); font-weight:300; font-size:clamp(1.4rem,5vw,2rem);
  line-height:1.28;  margin:0 }
.gate__p{ font-size:1rem; line-height:1.72;  margin:1.2rem 0 0 }
.gate__row{ display:grid; gap:12px; margin-top:1.8rem }
.gate__b{ font:inherit; cursor:pointer; padding:14px 18px; min-height:60px;
  border:1px solid rgba(169,139,75,.5);  
  transition:background .3s, border-color .3s }
.gate__b span{ display:block; font-size:.86rem;  margin-top:3px }
.gate__b--yes{    font-weight:500 }
.gate__b--yes span{ }
@media(hover:hover){ .gate__b:hover{ }
  .gate__b--yes:hover{ } }

/* she said yes — the collection greets her rather than just appearing */
body.is-kin .sec:first-of-type::before{
  content:"Chosen the way you would choose a painting.";
  display:block; text-align:center; font-family:var(--display); font-style:italic;
  font-size:1.05rem;  margin-bottom:var(--space-block) }

/* ------------------------------------------------- the reduction button -- */
.slash{ margin:1.6rem auto 0; max-width:420px }
.slash__b{ display:block; width:100%; font:inherit; cursor:pointer; padding:16px 18px;
  min-height:64px; border:1px solid var(--gold); 
   transition:background .3s }
.slash__t{ display:block; font-size:1.02rem; font-weight:500; letter-spacing:.04em }
.slash__s{ display:block; font-size:.88rem;  margin-top:4px }
.slash__done{ border:1px solid var(--gold); 
  padding:16px 18px; margin:0; font-size:.96rem; line-height:1.66; }
.slash__done b{  font-size:1.14rem }
@media(hover:hover){ .slash__b:hover{ } }

/* ---- the pair: a second panel in the same box -------------------------- */
.pair{ display:grid; gap:var(--space-element); margin-bottom:var(--space-block);
  border:1px solid var(--gold);  padding:var(--space-element) }
@media(min-width:620px){ .pair{ grid-template-columns:150px 1fr; gap:var(--space-block);
  padding:var(--space-block); align-items:center } }
.pair__art img{ width:100%; height:auto; display:block; border:1px solid rgba(169,139,75,.35) }
.pair__k{ font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
   margin:0 }
.pair__n{ font-family:var(--display); font-size:1.5rem; line-height:1.2;
   margin:.5rem 0 0 }
.pair__n span{ display:block; font-family:var(--body); font-size:.82rem;
  letter-spacing:.14em;  margin-top:.3rem }
.pair__d{ font-size:.94rem; line-height:1.7;  margin:.7rem 0 1rem }

/* ---- delivery: disclosed at the price, never at the basket ------------- */
.delnudge{ margin:var(--space-element) 0 0; padding:var(--space-element);
  border-left:2px solid var(--gold); 
  font-size:.96rem; line-height:1.7; }
.delnudge b{ }
.delbox{ border:1px solid rgba(169,139,75,.4); padding:var(--space-element);
  margin-bottom:var(--space-element) }
.delbox__r{ display:flex; justify-content:space-between; align-items:baseline; margin:0 }
.delbox__r b{ font-family:var(--display); font-size:1.24rem; }
.delbox__n{ margin:.7rem 0 0; font-size:.94rem; line-height:1.7; }
.delbox__n b{ }
.delbox--free{  
  font-size:.96rem; line-height:1.7; }

/* ---- the conditional ladder: every reduction is an upsell -------------- */
.ladder-earned{ border:1px solid var(--gold); 
  padding:var(--space-element); margin-bottom:var(--space-element) }
.ladder-earned__h{ margin:0; font-size:1.02rem; }
.ladder-earned__h b{ }
.ladder-earned__d{ margin:.4rem 0 0; font-size:.9rem; }
.ladder-next{ border:1px dashed rgba(169,139,75,.55); padding:var(--space-element);
  margin-bottom:var(--space-element) }
.ladder-next__h{ margin:0; font-family:var(--display); font-size:1.24rem;
  line-height:1.3; }
.ladder-next__d{ margin:.5rem 0 1rem; font-size:.94rem; line-height:1.7; }
.ladder-next__d b{ }

/* ---- the PDP configuration: a choice of product, not an add-on --------- */
.cfg{ border:0; margin:var(--space-block) 0 0; padding:0; display:grid; gap:10px }
.cfg__l{ font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
   padding:0; margin-bottom:6px }
.cfg__o{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
  padding:var(--space-element); cursor:pointer; min-height:56px;
  border:1px solid rgba(169,139,75,.32); transition:border-color .25s, background .25s }
.cfg__o:has(input:checked){  }
.cfg__o input{ margin-top:3px; width:18px; height:18px; accent-color:var(--gold) }
.cfg__h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.cfg__h b{ font-family:var(--body); font-weight:500; font-size:.96rem; }
.cfg__p{ font-family:var(--display); font-size:1.15rem;  white-space:nowrap }
.cfg__p s{ display:block; font-size:.78rem;  text-align:right }
.cfg__d{ display:block; margin-top:.4rem; font-size:.86rem; line-height:1.65; }
.cfg__d i{ }
@media(max-width:620px){ .cfg__h{ flex-direction:column; gap:2px } .cfg__p s{ text-align:left } }

/* ---- the pre-checkout upgrade: two baskets, the fuller one selected ----- */
.upg{ border:0; margin:0 0 var(--space-block); padding:0; display:grid; gap:10px }
.upg__l{ font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
   padding:0; margin-bottom:6px }
.upg__o{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
  padding:var(--space-element); cursor:pointer; min-height:56px;
  border:1px solid rgba(169,139,75,.34); transition:border-color .25s, background .25s }
.upg__o:has(input:checked){  }
.upg__o input{ margin-top:3px; width:18px; height:18px; accent-color:var(--gold) }
.upg__h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.upg__h b{ font-family:var(--body); font-weight:500; font-size:1rem; }
.upg__p{ font-family:var(--display); font-size:1.3rem;  white-space:nowrap }
.upg__d{ display:block; margin-top:.45rem; font-size:.9rem; line-height:1.68; }
.upg__list{ display:grid; gap:.6rem; margin-top:.9rem; padding-top:.8rem;
  border-top:1px solid rgba(169,139,75,.25) }
.upg__i{ display:block; font-size:.86rem; line-height:1.62; }
.upg__i b{ display:block;  font-family:var(--body); font-weight:500 }
@media(max-width:620px){ .upg__h{ flex-direction:column; gap:2px } }

/* ---- the qualification on a cold ad landing ---------------------------- */
.agate{ position:fixed; inset:0; z-index:195; display:grid; place-items:center;
  padding:22px; 
   
   transition:opacity .42s ease }
.agate.is-up{ }
.agate__in{ max-width:42ch; text-align:center; padding:clamp(24px,6vw,40px);
  border:1px solid rgba(169,139,75,.45); }
.agate__m{ width:38px; height:38px; }
.agate__k{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
   margin:.9rem 0 .7rem }
.agate__h{ font-family:var(--display); font-weight:300; font-size:clamp(1.5rem,6vw,2.2rem);
  line-height:1.24;  margin:0 }
.agate__p{ font-size:1rem; line-height:1.7;  margin:1.1rem 0 0 }
.agate__row{ display:grid; gap:11px; margin-top:1.7rem }
.agate__b{ font:inherit; cursor:pointer; padding:14px 18px; min-height:62px;
  border:1px solid rgba(169,139,75,.5);  
  transition:background .3s, border-color .3s }
.agate__b span{ display:block; font-size:.85rem;  margin-top:3px }
.agate__b--yes{    font-weight:500 }
.agate__b--yes span{ }
@media(hover:hover){ .agate__b:hover{ }
  .agate__b--yes:hover{ } }

/* ---- verifying a declaration ------------------------------------------- */
.vform{ max-width:360px; margin:var(--space-block) auto 0; display:grid; gap:10px }
.vform .fi{ text-align:center; letter-spacing:.08em }
.vres{ max-width:440px; margin:var(--space-block) auto 0; padding:var(--space-element);
  border:1px solid rgba(169,139,75,.45); text-align:left }
.vres--yes{  }
.vres--no{ }
.vres__h{ font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
   margin:0 }
.vres__p{ font-family:var(--display); font-size:1.6rem; line-height:1.2;
   margin:.5rem 0 var(--space-element) }
.vres__d{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; margin:0;
  font-size:.92rem; line-height:1.6 }
.vres__d dt{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
   padding-top:.2rem }
.vres__d dd{ margin:0; }