:root{
  --paper:#f6f1e7;
  --ink:#171512;
  --line:rgba(23,21,18,.68);
  --serif:Baskerville,"Baskerville Old Face","Iowan Old Style",Georgia,serif;
  --sans:Avenir,"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
a{color:inherit;text-decoration:none}img{display:block;width:100%;height:auto}figure{margin:0}
.site{position:relative;width:100%;min-height:100vh;overflow:clip;background:var(--paper)}
.hairline{position:absolute;left:2.1167vw;width:95.7666vw;height:1px;background:var(--line);transform:scaleY(.5);transform-origin:center}

/* Shared header */
.masthead{position:relative;height:14.9vw}
.logo-link{position:absolute;left:2.65vw;top:1.5vw;width:15.6vw;z-index:120}
.main-nav{position:absolute;left:34.3vw;top:4.65vw;display:flex;gap:7.35vw;z-index:130;font-size:1.12vw;line-height:1;white-space:nowrap;letter-spacing:.01em}
.main-nav a{position:relative}.main-nav a::after,.footer-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-.35em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}.main-nav a:hover::after,.main-nav a:focus-visible::after,.main-nav a.active::after,.footer-nav a:hover::after{transform:scaleX(1)}
.header-line{top:14.7vw}

/* HOME: logo remains visible; navigation stays with the opening page. */
.home::before{content:"";position:fixed;top:0;left:0;right:0;height:8.8vw;background:var(--paper);z-index:105;pointer-events:none}
.home .logo-link{position:fixed;top:1.5vw;left:2.65vw;z-index:125}
.home .masthead{height:14.9vw}

/* Three static opening images. Equal square fields, fine even gaps. */
.home-top{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25vw;margin:1.05vw 2.1167vw 0}
.home-top figure{aspect-ratio:1/1;overflow:hidden;background:#151515}
.home-top img{width:100%;height:100%;object-fit:cover}
.home-top figure:first-child img{object-position:center center}
.home-top figure:nth-child(2) img{object-position:center center}
.home-top figure:nth-child(3) img{object-position:center center}
.story-line{position:relative!important;left:2.1167vw!important;width:95.7666vw!important;margin-top:1.25vw}

/* Landing page story / new distribution */
.story-stage{position:relative;height:365vw;margin-top:0}
.sticky-copy{position:sticky;top:9.6vw;z-index:20;width:58vw;padding:1.3vw 3.2vw 2.8vw 0;background:var(--paper);pointer-events:none}
.sticky-copy h1{margin:0 0 0 2.1167vw;font-family:var(--serif);font-size:10.9vw;font-weight:400;line-height:.98;letter-spacing:-.022em}
.sticky-copy h1 span{display:block}
.intro{margin:.8vw 0 0 3.1vw;font-size:1.1vw;line-height:1.18;letter-spacing:-.012em;width:30vw}
.mood-layer{position:absolute;inset:0 auto auto 0;width:100%;height:276vw}
.mood{position:absolute;overflow:hidden}.mood img{width:100%;height:100%;object-fit:cover}.mood.behind{z-index:10}.mood.front{z-index:30}.mood.large{z-index:10!important}
.story-copy{position:absolute;z-index:40;font-size:1.08vw;line-height:1.18;letter-spacing:-.012em}

.town{left:67.05vw;top:8.575vw;width:11.9vw;height:17.85vw}
.water{left:24.8vw;top:44.55vw;width:20.4vw;height:28.9vw}
.vest{left:55.75vw;top:35.275vw;width:25.5vw;height:31.45vw}
.pub{left:4.4vw;top:68.35vw;width:10.2vw;height:15.3vw}
.trousers{left:7.4vw;top:95.725vw;width:27.2vw;height:36.55vw}
.bw{left:46.525vw;top:83.2vw;width:19.55vw;height:30.6vw}
.sofa{left:73.6375vw;top:78.3vw;width:24.225vw;height:37.4vw}
.whitehouse{left:15.875vw;top:142.35vw;width:21.25vw;height:32.3vw}
.flower{left:48vw;top:146.975vw;width:7.225vw;height:11.05vw}
.portrait{left:56.885vw;top:140.7625vw;width:13.43vw;height:19.975vw}
.night{left:79.55vw;top:137.8875vw;width:11.9vw;height:15.725vw}
.coat{left:65.215vw;top:168.1875vw;width:27.37vw;height:36.125vw}
.cloud{left:34.91vw;top:185.09vw;width:15.98vw;height:18.02vw}
.rally{left:6.8975vw;top:202.175vw;width:21.505vw;height:24.65vw}
.hand{left:60.15vw;top:212.6225vw;width:18.7vw;height:24.055vw}
.trees{left:83.5275vw;top:228.8375vw;width:11.645vw;height:17.425vw}
.blazer{left:25.065vw;top:241.0375vw;width:25.67vw;height:31.025vw}
.world{left:23.8vw;top:73.5vw;width:25vw}
.harris{left:44.7vw;top:119vw;width:31vw}
.harris h2{margin:0 0 .8vw;font-family:var(--serif);font-size:2.5vw;line-height:.98;font-weight:400;letter-spacing:-.015em}
.harris p{margin:0;font-size:1.08vw;line-height:1.18}
.clean-tail{position:absolute;left:0;right:0;top:276vw;height:89vw}

.reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity 1.0s cubic-bezier(.2,.65,.25,1),transform 1.15s cubic-bezier(.2,.65,.25,1);will-change:opacity,transform}.reveal.large{transition-duration:1.35s,1.45s}.reveal.small{transform:translate3d(0,12px,0);transition-duration:.92s,1.02s}.reveal.is-visible{opacity:1;transform:none}

/* Editorial — exact 2×2 / text / 2-up structure from the supplied page. */
.editorial-main{padding:1.05vw 2.1167vw 14vw}
.editorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25vw}
.editorial-grid figure{overflow:hidden;background:#111}
.top-grid figure{aspect-ratio:.84/1}
.top-grid img{width:100%;height:100%;object-fit:cover}
.lower-grid{margin-top:4.6vw}
.lower-grid figure{aspect-ratio:1.58/1}
.lower-grid img{width:100%;height:100%;object-fit:cover}
.editorial-copy{margin-top:2.1vw}.editorial-copy h1,.editorial-copy h2{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:.98}.editorial-copy h1{font-size:8.2vw}.editorial-copy h2{font-size:8.2vw}.copy-columns{display:grid;grid-template-columns:1fr 1fr;gap:1.25vw;margin-top:.45vw}.editorial-copy p{margin:0;font-size:1.05vw;line-height:1.16;max-width:34vw}.second-copy{min-height:45vw}.second-copy p{margin-top:1.1vw}

/* Fine back-to-top arrow */
.back-to-top{position:absolute;left:50%;top:3.7vw;transform:translateX(-50%);width:2.6vw;height:3.4vw;display:flex;align-items:center;justify-content:center;z-index:5}
.back-to-top svg{width:1.15vw;height:2.25vw;fill:none;stroke:var(--ink);stroke-width:.8;stroke-linecap:round;stroke-linejoin:round}
.back-to-top:hover svg{transform:translateY(-2px)}
.back-to-top svg{transition:transform .2s ease}

/* Footer */
.site-footer{position:relative;height:12.2vw}.footer-top{top:0}.footer-logo{position:absolute;left:4.55vw;top:1.2vw;width:9.55vw}.footer-nav{position:absolute;right:4.75vw;top:1.7vw;display:flex;gap:5vw;font-size:1.05vw}.footer-nav a{position:relative}.footer-bottom{top:10vw}
.editorial-footer{margin-top:2vw}

/* Other clickable pages */
.subpage{min-height:100vh}.internal-header{height:14.9vw}.subpage-main{min-height:74vw;padding:8vw 2.1167vw 10vw}.page-kicker{font-size:.75vw;letter-spacing:.12em;margin-bottom:1.5vw}.page-hero{display:grid;grid-template-columns:58% 1fr;gap:4vw}.page-hero h1,.contact-title{margin:0;font-family:var(--serif);font-weight:400;font-size:9.2vw;line-height:.96;letter-spacing:-.03em}.page-copy{font-size:1.08vw;line-height:1.35;max-width:31vw}.page-copy p{margin:0 0 1.7em}.contact-grid,.imprint-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:5vw}.muted{opacity:.55}

