/* ===========================================================
   CASATI — the type system, rebuilt from measured values.

   Every number here came off the DevTools inspection of
   Purewhite and KT Merry, not from estimation:

     Purewhite  .sie-scritta-nuova_1-text
       Silk Serif Light · 65px · line-height 1 · tracking 0em
       uppercase · centred · rgba(12,12,11,.85)

     Purewhite  .sie-brand-statement_2-text
       Montserrat · 18px · line-height 1.8 · centred
       (Thin, and clearly tracked wide)

     KT Merry   .sie-studio-intro_2-text
       Silk Serif Extra Light · 80px · line-height 1 · centred

     KT Merry   .sie-about-kt_3-text
       Nunito ExtraLight · 15px · line-height 1.7 · rgba(140,140,140,1)

     Container  .sc width:1200px, centred in a 1808px viewport
     Sections   800–1700px tall

   Two corrections to what I built before: display leading is
   1.0, not 0.9 — I had it too tight — and tracking is 0, not
   negative. Both of mine were over-corrections.
   =========================================================== */

/* ---- faces -------------------------------------------------
   Silk Serif is the real answer and it is a commercial licence.
   Prata is the closest free stand-in I can self-host: same high
   contrast, same sharp fine serifs, slightly heavier stem.
   Bodoni Moda is stiffer and more vertical; Gilda is softer.
   Swap one @font-face block and the whole system moves. */