@media (max-width:760px){
  .masthead,.home .masthead,.internal-header{height:29vw}.logo-link,.home .logo-link{left:5.2vw;top:4.2vw;width:31vw}.home::before{height:20.5vw}.main-nav{left:5.2vw;right:5.2vw;top:19vw;justify-content:space-between;gap:0;font-size:2.45vw}.hairline{left:5.2vw;width:89.6vw}.header-line{top:28.6vw}
  .home-top{grid-template-columns:1fr;margin:3vw 5.2vw 0;gap:0}.home-top figure{display:none}.home-top figure:first-child{display:block;aspect-ratio:1/1}.story-line{left:5.2vw!important;width:89.6vw!important;margin-top:3vw}
  .story-stage{height:820vw}.sticky-copy{top:22.5vw;width:92vw;padding:4vw 7vw 6vw 0}.sticky-copy h1{margin-left:5.2vw;font-size:20vw;line-height:.94}.intro{margin:3vw 0 0 6.2vw;width:75vw;font-size:2.8vw;line-height:1.2}.mood-layer{height:610vw}.story-copy{font-size:2.8vw;line-height:1.2}
  .town{left:64.875vw;top:11.85vw;width:21.25vw;height:32.3vw}.water{left:10.375vw;top:91.65vw;width:38.25vw;height:52.7vw}.vest{left:53.225vw;top:141.975vw;width:36.55vw;height:45.05vw}.pub{left:8.725vw;top:187.625vw;width:19.55vw;height:29.75vw}.trousers{left:10.75vw;top:235.025vw;width:42.5vw;height:56.95vw}.bw{left:54.925vw;top:292.575vw;width:33.15vw;height:51.85vw}.sofa{left:46vw;top:354vw;width:48.45vw;height:74.8vw}.whitehouse{left:8vw;top:438vw;width:29.75vw;height:44.2vw}.flower{left:72vw;top:470vw;width:14.45vw;height:22.1vw}.portrait{left:59vw;top:438vw;width:23.8vw;height:35.7vw}.night{left:14.025vw;top:486vw;width:22.95vw;height:30.6vw}.coat{left:52.3vw;top:520.35vw;width:37.4vw;height:49.3vw}.cloud{left:11.3vw;top:551vw;width:37.4vw;height:41.65vw}.rally{left:10.25vw;top:611vw;width:25.5vw;height:28.9vw}.hand{left:53vw;top:580vw;width:34vw;height:43.35vw}.trees{left:71.5vw;top:650vw;width:17vw;height:25.5vw}.blazer{left:15.225vw;top:668vw;width:36.55vw;height:44.2vw}.world{left:8vw;top:154vw;width:75vw}.harris{left:8vw;top:360vw;width:80vw}.harris h2{font-size:6.1vw}.harris p{font-size:2.8vw}.clean-tail{top:712vw;height:108vw}
  .site-footer{height:30vw}.footer-logo{left:7vw;top:5vw;width:24vw}.footer-nav{right:6vw;top:6.5vw;gap:7vw;font-size:2.45vw}.footer-bottom{top:25vw}.back-to-top{top:8.6vw;width:8vw;height:8vw}.back-to-top svg{width:3.2vw;height:5vw}
  .editorial-main{padding:3vw 5.2vw 12vw}.editorial-grid{gap:3vw}.top-grid figure{aspect-ratio:.82/1}.editorial-copy{margin-top:5vw}.editorial-copy h1,.editorial-copy h2{font-size:16vw}.copy-columns{gap:3vw;margin-top:2vw}.editorial-copy p{font-size:2.9vw;line-height:1.22}.lower-grid{margin-top:8vw}.lower-grid figure{aspect-ratio:1/1.15}.second-copy{min-height:80vw}
  .subpage-main{min-height:150vw;padding:15vw 5.2vw}.page-kicker{font-size:2.3vw}.page-hero,.contact-grid,.imprint-grid{grid-template-columns:1fr;gap:8vw}.page-hero h1,.contact-title{font-size:18vw}.page-copy{font-size:3.5vw;max-width:84vw}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* V9 EDITORIAL MASTER — follows the supplied editorial PDF. Same outer margins and
   the same fine image gap as the landing page. Scoped so no other page changes. */
.editorial-master{
  --editorial-gap:1.25vw;
  padding:1.05vw 2.1167vw 14vw;
}
.editorial-master figure{margin:0;overflow:hidden;background:#111}
.editorial-master figure img{width:100%;height:100%;object-fit:cover}
.editorial-hero-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--editorial-gap);
}
.editorial-hero-row figure{aspect-ratio:2.18/1}
.editorial-hero-row figure:first-child img{object-position:center 48%}
.editorial-hero-row figure:nth-child(2) img{object-position:center 47%}
.editorial-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--editorial-gap);
  margin-top:var(--editorial-gap);
}
.editorial-strip figure{aspect-ratio:2.28/1}
.editorial-strip figure:nth-child(1) img{object-position:center 58%}
.editorial-strip figure:nth-child(2) img{object-position:center 48%}
.editorial-strip figure:nth-child(3) img{object-position:center 54%}
.editorial-strip figure:nth-child(4) img{object-position:center 56%}
.editorial-master .first-copy{margin-top:1.7vw}
.editorial-master .first-copy h1,
.editorial-master .second-copy h2{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:8.2vw;
  line-height:.92;
  letter-spacing:-.025em;
}
.editorial-master .copy-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--editorial-gap);
  margin-top:.55vw;
}
.editorial-master .editorial-copy p{
  margin:0;
  max-width:34vw;
  font-size:1.05vw;
  line-height:1.16;
}
.editorial-lower-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--editorial-gap);
  margin-top:4.6vw;
}
.editorial-lower-row figure{aspect-ratio:2.18/1}
.editorial-lower-row figure:first-child img{object-position:center 52%}
.editorial-lower-row figure:nth-child(2) img{object-position:center 49%}
.editorial-master .second-copy{margin-top:3vw;min-height:45vw}
.editorial-master .second-copy p{margin-top:1.1vw}

@media (max-width:760px){
  .editorial-master{
    --editorial-gap:3vw;
    padding:3vw 5.2vw 12vw;
  }
  .editorial-hero-row{grid-template-columns:1fr}
  .editorial-hero-row figure{aspect-ratio:1.35/1}
  .editorial-strip{grid-template-columns:1fr 1fr}
  .editorial-strip figure{aspect-ratio:1.55/1}
  .editorial-master .first-copy{margin-top:5vw}
  .editorial-master .first-copy h1,
  .editorial-master .second-copy h2{font-size:16vw;line-height:.92}
  .editorial-master .copy-columns{grid-template-columns:1fr 1fr;gap:var(--editorial-gap);margin-top:2vw}
  .editorial-master .editorial-copy p{font-size:2.9vw;line-height:1.22;max-width:none}
  .editorial-lower-row{grid-template-columns:1fr;margin-top:8vw}
  .editorial-lower-row figure{aspect-ratio:1.35/1}
  .editorial-master .second-copy{margin-top:6vw;min-height:80vw}
}

/* V10 — targeted corrections from review screenshots. */

/* Landing: no opaque paper panel around the sticky headline. The type itself stays
   clean and all large imagery remains behind it; only selected small mood images
   may sit above it. */
.home .sticky-copy{
  background:transparent;
  padding-right:0;
}
.home .mood.large{z-index:10!important}
.home .mood.small.front{z-index:30}

/* Keep the small editorial copy out of the headline's left-hand field. */
.home .world{
  left:47vw;
  width:25vw;
}

/* When the clear-tail reaches the reading zone, remove the whole image layer so
   the final held MODERN TWEED state is genuinely clean — no black/image fragment. */
.home .mood-layer,
.home .story-copy{transition:opacity .5s cubic-bezier(.2,.65,.25,1)}
.home .story-stage.is-clearing .mood-layer,
.home .story-stage.is-clearing .story-copy{opacity:0!important}

/* Footer: place the fine up-arrow at the far right, on the CONTACT / IMPRINT line,
   just above the lower hairline. */
.back-to-top{
  left:auto;
  right:2.15vw;
  top:1.12vw;
  transform:none;
  width:1.7vw;
  height:2.6vw;
}
.back-to-top svg{width:.82vw;height:1.7vw}
.footer-nav{right:6.25vw}

/* Editorial master: exact visual logic of the supplied PDF.
   - two large near-square / slightly portrait images
   - four smaller portrait images
   - same outer margin and image gap as the landing page
   - headline occupies only the left column; second copy block stays firmly in the
     right column and can never run under the headline. */
.editorial-master{
  --editorial-gap:1.25vw;
  padding:1.05vw 2.1167vw 14vw;
}
.editorial-hero-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--editorial-gap);
}
.editorial-hero-row figure{
  aspect-ratio:.84/1;
}
.editorial-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--editorial-gap);
  margin-top:var(--editorial-gap);
}
.editorial-strip figure{
  aspect-ratio:.84/1;
}
.editorial-master .first-copy{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--editorial-gap);
  row-gap:.55vw;
  margin-top:1.7vw;
}
.editorial-master .first-copy h1{
  grid-column:1;
  grid-row:1;
}
.editorial-master .first-copy .copy-columns{
  display:contents;
}
.editorial-master .first-copy .copy-columns p:first-child{
  grid-column:1;
  grid-row:2;
  margin-left:1.25vw;
}
.editorial-master .first-copy .copy-columns p:last-child{
  grid-column:2;
  grid-row:2;
  margin-left:0;
}
.editorial-lower-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--editorial-gap);
  margin-top:4.6vw;
}
.editorial-lower-row figure{
  aspect-ratio:.84/1;
}

@media (max-width:760px){
  .home .world{left:48vw;width:44vw}
  .back-to-top{right:5.2vw;top:5.35vw;width:4.6vw;height:6vw}
  .back-to-top svg{width:2.4vw;height:4vw}
  .footer-nav{right:12.2vw}

  .editorial-master{--editorial-gap:3vw}
  .editorial-hero-row{grid-template-columns:1fr 1fr}
  .editorial-hero-row figure{aspect-ratio:.84/1}
  .editorial-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editorial-strip figure{aspect-ratio:.84/1}
  .editorial-master .first-copy{grid-template-columns:1fr 1fr;column-gap:3vw;row-gap:2vw}
  .editorial-master .first-copy .copy-columns p:first-child{margin-left:0}
  .editorial-lower-row{grid-template-columns:1fr 1fr;margin-top:8vw}
  .editorial-lower-row figure{aspect-ratio:.84/1}
}

/* V11 — targeted correction: text-safe headline zone + refined image reveals. */

/* Both supporting copy blocks always sit clearly to the right of MODERN TWEED.
   Nothing may run under the headline on desktop. */
.home .world,
.home .harris{
  left:63vw;
  width:30vw;
  max-width:30vw;
}
.home .world{top:73.5vw}
.home .harris{top:119vw}

/* Softer, more polished reveal: subtle depth, no exaggerated motion. */
.reveal{
  opacity:0;
  transform:translate3d(0,14px,0) scale(.992);
  transition:
    opacity 1.05s cubic-bezier(.22,.61,.36,1),
    transform 1.2s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal.large{
  transform:translate3d(0,16px,0) scale(.994);
  transition-duration:1.35s,1.45s;
}
.reveal.small{
  transform:translate3d(0,10px,0) scale(.988);
  transition-duration:.95s,1.08s;
}
.reveal.opening-image{
  transform:translate3d(0,10px,0) scale(.996);
  transition-duration:1.15s,1.25s;
}
.reveal.editorial-reveal{
  transform:translate3d(0,12px,0) scale(.994);
}
.reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* Keep the clean end state intact. */
.home .story-stage.is-clearing .mood-layer,
.home .story-stage.is-clearing .story-copy{
  opacity:0!important;
  pointer-events:none;
}

@media (max-width:760px){
  /* On mobile the copy remains separated from the large sticky type by moving it
     into the right-hand reading column. */
  .home .world,
  .home .harris{
    left:55vw;
    width:39vw;
    max-width:39vw;
  }
  .home .world{top:154vw}
  .home .harris{top:360vw}
}


/* V12 — final end-state and right-column refinements. */

/* Both copy blocks stay fully clear of the headline field. */
.home .world,
.home .harris{
  left:67.2vw;
  width:25.2vw;
  max-width:25.2vw;
}
.home .world{top:73.5vw}
.home .harris{top:119vw}

/* End state: after the scrolling sequence clears, one final portrait image sits
   to the right of the headline with breathing room. */
.final-end-image{
  position:fixed;
  right:14.6vw;
  top:14.9vw;
  width:16.6vw;
  aspect-ratio:1024/1707;
  overflow:hidden;
  z-index:22;
  opacity:0;
  transform:translate3d(0,10px,0) scale(.992);
  pointer-events:none;
  transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.final-end-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.home .story-stage.is-clearing .final-end-image{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* Slightly stronger footer arrow, same filigree character. */
.back-to-top svg{stroke-width:1.02}

@media (max-width:760px){
  .home .world,
  .home .harris{
    left:56vw;
    width:35vw;
    max-width:35vw;
  }
  .final-end-image{
    right:7vw;
    top:24vw;
    width:26vw;
  }
  .back-to-top svg{stroke-width:1.15}
}

/* V13 — editorial separators + robust small-window click targets. */

/* Editorial: same fine horizontal rule language as the header. Each editorial
   headline begins with a full-width hairline for clearer rhythm and separation. */
.editorial-master .first-copy,
.editorial-master .second-copy{
  position:relative;
  padding-top:1.65vw;
}
.editorial-master .first-copy::before,
.editorial-master .second-copy::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:1px;
  background:var(--line);
  transform:scaleY(.5);
  transform-origin:center;
  pointer-events:none;
}

/* Decorative story layers must never block navigation or links when the browser
   window becomes narrow. */
.home .mood-layer,
.home .mood,
.home .story-copy,
.home .final-end-image{
  pointer-events:none;
}
.masthead,
.logo-link,
.main-nav,
.main-nav a,
.footer-nav,
.footer-nav a,
.back-to-top{
  pointer-events:auto;
}
.logo-link,
.main-nav{
  z-index:1000;
}
.main-nav a,
.footer-nav a,
.back-to-top,
.logo-link{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Intermediate narrow desktop/tablet window: switch the header into a safer,
   roomier arrangement before the full mobile breakpoint kicks in. */
@media (max-width:900px) and (min-width:761px){
  .masthead,.home .masthead,.internal-header{height:20vw}
  .logo-link,.home .logo-link{left:3.2vw;top:2.4vw;width:22vw}
  .home::before{height:12.5vw}
  .main-nav{
    left:35vw;
    right:3.2vw;
    top:6.3vw;
    justify-content:space-between;
    gap:0;
    font-size:1.6vw;
  }
  .main-nav a{padding:.9vw .4vw}
  .header-line{top:19.7vw}
}

@media (max-width:760px){
  .editorial-master .first-copy,
  .editorial-master .second-copy{
    padding-top:4vw;
  }
  .main-nav a{padding:2.2vw .8vw}
  .footer-nav a{padding:1.8vw .6vw}
  .back-to-top{min-width:7vw;min-height:7vw}
}

/* V14 — mobile keeps the COMPLETE landing-page image set.
   No images are removed. The desktop collage is scaled into the phone viewport,
   while header/tap targets remain mobile-friendly. */
@media (max-width:760px){
  /* Keep all three static opening images, proportionally reduced. */
  .home-top{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.6vw;
    margin:3vw 5.2vw 0;
  }
  .home-top figure,
  .home-top figure:first-child,
  .home-top figure:nth-child(2),
  .home-top figure:nth-child(3){
    display:block;
    aspect-ratio:1/1;
  }
  .story-line{margin-top:1.6vw}

  /* Large headline remains the mobile anchor; all 17 mood images remain present,
     but use the desktop distribution scaled to the phone width. */
  .story-stage{height:470vw}
  .sticky-copy{top:22.5vw;width:94vw;padding:4vw 4vw 5vw 0}
  .sticky-copy h1{margin-left:5.2vw;font-size:20vw;line-height:.94}
  .intro{margin:3vw 0 0 6.2vw;width:52vw;font-size:2.8vw;line-height:1.2}
  .mood-layer{height:300vw}

  .town{left:67.05vw;top:8.575vw;width:11.9vw;height:17.85vw}
  .water{left:24.8vw;top:44.55vw;width:20.4vw;height:28.9vw}
  .vest{left:55.75vw;top:35.275vw;width:25.5vw;height:31.45vw}
  .pub{left:4.4vw;top:68.35vw;width:10.2vw;height:15.3vw}
  .trousers{left:7.4vw;top:95.725vw;width:27.2vw;height:36.55vw}
  .bw{left:46.525vw;top:83.2vw;width:19.55vw;height:30.6vw}
  .sofa{left:73.6375vw;top:78.3vw;width:24.225vw;height:37.4vw}
  .whitehouse{left:15.875vw;top:142.35vw;width:21.25vw;height:32.3vw}
  .flower{left:48vw;top:146.975vw;width:7.225vw;height:11.05vw}
  .portrait{left:56.885vw;top:140.7625vw;width:13.43vw;height:19.975vw}
  .night{left:79.55vw;top:137.8875vw;width:11.9vw;height:15.725vw}
  .coat{left:65.215vw;top:168.1875vw;width:27.37vw;height:36.125vw}
  .cloud{left:34.91vw;top:185.09vw;width:15.98vw;height:18.02vw}
  .rally{left:6.8975vw;top:202.175vw;width:21.505vw;height:24.65vw}
  .hand{left:60.15vw;top:212.6225vw;width:18.7vw;height:24.055vw}
  .trees{left:83.5275vw;top:228.8375vw;width:11.645vw;height:17.425vw}
  .blazer{left:25.065vw;top:241.0375vw;width:25.67vw;height:31.025vw}

  /* Copy stays readable without changing the image count. */
  .home .world{left:58vw;top:74vw;width:34vw;max-width:34vw}
  .home .harris{left:56vw;top:122vw;width:38vw;max-width:38vw}
  .story-copy{font-size:2.45vw;line-height:1.2}
  .harris h2{font-size:5.2vw}
  .harris p{font-size:2.45vw}

  /* Clear end state remains after the full collage has passed. */
  .clean-tail{top:300vw;height:150vw}
  .final-end-image{right:7vw;top:27vw;width:24vw}

  /* Editorial: keep the complete supplied composition on phone too. */
  .editorial-master{--editorial-gap:1.6vw;padding:3vw 5.2vw 12vw}
  .editorial-hero-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editorial-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .editorial-lower-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editorial-hero-row figure,
  .editorial-strip figure,
  .editorial-lower-row figure{aspect-ratio:.84/1}
  .editorial-master .first-copy,
  .editorial-master .second-copy{padding-top:3vw}
  .editorial-master .first-copy h1,
  .editorial-master .second-copy h2{font-size:14vw}
  .editorial-master .editorial-copy p{font-size:2.55vw;line-height:1.22}
}


/* V16 — consistent rule spacing, persistent final image, stronger arrow. */
:root{--rule-image-gap:1.25vw}

/* Keep the same visual distance between horizontal rules and adjacent imagery. */
.home-top{margin-top:1.05vw} /* 14.9 masthead − 14.7 line + 1.05 = 1.25vw */
.story-line{margin-top:var(--rule-image-gap)!important}
.editorial-master{padding-top:1.05vw}
.editorial-master .first-copy,
.editorial-master .second-copy{margin-top:var(--rule-image-gap);padding-top:var(--rule-image-gap)}

/* The new final sea image arrives with the same restrained reveal language as the
   rest of the imagery, then remains beside the sticky headline at the end. */
.final-end-image{
  position:fixed;
  right:10.5vw;
  top:18.2vw;
  width:17.5vw;
  aspect-ratio:848/1193;
  overflow:hidden;
  z-index:22;
  opacity:0;
  transform:translate3d(0,14px,0) scale(.992);
  pointer-events:none;
  transition:opacity 1.15s cubic-bezier(.22,.61,.36,1),transform 1.25s cubic-bezier(.22,.61,.36,1);
}
.final-end-image img{width:100%;height:100%;object-fit:cover}
.home .story-stage.show-final .final-end-image{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
/* Clearing removes the scrolling collage, but NOT the final sea image. */
.home .story-stage.is-clearing .final-end-image{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
}

/* Slightly more visible, still elegant, on every page. */
.back-to-top svg{stroke-width:1.25!important}

@media (max-width:760px){
  :root{--rule-image-gap:1.6vw}
  /* 29vw masthead − 28.6vw line + 1.2vw = 1.6vw */
  .home-top{margin:1.2vw 5.2vw 0}
  .story-line{margin-top:var(--rule-image-gap)!important}
  .editorial-master{padding-top:1.2vw}
  .editorial-master .first-copy,
  .editorial-master .second-copy{margin-top:var(--rule-image-gap);padding-top:var(--rule-image-gap)}
  .final-end-image{
    right:6vw;
    top:67vw;
    width:25vw;
  }
  .back-to-top svg{stroke-width:1.4!important}
}


/* V17 — requested final polish */

/* Editorial starts visibly closer to the menu/header while keeping the exact
   same hairline-to-image gap used elsewhere. */
.editorial-page .masthead.internal-header{
  height:10.2vw;
}
.editorial-page .header-line{
  top:10vw;
}
.editorial-page .editorial-master{
  padding-top:var(--rule-image-gap);
}

/* The final sea image is part of the scroll composition first. It travels upward
   naturally, fades in like the other imagery, and only pins when it reaches the
   headline level. */
.final-end-image{
  position:absolute !important;
  right:10.5vw;
  top:292vw !important;
  width:17.5vw;
  aspect-ratio:848/1193;
  z-index:22;
  opacity:0;
  transform:translate3d(0,14px,0) scale(.992);
  transition:
    opacity 1.15s cubic-bezier(.22,.61,.36,1),
    transform 1.25s cubic-bezier(.22,.61,.36,1);
}
.final-end-image.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.final-end-image.is-pinned{
  position:fixed !important;
  top:15.5vw !important;
  right:10.5vw;
}
.final-end-image.is-ended{
  position:absolute !important;
  top:auto !important;
  bottom:10vw;
}

/* The scrolling collage clears only after the sea image has become the final
   held image. */
.clean-tail{
  top:326vw;
  height:39vw;
}

/* Arrow: slightly more legible everywhere, still fine. */
.back-to-top svg{
  stroke-width:1.45 !important;
}

/* Maintain one consistent rule-to-image spacing system. */
:root{--rule-image-gap:1.25vw}
.home-top{margin-top:1.05vw}
.story-line{margin-top:var(--rule-image-gap)!important}
.editorial-master{padding-top:var(--rule-image-gap)}
.editorial-master .first-copy,
.editorial-master .second-copy{
  margin-top:var(--rule-image-gap);
  padding-top:var(--rule-image-gap);
}

@media (max-width:900px) and (min-width:761px){
  .editorial-page .masthead.internal-header{height:14.8vw}
  .editorial-page .header-line{top:14.6vw}
}

@media (max-width:760px){
  :root{--rule-image-gap:1.6vw}

  /* Mobile editorial: noticeably less empty air below the menu. */
  .editorial-page .masthead.internal-header{height:23vw}
  .editorial-page .header-line{top:22.6vw}
  .editorial-page .editorial-master{padding-top:var(--rule-image-gap)}

  /* Final sea image follows the same mobile collage scale. */
  .final-end-image{
    right:6vw;
    top:315vw !important;
    width:25vw;
  }
  .final-end-image.is-pinned{
    top:28vw !important;
    right:6vw;
  }
  .final-end-image.is-ended{
    bottom:14vw;
  }
  .clean-tail{
    top:365vw;
    height:85vw;
  }

  .back-to-top svg{
    stroke-width:1.6 !important;
  }
}


/* =========================================================
   V19 FINAL — HOME V17 spacing is the reference everywhere.
   ========================================================= */

/* 1) DO NOT CHANGE HOME spacing. Match every internal page to HOME. */
.internal-header,
.editorial-page .masthead.internal-header{
  height:14.9vw !important;
}
.internal-header .header-line,
.editorial-page .header-line{
  top:14.7vw !important;
}
.subpage-main{
  padding-top:1.05vw !important;
}
.editorial-page .editorial-master{
  padding-top:1.05vw !important;
}

/* 2) Final sea image: 15% larger than V17, no position-mode switching.
      It scrolls naturally, then JS offsets it to hold at headline height.
      This removes the previous jump/wobble. */
.final-end-image{
  position:absolute !important;
  right:9.4vw !important;
  top:292vw !important;
  width:20.125vw !important;
  aspect-ratio:848/1193;
  overflow:hidden;
  z-index:22;
  opacity:0;
  --hold-y:0px;
  transform:translate3d(0,calc(14px + var(--hold-y)),0) scale(.992) !important;
  transition:
    opacity 1.15s cubic-bezier(.22,.61,.36,1),
    transform 1.25s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.final-end-image.is-visible{
  opacity:1;
  transform:translate3d(0,var(--hold-y),0) scale(1) !important;
}
/* neutralize old V17 fixed/ended states */
.final-end-image.is-pinned,
.final-end-image.is-ended{
  position:absolute !important;
  top:292vw !important;
  bottom:auto !important;
  right:9.4vw !important;
}

/* Give the final image enough track to hold beside MODERN TWEED before footer. */
.clean-tail{
  top:330vw !important;
  height:35vw !important;
}

/* 3) Arrow: slightly stronger everywhere but still filigree. */
.back-to-top svg{
  stroke-width:1.55 !important;
}

/* 4) Horizontal rule/image spacing: one system everywhere. */
:root{--rule-image-gap:1.25vw}
.home-top{margin-top:1.05vw !important}
.story-line{margin-top:var(--rule-image-gap) !important}
.editorial-master{padding-top:1.05vw !important}
.editorial-master .first-copy,
.editorial-master .second-copy{
  margin-top:var(--rule-image-gap) !important;
  padding-top:var(--rule-image-gap) !important;
}

/* Tablet: keep links accessible and preserve the same visual logic. */
@media (max-width:900px) and (min-width:761px){
  .internal-header,
  .editorial-page .masthead.internal-header{
    height:20vw !important;
  }
  .internal-header .header-line,
  .editorial-page .header-line{
    top:19.7vw !important;
  }
  .subpage-main,
  .editorial-page .editorial-master{
    padding-top:1.05vw !important;
  }
}

/* MOBILE: HOME V17/V16 gap is the reference:
   line at 28.6vw, content begins 1.2vw below the 29vw masthead.
   Keep ALL images on the landing page. */
@media (max-width:760px){
  :root{--rule-image-gap:1.6vw}

  .internal-header,
  .editorial-page .masthead.internal-header{
    height:29vw !important;
  }
  .internal-header .header-line,
  .editorial-page .header-line{
    top:28.6vw !important;
  }
  .subpage-main,
  .editorial-page .editorial-master{
    padding-top:1.2vw !important;
  }

  /* HOME stays exactly on the approved compact gap. */
  .home-top{
    margin:1.2vw 5.2vw 0 !important;
  }
  .story-line{
    margin-top:1.6vw !important;
  }

  /* Final sea image remains part of the same proportional mobile collage. */
  .final-end-image{
    right:5.2vw !important;
    top:315vw !important;
    width:28.75vw !important;
  }
  .final-end-image.is-pinned,
  .final-end-image.is-ended{
    top:315vw !important;
    right:5.2vw !important;
  }
  .clean-tail{
    top:365vw !important;
    height:85vw !important;
  }

  .back-to-top svg{
    stroke-width:1.7 !important;
  }
}

/* =========================================================
   V20 — DESKTOP HEADER COMPACTION
   Requested: bring all page content closer to the top menu,
   by no more than approx. 2 cm. Layout/content otherwise unchanged.
   ========================================================= */
@media (min-width:901px){
  .masthead,
  .home .masthead,
  .internal-header,
  .editorial-page .masthead.internal-header{
    height:10.7vw !important;
  }

  .header-line,
  .internal-header .header-line,
  .editorial-page .header-line{
    top:10.5vw !important;
  }
}

/* =========================================================
   V21 — final image lock + mobile airy composition
   Requested 29.09.2026. Desktop composition otherwise unchanged.
   ========================================================= */

/* The final sea image must lock exactly at the approved reading height.
   Do not tween transform changes while scrolling: that caused a visible
   upward drift/lag when continuing toward IMPRINT / the footer arrow. */
.final-end-image,
.final-end-image.is-visible{
  transition:opacity 1.05s cubic-bezier(.22,.61,.36,1) !important;
}

@media (max-width:760px){
  /* More desktop-like hierarchy on phone: slightly smaller headline and
     substantially more clean paper before the first collage image arrives. */
  .story-stage{height:520vw !important}
  .sticky-copy{
    top:22.5vw !important;
    width:90vw !important;
    padding:4vw 4vw 5vw 0 !important;
  }
  .sticky-copy h1{
    margin-left:5.2vw !important;
    font-size:16.2vw !important;
    line-height:.96 !important;
    letter-spacing:-.022em;
  }
  .intro{
    margin:2.6vw 0 0 6.2vw !important;
    width:58vw !important;
    font-size:2.7vw !important;
    line-height:1.22 !important;
  }

  .mood-layer{height:350vw !important}

  /* Same proportional desktop collage, shifted down so the opening state
     remains calm and the images do not initially cover MODERN TWEED. */
  .town{top:56.575vw !important}
  .water{top:92.55vw !important}
  .vest{top:83.275vw !important}
  .pub{top:116.35vw !important}
  .trousers{top:143.725vw !important}
  .bw{top:131.2vw !important}
  .sofa{top:126.3vw !important}
  .whitehouse{top:190.35vw !important}
  .flower{top:194.975vw !important}
  .portrait{top:188.7625vw !important}
  .night{top:185.8875vw !important}
  .coat{top:216.1875vw !important}
  .cloud{top:233.09vw !important}
  .rally{top:250.175vw !important}
  .hand{top:260.6225vw !important}
  .trees{top:276.8375vw !important}
  .blazer{top:289.0375vw !important}

  .home .world{top:122vw !important}
  .home .harris{top:170vw !important}

  /* Keep the final image sequence proportionally later after the shifted collage. */
  .final-end-image,
  .final-end-image.is-pinned,
  .final-end-image.is-ended{
    top:363vw !important;
  }
  .clean-tail{
    top:413vw !important;
    height:100vw !important;
  }
}

/* =========================================================
   V22 — mobile layout repairs
   29.09.2026
   - home: collage and copy stay clear of the opening headline
   - about / subpages: oversized headings no longer run out of frame
   - editorial: equal intro text columns + more breathing room below headline
   ========================================================= */

@media (max-width:760px){
  /* HOME -------------------------------------------------- */
  /* Keep the opening state airy: move the complete collage and the two
     supporting text blocks further down so MODERN TWEED + intro breathe first. */
  .mood-layer{
    transform:translateY(14vw) !important;
  }
  .story-stage{
    height:548vw !important;
  }
  .sticky-copy{
    width:88vw !important;
  }
  .intro{
    width:60vw !important;
  }
  .story-copy{
    font-size:2.55vw !important;
    line-height:1.22 !important;
  }
  .home .world,
  .home .harris{
    left:55.5vw !important;
    width:35.5vw !important;
    max-width:35.5vw !important;
  }
  .home .world{top:138vw !important}
  .home .harris{top:191vw !important}
  .harris h2{
    font-size:5.25vw !important;
    line-height:.98 !important;
    margin-bottom:1.6vw !important;
  }
  .harris p{
    font-size:2.55vw !important;
    line-height:1.22 !important;
  }
  .final-end-image,
  .final-end-image.is-pinned,
  .final-end-image.is-ended{
    top:378vw !important;
  }
  .clean-tail{
    top:428vw !important;
    height:110vw !important;
  }

  /* SUBPAGES --------------------------------------------- */
  .page-hero h1,
  .contact-title{
    font-size:15.2vw !important;
    line-height:.94 !important;
    letter-spacing:-.024em !important;
    max-width:89vw;
    overflow-wrap:normal;
  }
  .page-copy{
    font-size:3.45vw !important;
    line-height:1.34 !important;
    max-width:86vw !important;
  }

  /* EDITORIAL -------------------------------------------- */
  /* The opening headline gets more paper below it and both copy columns run with
     the same measure instead of one narrow side column. */
  .editorial-master .first-copy{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    column-gap:4vw !important;
    row-gap:4.2vw !important;
    padding-top:4vw !important;
    margin-top:2.6vw !important;
  }
  .editorial-master .first-copy h1{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    font-size:15vw !important;
    line-height:.92 !important;
  }
  .editorial-master .first-copy .copy-columns{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:4vw !important;
    margin-top:0 !important;
  }
  .editorial-master .first-copy .copy-columns p:first-child,
  .editorial-master .first-copy .copy-columns p:last-child{
    grid-column:auto !important;
    grid-row:auto !important;
    margin-left:0 !important;
  }
  .editorial-master .editorial-copy p{
    font-size:2.75vw !important;
    line-height:1.24 !important;
    max-width:none !important;
  }
  .editorial-master .second-copy h2{
    font-size:15vw !important;
    line-height:.92 !important;
  }
}

/* =========================================================
   V23 — final correction pass, 30.09.2026
   ========================================================= */

/* Header and footer logo share one exact left axis on every page. */
.footer-logo{left:2.65vw !important}

/* The sea image scrolls naturally to its target, then becomes genuinely fixed.
   It must not drift, release or disappear near the footer. */
.final-end-image{
  --hold-y:0px !important;
  transform:translate3d(0,14px,0) scale(.992) !important;
}
.final-end-image.is-visible{
  transform:translate3d(0,0,0) scale(1) !important;
}
.final-end-image.is-pinned{
  position:fixed !important;
  top:15.5vw !important;
  right:9.4vw !important;
  bottom:auto !important;
  opacity:1 !important;
  transform:none !important;
  z-index:110 !important;
}

@media (max-width:900px) and (min-width:761px){
  .footer-logo{left:3.2vw !important}
}

@media (max-width:760px){
  .footer-logo{left:5.2vw !important}

  /* MODERN TWEED mobile only: 15% smaller than the V22 value. */
  .sticky-copy h1{
    font-size:13.77vw !important;
    line-height:.96 !important;
  }

  /* V22 pushed the whole collage down by 14vw; remove that push so the imagery
     starts earlier again while the dedicated text zones below remain clear. */
  .mood-layer{transform:none !important}

  /* Same restrained fade / lift as desktop on all home imagery. */
  .home .reveal{
    opacity:0 !important;
    transform:translate3d(0,14px,0) scale(.992) !important;
    transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),transform 1.2s cubic-bezier(.22,.61,.36,1) !important;
  }
  .home .reveal.small{transform:translate3d(0,10px,0) scale(.988) !important}
  .home .reveal.large{transform:translate3d(0,16px,0) scale(.994) !important}
  .home .reveal.is-visible{
    opacity:1 !important;
    transform:translate3d(0,0,0) scale(1) !important;
  }

  /* Lift the small pub image beside the water image; removes the stair-step. */
  .pub{top:96vw !important}

  /* Clean mobile text zones: no story copy crosses an image. */
  .home .world{
    left:55.5vw !important;
    top:166vw !important;
    width:35.5vw !important;
    max-width:35.5vw !important;
  }
  .home .harris{
    left:54vw !important;
    top:300vw !important;
    width:40vw !important;
    max-width:40vw !important;
  }

  /* Mobile sea image uses the same permanent pin logic as desktop. */
  .final-end-image.is-pinned{
    position:fixed !important;
    top:28vw !important;
    right:5.2vw !important;
    width:28.75vw !important;
    bottom:auto !important;
    opacity:1 !important;
    transform:none !important;
    z-index:110 !important;
  }
}

/* =========================================================
   V24 — final mobile spacing + stronger HOME reveals
   30.09.2026
   Based exclusively on approved V23.
   ========================================================= */

/* HOME only: make the image reveals below MODERN TWEED visibly present.
   The three square opening images above the headline keep their approved effect. */
.home .story-stage .mood.reveal,
.home .story-stage .final-end-image.reveal{
  opacity:0 !important;
  transform:translate3d(0,34px,0) scale(.976) !important;
  transition:
    opacity 1.28s cubic-bezier(.22,.61,.36,1),
    transform 1.48s cubic-bezier(.22,.61,.36,1) !important;
}
.home .story-stage .mood.reveal.small{
  transform:translate3d(0,28px,0) scale(.97) !important;
}
.home .story-stage .mood.reveal.large{
  transform:translate3d(0,38px,0) scale(.98) !important;
}
.home .story-stage .mood.reveal.is-visible,
.home .story-stage .final-end-image.reveal.is-visible{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
}

@media (max-width:760px){
  /* MOBILE ONLY: the first image cluster begins earlier. Only this opening
     cluster moves; later image/text relationships from V23 stay untouched. */
  .town{top:46.5vw !important}
  .vest{top:73.25vw !important}
  .water{top:82.5vw !important}
  .pub{top:86vw !important}

  /* MOBILE ONLY: smaller sea image creates more breathing room beside the
     MODERN TWEED headline, while retaining the approved permanent fixed pin. */
  .final-end-image,
  .final-end-image.is-pinned,
  .final-end-image.is-ended{
    width:24vw !important;
    right:5.2vw !important;
  }

  /* Make the mobile image reveal clearly perceptible on the phone as well. */
  .home .story-stage .mood.reveal,
  .home .story-stage .final-end-image.reveal{
    transform:translate3d(0,30px,0) scale(.968) !important;
    transition:
      opacity 1.32s cubic-bezier(.22,.61,.36,1),
      transform 1.52s cubic-bezier(.22,.61,.36,1) !important;
  }
  .home .story-stage .mood.reveal.small{
    transform:translate3d(0,24px,0) scale(.963) !important;
  }
  .home .story-stage .mood.reveal.large{
    transform:translate3d(0,34px,0) scale(.974) !important;
  }
  .home .story-stage .mood.reveal.is-visible,
  .home .story-stage .final-end-image.reveal.is-visible{
    transform:translate3d(0,0,0) scale(1) !important;
  }
}


/* =========================================================
   V25 — approved copy update, 30.09.2026
   Based exclusively on V24 MASTER. Only typography needed
   to accommodate the supplied replacement copy is adjusted.
   ========================================================= */

/* New brand hero is intentionally kept in the two supplied lines. */
.home .brand-hero h1{
  font-size:5.35vw !important;
  line-height:.98 !important;
  letter-spacing:-.022em;
  white-space:nowrap;
}
.home .brand-intro{
  width:34vw;
  line-height:1.28;
}
.home .brand-intro em,
.home .story-copy em,
.page-copy em,
.editorial-brand-copy em{
  font-style:italic;
}

/* Editorial supplied copy: one approved tagline beneath the new headline. */
.editorial-master .editorial-brand-copy .copy-columns{
  display:block !important;
  grid-column:1 !important;
  grid-row:2 !important;
  margin-top:0 !important;
}
.editorial-master .editorial-brand-copy .copy-columns p{
  margin-left:0 !important;
  max-width:30vw !important;
}

@media (max-width:760px){
  .home .brand-hero h1{
    font-size:8.15vw !important;
    line-height:.99 !important;
    white-space:nowrap;
  }
  .home .brand-intro{
    width:68vw !important;
    font-size:2.75vw !important;
    line-height:1.3 !important;
  }
  .editorial-master .editorial-brand-copy .copy-columns{
    grid-column:1 / -1 !important;
  }
  .editorial-master .editorial-brand-copy .copy-columns p{
    max-width:70vw !important;
  }
}


/* =========================================================
   V26 — hero typography correction from supplied InDesign reference
   Only the new homepage hero headline + subline are adjusted.
   ========================================================= */
.home .brand-hero h1{
  font-family:var(--serif) !important;
  font-weight:400 !important;
  font-style:normal !important;
  font-size:7.4vw !important;
  line-height:.92 !important;
  letter-spacing:-.026em !important;
  white-space:normal !important;
}
.home .brand-hero h1 span{
  display:block !important;
  white-space:nowrap !important;
}
.home .brand-intro{
  font-family:var(--sans) !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-size:1.1vw !important;
  line-height:1.18 !important;
  letter-spacing:-.012em !important;
  width:31vw !important;
  margin-top:1.05vw !important;
}

@media (max-width:760px){
  .home .brand-hero h1{
    font-family:var(--serif) !important;
    font-weight:400 !important;
    font-style:normal !important;
    font-size:12.25vw !important;
    line-height:.92 !important;
    letter-spacing:-.026em !important;
    white-space:normal !important;
  }
  .home .brand-intro{
    font-family:var(--sans) !important;
    font-style:normal !important;
    font-weight:400 !important;
    font-size:2.75vw !important;
    line-height:1.2 !important;
    width:68vw !important;
    margin-top:2.6vw !important;
  }
}


/* =========================================================
   V28 — editorial closing statement + mobile review helper
   ========================================================= */
.editorial-master .editorial-closing-copy{
  min-height:26vw !important;
}
.editorial-master .editorial-closing-copy h2{
  max-width:58vw;
}
.editorial-master .editorial-closing-copy p{
  margin-top:1.05vw !important;
  max-width:31vw;
}
@media (max-width:760px){
  .editorial-master .editorial-closing-copy{
    min-height:62vw !important;
    margin-top:5vw !important;
    padding-top:4vw !important;
  }
  .editorial-master .editorial-closing-copy h2{
    max-width:89vw;
    font-size:15vw !important;
    line-height:.92 !important;
  }
  .editorial-master .editorial-closing-copy p{
    margin-top:3vw !important;
    max-width:78vw;
    font-size:2.75vw !important;
    line-height:1.24 !important;
  }
}

/* =========================================================
   V29 — mobile home: first street image reposition
   Requested 01.10.2026. Mobile only; desktop unchanged.
   ========================================================= */
@media (max-width:760px){
  /* Move the first small street image out from directly beneath the hero.
     It now sits farther right and higher, roughly level with CLOTHING. */
  .home .town{
    left:76vw !important;
    top:18vw !important;
  }
}


/* =========================================================
   V30 — MOBILE ONLY: restore individual image fades + final sea spacing
   01.10.2026
   Desktop is intentionally untouched.
   ========================================================= */
@media (max-width:760px){
  /* Make each HOME story image visibly fade/lift in on its own as it enters. */
  .home .story-stage .mood.reveal,
  .home .story-stage .final-end-image.reveal{
    opacity:0 !important;
    transform:translate3d(0,38px,0) scale(.966) !important;
    transition:
      opacity 1.58s cubic-bezier(.22,.61,.36,1),
      transform 1.72s cubic-bezier(.22,.61,.36,1) !important;
    will-change:opacity,transform;
  }
  .home .story-stage .mood.reveal.small{
    transform:translate3d(0,30px,0) scale(.96) !important;
  }
  .home .story-stage .mood.reveal.large{
    transform:translate3d(0,42px,0) scale(.972) !important;
  }
  .home .story-stage .mood.reveal.is-visible,
  .home .story-stage .final-end-image.reveal.is-visible{
    opacity:1 !important;
    transform:translate3d(0,0,0) scale(1) !important;
  }

  /* The four-line GOOD CLOTHING hero is much taller than the old two-line hero.
     Keep the final sea image clearly below the headline/subline instead of
     ending directly against the type. */
  .final-end-image.is-pinned{
    top:82vw !important;
    right:5.2vw !important;
    width:24vw !important;
  }
}

/* =========================================================
   V31 — ABOUT brand story
   01.10.2026
   Exact supplied brand story, set as a long-form editorial page.
   ========================================================= */
.about-story-main{
  padding-bottom:12vw !important;
}
.about-story-hero{
  margin-top:.2vw;
  padding-bottom:3.2vw;
  border-bottom:1px solid rgba(23,21,18,.34);
}
.about-story-hero h1{
  margin:0;
  max-width:90vw;
  font-family:var(--serif);
  font-size:6.6vw;
  font-weight:400;
  line-height:.94;
  letter-spacing:-.028em;
}
.about-story-hero h1 span{display:block}
.about-story-copy{
  width:43vw;
  margin:4vw 0 0 28vw;
  font-size:1.14vw;
  line-height:1.48;
  letter-spacing:-.005em;
}
.about-story-copy p{
  margin:0 0 1.45em;
}
.about-story-copy strong{
  font-weight:600;
}
.about-story-copy .about-emphasis{
  width:54vw;
  margin:3.2vw 0 3.2vw -8vw;
  font-family:var(--serif);
  font-size:2.75vw;
  line-height:1.02;
  letter-spacing:-.02em;
}
.about-story-copy .about-ending{
  margin-top:5vw;
  margin-bottom:0;
  font-size:3.35vw;
}

@media (max-width:760px){
  .about-story-main{
    padding-bottom:18vw !important;
  }
  .about-story-hero{
    padding-bottom:6vw;
  }
  .about-story-hero h1{
    max-width:89vw;
    font-size:11.2vw;
    line-height:.95;
    letter-spacing:-.024em;
  }
  .about-story-hero h1 span + span{
    margin-top:2vw;
  }
  .about-story-copy{
    width:auto;
    max-width:89vw;
    margin:8vw 0 0;
    font-size:3.55vw;
    line-height:1.48;
  }
  .about-story-copy p{
    margin-bottom:1.55em;
  }
  .about-story-copy .about-emphasis{
    width:auto;
    max-width:89vw;
    margin:9vw 0;
    font-size:7.7vw;
    line-height:1.02;
  }
  .about-story-copy .about-ending{
    margin-top:12vw;
    font-size:8.7vw;
  }
}

/* =========================================================
   V32 — ABOUT: THE IDEA + image interlude + THE STORY
   01.10.2026
   Other pages remain unchanged.
   ========================================================= */
.about-section-label{
  margin:0 0 1.5vw;
  font-size:.75vw;
  letter-spacing:.14em;
}
.about-idea-section{
  margin-top:.2vw;
}
.about-idea-title{
  margin:0;
  max-width:91vw;
  font-family:var(--serif);
  font-size:6.15vw;
  font-weight:400;
  line-height:.94;
  letter-spacing:-.028em;
}
.about-idea-title span{display:block}
.about-idea-copy{
  width:43vw;
  margin:4vw 0 0 28vw;
  font-size:1.14vw;
  line-height:1.48;
  letter-spacing:-.005em;
}
.about-idea-copy p{margin:0 0 1.45em}
.about-idea-copy strong{font-weight:600}
.about-idea-copy em{font-style:italic}
.about-idea-emphasis{
  width:54vw;
  margin:3.2vw 0 3.2vw -8vw !important;
  font-family:var(--serif);
  font-size:2.75vw;
  line-height:1.02;
  letter-spacing:-.02em;
}
.about-idea-ending{
  margin-top:5vw !important;
  font-size:3.35vw;
}
.about-image-interlude{
  position:relative;
  height:72vw;
  margin:7vw 0 8vw;
  border-top:1px solid rgba(23,21,18,.34);
  border-bottom:1px solid rgba(23,21,18,.34);
}
.about-origin-image{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#ddd6c8;
}
.about-origin-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.about-origin-cloth{
  left:0;
  top:5vw;
  width:52vw;
  height:39vw;
}
.about-origin-place{
  right:4vw;
  bottom:5vw;
  width:28vw;
  height:42vw;
}
.about-story-section{
  padding-top:1vw;
}
.about-story-section .about-story-hero{
  margin-top:0;
}

@media (max-width:760px){
  .about-section-label{
    margin-bottom:3.5vw;
    font-size:2.3vw;
    letter-spacing:.14em;
  }
  .about-idea-title{
    max-width:89vw;
    font-size:10.4vw;
    line-height:.95;
    letter-spacing:-.024em;
  }
  .about-idea-title span + span{margin-top:2vw}
  .about-idea-copy{
    width:auto;
    max-width:89vw;
    margin:8vw 0 0;
    font-size:3.55vw;
    line-height:1.48;
  }
  .about-idea-copy p{margin-bottom:1.55em}
  .about-idea-emphasis{
    width:auto;
    max-width:89vw;
    margin:9vw 0 !important;
    font-size:7.7vw;
    line-height:1.02;
  }
  .about-idea-ending{
    margin-top:12vw !important;
    font-size:8.7vw;
  }
  .about-image-interlude{
    height:auto;
    margin:12vw 0 14vw;
    padding:7vw 0;
    display:flex;
    flex-direction:column;
    gap:7vw;
  }
  .about-origin-image{
    position:relative;
    inset:auto;
  }
  .about-origin-cloth{
    width:84vw;
    height:63vw;
    align-self:flex-start;
  }
  .about-origin-place{
    width:62vw;
    height:93vw;
    align-self:flex-end;
    margin-right:0;
  }
  .about-story-section{
    padding-top:1vw;
  }
}

/* =========================================================
   V33 — ABOUT refinement
   01.10.2026
   ABOUT page only. Desktop/mobile on other pages untouched.
   ========================================================= */
.about-page .about-idea-title{
  max-width:76vw;
  font-size:6.15vw;
  line-height:.90;
}
.about-page .about-idea-title span + span{
  margin-top:.12em;
}

/* Body text and statement lines use the same left axis as the headlines. */
.about-page .about-idea-copy,
.about-page .about-story-copy{
  width:46vw;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Standalone statements echo the large headline typography, only smaller. */
.about-page .about-idea-emphasis,
.about-page .about-story-copy .about-emphasis{
  width:62vw;
  margin-left:0 !important;
  font-family:var(--serif);
  font-size:2.9vw;
  font-weight:400;
  line-height:.98;
  letter-spacing:-.024em;
}
.about-page .about-idea-emphasis strong,
.about-page .about-story-copy .about-emphasis strong{
  font-weight:400;
}
.about-page .about-idea-ending,
.about-page .about-story-copy .about-ending{
  font-size:3.35vw;
}

/* Two large equal squares like the Editorial image grid. */
.about-page .about-image-interlude{
  position:relative;
  height:auto;
  margin:7vw 0 8vw;
  padding:1.25vw 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25vw;
  border-top:1px solid rgba(23,21,18,.34);
  border-bottom:1px solid rgba(23,21,18,.34);
}
.about-page .about-origin-image,
.about-page .about-origin-cloth,
.about-page .about-origin-place{
  position:relative;
  inset:auto;
  width:auto;
  height:auto;
  margin:0;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--paper);
}
.about-page .about-origin-image img{
  width:100%;
  height:100%;
}
.about-page .about-origin-cloth img{
  object-fit:cover;
  object-position:center;
}
.about-page .about-origin-place img{
  object-fit:cover;
  object-position:center;
}

@media (max-width:760px){
  .about-page .about-idea-title{
    max-width:89vw;
    font-size:10.4vw;
    line-height:.91;
  }
  .about-page .about-idea-title span + span{
    margin-top:.11em;
  }

  .about-page .about-idea-copy,
  .about-page .about-story-copy{
    width:auto;
    max-width:89vw;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .about-page .about-idea-emphasis,
  .about-page .about-story-copy .about-emphasis{
    width:auto;
    max-width:89vw;
    margin-left:0 !important;
    font-size:7.25vw;
    line-height:1.0;
  }
  .about-page .about-idea-ending,
  .about-page .about-story-copy .about-ending{
    font-size:8.2vw;
  }

  .about-page .about-image-interlude{
    margin:12vw 0 14vw;
    padding:4vw 0;
    grid-template-columns:1fr;
    gap:4vw;
  }
  .about-page .about-origin-image,
  .about-page .about-origin-cloth,
  .about-page .about-origin-place{
    width:100%;
    aspect-ratio:1/1;
  }
}


/* =========================================================
   V35 — client refinements
   - Modern Tweed becomes COLLECTION 01
   - whole product + detail-shot system
   - homepage editorial teaser loses repeated headline
   - one homepage product detail
   Other page structures remain untouched.
   ========================================================= */

.home .home-editorial-teaser{
  display:block;
  pointer-events:auto;
  width:100%;
}
.home .home-editorial-teaser em{
  display:block;
  font-style:italic;
}
.home .home-editorial-teaser span{
  display:inline-block;
  margin-top:.85vw;
  padding-bottom:.16vw;
  border-bottom:1px solid currentColor;
  font-size:.78vw;
  letter-spacing:.05em;
}
.home .home-product-detail img{
  object-fit:cover;
  object-position:center;
}

.modern-page .subpage-main{
  padding-bottom:8vw !important;
}
.modern-page .page-hero{
  padding-bottom:4vw;
}
.collection-visual-grid{
  margin-top:1.25vw;
  padding-top:1.25vw;
  border-top:1px solid rgba(23,21,18,.34);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25vw;
}
.collection-visual{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#151412;
}
.collection-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.collection-visual:not(.collection-detail) img{
  object-fit:contain;
}
.collection-detail img{
  object-fit:cover;
}

@media (max-width:760px){
  .home .home-editorial-teaser span{
    margin-top:2.4vw;
    padding-bottom:.35vw;
    font-size:2.15vw;
  }

  .modern-page .page-hero{
    padding-bottom:8vw;
  }
  .collection-visual-grid{
    margin-top:3vw;
    padding-top:3vw;
    gap:3vw;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* =========================================================
   V40 — Modern Tweed refinement
   - single divider line only
   - collection kicker kept below the headline
   - more breathing room around products inside the image tiles
   ========================================================= */
.modern-page .subpage-main{
  padding-top:4.5vw;
}
.modern-page .collection-layout{
  width:100%;
}
.modern-page .collection-divider{
  display:none;
}
.modern-page .collection-intro{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 23vw;
  align-items:end;
  column-gap:4vw;
  margin-bottom:2vw;
}
.modern-page .collection-intro-head{
  max-width:42vw;
}
.modern-page .collection-intro h1{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:7.45vw;
  line-height:.92;
  letter-spacing:-.035em;
}
.modern-page .collection-intro .page-kicker{
  font-size:.88vw;
  letter-spacing:.08em;
  margin-top:.7vw;
  margin-bottom:0;
}
.modern-page .collection-copy{
  max-width:23vw;
  padding-bottom:.3vw;
  font-size:1.08vw;
  line-height:1.35;
}
.modern-page .collection-copy p{
  margin:0;
}
.modern-page .collection-grid-8{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1vw;
}
.modern-page .collection-product{
  margin:0;
  aspect-ratio:1/1;
  background:#11100e;
  overflow:hidden;
}
.modern-page .collection-product img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}
@media (max-width:760px){
  .modern-page .subpage-main{
    padding-top:8vw;
  }
  .modern-page .collection-intro{
    grid-template-columns:1fr;
    row-gap:3vw;
    margin-bottom:5vw;
  }
  .modern-page .collection-intro-head{
    max-width:none;
  }
  .modern-page .collection-intro h1{
    font-size:18vw;
    line-height:.94;
  }
  .modern-page .collection-intro .page-kicker{
    font-size:2.5vw;
    margin-top:2vw;
    margin-bottom:0;
  }
  .modern-page .collection-copy{
    max-width:84vw;
    padding-bottom:0;
    font-size:3.5vw;
    line-height:1.4;
  }
  .modern-page .collection-grid-8{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3vw;
  }
}


/* =========================================================
   V43 — CLIENT CORRECTIONS PATCH
   07.10.2026
   - persistent primary navigation on all pages
   - Barber Shop image runs behind the sticky home headline
   - Editorial cross-links on Modern Tweed and About
   - visible THE IDEA / THE STORY navigation within About
   - Editorial image cleanup using existing approved assets
   - language versions intentionally NOT included
   ========================================================= */

/* Keep the navigation and logo accessible while scrolling, without changing
   the approved document flow or header spacing. */
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:8.8vw;
  background:var(--paper);
  z-index:105;
  pointer-events:none;
}
.logo-link,
.home .logo-link{
  position:fixed !important;
  z-index:125 !important;
}
.main-nav{
  position:fixed !important;
  z-index:130 !important;
}

/* The Barber Shop / British street image belongs to the background layer and
   must never pass over the large GOOD CLOTHING headline. */
.home .mood.pub{
  z-index:10 !important;
}

/* About gets a clear secondary navigation without adding clutter to the global
   three-item navigation. */
.about-subnav{
  display:flex;
  gap:2.6vw;
  margin:0 0 3.5vw;
  font-size:.82vw;
  line-height:1;
  letter-spacing:.08em;
}
.about-subnav a{
  position:relative;
  padding-bottom:.28vw;
}
.about-subnav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.about-subnav a:hover::after,
.about-subnav a:focus-visible::after{
  transform:scaleX(1);
}
#the-idea,
#the-story{
  scroll-margin-top:10vw;
}

/* Same restrained Editorial teaser language as the homepage, now also placed
   at the end of Modern Tweed and About. */
.editorial-crosslink{
  margin-top:7vw;
  padding-top:1.25vw;
  border-top:1px solid rgba(23,21,18,.34);
  width:100%;
}
.editorial-crosslink a{
  display:block;
  width:max-content;
  max-width:40vw;
  font-size:1.08vw;
  line-height:1.2;
}
.editorial-crosslink em{
  display:block;
}
.editorial-crosslink span{
  display:inline-block;
  margin-top:.85vw;
  padding-bottom:.16vw;
  border-bottom:1px solid currentColor;
  font-size:.78vw;
  letter-spacing:.05em;
}

@media (max-width:900px) and (min-width:761px){
  body::before{height:12.5vw}
  #the-idea,#the-story{scroll-margin-top:14vw}
}

@media (max-width:760px){
  body::before{height:23vw}
  .about-subnav{
    gap:7vw;
    margin:0 0 8vw;
    font-size:2.45vw;
  }
  .about-subnav a{padding-bottom:.7vw}
  #the-idea,#the-story{scroll-margin-top:28vw}
  .editorial-crosslink{
    margin-top:13vw;
    padding-top:3vw;
  }
  .editorial-crosslink a{
    max-width:84vw;
    font-size:3.5vw;
  }
  .editorial-crosslink span{
    margin-top:2.4vw;
    padding-bottom:.35vw;
    font-size:2.15vw;
  }
}


/* V43 review additions — use existing approved imagery only. */
/* A few Collection 01 products are deliberately shown uncropped so the
   silhouette reads clearly as a line-sheet reference; the remaining tiles
   keep the tighter editorial crop. */
.modern-page .collection-product.full-product img{
  object-fit:contain !important;
  object-position:center center !important;
}

/* One restrained extra editorial image row, built only from existing assets. */
.editorial-extra-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--editorial-gap,1.25vw);
  margin-top:var(--editorial-gap,1.25vw);
}
.editorial-extra-row figure{
  aspect-ratio:.84/1;
}
.editorial-extra-row figure img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.editorial-extra-row figure:first-child img{object-position:center center}
.editorial-extra-row figure:nth-child(2) img{object-position:center center}
.editorial-extra-row figure:nth-child(3) img{object-position:center center}

@media (max-width:760px){
  .editorial-extra-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3vw;
    margin-top:3vw;
  }
  .editorial-extra-row figure{aspect-ratio:.84/1}
  .editorial-extra-row figure:last-child{grid-column:2}
}

/* =========================================================
   V46 — GLOBAL FIXED HEADER / RULE
   Logo, navigation and the fine rule remain together while scrolling.
   A small band of the paper background remains visible below the rule
   before page content begins. No page content/layout is otherwise changed.
   ========================================================= */

/* Fixed paper backdrop: ends only after the rule + approved breathing room. */
body::before,
body.home::before{
  content:"" !important;
  position:fixed !important;
  inset:0 0 auto 0 !important;
  height:11.75vw !important;
  background:var(--paper) !important;
  z-index:110 !important;
  pointer-events:none !important;
}

/* Keep the complete header system together. */
.logo-link,
.home .logo-link{
  position:fixed !important;
  z-index:125 !important;
}
.main-nav{
  position:fixed !important;
  z-index:130 !important;
}
.header-line,
.internal-header .header-line,
.editorial-page .header-line{
  position:fixed !important;
  top:10.5vw !important;
  left:2.1167vw !important;
  width:95.7666vw !important;
  z-index:120 !important;
}

@media (max-width:900px) and (min-width:761px){
  body::before,
  body.home::before{
    height:21.05vw !important;
  }
  .header-line,
  .internal-header .header-line,
  .editorial-page .header-line{
    top:19.7vw !important;
  }
}

@media (max-width:760px){
  body::before,
  body.home::before{
    height:30.2vw !important;
  }
  .header-line,
  .internal-header .header-line,
  .editorial-page .header-line{
    top:28.6vw !important;
    left:5.2vw !important;
    width:89.6vw !important;
  }
}