@font-face{font-family:Display;src:url(../fonts/prata-latin-400-normal.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
/* Prata ships no italic, so the italic slot falls to Bodoni —
   which is why the italic reads slightly narrower here than it
   will with the real Silk Serif italic. */
@font-face{font-family:Display;src:url(../fonts/bodoni-moda-latin-400-italic.woff2) format('woff2');
  font-weight:400;font-style:italic;font-display:swap}

@font-face{font-family:Alt;src:url(../fonts/bodoni-moda-latin-400-normal.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Alt2;src:url(../fonts/gilda-display-latin-400-normal.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:Mont;src:url(../fonts/montserrat-latin-100-normal.woff2) format('woff2');
  font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:Mont;src:url(../fonts/montserrat-latin-200-normal.woff2) format('woff2');
  font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:Mont;src:url(../fonts/montserrat-latin-300-normal.woff2) format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Mont;src:url(../fonts/montserrat-latin-400-normal.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --avorio:#F7F4EE;
  --lino:#EDE7DC;
  --notte:#141210;
  --carbone:#2E2C29;      /* KT Merry's dark ground is charcoal, not black */
  --inchiostro:#2A251F;
  --pietra:#6F6A63;       /* lifted — 140,140,140 read as washed out */
  --travertino:#CFC4B4;
  --terracotta:#BC4A33;
  /* The one cold colour in the palette, and it is not invented: it is the
     water of Lake Como in Stefano's own drone frame — average #517E6C —
     taken down to a ground dark enough to set Avorio type on. It is used
     in exactly one place, behind the Lake Como section. */
  --lago:#22362D;
  --cipresso:#4A5443;

  --display:Display,'Silk Serif',Didot,serif;
  --sans:Mont,Montserrat,-apple-system,sans-serif;

  /* ---- the ladder, measured -------------------------------
     Four tiers and no more. The gap between tier 1 and tier 4
     is roughly 7:1, and every tier has a different job. */
  --t1:clamp(44px,5.4vw,78px);   /* display statement          */
  --t2:clamp(34px,4.1vw,58px);   /* named work                 */
  --t3:clamp(20px,2.1vw,30px);   /* pull quote                 */
  --t4:18px;                     /* sans statement             */
  --t5:15px;                     /* sans paragraph             */
  --t6:11px;                     /* tracked label              */

  /* ---- intervals -------------------------------------------
     Sections in the reference run 800–1700px. Mine ran 400. */
  --band:clamp(360px,64vh,660px);
  --void:clamp(120px,20vh,220px);
  --col:1200px;                  /* measured container width   */
  --margin:clamp(24px,4vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html,body{overflow-x:clip}
body{background:var(--avorio);color:var(--inchiostro);
  font-family:var(--sans);font-weight:300;font-size:var(--t5);line-height:1.7}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* =============================================================
   THE ELEVEN DEVICES
   Each one is lifted from a specific screen in the references.
   ============================================================= */

/* 01 · Display. line-height 1, tracking 0. Nothing else. */
.t1,.t2{font-family:var(--display);font-weight:400;
  line-height:1;letter-spacing:0}
.t1{font-size:var(--t1)}
.t2{font-size:var(--t2)}
.caps{text-transform:uppercase}

/* 02 · The inline italic. A lowercase italic word dropped into a
   line of capitals — "and SOUL", "in SPECTACULAR". KT Merry uses
   it on almost every display line, and it is the single device
   that stops a wall of capitals reading as shouting. */
.t1 em,.t2 em,.t3 em{font-style:italic;text-transform:none;
  font-family:var(--display)}

/* 03 · Italic line over roman line. Purewhite's "SELECTED /
   CELEBRATIONS" — same size, same caps, line one italic. */
.pair-i{display:block;font-style:italic;text-transform:uppercase}
.pair-r{display:block;font-style:normal;text-transform:uppercase}

/* 04 · Sentence-case display with italic phrases inside, for
   emphasis rather than for decoration. KT Merry's "Discover
   images without a shelf life, moments frozen in time." */
.t3{font-family:var(--display);font-weight:400;font-size:var(--t3);
  line-height:1.32;letter-spacing:0;color:var(--pietra)}

/* 05 · Serif italic caps, letterspaced — the sub-line directly
   under a display statement. Purewhite: "ELEVATED DESTINATION
   CELEBRATIONS." Distinct from the sans label below it. */
.sub-i{font-family:var(--display);font-style:italic;
  font-size:clamp(14px,1.25vw,18px);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.5}

/* 06 · Sans statement. 18px, line-height 1.8, tracked wide.
   Two or three lines, never more. */
.sub-s{font-family:var(--sans);font-weight:200;font-size:var(--t4);
  letter-spacing:.2em;text-transform:uppercase;line-height:1.8}

/* 07 · Sans paragraph. 15px, line-height 1.7, grey. The only
   place on the page where more than twenty words appear. */
.para{font-family:var(--sans);font-weight:300;font-size:var(--t5);
  line-height:1.78;color:var(--pietra);max-width:52ch}
.para em{font-style:italic}

/* 08 · The label. 11px, tracked 0.3em. Used for venue, section
   name, and link. Never for anything that needs reading. */
.lab{font-family:var(--sans);font-weight:400;font-size:var(--t6);
  letter-spacing:.3em;text-transform:uppercase;line-height:2}

/* 09 · A label that completes a sentence into the display below
   it. "KNOWN FOR IMAGERY ROOTED IN," → "ADVENTURE, PURPOSE, and
   SOUL". The label is not a heading; it is the first clause. */
.lead-in{font-family:var(--sans);font-weight:300;font-size:var(--t6);
  letter-spacing:.28em;text-transform:uppercase;
  display:block;margin-bottom:1.4em}

/* 10 · Two registers on one baseline, opposite ends. KT Merry's
   "PUBLISHED" with "MUST-READS" at the far right. */
.split{display:flex;align-items:baseline;justify-content:space-between;
  gap:2rem}

/* 11 · The link. Tracked caps with a hairline under it. */
.link{font-family:var(--sans);font-weight:400;font-size:var(--t6);
  letter-spacing:.3em;text-transform:uppercase;
  display:inline-block;padding-bottom:8px;
  border-bottom:1px solid currentColor}
.btn{font-family:var(--sans);font-weight:400;font-size:var(--t6);
  letter-spacing:.3em;text-transform:uppercase;
  display:inline-block;padding:20px 46px;border:1px solid currentColor}
.btn--fill{background:var(--lino);border-color:var(--lino);
  color:var(--inchiostro)}

/* ---- alignment, varied on purpose ------------------------- */
.al-c{text-align:center}
.al-l{text-align:left}
.al-r{text-align:right}

/* ---- ground ------------------------------------------------ */
.g-avorio{background:var(--avorio);color:var(--inchiostro)}
.g-lino{background:var(--lino);color:var(--inchiostro)}
.g-carbone{background:var(--carbone);color:var(--avorio)}
.g-notte{background:var(--notte);color:var(--avorio)}
.g-lago{background:var(--lago);color:var(--avorio)}
.g-carbone .para,.g-notte .para,.g-lago .para{color:rgba(247,244,238,.82)}
.g-carbone .t3,.g-notte .t3,.g-lago .t3{color:rgba(247,244,238,.9)}

/* ---- structure --------------------------------------------- */
.wrap{width:min(var(--col),100% - (var(--margin) * 2));margin-inline:auto}
.band{min-height:92vh;display:flex;flex-direction:column;
  justify-content:center;padding-block:var(--void)}
.void{padding-block:var(--void)}

.ph{color:var(--inchiostro);border-bottom:1px solid var(--terracotta);
  padding-bottom:1px}
.g-notte .ph,.g-carbone .ph{color:var(--avorio)}
.hair{width:130px;height:1px;background:currentColor;opacity:.3;border:0}


/* ===========================================================
   CASATI — the chrome, and the furniture common to every page
   that is not the homepage.

   type.css holds the eleven devices. This file holds only the
   things that repeat: the header, the submenu, the mobile
   overlay, the footer, and four or five section shapes that
   more than one page needs. Nothing here is page-specific.
   =========================================================== */

/* ---- header -----------------------------------------------
   Two grounds. On the homepage it floats over the hero and the
   type is white; everywhere else it sits on Avorio and sticks.
   One class difference, not two headers. */
.hdr{z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,2.3vw,32px) var(--margin)}
.hdr--solid{position:sticky;top:0;background:var(--avorio);
  border-bottom:1px solid rgba(42,37,31,.10)}
.hdr--over{position:absolute;top:0;left:0;right:0}
.hdr__logo img{width:clamp(104px,10.4vw,150px);aspect-ratio:6312/2240;height:auto}
.hdr--over .nav a,.hdr--over .nav button{color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav a{color:var(--inchiostro)}
.nav [aria-current="page"]{opacity:.55}
/* A parent whose child is the current page. Not aria-current — the
   document already has one of those, on the child. */
.nav__top--on,.sheet__sub .nav__top--on{opacity:.55}

/* ---- the Experience submenu -------------------------------
   Four children behind one word. It opens on hover and on
   keyboard focus, and the panel carries its own Avorio ground
   so it reads the same over a photograph as over the page.

   The parent stays a real link — a nav item you cannot click
   is a nav item that fails the moment hover is unavailable. */
.nav__item{position:relative;display:flex;align-items:center}
/* No `font: inherit` here. The shorthand resets font-size and tracking to
   whatever the parent div carries — which made Experience render at 15px
   with no letterspacing while every other item sat at 11px on 0.3em. The
   element already has .lab; it needs nothing but the layout. */
.nav__top{display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0;cursor:pointer}
.nav__top::after{content:"";width:4px;height:4px;flex:none;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.45;
  transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.nav__item:hover .nav__top::after,
.nav__item:focus-within .nav__top::after{transform:translateY(1px) rotate(225deg)}

.nav__sub{position:absolute;top:calc(100% + 14px);left:50%;
  transform:translate(-50%,-6px);min-width:236px;
  background:var(--avorio);border:1px solid rgba(42,37,31,.10);
  padding:clamp(20px,2vw,28px) clamp(24px,2.4vw,34px);
  display:flex;flex-direction:column;gap:1.05em;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 240ms cubic-bezier(.22,1,.36,1),
             transform 240ms cubic-bezier(.22,1,.36,1),
             visibility 0s linear 240ms;
  box-shadow:0 18px 44px rgba(20,18,16,.09)}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub,
.nav__sub.is-open{opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,0);transition-delay:0s}
/* The panel is always Inchiostro on Avorio, even under .hdr--over. */
.hdr--over .nav__sub a{color:var(--inchiostro);text-shadow:none}
.nav__sub a,.nav__sub span{white-space:nowrap;line-height:1.2}
.nav__sub a:hover{opacity:.55}
/* The gap between the word and the panel would otherwise break the
   hover the moment the pointer crossed it. */
.nav__item::after{content:"";position:absolute;top:100%;left:0;right:0;
  height:18px}

/* ---- the mobile menu --------------------------------------
   Below 900 the nav becomes one word and a full-height sheet.
   Everything is on one screen, including the four children —
   a submenu that has to be opened twice on a phone is a
   submenu nobody reaches. */
/* Three lines, and they are not the same length. A perfectly even
   hamburger is a system icon; an uneven one is a drawn mark, which is
   what the rest of this site is made of. */
.nav__btn{display:none;width:28px}
.nav__btn i{display:block;height:1px;background:currentColor;
  margin-block:6px;transition:width .4s cubic-bezier(.22,1,.36,1)}
.nav__btn i:nth-child(1){width:28px}
.nav__btn i:nth-child(2){width:18px}
.nav__btn i:nth-child(3){width:23px}
.nav__btn:hover i:nth-child(2),.nav__btn:hover i:nth-child(3){width:28px}
.hdr--over .nav__btn i{background:#fff;box-shadow:0 1px 14px rgba(0,0,0,.5)}
/* Header with no logo in it: the nav still sits on the right. */
.hdr--nologo{justify-content:flex-end}

/* The floating one. It exists because the homepage header is absolute and
   scrolls away with the hero, so past the first screen there is no way
   back into the navigation. It carries its own Avorio ground — the
   sections it floats over run from Avorio to Notte and a bare dark line
   would disappear over half of them.

   It is shown by script only once the header has left the viewport, so
   on every page with a sticky header it never appears at all. */
.nav__btn--float{position:fixed;z-index:50;display:none;
  top:clamp(16px,2vw,26px);right:clamp(16px,2vw,26px);
  width:auto;padding:14px 13px;background:var(--avorio);
  color:var(--inchiostro);
  border:1px solid rgba(42,37,31,.10);
  opacity:0;transform:translateY(-8px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.nav__btn--float.is-on{display:block;opacity:1;transform:none}
/* Both menu controls are buttons for the keyboard and for screen
   readers, and neither should arrive wearing the operating system's
   grey box. */
.nav__btn,.sheet__x{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:var(--inchiostro)}
.sheet__x{color:var(--pietra)}
.sheet{position:fixed;inset:0;z-index:60;background:var(--avorio);
  padding:clamp(22px,2.4vw,34px) var(--margin);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity 300ms cubic-bezier(.22,1,.36,1),
  visibility 0s linear 300ms}
.sheet.is-open{opacity:1;visibility:visible;transition-delay:0s}
.sheet__top{display:flex;align-items:center;justify-content:space-between}
.sheet__top img{width:130px;aspect-ratio:6312/2240;height:auto}
.sheet__nav{margin-top:auto;margin-bottom:auto;
  display:flex;flex-direction:column;gap:clamp(14px,2.4vh,22px)}
.sheet__nav > a{font-family:var(--display);font-size:clamp(30px,8vw,46px);
  line-height:1;text-transform:uppercase}
.sheet__sub{display:flex;flex-direction:column;gap:.9em;
  margin:.4em 0 .3em;padding-left:2px}
.sheet__sub a{color:var(--pietra)}
.sheet__foot{display:flex;justify-content:space-between;color:var(--pietra)}

/* ---- page opening -----------------------------------------
   Every interior page starts the same way: a lead-in, a display
   line, and one paragraph. The variation belongs further down
   the page, not in the first screen. */
.phead{padding-block:clamp(120px,19vh,210px) clamp(56px,8vh,110px)}
.phead .lead-in{color:var(--pietra)}
.phead h1{font-size:clamp(44px,6.6vw,95px);line-height:1;max-width:15ch}
.phead .para{margin-top:clamp(34px,4.6vh,54px);max-width:50ch}
.phead--c{text-align:center}
.phead--c h1{margin-inline:auto}
.phead--c .para{margin-inline:auto}

/* ---- the numbered sequence --------------------------------
   Four or five steps, set as a ledger rather than as cards.
   Cards would make it a pricing table; a ledger keeps it a
   description of how a day runs. */
.seq{border-top:1px solid rgba(42,37,31,.16)}
.seq__r{display:grid;grid-template-columns:auto minmax(0,4fr) minmax(0,6fr);
  gap:clamp(20px,3.4vw,60px);align-items:start;
  padding-block:clamp(34px,5vh,60px);
  border-bottom:1px solid rgba(42,37,31,.16)}
.seq__n{font-family:var(--sans);font-weight:300;font-size:var(--t6);
  letter-spacing:.2em;color:var(--pietra);padding-top:.7em}
.seq__h{font-family:var(--display);font-size:clamp(23px,2.7vw,40px);
  line-height:1.05;text-transform:uppercase}
.seq__b{max-width:52ch}

/* ---- two columns of prose, with a rule between -------------
   For the pages that genuinely have two things to say and no
   photograph worth interrupting them with. */
.pair2{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(48px,7vw,120px);align-items:start;
  padding-block:clamp(90px,13vh,170px)}
.pair2 h2{font-family:var(--display);font-size:clamp(26px,3.1vw,44px);
  line-height:1.05;text-transform:uppercase;margin-bottom:1.4em}
.pair2 .para + .para{margin-top:1.5em}

/* ---- a strip of frames ------------------------------------ */
.strip{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2vw,32px);align-items:end;
  padding-block:clamp(70px,10vh,140px)}
.strip figure{grid-column:span 4}
.strip figure img{width:100%;object-fit:cover}
.strip figcaption{margin-top:1.2em}

/* ---- closing invitation ----------------------------------- */
.cta{text-align:center;padding-block:clamp(120px,18vh,210px)}
.cta .t1{font-size:clamp(38px,5.2vw,75px);line-height:1.04}
.cta .btn{margin-top:clamp(52px,7.5vh,96px)}

/* ---- footer ------------------------------------------------ */
.ftr{padding-block:clamp(90px,13vh,150px) clamp(34px,5vh,58px)}
.ftr__g{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
  gap:clamp(40px,6vw,90px);align-items:start}
.ftr__g img{width:clamp(140px,13vw,180px);aspect-ratio:6312/2240;height:auto}
.ftr__col{display:flex;flex-direction:column;gap:.85em}
.ftr__col .lab{opacity:.55}
.ftr__hd{opacity:.32!important}
/* Instagram, YouTube, TikTok. Words, not icon glyphs: the site sets
   everything in two faces and a row of third-party marks would be the
   only foreign shapes on the page. */
.ftr__soc{display:flex;flex-wrap:wrap;align-items:center;
  gap:.6em clamp(16px,1.8vw,26px);margin-top:clamp(28px,4vh,44px)}
.ftr__ic{display:inline-flex;color:var(--avorio);opacity:.5;
  transition:opacity .3s}
.ftr__ic:hover,.ftr__ic:focus-visible{opacity:1}
.ftr__ic svg{display:block}
.ftr__base{display:flex;justify-content:space-between;gap:2rem;
  margin-top:clamp(60px,9vh,110px);padding-top:clamp(22px,3vh,34px);
  border-top:1px solid rgba(247,244,238,.14);opacity:.42}

@media(max-width:900px){
  .nav{display:none}
  .hdr .nav__btn{display:block}
  .strip figure{grid-column:1/-1}
  .pair2{grid-template-columns:1fr;gap:clamp(48px,8vh,80px)}
  .seq__r{grid-template-columns:auto 1fr;row-gap:1.1em}
  .seq__b{grid-column:2}
  .ftr__g{grid-template-columns:1fr 1fr;gap:44px}
  .ftr__g > :first-child{grid-column:1/-1}
}

/* A child that is designed but not yet built. It reads as part of the
   menu and refuses the click, which is honest — a nav item that leads
   to a 404 is worse than one that admits the page is coming. */
.nav__soon{color:var(--travertino);cursor:default}
.hdr--over .nav__soon{color:rgba(247,244,238,.42)}
.nav__soon::after{content:"soon";margin-left:12px;font-size:8px;
  letter-spacing:.18em;opacity:.7;vertical-align:1px}
.ftr .nav__soon{color:rgba(247,244,238,.24)}
.ftr .nav__soon::after{display:none}
.sheet .nav__soon::after{display:none}

/* =============================================================
   THE BLOCKS
   Lifted out of the homepage so every page can use them. These
   are the same sections you approved, with the display sizes
   generalised — each one still fills its column, but it solves
   from the column rather than from a number typed for one
   particular headline.
   ============================================================= */

/* ---- the crossing — type onto the edge of a photograph ------
   One colour throughout. Where it passes onto the image it half
   vanishes, and that is the effect, not a fault to correct with
   a scrim. Needs a picture whose near edge is quiet. */
.cross{position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  align-items:start;min-height:clamp(520px,80vh,860px);
  padding-block:clamp(90px,13vh,170px)}
.cross__fig{grid-row:1}
.cross__fig img{width:100%;aspect-ratio:5/4;object-fit:cover}
.cross__t{grid-row:1;z-index:2;pointer-events:none}
.cross__t .t1{line-height:.98;font-size:clamp(40px,5.8vw,84px)}
.cross__t .lab{margin-top:2.4em;opacity:.75}
.cross--l .cross__fig{grid-column:4/13}
.cross--l .cross__t{grid-column:1/7;padding-top:clamp(50px,9vh,130px)}
.cross--r .cross__fig{grid-column:1/9}
.cross--r .cross__t{grid-column:7/13;text-align:right;
  padding-top:clamp(50px,9vh,130px)}

/* ---- type beside image ------------------------------------- */
.beside{display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 clamp(16px,2vw,32px);align-items:start;
  padding-block:clamp(110px,17vh,210px)}
.beside__fig{grid-column:1/8;grid-row:1}
.beside__fig img{width:100%;aspect-ratio:3/4;object-fit:cover}
.beside__t{grid-column:9/13;grid-row:1;text-align:right}
.beside__t .t1{font-size:clamp(40px,6.2vw,90px)}
.beside__t .lab{margin-top:1.6em;color:var(--pietra)}
.beside__t .link{margin-top:clamp(70px,12vh,150px)}

/* ---- display left, paragraph right ------------------------- */
.split2{display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 clamp(16px,2vw,32px);align-items:stretch;
  min-height:clamp(480px,72vh,780px);
  padding-block:clamp(100px,15vh,180px)}
.split2__h{grid-column:2/8;grid-row:1;align-self:center}
.split2__h .t1{line-height:.98;font-size:clamp(42px,6.6vw,95px)}
.split2__b{grid-column:9/13;grid-row:1;max-width:42ch;align-self:start;
  padding-top:clamp(10px,2vh,34px)}
.split2__b .para{color:var(--inchiostro);max-width:none;
  font-size:16.5px;line-height:1.75}
.split2__b p+p{margin-top:1.5em}
.split2__b .link{margin-top:clamp(50px,8vh,96px)}

/* ---- two frames, a centred block ---------------------------
   Three lines in the centre, never two. Two make a low strip
   between two tall columns and nothing holds. */
.duo{display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 clamp(16px,2vw,34px);align-items:center;
  min-height:clamp(600px,90vh,960px);padding-block:clamp(110px,16vh,190px)}
.duo__l{grid-column:1/6;grid-row:1;align-self:end;
  margin-bottom:clamp(-70px,-7vh,-30px)}
.duo__r{grid-column:10/13;grid-row:1;align-self:start;
  margin-top:clamp(-70px,-7vh,-30px)}
.duo__l img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo__r img{width:100%;aspect-ratio:3/4;object-fit:cover}
.duo__t{grid-column:6/10;grid-row:1;text-align:center;z-index:2}
.duo__t .sub-i{display:block;margin-bottom:1.5em;color:rgba(247,244,238,.68)}
.duo__t .t1{font-size:clamp(34px,5.3vw,76px);line-height:1.02}
.duo__t .t1 span{display:block;white-space:nowrap}
.duo__t .link{margin-top:clamp(46px,6.5vh,84px);
  color:rgba(247,244,238,.82);border-color:rgba(247,244,238,.4)}

/* ---- lo smarginato ----------------------------------------
   Small frame, the line overhanging it on both sides, a short
   text in the right column as counterweight. Never an opening. */
.spill{display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 clamp(16px,2vw,32px);align-items:center;
  min-height:clamp(560px,86vh,920px);padding-block:clamp(110px,16vh,200px)}
.spill__fig{grid-column:2/6;grid-row:1}
.spill__fig img{width:100%;aspect-ratio:3/4;object-fit:cover}
.spill__t{grid-column:1/10;grid-row:1;z-index:2;
  font-size:clamp(36px,5.5vw,79px);line-height:1.02;pointer-events:none;
  text-shadow:0 2px 34px rgba(0,0,0,.4)}
.spill__b{grid-column:10/13;grid-row:1;align-self:end;
  padding-bottom:clamp(30px,6vh,80px)}
.spill__b .para{max-width:none;font-size:15px}
.spill__b .link{margin-top:2.2em;
  color:rgba(247,244,238,.82);border-color:rgba(247,244,238,.4)}

/* ---- mirrored region — type left, photograph right --------- */
.cal{display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 clamp(16px,2vw,32px);align-items:center;
  min-height:clamp(520px,80vh,880px);padding-block:clamp(100px,15vh,180px)}
.cal__t{grid-column:1/6;grid-row:1}
.cal__t .t1{font-size:clamp(40px,5.8vw,84px);line-height:1}
.cal__t .lead-in{color:var(--pietra)}
.cal__t .para{margin-top:2em;max-width:34ch}
.cal__t .link{margin-top:2.8em}
/* Two ways out of the next-commission block: the page in the photograph,
   and everything else. The second is quieter because it is the fallback,
   not the invitation. */
.cal__go{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(14px,2vh,22px) clamp(26px,3vw,48px);margin-top:2.8em}
.cal__go .link{margin-top:0}
.cal__go .link--q{color:rgba(247,244,238,.6);
  border-bottom-color:rgba(247,244,238,.28)}
.cal--flip .cal__go{justify-content:flex-end}
.cal__fig{grid-column:7/13;grid-row:1}
.cal__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cal--flip .cal__t{grid-column:8/13;text-align:right}
.cal--flip .cal__fig{grid-column:1/7}
.cal--flip .cal__t .para{margin-left:auto}

/* ---- the review -------------------------------------------
   Display size. A review whispered at 15px reads as a legal
   disclaimer. */
.quote{text-align:center}
.quote blockquote{font-family:var(--display);font-weight:400;
  font-size:clamp(26px,3.2vw,46px);line-height:1.26;font-style:italic;
  max-width:19ch;margin-inline:auto}
.quote .lab{margin-top:clamp(48px,7vh,90px);color:var(--pietra)}

/* ---- the reviews carousel ---------------------------------
   A scroll-snap row, so touch and trackpad work with no script and the
   buttons drive the same scroll position rather than a second state. */
.revs__vp{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.revs__vp::-webkit-scrollbar{display:none}
.revs__vp:focus-visible{outline:1px solid var(--terracotta);outline-offset:14px}
.revs__s{flex:0 0 100%;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:center}
.revs__nav{display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,3vw,40px);margin-top:clamp(50px,7vh,84px)}
.revs__dots{display:flex;align-items:center;gap:12px}
.revs__dot{width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
  background:none;border:1px solid var(--pietra);transition:background .3s ease}
.revs__dot[aria-current="true"]{background:var(--inchiostro);
  border-color:var(--inchiostro)}
.revs__arw{background:none;border:0;padding:0;cursor:pointer;
  color:var(--pietra);font-family:var(--sans);font-weight:400;
  font-size:var(--t6);letter-spacing:.3em;text-transform:uppercase;
  transition:color .3s ease}
.revs__arw:hover{color:var(--inchiostro)}
/* Two links, centred and spaced, closing the reviews band: read the rest
   of them, or write to me. They sit together rather than in two separate
   bands, so neither of them looks stranded. */
.revs__all{display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(22px,4vw,64px);margin-top:clamp(40px,6vh,70px);
  margin-bottom:clamp(4px,1vh,12px)}

/* ---- three from the Journal -------------------------------- */
.jrn{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,52px);align-items:start}
.jrn__i figure{overflow:hidden;margin-bottom:1.6em}
.jrn__i img{width:100%;aspect-ratio:5/4;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.jrn__i:hover img{transform:scale(1.03)}
.jrn__i .lab{color:var(--pietra);margin-bottom:.5em}
.jrn__t{font-family:var(--display);font-size:clamp(19px,1.7vw,25px);
  line-height:1.2;max-width:18ch}
.jrn__i--drop{margin-top:clamp(40px,7vh,100px)}

/* ---- the ledger -------------------------------------------- */
.led{border-top:1px solid rgba(42,37,31,.16)}
.led a{display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(20px,3.4vw,60px);align-items:baseline;
  padding-block:clamp(26px,3.4vh,42px);
  border-bottom:1px solid rgba(42,37,31,.16)}
.led .n{font-family:var(--sans);font-weight:300;font-size:var(--t6);
  letter-spacing:.2em;color:var(--pietra)}
.led .w{font-family:var(--display);font-size:clamp(22px,2.7vw,40px);
  line-height:1;text-transform:uppercase}
.led a:hover .w{font-style:italic;text-transform:none}
.led .m{color:var(--pietra)}

/* ---- gallery ----------------------------------------------
   Two, three or four across. The rhythm is applied so that no
   two rows repeat a shape. */
.gal{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.4vw,40px);align-items:end;
  padding-block:clamp(50px,8vh,110px)}
.gal figure{grid-column:span var(--cw,4)}
.gal figure img{width:100%;object-fit:cover}
.gal--drop{margin-top:clamp(40px,7vh,110px)}
.gal figcaption{margin-top:1.1em}

/* ---- facts ------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(48px,7vw,120px);border-top:1px solid rgba(42,37,31,.16)}
.facts div{display:flex;justify-content:space-between;gap:2rem;
  align-items:baseline;padding-block:clamp(16px,2.2vh,24px);
  border-bottom:1px solid rgba(42,37,31,.16)}
.facts dt{color:var(--pietra)}
.facts dd{text-align:right}

/* ---- questions --------------------------------------------- */
.qs{border-top:1px solid rgba(42,37,31,.16)}
.qs details{border-bottom:1px solid rgba(42,37,31,.16)}
.qs summary{list-style:none;cursor:pointer;display:flex;
  justify-content:space-between;gap:2rem;align-items:baseline;
  padding-block:clamp(24px,3.2vh,38px);
  font-family:var(--display);font-size:clamp(19px,2.1vw,29px);line-height:1.2}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font-family:var(--sans);font-weight:300;
  font-size:18px;color:var(--pietra);flex:none}
.qs details[open] summary::after{content:"–"}
.qs .para{padding-bottom:clamp(26px,3.6vh,42px);max-width:60ch}

/* ---- video loop -------------------------------------------- */
.vidsec{position:relative;aspect-ratio:2/1;min-height:clamp(420px,52vh,760px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--notte) center/cover no-repeat;color:var(--avorio);
  padding-block:clamp(40px,6vh,80px)}
.vidsec__bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;z-index:0}
.vidsec__t{position:relative;z-index:1;text-align:center;color:var(--avorio)}
.vidsec__t .t1{font-size:clamp(36px,5.4vw,78px);line-height:1.06;
  text-shadow:0 2px 38px rgba(0,0,0,.5)}
/* Each span is a line the writer chose. Without this they run together
   and, because the markup has no whitespace between them, two sentences
   collide into one word — "ROOM,NOT A CREW". */
.vidsec__t .t1 span{display:block}
.vidsec__t .btn{margin-top:clamp(52px,7.5vh,96px);color:var(--avorio);
  border-color:rgba(247,244,238,.6)}
@media(max-width:820px){
  .vidsec__bg{display:none}
  .vidsec{aspect-ratio:auto;width:100%;height:clamp(420px,74vh,640px);
    min-height:0}
}

/* ---- the letter — the enquiry form -------------------------- */
.letter{text-align:center}
.letter .t1{font-style:italic;text-transform:none;
  font-size:clamp(38px,4.8vw,69px)}
.fields{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(42px,6.4vh,72px) clamp(48px,7vw,120px);
  margin-top:clamp(80px,12vh,150px);text-align:left}
.fld{display:flex;align-items:baseline;gap:18px}
.fld span{font-family:var(--sans);font-weight:300;font-size:var(--t6);
  letter-spacing:.24em;text-transform:uppercase;color:var(--pietra);
  white-space:nowrap}
.fld i{flex:1;height:1px;background:rgba(42,37,31,.24)}
/* Real inputs, drawn as the line they replace. The first version of this
   page had <i> hairlines and no fields at all: it looked like a form and
   could not collect anything. */
.fld input,.fld textarea,.fld select{flex:1;min-width:0;width:100%;
  font-family:var(--body);font-size:var(--t5);color:var(--inchiostro);
  background:none;border:0;border-bottom:1px solid rgba(42,37,31,.24);
  padding:0 0 7px;border-radius:0;appearance:none}
.fld textarea{padding-top:.5em;line-height:1.8;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;
  border-bottom-color:var(--inchiostro)}
.fld input:focus-visible,.fld textarea:focus-visible{
  outline:1px solid var(--terracotta);outline-offset:6px}
.fld input::placeholder{color:var(--travertino)}
.fld--area{flex-direction:column;align-items:stretch;gap:14px}
.fld--area span{white-space:normal}
/* The honeypot: a real field, off screen, that only a robot fills in. */
.sc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* What comes back from the handler. */
.fmsg{border-left:1px solid var(--terracotta);padding-left:1.2em;
  margin-bottom:clamp(30px,5vh,50px);max-width:60ch}
.fld--w{grid-column:1/-1}
.opts{border:0;padding:0;margin:0}
.opts__lg{font-family:var(--sans);font-weight:300;font-size:var(--t6);
  letter-spacing:.24em;text-transform:uppercase;color:var(--pietra);
  padding:0;margin-bottom:1.9em}
.opts__grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vh,26px) clamp(48px,7vw,120px);align-items:start}
.opt--wide{grid-column:1/-1}
.opt{display:flex;align-items:center;gap:14px;cursor:pointer}
.opt--note{align-items:flex-start}
.opt--note .opt__box{margin-top:3px}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt__box{flex:none;width:13px;height:13px;
  border:1px solid var(--travertino);background:transparent;
  transition:background .25s ease,border-color .25s ease}
.opt input:checked + .opt__box{background:var(--inchiostro);
  border-color:var(--inchiostro)}
.opt input:focus-visible + .opt__box{outline:1px solid var(--terracotta);
  outline-offset:3px}
.opt__t{font-family:var(--sans);font-weight:300;font-size:var(--t6);
  letter-spacing:.16em;text-transform:uppercase;line-height:1.5;
  color:var(--inchiostro)}
.opt__n{display:block;font-family:var(--sans);font-weight:300;font-size:13px;
  letter-spacing:0;text-transform:none;font-style:normal;line-height:1.6;
  color:var(--pietra);margin-top:.7em;max-width:44ch}
.opts__err{font-family:var(--sans);font-weight:300;font-size:var(--t6);
  letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);
  margin-top:1.6em}
.opts--bad .opt__box{border-color:var(--terracotta)}
.fld--sel{position:relative}
.fld--sel select{flex:1;appearance:none;-webkit-appearance:none;
  background:transparent;border:0;border-bottom:1px solid rgba(42,37,31,.25);
  border-radius:0;padding:0 22px 7px 0;cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:13px;
  letter-spacing:.06em;color:var(--inchiostro);line-height:1.4}
.fld--sel select:focus-visible{outline:1px solid var(--terracotta);
  outline-offset:4px}
.fld--sel::after{content:"";position:absolute;right:2px;bottom:11px;
  width:6px;height:6px;border-right:1px solid var(--pietra);
  border-bottom:1px solid var(--pietra);transform:rotate(45deg);
  pointer-events:none}
.fld--thank[hidden]{display:none}

@media(max-width:900px){
  .cross__fig,.cross__t,.beside__fig,.beside__t,.split2__h,.split2__b,
  .duo__l,.duo__r,.duo__t,.spill__fig,.spill__t,.spill__b,
  .cal__t,.cal__fig,.gal figure{
    grid-column:1/13!important;grid-row:auto!important;
    text-align:left!important;padding:0!important;margin:0!important}
  .cross,.beside,.split2,.duo,.spill,.cal{min-height:0;gap:32px 0;
    padding-block:var(--void)}
  .jrn{grid-template-columns:1fr;gap:56px}
  .jrn__i--drop{margin-top:0}
  .facts{grid-template-columns:1fr}
  .fields,.opts__grid{grid-template-columns:1fr}
}

/* The beside block's channels are overridable, because a four-column
   headline solves down to a caption and a caption is not what that
   composition is for. */
.beside[style*="--bf"] .beside__fig{grid-column:var(--bf)}
.beside[style*="--bt"] .beside__t{grid-column:var(--bt)}

/* The smarginato reversed. On a pale photograph it is the dark type
   that crosses it — same device, opposite polarity. The shadow comes
   off, because a shadow under dark type on a pale ground is grime. */
.spill--light .spill__t{text-shadow:none;color:var(--inchiostro)}
.spill--light .spill__b .link{color:var(--inchiostro);
  border-color:var(--inchiostro)}

/* A bracketed field inside a video section sits on a dark ground even
   though the section carries no ground class of its own. */
.vidsec .ph{color:var(--avorio);border-bottom-color:rgba(247,244,238,.5)}
.vidsec .lab{color:rgba(247,244,238,.75)}

/* ---- the crossing, as an entry to a project ----------------
   The block was a title, a place and nothing to click, so it read
   as a decorative phrase. It becomes the whole link: title, where,
   and the tracked line that says so.

   Nothing about the composition moves. The columns, the overhang
   and the sizes are exactly as they were — the only additions are
   the link line, the cursor, and the photograph's answer to a
   hover. */
.cross--link{cursor:pointer}
.cross--link .cross__t{pointer-events:auto}
.cross--link .cross__fig{overflow:hidden}
.cross--link .cross__fig img{transition:transform 1s cubic-bezier(.22,1,.36,1)}
.cross--link:hover .cross__fig img{transform:scale(1.02)}
.cross__go{margin-top:clamp(30px,4.5vh,52px);display:inline-block}
.cross--link:hover .cross__go{opacity:.6}
.cross--link:focus-visible{outline:1px solid var(--terracotta);outline-offset:8px}

/* The crossing overhangs its column on purpose, which only works if the
   lines refuse to wrap — otherwise the browser politely folds the
   headline into five lines instead of letting it cross the photograph.
   Released below 900px, where there is no room to overhang anything. */
@media(min-width:901px){
  .cross__t .t1{white-space:nowrap}
}

/* Press ---------------------------------------------------------------
   The same grid as the journal, so the two read as one system. Where
   the journal has a photograph, this has the publication's name set in
   the display face on a linen ground: a press wall, not a logo salad.
   Every masthead in that folder is a different weight, a different
   colour and a different century, and putting six of them side by side
   on one page looks like a sponsor board. Setting them in one face is
   the more confident move — and it means a new feature costs a line of
   text rather than a trip to a screenshot.

   When a feature's own photographs are identified, swap .press__mark
   for a <figure> exactly like .jrn__i's and nothing else changes. */
/* Unused as of the day every feature got its own photograph. Kept
   because the next publication will arrive before its picture does. */
.press__mark{aspect-ratio:5/4;display:grid;place-items:center;
  background:var(--lino);margin-bottom:1.6em;padding:2em;text-align:center}
.press__mark span{font-family:var(--display);
  font-size:clamp(21px,2.3vw,33px);line-height:1.15;color:var(--inchiostro)}
.press__i .lab{color:var(--pietra);margin-bottom:.5em}

/* WeddingWire badges --------------------------------------------------
   Yellow, five gold stars, not the brand's palette and never going to
   be. They stay because they are the strongest social proof on the site
   and a couple comparing three photographers recognises them instantly —
   so they are given their own quiet strip rather than being coloured
   into submission. Small, aligned, on a line of their own, and no
   attempt made to pretend they belong. */
.badges{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,34px);align-items:center}
.badges img{width:clamp(74px,7.4vw,104px);height:auto;display:block}

/* A cell that hangs below the row it is in. .gal aligns to `end`, so the
   drop modifier — which pushes from the top — does nothing to the bottom
   edge and two photographs sit on the same line like a shop window. This
   pulls one below it instead: editorial, not tidy. */
.gal--sink{margin-bottom:calc(-1 * clamp(34px,4.6vh,66px))}

/* The film ------------------------------------------------------------
   A facade, not an embed. YouTube's iframe loads about a megabyte of
   player and a set of cookies on page load whether or not anyone presses
   play, and it drops a black rectangle in the middle of a page made of
   paper. So the band is a still from the film with one button on it; the
   iframe is built in JavaScript the moment somebody actually asks for it.
   No third party is contacted before that click. */
/* Width first, then height. `aspect-ratio` with a max-height does the
   opposite — the cap shrinks the width to keep the ratio, and the band
   stopped 53px short of the right edge on a 1440 screen. */
.film{position:relative;width:100%;height:min(56.25vw,78vh);min-height:300px;
  overflow:hidden;background:var(--notte) center/cover no-repeat;
  display:grid;place-items:center}
.film__btn{position:relative;z-index:2;display:inline-flex;
  flex-direction:column;align-items:center;gap:1.5em;
  background:none;border:0;cursor:pointer;color:var(--avorio);
  font-family:var(--sans);font-size:var(--t6);letter-spacing:.3em;
  text-transform:uppercase;padding:0;
  text-shadow:0 1px 26px rgba(0,0,0,.6)}
.film__btn::before{content:"";width:66px;height:66px;border-radius:50%;
  border:1px solid rgba(247,244,238,.72);display:block;
  background:rgba(20,18,16,.24);transition:background .45s ease}
/* The triangle is placed on the circle, not on the button — those are
   different boxes once the label sits underneath. */
.film__btn::after{content:"";position:absolute;top:25px;left:50%;
  margin-left:-5px;border-left:14px solid var(--avorio);
  border-top:9px solid transparent;border-bottom:9px solid transparent}
.film__btn:hover::before{background:rgba(20,18,16,.55)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
@media(max-width:700px){.film__btn::before{width:54px;height:54px}
  .film__btn::after{top:20px;border-left-width:11px;
    border-top-width:7px;border-bottom-width:7px}}

/* Journal filters -----------------------------------------------------
   These lived inline in journal.html and were lost when that page was
   rebuilt as cards — the buttons came back wearing the operating
   system's grey boxes. Shared furniture belongs in the shared file. */
.filters{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,34px);
  margin-bottom:clamp(40px,6vh,72px)}
.filters button{font-family:var(--sans);font-weight:400;font-size:var(--t6);
  letter-spacing:.3em;text-transform:uppercase;background:none;border:0;
  padding:0 0 7px;cursor:pointer;color:var(--pietra);
  border-bottom:1px solid transparent}
.filters button[aria-pressed="true"]{color:var(--inchiostro);
  border-bottom-color:var(--inchiostro)}

/* ---- local preview only ------------------------------------------
   A link to a page that does not exist yet, seen from file://. It is
   not a design decision about the published site: WordPress answers
   every one of these routes, and the class is only ever added by the
   preview router. */
/* No opacity here. The first version dimmed the whole element, which on
   a card means dimming the photograph — and the Journal cards, which
   link to posts that are not written yet, went grey. A preview
   affordance must never touch a picture. The cursor and the title
   attribute say it instead. */
.is-nopage{cursor:default}

/* The two legal links in the footer base. They were plain words for
   months, which is a compliance problem and not a design one: a privacy
   notice you cannot click is a privacy notice you do not have. */
.ftr__law a{border-bottom:1px solid rgba(247,244,238,.25);padding-bottom:2px}
.ftr__law a:hover{border-bottom-color:currentColor}