/* ============================================================
   MONARTE — Anteroom site styling.
   The cinematic, gated maison experience. Loaded on top of the
   design-system tokens (styles.css). Dark, graded, grain, serif
   accents, custom cursor, persistent chrome.
   ============================================================ */

/* Fonts are requested from the document head, in one combined stylesheet. */

:root{
  --serif: 'Cormorant', Georgia, serif;
  --ink: #060606;
  --ink-soft: #0b0c0d;
  --line: rgba(214,218,221,0.12);
  --line-strong: rgba(214,218,221,0.24);
  --txt: #e9ebec;
  --txt-dim: #aab1b7;
  --txt-faint: #7b838a;
  /* The one UI accent. Drawn from the Squid's blue dial (#1f6fb0) and
     lifted for use on black: same hue family, desaturated so it reads as a
     finish rather than a link, and light enough for 7:1 contrast on the page.
     Replaced the gold accent on 24 September 2026. */
  --sapphire: #7f9bbd;
}

*{box-sizing:border-box;}
html,body{margin:0;background:var(--ink);min-height:100%;}
body{color:var(--txt);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* hide cursor only on fine-pointer devices */
@media (hover:hover) and (pointer:fine){
  body.mon-cursor, body.mon-cursor *{cursor:none !important;}
}

/* ---- grain overlay (fixed, whole page) ---- */
.mon-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");}

/* ---- custom cursor ---- */
.mon-cur{position:fixed;z-index:90;top:0;left:0;width:30px;height:30px;border:1px solid rgba(233,235,236,0.6);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:difference;
  transition:width .3s var(--ease-glide),height .3s var(--ease-glide),background .3s,opacity .3s;}
.mon-cur.dot{width:7px;height:7px;background:#fff;border-color:#fff;}
.mon-cur.hide{opacity:0;}
.mon-cur-label{position:fixed;z-index:90;top:0;left:0;transform:translate(-50%,-160%);pointer-events:none;
  font-family:var(--font-body);font-size:9px;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .3s;}
.mon-cur-label.on{opacity:1;}
@media (hover:none),(pointer:coarse){.mon-cur,.mon-cur-label{display:none;}}

/* ---- entry veil (the Anteroom — a quiet threshold) ---- */
.mon-veil{position:fixed;inset:0;z-index:80;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;text-align:center;padding:0 24px;}
.mon-veil .vlogo{height:84px;opacity:1;}
.mon-veil .vby{font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:0.42em;text-transform:uppercase;color:var(--txt-dim);}
.mon-veil .venter{margin-top:4px;background:none;border:1px solid var(--line-strong);color:var(--txt);
  font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;padding:16px 42px;border-radius:2px;cursor:pointer;white-space:nowrap;
  transition:all .5s var(--ease-glide);}
.mon-veil .venter:hover{border-color:var(--txt);background:rgba(233,235,236,0.05);letter-spacing:0.34em;}
.mon-veil .vnote{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--txt-faint);margin-top:2px;}

/* ---- fixed chrome ---- */
.mon-top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:24px clamp(20px,4vw,52px);transition:background .6s var(--ease-glide),border-color .6s,padding .5s var(--ease-glide);
  border-bottom:1px solid transparent;}
.mon-top.solid{background:rgba(6,6,6,0.82);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding-top:18px;padding-bottom:18px;}
.mon-brand{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;cursor:pointer;}
.mon-brand img{height:30px;}
.mon-brand span{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:0.34em;color:var(--txt);padding-left:0.34em;white-space:nowrap;}
.mon-nav{display:flex;align-items:center;gap:22px;}
.mon-nav-group{position:relative;padding:14px 0;margin:-14px 0;}
.mon-nav a{font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--txt-dim);position:relative;padding:4px 0;transition:color .35s;white-space:nowrap;}
.mon-nav a:hover{color:var(--txt);}
.mon-nav a.active{color:var(--txt);}
.mon-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--txt);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-glide);}
.mon-nav a:hover::after,.mon-nav a.active::after{transform:scaleX(1);}
.mon-nav-sub{position:absolute;top:100%;left:50%;min-width:210px;padding:10px 18px 14px;background:rgba(6,6,6,.97);border:1px solid var(--line);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translate(-50%,-8px);pointer-events:none;transition:opacity .3s var(--ease-glide),transform .3s var(--ease-glide),visibility .3s;}
.mon-nav-group:hover .mon-nav-sub,.mon-nav-group:focus-within .mon-nav-sub{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;}
.mon-nav-sub a{display:block;padding:10px 0;border-bottom:1px solid var(--line);letter-spacing:.16em;}
.mon-nav-sub a:last-child{border-bottom:0;}
.mon-actions{display:flex;align-items:center;gap:8px;}
.mon-mobile-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;background:none;border:0;color:var(--txt);cursor:pointer;}
.mon-mobile-nav{display:none;}
.mon-icbtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--txt-dim);cursor:pointer;transition:color .3s,opacity .3s;}
.mon-icbtn:hover{color:var(--txt);}
.mon-reserve{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--line-strong);color:var(--txt);
  font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;padding:11px 20px;border-radius:2px;cursor:pointer;
  transition:all .4s var(--ease-glide);white-space:nowrap;}
.mon-reserve:hover{border-color:var(--txt);background:rgba(233,235,236,0.05);}
.mon-reserve.solid{background:var(--off-white);color:#0b0c0d;border-color:var(--off-white);}
.mon-reserve.solid:hover{opacity:0.85;background:var(--off-white);}

/* vertical maison rails */
.mon-rail{position:fixed;z-index:40;top:50%;writing-mode:vertical-rl;
  font-family:var(--font-body);font-size:9.5px;font-weight:500;letter-spacing:0.34em;text-transform:uppercase;color:rgba(214,218,221,0.42);pointer-events:none;}
.mon-rail.l{left:22px;transform:translateY(-50%);}
.mon-rail.r{right:22px;transform:translateY(-50%) rotate(180deg);}
@media(max-width:1100px){.mon-rail{display:none;}}

/* ---- cinematic backdrop (contained to the hero only) ---- */
.mon-stage{position:absolute;top:0;left:0;width:100%;height:100vh;z-index:0;overflow:hidden;background:#000;}
.mon-stage video,.mon-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mon-grade{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 36%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.5) 76%, rgba(0,0,0,0.9) 100%),
  linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.28) 58%, rgba(6,6,6,.96) 88%, #060606 100%);}

/* ---- page + section scaffolding ---- */
.mon-page{position:relative;z-index:2;background:var(--ink);}
.mon-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
.mon-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,56px);width:100%;}
.mon-wrap.narrow{max-width:780px;}
.mon-section{padding:clamp(72px,11vw,150px) 0;}
.mon-section.tight{padding:clamp(48px,7vw,90px) 0;}

/* ---- imagery that FLOATS out of black (no rectangle, no seam) ---- */
.mon-feather{-webkit-mask-image:radial-gradient(ellipse 70% 74% at 50% 46%, #000 40%, rgba(0,0,0,0.5) 68%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 74% at 50% 46%, #000 40%, rgba(0,0,0,0.5) 68%, transparent 100%);}
.mon-feather.soft{-webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 48%, #000 52%, transparent 100%);
  mask-image:radial-gradient(ellipse 78% 82% at 50% 48%, #000 52%, transparent 100%);}
.mon-ghostword{position:absolute;font-family:var(--serif);font-weight:300;text-transform:uppercase;
  letter-spacing:0.04em;color:rgba(214,218,221,0.045);line-height:0.8;pointer-events:none;user-select:none;white-space:nowrap;}

/* ============================================================
   THE HOUSE GRADE — every photograph on the site is graded to the
   same warm, low-key, filmic look, so disparate shots read as one
   commissioned campaign. This is what makes a section unmistakably
   Monarte even with the text blurred out.
   ============================================================ */
.mon-graded{filter:brightness(0.82) contrast(1.16) saturate(0.68) sepia(0.16);}
.mon-graded.cool{filter:brightness(0.8) contrast(1.18) saturate(0.6) hue-rotate(-6deg);}

/* full-bleed chapter photograph that melts into the black above & below it */
/* <picture> around a photograph takes no box of its own (0.1.65). */
.mon-pic{display:contents}
.mon-chapterbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(0.5) contrast(1.16) saturate(0.66) sepia(0.16);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 76%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 76%, transparent 100%);}
.mon-chapter-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(130% 90% at 50% 50%, rgba(6,6,6,0) 34%, rgba(6,6,6,0.55) 100%),
  linear-gradient(to top, rgba(6,6,6,0.72), rgba(6,6,6,0) 46%);}
.mon-cht{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--ink);}
.mon-cht .mon-wrap{position:relative;z-index:2;}

/* the oversized chapter numeral, set behind the words */
.mon-chapno{font-family:var(--serif);font-weight:300;font-style:italic;line-height:0.8;letter-spacing:0;
  color:rgba(127,155,189,0.14);font-size:clamp(7rem,20vw,20rem);pointer-events:none;user-select:none;}

/* the giant serif statement that structures every chapter (blur-test type) */
.mon-statement{font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:0.01em;color:#f3f4f4;
  font-size:clamp(2.6rem,7vw,6rem);margin:0;text-wrap:balance;}
.mon-statement em{font-style:italic;color:var(--txt-dim);}

/* triptych of macro details ("show, don't tell") */
.mon-tript{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);}
.mon-tript figure{margin:0;position:relative;}
.mon-tript .fr{aspect-ratio:3/4;overflow:hidden;background:#0a0a0a;}
.mon-tript .fr img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-glide);}
.mon-tript figure:hover .fr img{transform:scale(1.06);}
.mon-tript figcaption{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:clamp(0.95rem,1.4vw,1.25rem);color:var(--txt-dim);}
@media(max-width:760px){.mon-tript{grid-template-columns:1fr;gap:20px;}.mon-tript .fr{aspect-ratio:16/10;}}

/* atelier moments — a four-up workshop ledger */
.mon-atelier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);}
@media(max-width:900px){.mon-atelier-grid{grid-template-columns:repeat(2,1fr);gap:clamp(20px,4vw,36px);}}
@media(max-width:520px){.mon-atelier-grid{grid-template-columns:1fr;}}

/* monochrome silent-film variant (THE MANUFACTURE) + cinemascope letterbox */
.mon-chapterbg.mono{filter:grayscale(1) brightness(0.52) contrast(1.22) !important;}
.mon-scope::before,.mon-scope::after{content:"";position:absolute;left:0;right:0;height:7%;min-height:34px;background:#000;z-index:3;pointer-events:none;}
.mon-scope::before{top:0;}
.mon-scope::after{bottom:0;}
/* manifesto beat (THE PHILOSOPHY) — huge type in the void */
.mon-beat{font-family:var(--serif);font-weight:300;line-height:1.14;letter-spacing:0.008em;color:#f1f0ec;
  font-size:clamp(1.9rem,4.4vw,3.8rem);margin:0;text-wrap:balance;}
.mon-beat em{font-style:italic;color:var(--txt-dim);}

/* Home Journal — editorial covers, not a three-column feature checklist. */
.mon-home-journal>div{height:100%;}
.mon-journal-card-copy .mon-btn.ghost{margin-top:auto}
.mon-journal-card{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;padding:0;border:1px solid var(--line);background:#090909;text-align:left;cursor:pointer;}
/* Homepage Journal cards (0.1.65): the photograph in a 3:2 window on top,
   the words beneath it, so a landscape photograph is barely cropped. */
.mon-journal-card-media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;flex:none;background:#0b0b0b}
.mon-journal-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.78) contrast(1.08) saturate(.74);transition:transform 1.2s var(--ease-glide),filter .8s var(--ease-glide);}
@media(hover:hover) and (pointer:fine){.mon-journal-card:hover .mon-journal-card-media img{transform:scale(1.035);filter:brightness(.88) contrast(1.08) saturate(.8);}}
.mon-journal-card-grade{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,9,9,.9) 0%,rgba(9,9,9,0) 34%);pointer-events:none}
.mon-journal-card-copy{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,32px) clamp(24px,3vw,34px);}
.mon-journal-card-title{font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.12;color:var(--txt);}

/* Craft index — each chapter is a room-sized image and a deliberate invitation. */
.mon-craft-card{width:100%;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(300px,.86fr);min-height:clamp(460px,58vw,660px);padding:0;margin:0 0 clamp(28px,4vw,52px);overflow:hidden;border:1px solid var(--line);background:#080808;text-align:left;cursor:pointer;}
.mon-craft-card.reverse{grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr);}
.mon-craft-card.reverse .mon-craft-card-media{order:2;}
.mon-craft-card-media{position:relative;overflow:hidden;min-height:100%;}
.mon-craft-card-media::after{content:"";position:absolute;inset:0;background:radial-gradient(100% 90% at 50% 50%,transparent 28%,rgba(0,0,0,.35) 100%);}
.mon-craft-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.25s var(--ease-glide),filter .8s var(--ease-glide);}
.mon-craft-card:hover .mon-craft-card-media img{transform:scale(1.035);filter:brightness(.9) contrast(1.16) saturate(.72) sepia(.12);}
.mon-craft-card-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(34px,5vw,72px);}
.mon-craft-card-copy .mon-idx-no{font-family:var(--serif);font-style:italic;color:var(--sapphire);font-size:16px;margin-bottom:22px;}
.mon-craft-card-copy .mon-idx-ttl{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,4vw,3.8rem);line-height:1;text-transform:uppercase;color:var(--txt);}
.mon-craft-card-copy .mon-body{font-size:14px;max-width:38ch;margin:24px 0 30px;}

/* Philosophy — a long, sticky reading field whose words illuminate on scroll. */
.mon-philosophy-reveal{position:relative;height:300vh;border-top:1px solid var(--line);background:var(--ink);}
.mon-philosophy-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding:clamp(100px,13vh,150px) 0 60px;overflow:hidden;}
.mon-philosophy-line{font-family:var(--serif);font-weight:300;font-size:clamp(1.45rem,3.1vw,2.65rem);line-height:1.22;margin:0 0 clamp(18px,3vh,34px);color:var(--txt);}
.mon-philosophy-line span{opacity:.16;transition:opacity .38s var(--ease-glide),color .38s var(--ease-glide);}
.mon-philosophy-line span.lit{opacity:1;color:#f3f4f4;}

/* Showroom desktop-to-mobile handoff. Hidden once already on a phone. */
.mon-showroom-handoff{max-width:680px;margin:clamp(34px,5vw,54px) auto 0;padding:22px 24px;display:grid;grid-template-columns:112px 1fr;gap:24px;align-items:center;text-align:left;border:1px solid var(--line);background:rgba(233,235,236,.025);}
.mon-showroom-handoff>img{width:112px;height:112px;padding:8px;background:#f2f1ed;}

@media(max-width:760px){
  .mon-craft-card,.mon-craft-card.reverse{grid-template-columns:1fr;min-height:0;}
  .mon-craft-card.reverse .mon-craft-card-media{order:0;}
  .mon-craft-card-media{min-height:52vw;}
  .mon-craft-card-copy{padding:30px 24px 36px;}
  .mon-philosophy-reveal{height:250vh;}
  .mon-showroom-handoff{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .mon-philosophy-reveal{height:auto;padding:100px 0;}
  .mon-philosophy-sticky{position:relative;min-height:auto;padding:0;}
  .mon-philosophy-line span{opacity:1;}
}

/* ---- pinned product sequence (the signature moment) ---- */
.mon-pin-track{position:relative;background:var(--ink);}
.mon-pin-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;
  grid-template-columns:1.08fr 0.92fr;align-items:center;gap:clamp(20px,4vw,70px);}
.mon-pin-watch{position:relative;height:min(64vh,560px);display:flex;align-items:center;justify-content:center;}
.mon-pin-watch img{position:absolute;max-width:88%;max-height:100%;object-fit:contain;
  transition:opacity 1s var(--ease-glide),transform 1.1s var(--ease-glide);}
.mon-pin-copy{position:relative;min-height:280px;}
.mon-pin-copy .ch{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  transition:opacity .8s var(--ease-glide),transform .8s var(--ease-glide);}
.mon-pin-rail{position:absolute;left:50%;bottom:clamp(28px,5vh,54px);transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;z-index:3;}
.mon-pin-rail .seg{width:34px;height:1px;background:var(--line-strong);position:relative;overflow:hidden;}
.mon-pin-rail .seg::after{content:"";position:absolute;inset:0;background:var(--sapphire);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-glide);}
.mon-pin-rail .seg.on::after{transform:scaleX(1);}
@media(max-width:860px){
  .mon-pin-stage{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px;}
  .mon-pin-copy{min-height:200px;width:100%;max-width:440px;}
  .mon-pin-copy .ch{align-items:center;}
}

/* ---- cinematic full-bleed media that DISSOLVES into the page (no hard seams) ---- */
.mon-cine{position:relative;overflow:hidden;background:var(--ink);display:flex;flex-direction:column;justify-content:center;}
.mon-cine .mon-cine-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* top + bottom fade to the exact page ink so the photo melts into the black sections around it */
.mon-cine .mon-cine-grade{position:absolute;inset:-1px 0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    var(--ink) 0%, rgba(6,6,6,0.55) 12%, rgba(6,6,6,0) 30%,
    rgba(6,6,6,0) 64%, rgba(6,6,6,0.7) 88%, var(--ink) 100%);}
/* gentle centre vignette for depth + text legibility */
.mon-cine .mon-cine-vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 80% at 50% 46%, rgba(6,6,6,0) 40%, rgba(6,6,6,0.5) 100%);}
.mon-cine .mon-wrap,.mon-cine .mon-cine-body{position:relative;z-index:2;}

/* ---- the thread: a single hairline that stitches sections into one descent ---- */
.mon-thread{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;
  height:clamp(90px,13vw,160px);background:var(--ink);}
.mon-thread::before{content:'';width:1px;height:100%;
  background:linear-gradient(rgba(214,218,221,0) 0%, rgba(214,218,221,0.22) 45%, rgba(214,218,221,0.22) 55%, rgba(214,218,221,0) 100%);}
.mon-thread.node::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);
  width:5px;height:5px;background:var(--sapphire);opacity:0.85;box-shadow:0 0 0 5px var(--ink);}


/* eyebrow / chapter */
.mon-eye{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:0.36em;text-transform:uppercase;color:var(--txt-faint);}
.mon-chapter{display:flex;align-items:center;gap:18px;font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:0.32em;text-transform:uppercase;color:var(--txt-faint);}
.mon-chapter .num{font-family:var(--serif);font-style:italic;font-size:16px;letter-spacing:0;color:var(--sapphire);}
.mon-chapter .ln{width:46px;height:1px;background:var(--line-strong);}

/* headings — Cormorant, mixed-case, light, lightly tracked (the praised look) */
.mon-display{font-family:var(--font-display);font-weight:300;letter-spacing:0.012em;color:#f3f4f4;line-height:1.04;margin:0;}
.mon-serif{font-family:var(--serif);font-weight:300;line-height:1.14;color:#f1f0ec;margin:0;}
.mon-serif em{font-style:italic;color:var(--txt-dim);}
.mon-script{font-family:var(--font-script);color:var(--txt-dim);}
.mon-lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.7;color:var(--txt-dim);}
.mon-body{font-family:var(--font-body);font-size:14px;line-height:1.8;color:var(--txt-dim);}

/* buttons (anteroom) */
.mon-btn{display:inline-flex;align-items:center;gap:12px;background:none;border:1px solid var(--line-strong);color:var(--txt);
  font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:0.26em;text-transform:uppercase;padding:16px 34px;border-radius:2px;cursor:pointer;
  transition:all .45s var(--ease-glide);}
.mon-btn:hover{border-color:var(--txt);background:rgba(233,235,236,0.05);}
.mon-btn.solid{background:var(--off-white);color:#0b0c0d;border-color:var(--off-white);}
.mon-btn.solid:hover{opacity:0.85;background:var(--off-white);}
.mon-btn.ghost{border-color:transparent;padding-left:0;padding-right:0;}
.mon-btn .ln{width:30px;height:1px;background:currentColor;transition:width .4s var(--ease-glide);}
.mon-btn.ghost:hover .ln{width:54px;}

/* reveal */
@keyframes monIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){ [style*="monIn"]{animation:none !important;} }
.mon-rv{opacity:0;transform:translateY(26px);}
.mon-rv.in{opacity:1;transform:none;transition:opacity 1.1s var(--ease-glide),transform 1.1s var(--ease-glide);}
@media (prefers-reduced-motion: reduce){.mon-rv{opacity:1 !important;transform:none !important;}}

/* Keep the persistent chrome inside the viewport on tablets and phones and
   replace the desktop links with a complete, calm mobile navigation panel. */
@media(max-width:1040px){
  .mon-nav{display:none;}
  .mon-mobile-toggle{display:flex;}
  /* The phone menu (0.1.68): a solid screen under the header, the page behind
     it held still, the links arriving one after another. It used to be a
     short see-through panel with the page showing under it. */
  .mon-top.menu-open{background:#060606;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mon-mobile-nav{position:absolute;top:100%;left:0;right:0;z-index:51;display:flex;flex-direction:column;height:calc(100vh - var(--mon-top-h,80px) + 1px);height:calc(100dvh - var(--mon-top-h,80px) + 1px);padding:clamp(14px,4vw,30px) clamp(20px,4vw,52px) calc(28px + env(safe-area-inset-bottom,0px));background:#060606;border-top:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s cubic-bezier(.23,1,.32,1),visibility .22s}
  .mon-mobile-nav.open{opacity:1;visibility:visible;pointer-events:auto}
  .mon-mobile-nav-list{display:flex;flex-direction:column}
  .mon-mobile-nav-item{border-bottom:1px solid var(--line);padding:12px 0}
  .mon-mobile-nav-item>a{display:flex;align-items:center;font-family:var(--serif);font-weight:300;font-size:clamp(26px,7.4vw,34px);line-height:1.1;color:var(--txt-dim)}
  .mon-mobile-nav-item>a.active{color:var(--txt)}
  .mon-mobile-sub{display:flex;flex-wrap:wrap;gap:0 24px;padding:2px 0 4px}
  .mon-mobile-sub a{display:inline-flex;align-items:center;font:500 10px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--txt-faint)}
  .mon-mobile-sub a.active{color:var(--txt)}
  .mon-mobile-nav-meta{display:flex;flex-wrap:wrap;gap:0 26px;padding-top:18px}
  .mon-mobile-nav-meta a,.mon-mobile-nav-meta button{display:inline-flex;align-items:center;font:500 10px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim)}
  .mon-mobile-nav-foot{margin-top:auto;padding-top:32px;display:flex;align-items:center;gap:12px;font:500 9px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--txt-faint)}
  .mon-mobile-nav-foot img{width:22px;height:22px;filter:invert(1);opacity:.45}
  .mon-mobile-nav-item,.mon-mobile-nav-meta,.mon-mobile-nav-foot{opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.23,1,.32,1),transform .3s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i,0) * 35ms)}
  .mon-mobile-nav.open .mon-mobile-nav-item,.mon-mobile-nav.open .mon-mobile-nav-meta,.mon-mobile-nav.open .mon-mobile-nav-foot{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.mon-mobile-nav-item,.mon-mobile-nav-meta,.mon-mobile-nav-foot{transform:none!important;transition-delay:0s!important}}
html.mon-menu-open{overflow:hidden}
@media(max-width:560px){
  .mon-top,.mon-top.solid{padding-left:16px;padding-right:16px;}
  .mon-brand{gap:0;}
  .mon-brand span{display:none;}
  .mon-actions{gap:2px;}
  .mon-reserve{padding:10px 14px;letter-spacing:0.18em;}
  .mon-icbtn{display:none;}
  .mon-mobile-nav{padding-left:16px;padding-right:16px;}
}

/* Homepage full-bleed chapters use horizontal negative space on desktop and a
   vertical reading field on narrow screens. The photograph remains full-bleed. */
@media(max-width:760px){
  .mon-home-hero-title{letter-spacing:.1em !important;text-indent:.1em !important;}
  .mon-home-side-scrim{background:linear-gradient(180deg,rgba(6,6,6,.32) 0%,rgba(6,6,6,.68) 46%,#060606 100%) !important;}
  .mon-home-copy-right{margin-left:0 !important;max-width:100% !important;}
}

/* hairline divider */
.mon-hr{height:1px;background:var(--line);border:0;margin:0;}

/* footer */
.mon-foot{position:relative;z-index:2;background:#040404;border-top:1px solid var(--line);padding:clamp(56px,8vw,90px) 0 0;}
.mon-foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px;}
.mon-foot h4{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--txt-dim);margin:0 0 18px;}
.mon-foot a{display:block;font-family:var(--font-body);font-size:12px;letter-spacing:0.04em;color:var(--txt-faint);margin-bottom:11px;transition:color .3s;cursor:pointer;}
.mon-foot a:hover{color:var(--txt);}
.mon-foot .bot{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(40px,6vw,72px);padding:24px 0;border-top:1px solid var(--line);
  font-family:var(--font-body);font-size:11px;letter-spacing:0.06em;color:var(--txt-faint);}
@media(max-width:900px){.mon-foot .cols{grid-template-columns:1fr 1fr;}}

/* utility */
.mon-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.mon-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);}
@media(max-width:880px){.mon-grid-2,.mon-grid-3{grid-template-columns:1fr;}}
.mon-center{text-align:center;}
.mon-door .mon-door-img{transition:transform 1.3s var(--ease-glide);}
.mon-door:hover .mon-door-img{transform:scale(1.05);}
.mon-door:hover .mon-btn.ghost .ln{width:54px;}

/* ============ EDITORIAL LANGUAGE (Craft / Process / Manufacture / Philosophy) ============ */
/* small tracked caption / figure label */
.mon-cap{font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:var(--txt-faint);}
.mon-num-faint{font-family:var(--font-display);font-weight:300;line-height:0.8;color:rgba(233,235,236,0.07);pointer-events:none;letter-spacing:0;}

/* editorial index (contents) */
.mon-idx-row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,5vw,72px);
  padding:clamp(28px,4vw,52px) 0;border-top:1px solid var(--line);cursor:pointer;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;
  transition:padding-left .6s var(--ease-glide);}
.mon-idx-row:last-child{border-bottom:1px solid var(--line);}
.mon-idx-row:hover{padding-left:clamp(8px,1.5vw,22px);}
.mon-idx-row .mon-idx-no{font-family:var(--font-display);font-weight:300;font-size:clamp(1rem,1.4vw,1.3rem);color:var(--txt-faint);letter-spacing:0.1em;transition:color .5s;}
.mon-idx-row:hover .mon-idx-no{color:var(--sapphire);}
.mon-idx-row .mon-idx-ttl{font-family:var(--font-display);font-weight:300;font-size:clamp(1.8rem,5vw,3.6rem);letter-spacing:0.04em;text-transform:uppercase;color:var(--txt-dim);line-height:1;transition:color .5s var(--ease-glide);}
.mon-idx-row:hover .mon-idx-ttl{color:#f3f4f4;}
.mon-idx-row .mon-idx-thumb{width:clamp(70px,9vw,128px);aspect-ratio:1;overflow:hidden;border:1px solid var(--line);filter:grayscale(0.6) brightness(0.7);transition:filter .6s var(--ease-glide),transform .9s var(--ease-glide);}
.mon-idx-row:hover .mon-idx-thumb{filter:grayscale(0) brightness(1);transform:scale(1.04);}
.mon-idx-row .mon-idx-thumb img{width:100%;height:100%;object-fit:cover;}
@media(max-width:720px){.mon-idx-row{grid-template-columns:auto 1fr;}.mon-idx-row .mon-idx-thumb{display:none;}}

/* framed editorial plate (image + hairline + caption) — never full-bleed-with-text-over */
.mon-plate{position:relative;border:1px solid var(--line);padding:10px;background:#0a0a0a;}
.mon-plate::after{content:"";position:absolute;inset:4px;border:1px solid var(--line);pointer-events:none;}
.mon-plate img{display:block;width:100%;height:100%;object-fit:cover;}
.mon-plate-cap{margin-top:14px;display:flex;justify-content:space-between;gap:16px;}

/* editorial grid for process stages (asymmetric) */
.mon-spread{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px);align-items:center;}
@media(max-width:820px){.mon-spread{grid-template-columns:minmax(0,1fr);}.mon-spread>*{grid-column:1 / -1!important;min-width:0;}}
.mon-stack{display:flex;flex-direction:column;}
/* Website navigation: real links and accessible hit areas. */
.mon-top button,.mon-top a{min-height:44px}.mon-top .mon-icbtn,.mon-top .mon-mobile-toggle{min-width:44px}.mon-top .mon-brand{padding-top:7px;padding-bottom:7px}.mon-nav a{display:inline-flex;align-items:center}.mon-nav-group:focus-within .mon-nav-sub{opacity:1;visibility:visible;pointer-events:auto}.mon-top :focus-visible,.mon-foot a:focus-visible{outline:2px solid var(--sapphire);outline-offset:4px}

/* The page landmark receives focus after client navigation, without a page-sized outline. */
.mon-main:focus{outline:none;}

/* Preserve the entrance design while making keyboard focus explicit. */
.mon-veil:focus{outline:none;}
.mon-veil .venter:focus-visible{outline:2px solid var(--sapphire);outline-offset:4px;}
@media (prefers-reduced-motion:reduce){.mon-veil{transition:none !important;}}

/* ---- The Process: reading blocks ----
   The chapter card carries the photograph and the heading. The copy that
   follows gets plain ink and a real measure, because this page is long by
   design and long copy over a photograph stops being readable. */
.mon-process-read{padding:clamp(72px,10vw,140px) 0;background:var(--ink);}
.mon-process-read .mon-measure{max-width:58ch;}
.mon-process-read .mon-lead{margin:0 0 clamp(20px,2.4vw,30px);}
.mon-process-read .mon-body{margin:0 0 clamp(16px,1.9vw,24px);}
.mon-process-read .mon-body:last-child{margin-bottom:0;}
.mon-parts{list-style:none;margin:clamp(26px,3.4vw,42px) 0;padding:0 0 0 clamp(18px,2.2vw,30px);border-left:1px solid var(--sapphire);}
.mon-parts li{font-family:var(--font-display);font-weight:300;font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:0.03em;color:var(--txt-dim);line-height:2.05;}
.mon-pull{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.3;color:#f3f4f4;margin:clamp(42px,5.5vw,76px) 0 0;max-width:22ch;}
.mon-frame-copy .mon-lead{margin:0 0 clamp(16px,1.9vw,24px);}
.mon-frame-copy .mon-body{margin:0 0 clamp(13px,1.5vw,19px);}
.mon-frame-copy p:last-child{margin-bottom:0;}
@media (max-width:760px){
  .mon-process-read{padding:clamp(54px,12vw,80px) 0;}
  .mon-process-read .mon-measure{max-width:none;}
  .mon-pull{max-width:none;}
}

/* ---- Home: the hero goes dark rather than ending ----
   A held stretch of black between the film and the first chapter, so no
   horizontal seam reads as "one block finished, another started". */
.mon-home-dissolve{position:relative;z-index:1;height:clamp(46vh,58vh,70vh);pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,0) 0%,rgba(6,6,6,0.5) 24%,rgba(6,6,6,0.88) 54%,#060606 82%,#060606 100%);}
.mon-home-emerge{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,#060606 0%,rgba(6,6,6,0.84) 14%,rgba(6,6,6,0.3) 36%,rgba(6,6,6,0) 54%);}

/* ---- Home: the collection, three watches with room to breathe ---- */
.mon-home-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,44px);
  align-items:center;margin:0 auto clamp(34px,4.6vw,58px);max-width:1320px;}
.mon-home-trio-item{position:relative;background:none;border:0;padding:0;cursor:pointer;display:flex;
  align-items:center;justify-content:center;}
.mon-home-trio-glow{position:absolute;width:74%;height:74%;left:13%;top:13%;border-radius:50%;
  filter:blur(42px);pointer-events:none;}
.mon-home-trio-item img{position:relative;width:100%;height:auto;max-height:clamp(300px,38vw,560px);
  object-fit:contain;filter:drop-shadow(0 46px 74px rgba(0,0,0,0.9));
  transition:transform .9s var(--ease-glide);}
.mon-home-trio-item:hover img{transform:translateY(-8px);}
@media (prefers-reduced-motion:reduce){.mon-home-trio-item img{transition:none;}}
@media (max-width:760px){
  .mon-home-trio{grid-template-columns:1fr;gap:clamp(26px,9vw,50px);max-width:340px;}
  .mon-home-dissolve{height:38vh;}
}

/* ---- Small caps labels on small screens ----
   The eyebrow labels sit at 10px, which reads as a deliberate typographic
   choice on a laptop and as a squint on a phone. One step up below 760px,
   where the letterspacing has less room to help. */
@media (max-width:760px){
  .mon-cap{font-size:11px;letter-spacing:0.22em;}
  .mon-eye{font-size:11px;letter-spacing:0.28em;}
}

/* ---- Alternating chapters collapse on small screens ----
   The Process cards and the Manufacture frames alternate left and right so the
   photograph and the words never fight for the same half of a wide screen. On a
   phone there are no halves: right-aligned ragged text in a 350px column reads
   badly and the eye has to find a new start position every section. Below 760px
   every chapter starts on the left. */
@media (max-width:760px){
  .mon-side-copy{max-width:100% !important;margin-left:0 !important;text-align:left !important;}
  .mon-side-copy .mon-chapter{justify-content:flex-start !important;}
  .mon-side-copy .mon-lead,
  .mon-side-copy .mon-body,
  .mon-side-copy .mon-frame-copy{margin-left:0 !important;max-width:100% !important;}
}

/* ==========================================================================
   Revision brief, 23 September 2026. Appended so each change is findable in
   one place; later rules override the originals above.
   ========================================================================== */

/* Home hero: its own bottom edge fades to the page black. Replaces the
   46 to 70vh black spacer that followed it. */
.mon-home-hero-fade{position:absolute;left:0;right:0;bottom:0;height:44vh;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,0) 0%,rgba(6,6,6,.5) 40%,rgba(6,6,6,.9) 78%,#060606 100%);}
.mon-home-dissolve{display:none;}

/* Home collection: the watches lead. Images are cropped to the watch, so the
   height set here is the watch's own height, and the heading steps back. */
.mon-home-trio{gap:clamp(6px,1.2vw,24px);max-width:1200px;margin-bottom:clamp(26px,3.4vw,44px);}
.mon-home-trio-item img{width:auto;max-width:100%;height:clamp(340px,44vw,640px);max-height:none;}
.mon-home-trio-glow{width:120%;height:70%;left:-10%;top:15%;}
@media (max-width:760px){
  .mon-home-trio{grid-template-columns:repeat(3,1fr);gap:6px;max-width:none;}
  .mon-home-trio-item img{height:clamp(190px,54vw,300px);}
}

/* Home Journal: centred. */
.mon-home-journal + .mon-content-notice,.mon-home-journal ~ p.mon-body{text-align:center;}

/* Footer: a smaller, centred mark above the link groups; legal links centred. */
.mon-foot .cols{grid-template-columns:repeat(4,1fr);}
.mon-foot-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto clamp(40px,6vw,64px);}
.mon-foot-brand img{height:72px;filter:invert(1);}
.mon-foot-brand .mon-serif{font-style:italic;font-size:17px;margin-top:14px;color:var(--txt-dim);}
.mon-foot-legal{justify-content:center;text-align:center;}
@media(max-width:900px){.mon-foot .cols{grid-template-columns:1fr 1fr;}}

/* Craft index: no boxed cards. The photograph dissolves into the page on the
   side facing the copy and at top and bottom, so there is no hard edge. */
.mon-craft-card{border:0;background:transparent;}
.mon-craft-card-media::after{display:none;}
.mon-craft-card-media img{
  -webkit-mask-image:radial-gradient(ellipse 78% 74% at 42% 50%,#000 52%,transparent 100%);
          mask-image:radial-gradient(ellipse 78% 74% at 42% 50%,#000 52%,transparent 100%);}
.mon-craft-card.reverse .mon-craft-card-media img{
  -webkit-mask-image:radial-gradient(ellipse 78% 74% at 58% 50%,#000 52%,transparent 100%);
          mask-image:radial-gradient(ellipse 78% 74% at 58% 50%,#000 52%,transparent 100%);}
.mon-craft-card-copy{position:relative;z-index:1;}
@media (min-width:1100px){.mon-craft-close{white-space:nowrap;}}
.mon-craft-end{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(26px,3.4vw,38px)}
.mon-craft-close{font-style:italic;font-size:clamp(1.5rem,2.6vw,2.3rem);color:var(--txt-dim);margin:0}
/* Closing rows of buttons sit on the page's centre line (0.1.64). */
.mon-actions-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.mon-watch-actions.mon-actions-centre{justify-content:center}
.mon-actions-row .mon-btn,.mon-actions-centre .mon-btn{justify-content:center}
@media(max-width:480px){.mon-watch-actions.mon-actions-centre,.mon-actions-row{flex-direction:column;align-items:stretch}}
.mon-collection-grid{--cg:clamp(20px,3vw,40px);display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,4vw,56px) var(--cg)}
.mon-collection-grid>*{flex:0 0 calc((100% - 2 * var(--cg)) / 3);min-width:0}
@media(max-width:880px){.mon-collection-grid>*{flex-basis:100%}}

/* Process: one unit per stage. The photograph is held in view beside the text
   while it is read, and fades into the page on every side. */
.mon-step{position:relative;padding:clamp(48px,7vw,110px) 0;}
.mon-step-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,110px);align-items:start;}
.mon-step.reverse .mon-step-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);}
.mon-step.reverse .mon-step-media{order:2;}
.mon-step-media{position:sticky;top:clamp(92px,14vh,140px);height:min(72vh,700px);}
.mon-step-media img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 50%,transparent 100%);
          mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 50%,transparent 100%);}
.mon-step-copy{padding-top:clamp(8px,6vh,72px);}
.mon-step-body{margin-top:clamp(24px,3vw,40px);max-width:58ch;}
@media (max-width:900px){
  .mon-step-grid,.mon-step.reverse .mon-step-grid{grid-template-columns:1fr;gap:clamp(18px,4vw,30px);}
  .mon-step.reverse .mon-step-media{order:0;}
  .mon-step-media{position:relative;top:auto;height:52vh;}
  .mon-step-media img{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 70%,transparent 100%);
                              mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 70%,transparent 100%);}
  .mon-step-copy{padding-top:0;}
}

/* Philosophy: the pinned passage is sized to the screen's height as well as
   its width, and nothing inside it is clipped. When it cannot fit, the script
   adds .is-static and the passage is shown whole, without the pin. */
.mon-philosophy-sticky{overflow:visible;}
.mon-philosophy-line{font-size:clamp(1.3rem,min(3.1vw,4.3vh),2.65rem);}
.mon-philosophy-reveal.is-static{height:auto;padding:clamp(80px,12vh,140px) 0;}
.mon-philosophy-reveal.is-static .mon-philosophy-sticky{position:relative;min-height:0;padding:0;}
.mon-foot-legal .mon-foot-cookies{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}

/* ============ FINAL REVISION PASS (25 September 2026) ============ */
/* Homepage collection: prominent, but in proportion to the screen. */
.mon-home-trio-item img{height:clamp(250px,min(30vw,50vh),460px);}
@media(max-width:760px){.mon-home-trio-item img{height:clamp(170px,46vw,260px);}}

/* Footer: the mark in its own left column, centred within it; every row on
   one set of edges; Cookie settings on the same line as the other links. */
.mon-foot .cols{grid-template-columns:1.25fr repeat(4,1fr);align-items:start;}
.mon-foot-brand{margin:0;align-self:start;display:flex;flex-direction:column;align-items:center;text-align:center;}
.mon-foot-brand img{height:52px;}
.mon-foot-brand .mon-serif{font-size:15px;margin-top:12px;max-width:16ch;line-height:1.35;}
.mon-foot-legal{align-items:center;}
.mon-foot-legal a,.mon-foot-legal .mon-foot-cookies{margin:0;font:13px/1.6 var(--font-body);letter-spacing:.02em;color:var(--txt-dim);min-height:44px;display:inline-flex;align-items:center;}
.mon-foot-legal a:hover,.mon-foot-legal .mon-foot-cookies:hover{color:var(--txt);}
.mon-foot .bot .mon-social{margin-left:-14px;}
@media(max-width:900px){
  .mon-foot .cols{grid-template-columns:1fr 1fr;}
  .mon-foot-brand{grid-column:1/-1;margin-bottom:8px;}
}

/* The Craft menu: the whole row is the target, not just the words. */
.mon-nav-sub{padding:8px 0 10px;}
.mon-nav-sub a{display:flex !important;width:100%;padding:12px 20px;margin:0;box-sizing:border-box;}
.mon-nav-sub a::after{left:20px;right:20px;bottom:8px;}

/* The cart, beside Your Monarte, only while something is in it. */
.mon-cartbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;color:var(--txt-dim);transition:color .3s}
.mon-cartbtn:hover{color:var(--txt)}
.mon-cart-count{position:absolute;top:6px;right:4px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--sapphire);color:#060606;font:700 9px/15px var(--font-body);text-align:center;letter-spacing:0}
@media(max-width:560px){.mon-top .mon-icbtn.mon-cartbtn{display:inline-flex;}}
.mon-nav-sub{background:#060606;}
.mon-foot-legal + .bot{margin-top:24px;}
.mon-foot .bot{align-items:center;}
.mon-foot .bot > span{line-height:44px;}

/* ---- 0.1.56: Philosophy, the name (28 September 2026) ---- */
.mon-name-word{font-size:clamp(2.4rem,11vw,9rem);letter-spacing:.12em;text-indent:.12em;text-transform:uppercase;color:#f3f4f4}
.mon-name-parts{display:flex;justify-content:center;align-items:flex-start;gap:clamp(18px,4vw,56px);margin-top:clamp(26px,4vw,46px)}
.mon-name-parts .part{min-width:5.5em}
.mon-name-parts .w{font-family:var(--font-display);font-weight:300;font-size:clamp(1.2rem,2.3vw,1.9rem);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#e9ebec}
.mon-name-parts .m{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,18px);color:var(--txt-faint);margin-top:8px}
.mon-name-parts .plus{font-family:var(--font-display);font-weight:200;font-size:clamp(1.2rem,2.2vw,1.8rem);color:var(--txt-faint);line-height:1.2}
.mon-name-note{font-family:var(--font-body);font-size:11px;letter-spacing:.05em;line-height:1.7;color:var(--txt-faint);max-width:54ch;margin:clamp(22px,3vw,34px) auto 0}

/* ---- 0.1.56: the slide-in cart (28 September 2026) ----
   Above the header and the veil's successor layers, below the cursor. */
html.mon-drawer-open{overflow:hidden}
.mon-drawer-root{position:fixed;inset:0;z-index:84;pointer-events:none}
.mon-drawer-root.is-open{pointer-events:auto}
.mon-drawer-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .5s var(--ease-glide)}
.mon-drawer-root.is-open .mon-drawer-scrim{opacity:1}
.mon-drawer{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);display:flex;flex-direction:column;background:#08090a;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .55s var(--ease-glide);box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.mon-drawer-root.is-open .mon-drawer{transform:none}
@media (prefers-reduced-motion:reduce){.mon-drawer,.mon-drawer-scrim{transition:none}}
.mon-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:30px 28px 22px;border-bottom:1px solid var(--line)}
.mon-drawer-head .mon-cap{margin-bottom:10px}
.mon-drawer-head h2{font-size:1.6rem;margin:0}
.mon-drawer-close{margin:-6px -10px 0 0}
.mon-drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 28px}
.mon-drawer-quiet{padding:28px 0}
.mon-drawer-empty{padding:48px 0;text-align:center}
.mon-drawer-empty .mon-serif{font-size:22px;color:var(--txt-dim);margin:0 0 26px}
.mon-drawer-items{list-style:none;margin:0;padding:0}
.mon-drawer-item{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:18px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line);transition:opacity .3s}
.mon-drawer-item.is-busy{opacity:.45}
.mon-drawer-item .thumb{width:86px;height:86px;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#15171a 0,#08090a 70%)}
.mon-drawer-item .thumb img{max-width:92%;max-height:92%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
.mon-drawer-item .name{font-family:var(--font-display);font-weight:400;font-size:17px;color:#f3f4f4;margin-bottom:7px}
.mon-drawer-item .extra{font-family:var(--font-body);font-size:12px;color:var(--txt-dim);margin-top:8px;line-height:1.5}
.mon-drawer-item .price{font-family:var(--serif);font-size:18px;color:#eef0f1;white-space:nowrap}
.mon-drawer-remove{margin-top:14px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-faint);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong);transition:color .3s}
.mon-drawer-remove:hover,.mon-drawer-remove:focus-visible{color:var(--txt)}
.mon-drawer-remove:disabled{cursor:default}
.mon-drawer-error{margin:18px 0}
.mon-drawer-foot{padding:22px 28px 28px;border-top:1px solid var(--line);background:#08090a}
.mon-drawer-total{display:flex;justify-content:space-between;align-items:baseline}
.mon-drawer-total .amount{font-family:var(--serif);font-size:22px;color:#f3f4f4}
.mon-drawer-note{font-family:var(--font-body);font-size:11.5px;letter-spacing:.03em;color:var(--txt-faint);margin:10px 0 20px}
.mon-drawer-checkout{display:flex;width:100%;justify-content:center;text-align:center}
.mon-drawer .mon-drawer-continue{display:flex;margin:14px auto 0}
.mon-mobile-cart{padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-body);font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim)}
@media (max-width:480px){.mon-drawer-head,.mon-drawer-foot{padding-left:20px;padding-right:20px}.mon-drawer-body{padding:0 20px}.mon-drawer-item{grid-template-columns:70px minmax(0,1fr) auto;gap:14px}.mon-drawer-item .thumb{width:70px;height:70px}}
.mon-drawer .mon-icbtn.mon-drawer-close{display:flex;min-width:44px;min-height:44px}

/* ---- 0.1.56: Caring for your Monarte (28 September 2026) ---- */
.mon-care-hero{padding:0 0 clamp(10px,2vw,24px)}
.mon-care-hero img{display:block;width:100%;max-width:1600px;margin:0 auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 48%;filter:brightness(.82) contrast(1.06) saturate(.9)}
.mon-fog.is-care{--fog-start:62%;--fog-side:6%}
@media(max-width:820px){.mon-care-hero img{aspect-ratio:4/3}}
.mon-care-h{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2.2vw,2rem);color:#f3f4f4;margin:0}
.mon-care-row{padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--line)}
.mon-care-side .mon-cap{margin-bottom:14px}
.mon-care-icon{display:inline-flex;margin-top:26px;color:var(--sapphire)}
.mon-care-img{margin-top:28px;max-width:360px;aspect-ratio:4/3;overflow:hidden}
.mon-care-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.8) contrast(1.08) saturate(.82)}
.mon-care-list{margin:6px 0 0;display:grid;gap:0}
.mon-care-list>div{display:grid;grid-template-columns:minmax(120px,.34fr) minmax(0,1fr);gap:clamp(14px,2.4vw,32px);padding:16px 0;border-bottom:1px solid var(--line)}
.mon-care-list>div:first-child{padding-top:4px}
.mon-care-list dt{font-family:var(--font-body);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-faint);padding-top:4px}
.mon-care-list dd{margin:0;font-family:var(--font-body);font-size:14.5px;line-height:1.7;color:var(--txt-dim)}
.mon-care-note{margin:22px 0 0;padding-left:16px;border-left:1px solid var(--sapphire);font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:#e9ebec;max-width:52ch}
@media(max-width:560px){.mon-care-list>div{grid-template-columns:minmax(0,1fr);gap:6px}}
.mon-crown-diagram{display:block;width:100%;max-width:320px;margin-top:26px;color:var(--txt-dim);overflow:visible}
.mon-crown-diagram text{font-family:var(--font-body);fill:var(--txt-faint)}
.mon-crown-diagram .n{font-size:13px;font-weight:500}
.mon-crown-diagram .l{font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.mon-crown-diagram .on text{fill:#f3f4f4}
.mon-crown-diagram .on .n{fill:var(--sapphire)}

/* ---- 0.1.57 ---- */
/* The saved homepage includes the anteroom. A visitor who already entered in
   this session skips it, so it must not flash before the app takes over. */
html.mon-entered .mon-veil{display:none !important}
/* Process: the photographs are part of the page, not placed on it. Every edge
   dissolves: two soft ramps, across and down, intersected, so there is no line
   and no corner anywhere (Domen, 28 September 2026). */
.mon-step-media img,
.mon-step-media img.mon-graded{
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.18) 7%,rgba(0,0,0,.55) 15%,rgba(0,0,0,.88) 23%,#000 30%,#000 70%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.55) 85%,rgba(0,0,0,.18) 93%,transparent 100%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.18) 7%,rgba(0,0,0,.55) 15%,rgba(0,0,0,.88) 23%,#000 30%,#000 70%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.55) 85%,rgba(0,0,0,.18) 93%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.18) 7%,rgba(0,0,0,.55) 15%,rgba(0,0,0,.88) 23%,#000 30%,#000 70%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.55) 85%,rgba(0,0,0,.18) 93%,transparent 100%),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.18) 7%,rgba(0,0,0,.55) 15%,rgba(0,0,0,.88) 23%,#000 30%,#000 70%,rgba(0,0,0,.88) 77%,rgba(0,0,0,.55) 85%,rgba(0,0,0,.18) 93%,transparent 100%);
          mask-composite:intersect;
}
/* Process finale: full screen, the dial to the left, the words in its dark. */
.mon-finale{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#000}
.mon-finale-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 50%}
/* The finished piece sits further left, leaving air between the watch and the words (1 Oct 2026). The photograph's right side is black, so the shift is seamless. */
.mon-finale-img{transform:translateX(-8%)}
.mon-finale-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.85) 100%),linear-gradient(to bottom,var(--ink) 0%,rgba(6,6,6,0) 14%,rgba(6,6,6,0) 86%,var(--ink) 100%)}
.mon-finale-wrap{position:relative;z-index:2;width:100%}
.mon-finale-copy{margin-left:auto;max-width:520px;padding:clamp(80px,12vh,140px) 0}
@media(max-width:820px){
  .mon-finale{align-items:flex-end}
  .mon-finale-img{object-position:12% 30%;transform:none}
  .mon-finale-scrim{background:linear-gradient(to bottom,var(--ink) 0%,rgba(6,6,6,0) 16%,rgba(6,6,6,.35) 40%,rgba(6,6,6,.9) 62%,var(--ink) 100%)}
  .mon-finale-copy{margin-left:0;padding:40vh 0 clamp(60px,10vh,90px)}
}

/* ---- 0.1.57: the letter and the calendar ---- */
.mon-sheet-root{position:fixed;inset:0;z-index:84;pointer-events:none;display:grid;place-items:center}
.mon-sheet-root.is-open{pointer-events:auto}
.mon-sheet-root.is-open .mon-drawer-scrim{opacity:1}
.mon-sheet{position:relative;width:min(640px,calc(100vw - 32px));max-height:min(92vh,900px);overflow-y:auto;overscroll-behavior:contain;background:#08090a;border:1px solid var(--line);box-shadow:0 60px 120px -40px #000;padding:clamp(28px,4vw,44px);opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease-glide),transform .55s var(--ease-glide)}
.mon-sheet-root.is-open .mon-sheet{opacity:1;transform:none}
.mon-sheet-viewing{width:min(720px,calc(100vw - 32px))}
.mon-sheet .mon-icbtn.mon-sheet-close{display:flex;position:absolute;top:14px;right:14px;min-width:44px;min-height:44px}
.mon-sheet h2.mon-display{font-size:clamp(1.6rem,3vw,2.3rem);margin:14px 0 10px}
@media(prefers-reduced-motion:reduce){.mon-sheet{transition:none}}
@media(max-width:600px){
  .mon-sheet-root{place-items:end stretch}
  .mon-sheet,.mon-sheet-viewing{width:100vw;max-height:94dvh;border-left:0;border-right:0;border-bottom:0;padding:26px 20px calc(26px + env(safe-area-inset-bottom));transform:translateY(40px)}
}
/* The letter: a sheet of paper, ruled faintly, in the site's serif. */
.mon-letter-paper{background:linear-gradient(180deg,#0d0e10,#0a0b0c);border:1px solid var(--line);padding:clamp(22px,3.4vw,34px) clamp(20px,3.4vw,36px)}
.mon-letter-hand{font-size:clamp(24px,3vw,30px);color:#e9ebec;margin:0 0 6px;line-height:1.2}
.mon-letter-body{display:block;width:100%;flex:1 1 11em;min-height:4em;resize:none;overflow-y:auto;overscroll-behavior:contain;border:0;outline:none;background:transparent;color:#eef0f1;font-family:var(--serif);font-size:19px;line-height:2em;padding:0 6px 0 0;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(2em - 1px),rgba(233,235,236,.09) calc(2em - 1px),rgba(233,235,236,.09) 2em);background-attachment:local}
.mon-letter-body::placeholder{color:var(--txt-faint);font-style:italic}
.mon-letter-sign{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-top:18px}
.mon-letter-name{width:min(260px,100%);text-align:right;background:transparent;border:0;border-bottom:1px solid var(--line-strong);outline:none;color:#eef0f1;font-family:var(--serif);font-style:italic;font-size:22px;padding:6px 2px}
.mon-letter-name:focus,.mon-letter-reply input:focus{border-bottom-color:var(--txt)}
.mon-letter-reply{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.mon-letter-reply input{background:transparent;border:0;border-bottom:1px solid var(--line-strong);outline:none;color:var(--txt);font:15px var(--font-body);padding:10px 2px}
.mon-letter-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.mon-letter-actions .mon-body{margin:0;font-size:12px;color:var(--txt-faint)}
.mon-letter-sent{text-align:center;padding:30px 0 10px;display:flex;flex-direction:column;align-items:center;gap:10px}
.mon-letter-sent .mon-body{max-width:40ch;margin:0 auto 18px}
.mon-seal{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#1b2530,#0b0f13 70%);border:1px solid var(--line-strong);box-shadow:inset 0 0 18px rgba(0,0,0,.6)}
.mon-seal img{width:38px;height:38px;filter:invert(1);opacity:.9}
/* The calendar */
.mon-viewing-intro{margin:0 0 8px;font-size:13.5px;max-width:52ch}
.mon-viewing-step{margin:26px 0 12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mon-viewing-step .tz{letter-spacing:.08em;text-transform:none;color:var(--txt-faint)}
.mon-viewing-days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.mon-viewing-days button{flex:0 0 auto;width:68px;padding:10px 0 12px;display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:1px solid var(--line);color:var(--txt-dim);cursor:pointer;transition:border-color .3s,background .3s,color .3s}
.mon-viewing-days button .w,.mon-viewing-days button .m{font:600 9px var(--font-body);letter-spacing:.18em;text-transform:uppercase}
.mon-viewing-days button .n{font-family:var(--serif);font-size:24px;color:#eef0f1;line-height:1.2}
.mon-viewing-days button:hover{border-color:var(--line-strong)}
.mon-viewing-days button.is-on{border-color:var(--txt);background:rgba(233,235,236,.06);color:var(--txt)}
.mon-viewing-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.mon-viewing-times button{min-height:44px;background:transparent;border:1px solid var(--line);color:var(--txt);font:14px var(--font-body);letter-spacing:.04em;cursor:pointer;transition:border-color .3s,background .3s}
.mon-viewing-times button:hover{border-color:var(--line-strong)}
.mon-viewing-times button.is-on{border-color:var(--txt);background:#e9ebec;color:#060606}
.mon-viewing-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
@media(max-width:600px){.mon-viewing-fields{grid-template-columns:1fr}}
.mon-viewing-submit{width:100%;justify-content:center;margin-top:26px}
.mon-viewing-empty{border:1px solid var(--line);padding:22px;margin-top:18px}
.mon-viewing-empty .mon-body{margin:0 0 14px}
.mon-viewing-empty-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
/* The waiting list (0.1.66): shown when no time is open in the four weeks offered. */
.mon-viewing-wait{margin-top:8px;padding-top:22px;border-top:1px solid var(--line)}
.mon-viewing-wait>.mon-body{margin:0 0 22px;font-size:13.5px;max-width:52ch}
.mon-viewing-alt{display:block;margin:18px auto 0}
/* Contact doors and the direct line */
.mon-door{height:100%;width:100%;text-align:left;background:none;border:1px solid var(--line);padding:30px 28px;cursor:pointer;display:flex;flex-direction:column;gap:16px;transition:border-color .4s,background .4s}
.mon-door:hover,.mon-door:focus-visible{border-color:var(--line-strong);background:rgba(233,235,236,.02)}
.mon-door .k{font-family:var(--font-display);font-weight:400;font-size:1.4rem;color:#f3f4f4}
.mon-contact-direct{margin-top:clamp(48px,7vw,90px);max-width:560px}
.mon-contact-direct .row{display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--line)}

/* ---- 0.1.57: the Showroom ---- */
.mon-showroom-hero{padding:clamp(120px,15vh,170px) 0 clamp(40px,6vw,80px)}
.mon-showroom-3d{max-width:1100px;margin:0 auto}
.mon-showroom-stage{position:relative;aspect-ratio:16/10;background:radial-gradient(60% 60% at 50% 45%,#12161a 0%,#070809 62%,var(--ink) 100%);overflow:hidden;touch-action:none}
.mon-showroom-stage.is-idle,.mon-showroom-stage.is-error{touch-action:auto}
.mon-showroom-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab}
.mon-showroom-stage canvas:active{cursor:grabbing}
.mon-showroom-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:lighten;opacity:.9;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 62%,transparent 100%)}
.mon-showroom-open{position:absolute;left:50%;bottom:clamp(18px,4vw,36px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 26px;background:rgba(6,6,6,.62);backdrop-filter:blur(6px);border:1px solid var(--line-strong);color:var(--txt);cursor:pointer;transition:background .3s,border-color .3s}
.mon-showroom-open:hover,.mon-showroom-open:focus-visible{background:rgba(6,6,6,.82);border-color:var(--txt)}
.mon-showroom-open-ring{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--sapphire);margin-bottom:4px}
.mon-showroom-open .t{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.04em}
.mon-showroom-open .s{font:600 9px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--txt-faint)}
.mon-showroom-soon,.mon-showroom-loading{position:absolute;left:50%;bottom:clamp(18px,4vw,36px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:14px 22px;background:rgba(6,6,6,.62);border:1px solid var(--line)}
.mon-showroom-soon .t{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--txt)}
.mon-showroom-loading .bar{display:block;width:180px;height:1px;background:var(--line);overflow:hidden}
.mon-showroom-loading .bar span{display:block;height:100%;background:var(--txt);transform-origin:left;transition:transform .3s}
.mon-showroom-loading.is-calm .mon-cap{animation:monCalmIn .6s ease both}
.mon-showroom-loading .calm{display:block;width:120px;height:1px;background:var(--line);overflow:hidden;position:relative}
.mon-showroom-loading .calm span{position:absolute;inset:0 auto 0 0;width:40%;background:var(--txt);animation:monCalm 2.4s cubic-bezier(.45,0,.2,1) infinite}
@keyframes monCalm{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes monCalmIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mon-showroom-loading .calm span{animation:none;width:100%;opacity:.5}.mon-showroom-loading.is-calm .mon-cap{animation:none}}
.mon-showroom-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.mon-showroom-controls button{min-height:40px;padding:0 16px;background:transparent;border:1px solid var(--line);color:var(--txt-dim);font:600 10px var(--font-body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,color .3s}
.mon-showroom-controls button:hover,.mon-showroom-controls button:focus-visible{border-color:var(--line-strong);color:var(--txt)}
.mon-showroom-hint{text-align:center;font:12px var(--font-body);color:var(--txt-faint);margin:12px 0 0}
.mon-showroom-controls button[aria-pressed=true]{border-color:var(--txt);color:var(--txt)}
.mon-showroom-3d.is-review .mon-showroom-controls{margin-top:12px}
.mon-showroom-3d.is-review .mon-showroom-hint a{color:var(--txt-dim)}
.mon-showroom-error{font:12px/1.5 var(--font-body);color:var(--txt-dim);max-width:46ch}
.mon-showroom-wrist{border-top:1px solid var(--line)}
.mon-showroom-steps{list-style:none;margin:0;padding:0}
.mon-showroom-steps li{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}
.mon-showroom-steps li:first-child{padding-top:4px}
.mon-showroom-steps .n{font-family:var(--serif);font-size:20px;color:var(--sapphire);min-width:28px}
.mon-showroom-steps .k{font-family:var(--font-display);font-size:1.25rem;color:#f3f4f4;margin-bottom:6px}
.mon-showroom-steps .mon-body{margin:0;font-size:14px}
.mon-showroom-cta{margin-top:28px}
.mon-showroom-soon-line{margin:0;font:14px var(--font-body);color:var(--txt-dim)}
.mon-showroom-soon-line .mon-cap{margin-right:12px;color:var(--txt)}
@media(max-width:820px){.mon-showroom-stage{aspect-ratio:4/5}}
/* Showroom 0.1.57b: two equal rooms. A chooser under the title, then the watch
   in three dimensions, then the try-on, each with the same stage and header. */
.mon-showroom-hero{padding-bottom:clamp(20px,3vw,40px)}
.mon-showroom-choose{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,18px);max-width:760px;margin:0 auto}
.mon-showroom-choose button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:baseline;text-align:left;padding:20px 22px;background:rgba(233,235,236,.02);border:1px solid var(--line);color:var(--txt);cursor:pointer;transition:border-color .3s,background .3s}
.mon-showroom-choose button:hover,.mon-showroom-choose button:focus-visible{border-color:var(--line-strong);background:rgba(233,235,236,.045)}
.mon-showroom-choose .n{grid-row:1/3;font-family:var(--serif);font-size:20px;color:var(--sapphire)}
.mon-showroom-choose .k{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.02em}
.mon-showroom-choose .s{font:600 9px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--txt-faint)}
.mon-showroom-room{scroll-margin-top:90px}
.mon-showroom-room+.mon-showroom-room{border-top:1px solid var(--line)}
.mon-showroom-roomhead{display:flex;gap:22px;align-items:baseline;max-width:1100px;margin:0 auto clamp(22px,3vw,34px)}
.mon-showroom-roomhead .n{font-family:var(--serif);font-size:24px;color:var(--sapphire);min-width:28px}
.mon-showroom-roomhead .mon-cap{margin-bottom:10px}
.mon-showroom-roomhead h2{font-size:clamp(1.7rem,3.2vw,2.6rem);margin:0}
.mon-showroom-roomhead .mon-body{margin:12px 0 0;font-size:15px;max-width:52ch}
.mon-showroom-stage--wrist{background:var(--ink)}
.mon-showroom-wristshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 55%;transform:scale(1.32);transform-origin:64% 52%}
.mon-showroom-wristframe{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);mask-composite:intersect}
.mon-showroom-hero+.mon-showroom-room{padding-top:clamp(30px,4vw,56px)}
a.mon-showroom-open{text-decoration:none}
.mon-showroom-wrist .mon-showroom-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);max-width:1100px;margin:clamp(26px,3.5vw,40px) auto 0}
.mon-showroom-wrist .mon-showroom-steps li{border-bottom:0;border-top:1px solid var(--line);padding:18px 0 0}
@media(max-width:820px){
  .mon-showroom-wristshot{object-position:66% 50%;transform:scale(1.25);transform-origin:51% 48%}
  /* On a phone the invitation sits low and compact, so it never covers the watch. */
  .mon-showroom-open,.mon-showroom-soon{flex-direction:row;gap:10px;padding:9px 16px;bottom:12px;white-space:nowrap}
  .mon-showroom-open-ring{width:30px;height:30px;margin:0}
  .mon-showroom-open .s{display:none}
  .mon-showroom-open .t{font-size:1rem}
  .mon-showroom-soon .t{font-size:17px}
  .mon-showroom-wrist .mon-showroom-steps{grid-template-columns:1fr;gap:0}
  .mon-showroom-wrist .mon-showroom-steps li{padding:18px 0}
}
@media(max-width:560px){
  .mon-showroom-choose{grid-template-columns:1fr}
  .mon-showroom-roomhead{gap:14px}
}

/* ============ THE MONARTE LETTER (0.1.58) ============ */
.mon-lt-form{position:relative;min-width:0;text-align:left}
.mon-lt-fields{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) auto;gap:14px 20px;align-items:end}
.mon-lt-form.is-stack .mon-lt-fields{grid-template-columns:1fr;gap:12px}
.mon-lt-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.mon-lt-field>span{font:600 10px var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--txt-faint)}
.mon-lt-field input{width:100%;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;padding:11px 2px;color:var(--txt);font:16px/1.3 var(--font-body);outline:none;transition:border-color .35s}
.mon-lt-field input:focus{border-bottom-color:var(--txt)}
.mon-lt-field input[aria-invalid="true"]{border-bottom-color:#c98b8b}
.mon-lt-submit{min-height:46px;justify-content:center;white-space:nowrap}
.mon-lt-form.is-stack .mon-lt-submit{width:100%;margin-top:6px}
.mon-lt-hint,.mon-lt-error,.mon-lt-small{font:13px/1.6 var(--font-body);margin:12px 0 0}
.mon-lt-hint{color:var(--txt-dim)}
.mon-lt-hint button,.mon-lt-small button,.mon-lt-link{background:none;border:0;padding:0;cursor:pointer;color:var(--txt);font:inherit;text-decoration:underline;text-decoration-color:rgba(233,235,236,.35);text-underline-offset:4px;min-height:32px}
.mon-lt-error{color:#e0b4b4}
.mon-lt-small{font-size:12px;color:var(--txt-faint)}
.mon-lt-small a{color:var(--txt-dim);text-decoration:underline;text-decoration-color:rgba(233,235,236,.25);text-underline-offset:4px}
.mon-lt-sent{padding:4px 0}
.mon-lt-sent-title{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.8rem);color:#eef0f1;margin-bottom:8px}
.mon-lt-sent p{font:14px/1.7 var(--font-body);color:var(--txt-dim);margin:0 0 6px;max-width:52ch}
.mon-lt-sent p strong{color:var(--txt);font-weight:500;overflow-wrap:anywhere}
.mon-lt-sent .mon-lt-small{margin-top:10px}
.mon-lt-known p{font:14px/1.7 var(--font-body);color:var(--txt-dim);margin:0}
/* home, the closing screen */
.mon-lt-home{max-width:640px;margin:clamp(38px,5vw,56px) auto 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.mon-lt-home>.mon-body{margin:0 0 10px;max-width:46ch;color:var(--txt-dim)}
.mon-lt-home .mon-lt-form{width:100%}
.mon-lt-home .mon-lt-sent,.mon-lt-home .mon-lt-known{text-align:center}
.mon-lt-home .mon-lt-sent p{margin-left:auto;margin-right:auto}
.mon-lt-home-alt{margin-top:10px}
.mon-lt-home .mon-lt-small,.mon-lt-home .mon-lt-hint,.mon-lt-home .mon-lt-error{text-align:center}
/* the Journal */
/* One centred shape for every inline letter form (0.1.64): eyebrow, serif
   line, one sentence, two equal fields, the button centred beneath them and
   the small print under it. Footer, Journal index and the end of a story. */
.mon-lt-form.is-centre{width:100%;max-width:600px;margin:0 auto;text-align:center}
.mon-lt-form.is-centre .mon-lt-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;align-items:end}
.mon-lt-form.is-centre .mon-lt-field{align-items:center}
.mon-lt-form.is-centre .mon-lt-field input{text-align:center}
.mon-lt-form.is-centre .mon-lt-submit{grid-column:1/-1;justify-self:center;min-width:260px;margin-top:14px}
.mon-lt-form.is-centre .mon-lt-small{margin-top:14px}
.mon-lt-form.is-centre .mon-lt-sent p,.mon-lt-form.is-centre .mon-lt-known p{margin-left:auto;margin-right:auto}
.mon-lt-form.is-centre.mon-lt-known{display:flex;flex-direction:column;align-items:center;gap:4px}
.mon-lt-band{margin-top:clamp(56px,8vw,90px);padding-top:clamp(40px,5.5vw,60px);border-top:1px solid var(--line);text-align:center}
.mon-lt-band h2{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:16px auto 12px;color:#eef0f1;font-weight:400;letter-spacing:.005em}
.mon-lt-band>.mon-body{margin:0 auto 30px;max-width:52ch;text-wrap:balance}
.mon-lt-index{max-width:760px;margin:0 auto}
/* footer row */
.mon-lt-foot{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:clamp(44px,6vw,68px);margin-bottom:clamp(40px,6vw,64px);border-bottom:1px solid var(--line)}
.mon-lt-foot-title{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.25;color:#eef0f1;margin-top:16px}
.mon-lt-foot-line{font:13px/1.7 var(--font-body);color:var(--txt-faint);margin:10px auto 28px;max-width:62ch;text-wrap:balance}
.mon-foot .mon-lt-foot a:not(.mon-lt-insta){display:inline;margin:0}
.mon-lt-insta{display:inline-flex!important;align-items:center;gap:10px;min-height:40px;margin:10px 0 0!important;font:12px var(--font-body);letter-spacing:.04em;color:var(--txt-dim);text-decoration:none;transition:color .3s}
.mon-lt-foot .mon-lt-insta{margin:22px 0 0!important}
.mon-lt-insta:hover{color:var(--txt)}
/* the Squid page */
.mon-lt-unavailable{font:13px/1.7 var(--font-body);color:var(--txt-dim);margin:14px 0 0}
.mon-lt-unavailable .mon-textlink{min-height:32px;margin-left:4px}
.mon-lt-aside{font:13px/1.8 var(--font-body);color:var(--txt-faint);margin:28px auto 0;max-width:46ch}
.mon-lt-aside .mon-textlink{margin-top:6px}
.mon-lt-wearers{margin-top:18px}
/* after another form */
.mon-lt-offer{width:100%;max-width:420px;margin:6px auto 18px;padding:18px 0 0;border-top:1px solid var(--line);text-align:center}
.mon-lt-offer-q{font-family:var(--serif);font-size:1.25rem;color:#eef0f1;margin:0 0 4px}
.mon-lt-offer .mon-body{font-size:13px;margin:0 auto 14px}
.mon-lt-offer .mon-lt-form{text-align:left}
/* the paper: "Dear [first name]," */
.mon-lt-dear{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 8px}
.mon-lt-dear .mon-letter-hand{margin:0}
.mon-lt-dear .mon-letter-hand:last-child{margin-left:-8px}
.mon-letter-name.mon-lt-dearname{width:min(240px,62%);text-align:left;font-size:24px}
.mon-lt-dearname::placeholder{color:var(--txt-faint);font-style:italic}
.mon-lt-letterbody{font-family:var(--serif);font-size:19px;line-height:1.8;color:#eef0f1;margin:14px 0 0}
.mon-lt-paperform .mon-letter-actions .mon-lt-small{margin:0;max-width:34ch}
.mon-lt-page-paper{margin-top:clamp(32px,5vw,48px);max-width:640px}
.mon-lt-step .mon-lead{margin:18px 0 28px;max-width:46ch}
.mon-lt-step .mon-body{max-width:52ch;margin:0 0 28px}
.mon-lt-step .mon-lt-insta{margin:0!important;min-height:48px}
.mon-lt-page h1.mon-display{font-size:clamp(2.2rem,4vw,3.4rem)}
/* /letter/ on the centre line (0.1.64): the heading, the reply and the button
   are centred; the letter itself keeps the left edge a letter has. */
.mon-lt-page .mon-wrap.narrow{text-align:center}
.mon-lt-page .mon-lt-page-paper{margin-left:auto;margin-right:auto;text-align:left}
.mon-lt-page .mon-letter-reply{align-items:center;text-align:center}
.mon-lt-page .mon-letter-reply input{width:100%;text-align:center}
.mon-lt-page .mon-letter-actions{flex-direction:column;justify-content:center;gap:14px}
.mon-lt-page .mon-lt-paperform .mon-letter-actions .mon-lt-small{max-width:none;text-align:center}
.mon-lt-page .mon-lt-hint,.mon-lt-page .mon-lt-error{text-align:center}
.mon-lt-page .mon-lt-sent p{margin-left:auto;margin-right:auto}
.mon-lt-step .mon-lead,.mon-lt-step .mon-body{margin-left:auto;margin-right:auto}
.mon-lt-page .mon-watch-actions{justify-content:center;align-items:center}
.mon-sheet-lt h2.mon-display{margin-bottom:22px}
/* the note */
.mon-lt-note{position:fixed;right:24px;bottom:24px;z-index:80;width:min(360px,calc(100vw - 48px));background:#0a0b0c;border:1px solid var(--line-strong);box-shadow:0 40px 90px -30px #000;padding:26px 26px 18px;animation:monLtIn .6s var(--ease-glide) both;transition:opacity .4s,transform .4s}
.mon-lt-note .mon-eye{margin-bottom:12px;padding-right:36px}
.mon-lt-note-title{font-family:var(--serif);font-size:1.5rem;line-height:1.25;color:#eef0f1;margin-bottom:8px}
.mon-lt-note>.mon-body{font-size:13px;line-height:1.7;margin:0 0 16px}
.mon-lt-note .mon-lt-small{font-size:11px}
.mon-lt-note-close{position:absolute;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:var(--txt-dim);cursor:pointer}
.mon-lt-note-close:hover{color:var(--txt)}
.mon-lt-notnow{display:block;margin:6px auto 0;font-size:12px;color:var(--txt-faint)}
.mon-lt-note.is-closing{opacity:0;transform:translateY(14px);pointer-events:none}
.mon-drawer-open .mon-lt-note{opacity:0;visibility:hidden}
.mon-lt-note :focus-visible{outline:2px solid var(--sapphire);outline-offset:3px}
.mon-lt-note.is-bar{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;padding:0;display:flex;align-items:stretch;background:#0b0c0d}
.mon-lt-bar-open{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:54px;padding:10px 16px;background:none;border:0;color:var(--txt);text-align:left;cursor:pointer}
.mon-lt-bar-name{font:600 9.5px var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--txt-faint)}
.mon-lt-bar-q{font-family:var(--serif);font-size:1.1rem;color:#eef0f1}
.mon-lt-note.is-bar .mon-lt-note-close{position:static;width:48px;height:auto;align-self:stretch}
@keyframes monLtIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mon-lt-note{animation:none;transition:none}}
@media(max-width:700px){
  .mon-lt-fields,.mon-lt-form.is-centre .mon-lt-fields{grid-template-columns:1fr;gap:12px}
  .mon-lt-submit,.mon-lt-form.is-centre .mon-lt-submit{width:100%;min-width:0;margin-top:6px}
  .mon-lt-note:not(.is-bar){left:0;right:0;bottom:0;width:auto;border-left:0;border-right:0;border-bottom:0;padding:24px 20px calc(16px + env(safe-area-inset-bottom));max-height:88dvh;overflow-y:auto}
  .mon-lt-letterbody{font-size:17px}
}

/* The letter to Domen (0.1.59): it fits the window, and only the message scrolls. */
.mon-sheet-letter{display:flex;flex-direction:column;max-height:min(90vh,760px);max-height:min(90dvh,760px)}
.mon-sheet-letter>.mon-letter{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.mon-sheet-letter .mon-letter-paper{display:flex;flex-direction:column;flex:1 1 auto;min-height:170px;margin-top:18px}
.mon-sheet-letter .mon-letter-sign{flex:none;margin-top:14px}
.mon-sheet-letter .mon-letter-reply,.mon-sheet-letter .mon-letter-actions,.mon-sheet-letter .mon-account-error{flex:none}
.mon-sheet-letter .mon-letter-reply{margin-top:18px}
.mon-sheet-letter .mon-letter-actions{margin-top:22px}
.mon-sheet-letter .mon-letter-hand{font-size:clamp(20px,2.4vw,24px)}
.mon-sheet,.mon-letter-body{scrollbar-width:thin;scrollbar-color:rgba(233,235,236,.22) transparent}
.mon-sheet::-webkit-scrollbar,.mon-letter-body::-webkit-scrollbar{width:6px}
.mon-sheet::-webkit-scrollbar-track,.mon-letter-body::-webkit-scrollbar-track{background:transparent}
.mon-sheet::-webkit-scrollbar-thumb,.mon-letter-body::-webkit-scrollbar-thumb{background:rgba(233,235,236,.2);border-radius:3px}
.mon-sheet::-webkit-scrollbar-thumb:hover,.mon-letter-body::-webkit-scrollbar-thumb:hover{background:rgba(233,235,236,.34)}
.mon-letter-sent{animation:monLtIn .5s cubic-bezier(0.23,1,0.32,1) both}
/* The envelope that carries it away */
.mon-envelope{position:fixed;z-index:90;pointer-events:none;perspective:800px}
.mon-envelope>div{position:absolute}
.mon-env-back{inset:0;z-index:1;background:linear-gradient(180deg,#1f2328,#16191d);border:1px solid rgba(214,218,221,.26);border-radius:2px;box-shadow:0 30px 60px -24px #000}
.mon-env-letter{z-index:2;transform-origin:50% 50%;margin:0;overflow:hidden}
.mon-env-letter textarea{overflow:hidden}
.mon-env-front{inset:0;z-index:3;background:linear-gradient(180deg,#2a3036,#1e2227);clip-path:polygon(0 36%,50% 66%,100% 36%,100% 100%,0 100%)}
.mon-env-flap{left:0;right:0;top:0;height:64%;z-index:1;background:linear-gradient(180deg,#323940,#262b31);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:rotateX(180deg);backface-visibility:visible}
.mon-env-seal{left:50%;top:63%;width:36px;height:36px;z-index:5;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#2b3d52,#0e151d 72%);border:1px solid rgba(127,155,189,.45);opacity:0;transform:translate(-50%,-50%)}
.mon-env-seal img{width:18px;height:18px;filter:invert(1);opacity:.88}
@media(max-width:600px){.mon-sheet-letter{max-height:94vh;max-height:94dvh}.mon-sheet-letter .mon-letter-paper{min-height:150px}}
/* Try-on on a computer (0.1.59): a code to open it on the phone, beside the watch, never over it. */
.mon-showroom-qrcard{position:absolute;left:clamp(18px,4vw,56px);top:50%;transform:translateY(-50%);width:min(250px,42%);display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px;background:rgba(6,6,6,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line-strong)}
.mon-showroom-qr{display:block;width:148px;height:148px;margin-bottom:6px;background:#f4f5f6}
.mon-showroom-qr svg{display:block;width:100%;height:100%}
.mon-showroom-qr.is-loading{background:rgba(244,245,246,.08)}
.mon-showroom-qrcard .t{font-family:var(--font-display);font-size:1.2rem;letter-spacing:.02em;color:var(--txt)}
.mon-showroom-qrcard .s{font:12.5px/1.6 var(--font-body);color:var(--txt-dim)}
.mon-lt-signrole{font:600 9.5px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--txt-faint);margin-top:2px}

/* Home, "No detail is ever small": the rotor sits lower and nearer the middle,
   clear of the photograph above (1 Oct 2026). The top of the frame dissolves
   into the page instead of ending in an edge. */
/* A chapter whose words sit on the right (0.1.64): the photograph keeps to the
   left two thirds and dissolves towards the words, so the subject is seen
   beside the text instead of under it. Full width again on phones. */
.mon-chapterbg.is-left{right:auto;width:62%;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 52%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,#000 0%,#000 52%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 78%,transparent 100%);
          mask-composite:intersect}
/* A square photograph in a held Manufacture frame (0.1.66): it keeps to the
   left and dissolves towards the words, so the watch is seen beside the text. */
.mon-mf-side{right:auto;width:60%;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 62%,transparent 100%)}
@media(max-width:820px){.mon-mf-side{width:100%;-webkit-mask-image:none;mask-image:none}}
/* The watch in this photograph sits low; the fade at the foot is shortened so it stays in view (0.1.65). */
.mon-home-feeling-img{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 90%,transparent 100%)}
.mon-home-atelier-img{object-position:94% 45%}
.mon-home-founder-img{object-position:100% 50%}
@media(max-width:820px){.mon-home-atelier-img{object-position:42% 50%}.mon-home-founder-img{object-position:56% 50%}}
@media(max-width:820px){.mon-chapterbg.is-left{width:100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 76%,transparent 100%);-webkit-mask-composite:source-over;
          mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 76%,transparent 100%);mask-composite:add}}

/* ============ LOCATIONS (0.1.64) ============
   A centred opening and a three-place index, then one chapter per place: the
   photograph dissolves into the page on the side of the words, the sides
   alternate, and the closing sits on the centre line. The photographs are
   daylight colour, shown muted at rest (0.1.66) and in full colour when the
   visitor turns to a place: on hover with a mouse, or when the photograph
   reaches the middle of the screen on a phone (is-colour, set in PageLocations). */
.mon-loc{--loc-filter:saturate(.38) brightness(.9) contrast(1.04);--loc-filter-on:saturate(1) brightness(1) contrast(1)}
.mon-loc-hero{padding:clamp(130px,17vh,190px) 0 clamp(40px,6vw,72px)}
.mon-loc-title{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.16}
.mon-loc-lead{max-width:52ch;margin:28px auto 0}
.mon-loc-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mon-loc-index a{display:flex;flex-direction:column;align-items:center;gap:9px;padding:clamp(26px,3.4vw,40px) 12px;text-align:center;color:inherit;text-decoration:none;transition:background-color .4s ease}
.mon-loc-index a+a{border-left:1px solid var(--line)}
.mon-loc-index-place{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.2;color:#eef0f1;transition:color .3s ease}
.mon-loc-index-role{font:600 10px var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--txt-dim)}
.mon-loc-index-country{font:13px var(--font-body);color:var(--txt-faint)}
@media(hover:hover) and (pointer:fine){.mon-loc-index a:hover{background-color:rgba(255,255,255,.025)}.mon-loc-index a:hover .mon-loc-index-place{color:#fff}}
.mon-loc-index a:focus-visible{outline:2px solid var(--sapphire);outline-offset:-2px}
.mon-loc-chapter{padding:clamp(56px,8vw,110px) 0;scroll-margin-top:72px}
.mon-loc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.mon-loc-chapter.is-reverse .mon-loc-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.mon-loc-chapter.is-reverse .mon-loc-media{order:2}
.mon-loc-media img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:var(--loc-filter);transition:filter 1.1s ease;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 62%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 62%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%);
          mask-composite:intersect}
.mon-loc-chapter.is-reverse .mon-loc-media img{
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 9%,#000 62%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%);
          mask-image:linear-gradient(to left,transparent 0,#000 9%,#000 62%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 84%,transparent 100%)}
.mon-loc-copy .mon-cap{margin-bottom:16px}
.mon-loc-place{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1;margin:0 0 14px}
.mon-loc-line{font-style:italic;font-size:clamp(1.25rem,1.8vw,1.6rem);color:var(--txt-dim);margin:0 0 26px}
.mon-loc-copy .mon-body{max-width:44ch;margin:0 0 16px}
.mon-loc-work{list-style:none;margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;row-gap:8px}
.mon-loc-work li{font:600 10px/1.6 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--txt-faint)}
.mon-loc-work li:not(:last-child)::after{content:'\00b7';margin:0 12px;color:var(--txt-faint)}
.mon-loc-close{border-top:1px solid var(--line);background:#040404}
.mon-loc-close-title{font-size:clamp(1.6rem,3vw,2.5rem);margin:0 0 18px}
@media(max-width:820px){
  .mon-loc-grid,.mon-loc-chapter.is-reverse .mon-loc-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .mon-loc-chapter.is-reverse .mon-loc-media{order:0}
  .mon-loc-media img,.mon-loc-chapter.is-reverse .mon-loc-media img{aspect-ratio:3/2;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 74%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 74%,transparent 100%)}
  .mon-loc-index{grid-template-columns:minmax(0,1fr)}
  .mon-loc-index a{padding:22px 12px}
  .mon-loc-index a+a{border-left:0;border-top:1px solid var(--line)}
}

@media(hover:hover) and (pointer:fine){.mon-loc-chapter:hover .mon-loc-media img{filter:var(--loc-filter-on)}}
.mon-loc-chapter.is-colour .mon-loc-media img{filter:var(--loc-filter-on)}
@media(prefers-reduced-motion:reduce){.mon-loc-media img{transition-duration:.25s}}

/* ============ THE MAISON (0.1.64) ============
   The company's story in chapters on a two-column spread (the label left, the
   words right, a hairline between chapters), one centred line as a breath,
   and the founder last, centred and brief. */
/* The hero shows the whole photograph (0.1.66): its height follows the
   screen, the sides and the foot dissolve into black, the title sits below. */
.mon-maison-hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(76px,10vh,104px);background:var(--ink)}
.mon-maison-hero-frame{position:relative;width:min(100%,calc(68vh * 1.5),1100px);aspect-ratio:3/2}
.mon-maison-hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.78) contrast(1.06);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(to bottom,#000 0,#000 64%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(to bottom,#000 0,#000 64%,transparent 100%);
          mask-composite:intersect}
.mon-maison-hero-copy{position:relative;margin-top:clamp(-72px,-6vh,-28px);padding-bottom:clamp(8px,2vw,24px)}
.mon-maison-hero h1 em{color:var(--txt-dim)}
@media(max-width:700px){.mon-maison-hero-frame img{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 66%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 66%,transparent 100%)}.mon-maison-hero-copy{margin-top:-12px}}
/* The story, read rather than scanned (0.1.66). */
.mon-maison-story{font-family:var(--serif);font-size:clamp(1.12rem,1.32vw,1.28rem);line-height:1.78;color:var(--txt-dim);margin:0 0 18px;max-width:58ch}
.mon-maison-story.is-first{color:var(--txt)}
.mon-maison-story.is-beat{font-style:italic;font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.5;color:var(--txt);margin:26px 0 26px}
.mon-maison-write{margin-top:26px;font-size:10px}
.mon-maison-intro{max-width:52ch;margin:0 auto;color:var(--txt)}
.mon-maison-chapters{padding:clamp(8px,2vw,24px) 0 clamp(48px,7vw,96px)}
.mon-maison-ch{align-items:start;padding:clamp(40px,5.5vw,72px) 0;border-top:1px solid var(--line)}
.mon-maison-ch-k{grid-column:1 / 5;padding-top:10px}
.mon-maison-ch-copy{grid-column:5 / 13;max-width:62ch}
.mon-maison-ch-t{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.2;color:#eef0f1;margin:0 0 clamp(20px,2.4vw,28px)}
.mon-maison-ch-copy .mon-lead{margin:0 0 18px}
.mon-maison-ch-copy .mon-body{font-size:15px;margin:0 0 16px}
.mon-maison-ch-link{margin-top:14px;font-size:10px}
.mon-maison-pull{background:#040404;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* A touch lighter (0.1.66): softer tone, slightly smaller, no subpixel thickening. */
.mon-maison-pull .mon-script{font-size:clamp(1.55rem,2.9vw,2.35rem);margin:0 auto;color:rgba(233,235,236,.8);width:fit-content;max-width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.mon-maison-founder{border-top:1px solid var(--line)}
.mon-maison-founder-grid{align-items:center;gap:clamp(36px,6vw,96px)}
.mon-maison-sign{font-size:clamp(2rem,3.4vw,2.6rem);margin:30px 0 8px;color:var(--txt)}
/* the people behind it (0.1.76): the founder named under his portrait, and the
   house line closing the words in the serif italic of a beat */
.mon-maison-portrait-cap{margin-top:18px;color:var(--txt-dim)}
.mon-maison-people{display:grid;grid-template-columns:minmax(0,1fr)}
.mon-maison-people-photo{margin:clamp(30px,8vw,40px) 0 clamp(32px,9vw,44px)}
@media(min-width:881px){.mon-maison-people{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"photo head" "photo rest";column-gap:clamp(36px,6vw,96px)}.mon-maison-people-head{grid-area:head;align-self:end}.mon-maison-people-photo{grid-area:photo;margin:0;align-self:center}.mon-maison-people-rest{grid-area:rest;align-self:start}}
.mon-maison-story.is-close{font-style:italic;font-size:clamp(1.2rem,1.5vw,1.42rem);line-height:1.55;color:var(--txt);margin:28px 0 0}
/* The portrait: 4:5, the name across its foot. Until Domen's photograph is in,
   the frame holds the monogram on a quiet gradient (0.1.65). */
.mon-maison-portrait{position:relative;margin:0;aspect-ratio:4/5;max-width:460px;overflow:hidden;border-radius:3px;box-shadow:var(--shadow-product)}
.mon-maison-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25)}
.mon-maison-portrait.is-waiting{display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 38%,#16181b 0%,#0b0c0d 62%,#070707 100%);border:1px solid var(--line)}
.mon-maison-portrait img.mon-maison-portrait-mark{width:min(34%,140px);height:auto;object-fit:contain;filter:invert(1);opacity:.14}
.mon-maison-portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 26px;background:linear-gradient(to top,rgba(4,4,4,.9),transparent);display:flex;flex-direction:column;gap:6px}
.mon-maison-portrait-name{font-family:var(--font-display);font-weight:200;font-size:18px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt)}
@media(max-width:880px){.mon-maison-portrait{max-width:none}}
/* "Complexity crafted elegantly simple." writes itself in (0.1.65): a mask
   twice the line's width, solid on its left half, moved by scroll. */
.mon-maison-pull-line.is-writing{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 56%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 56%,transparent 100%);-webkit-mask-size:220% 100%;mask-size:220% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
@media(max-width:820px){.mon-maison-ch-k{padding-top:0;margin-bottom:4px}}
/* Buy-Back opener (0.1.64): the photograph keeps to the right two thirds and
   dissolves towards the words on the left. Full width under the words on phones. */
.mon-buyback-hero .mon-chapterbg{left:auto;right:0;width:56%;object-position:50% 50%;filter:brightness(.7) contrast(1.08) saturate(.8);
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 52%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 16%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to left,#000 0%,#000 52%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 16%,#000 80%,transparent 100%);
          mask-composite:intersect}
.mon-buyback-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(6,6,6,.7) 0%,rgba(6,6,6,.3) 40%,rgba(6,6,6,0) 70%)}
@media(max-width:820px){
  .mon-buyback-hero .mon-chapterbg{width:100%;filter:brightness(.5) contrast(1.08) saturate(.8);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 76%,transparent 100%);-webkit-mask-composite:source-over;
            mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 76%,transparent 100%);mask-composite:add}
  .mon-buyback-veil{background:linear-gradient(to bottom,rgba(6,6,6,.3) 0%,rgba(6,6,6,.7) 70%,var(--ink) 100%)}
}
.mon-maison-hero h1{text-wrap:balance}
@media(max-width:600px){.mon-maison-hero h1{font-size:1.95rem!important}}

/* ============ MANUFACTURE: frames that hold while their words fade (0.1.65) ============ */
.mon-mf{--mf-hold:72vh}
.mon-mf-frame{position:relative;background:#000}
.mon-mf-stick{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;padding:clamp(80px,10vh,120px) 0}
.mon-mf-stick.is-centre{min-height:100vh;justify-content:center}
.mon-mf-copy{position:relative;z-index:2}
.mon-mf-frame.is-held{height:calc(100vh + var(--mf-hold))}
.mon-mf-frame.is-held .mon-mf-stick{position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding:80px 0 16px}
.mon-mf-frame.is-held .mon-mf-copy,.mon-mf-frame.is-held .mon-mf-veil{will-change:opacity,transform}
@media(max-width:700px){.mon-mf{--mf-hold:58vh}}

/* ============ PHONES (0.1.68): the photograph above the words ============
   A landscape photograph behind a column of text on a narrow, tall screen
   shows a sliver of it under the words, dimmed for legibility. On phones the
   chapters and the Manufacture frames show the photograph first, bright and
   framed on its subject (--m-pos), dissolving into the black the words sit on. */
@media(max-width:820px){
  .mon-cht.mon-mstack{display:flex;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;min-height:0!important;padding:0 0 clamp(56px,14vw,88px)!important;margin-top:0!important}
  .mon-mstack .mon-chapterbg,
  .mon-mf .mon-mf-stick:not(.is-centre) .mon-chapterbg{position:relative;inset:auto;left:auto;right:auto;top:auto;width:100%!important;height:min(122vw,68svh);flex:none;
    object-position:var(--m-pos,50% 50%)!important;filter:brightness(.92) contrast(1.06) saturate(.86)!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 64%,transparent 100%)!important;mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 64%,transparent 100%)!important;-webkit-mask-composite:source-over!important;mask-composite:add!important}
  .mon-mstack .mon-chapterbg.mono,
  .mon-mf .mon-mf-stick:not(.is-centre) .mon-chapterbg{filter:grayscale(1) brightness(.86) contrast(1.12)!important}
  .mon-mstack>div:not(.mon-wrap){display:none!important}
  .mon-mstack>.mon-wrap,
  .mon-mf .mon-mf-stick:not(.is-centre) .mon-mf-copy{position:relative;z-index:2;margin-top:calc(-1 * clamp(36px,11vw,64px))}
  .mon-mstack .mon-home-copy-right{margin-left:0!important}
  .mon-mf .mon-mf-stick:not(.is-centre){display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:0 0 clamp(56px,14vw,88px)}
  .mon-mf .mon-mf-stick:not(.is-centre) .mon-chapter-scrim,
  .mon-mf .mon-mf-stick:not(.is-centre) .mon-mf-veil{display:none}
  .mon-mf .mon-mf-stick:not(.is-centre) .mon-side-copy{margin-left:0!important;text-align:left!important}
  .mon-mf .mon-mf-stick:not(.is-centre) .mon-frame-copy{margin-left:0!important}
  /* a page opener starts under the header: no fade at its top */
  .mon-mstack.mon-craft-hero .mon-chapterbg,.mon-mstack.mon-buyback-hero .mon-chapterbg{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0%,#000 64%,transparent 100%)!important;filter:brightness(.95) contrast(1.08) saturate(.75) sepia(.1)!important}
  .mon-mstack.mon-craft-hero>.mon-wrap{padding-bottom:0!important}
  .mon-mstack.mon-buyback-hero .mon-chapterbg{filter:brightness(.9) contrast(1.06) saturate(.85)!important}
}
.mon-menu-open .mon-lt-note{opacity:0;visibility:hidden}

/* Short desktop screens (a laptop at 125 %, about 640 px of page): the frame's
   words are set a little tighter so every frame fits under the header and
   holds, instead of the long ones scrolling past plainly (0.1.69). */
@media(min-width:821px) and (max-height:820px){
  .mon-mf .mon-mf-copy .mon-cap{margin-bottom:12px!important}
  .mon-mf .mon-mf-copy .mon-statement{font-size:clamp(2rem,7vh,3.4rem)!important}
  .mon-mf .mon-frame-copy{margin-top:clamp(14px,2.8vh,24px)!important}
  .mon-mf .mon-frame-copy .mon-lead{font-size:clamp(1.06rem,2.8vh,1.24rem);line-height:1.55;margin-bottom:11px}
  .mon-mf .mon-frame-copy .mon-body{font-size:13.5px;line-height:1.64;margin-bottom:8px}
}

/* Short laptop screens (0.1.69): the whole Maison photograph and both lines of its title fit the first view. */
@media (min-width:701px) and (max-height:820px){
  .mon-maison-hero-frame{width:min(100%,calc((100vh - 250px) * 1.5),1100px)}
}
@media (min-width:701px) and (max-height:700px){
  .mon-lt-note:not(.is-bar){right:16px;bottom:16px;padding:20px 22px 12px}
  .mon-lt-note-title{font-size:1.3rem}
  .mon-lt-note>.mon-body{font-size:12.5px;line-height:1.6;margin-bottom:10px}
  .mon-lt-note .mon-lt-form.is-stack .mon-lt-fields{gap:4px}
  .mon-lt-note .mon-lt-field input{padding:7px 2px}
}
/* The letter sheet (May Domen write to you?) keeps its paper whole and scrolls
   when the screen is short, instead of letting the words spill out (0.1.69). */
.mon-sheet-lt>.mon-letter,.mon-sheet-lt .mon-letter-paper{flex:none}
@media (min-width:601px) and (max-height:760px){
  .mon-sheet-lt{max-height:96vh;max-height:96dvh;padding-top:26px;padding-bottom:24px}
  .mon-sheet-lt h2.mon-display{margin-bottom:14px}
  .mon-sheet-lt .mon-letter-paper{margin-top:0;padding:18px 30px}
  .mon-sheet-lt .mon-lt-letterbody{font-size:17px;line-height:1.6;margin-top:10px}
  .mon-sheet-lt .mon-letter-sign{margin-top:8px}
  .mon-sheet-lt .mon-letter-reply{margin-top:14px;gap:6px}
  .mon-sheet-lt .mon-letter-actions{margin-top:16px}
}
/* Craft index titles fit their column (0.1.70): one long word such as
   MANUFACTURE ran into the photograph beside it on laptop widths. The size
   follows the width of the words' own column. */
.mon-craft-card-copy{container-type:inline-size}
@supports (font-size:1cqi){.mon-craft-card-copy .mon-idx-ttl{font-size:clamp(1.8rem,12.5cqi,3.8rem)}}
.mon-craft-card-copy .mon-idx-ttl{max-width:100%}

/* Homepage hero on a phone held upright (0.1.70). The phone film is framed on
   the dial, so the picture keeps the upper part of the screen clear and bright
   and the title sits in the lower third, on the dark the film fades into, as a
   film poster does. Desktop is unchanged. */
@media (max-aspect-ratio:1/1){
  .mon-home-hero{justify-content:flex-end!important;padding-bottom:clamp(112px,17vh,190px)!important}
  .mon-stage .mon-grade{background:
    radial-gradient(140% 80% at 50% 34%,rgba(0,0,0,0) 40%,rgba(0,0,0,.42) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.42) 0%,rgba(0,0,0,.04) 14%,rgba(0,0,0,.06) 44%,rgba(6,6,6,.62) 62%,rgba(6,6,6,.9) 80%,#060606 100%)}
  .mon-home-hero-fade{height:30vh}
}
/* Glacier (0.1.80): a product page like the Squid's (commerce.css), with the
   pre-order's own pieces: the notes under the price and the four steps. */
.mon-glacier-badge{color:var(--txt)}
.mon-glacier .mon-glacier-lead{margin:18px 0 12px;font-size:1.12rem}
.mon-glacier .mon-glacier-body{font-size:14px;margin:0 0 6px}
.mon-glacier-notes{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px}
.mon-glacier-notes li{display:flex;gap:12px;align-items:flex-start;font:13px/1.55 var(--font-body);color:var(--txt-dim)}
.mon-glacier-notes li span{color:var(--sapphire);flex:none;margin-top:2px}
.mon-glacier-ship{font:13px/1.6 var(--font-body);color:var(--txt-dim);margin:6px 0 0}
.mon-glacier .mon-glacier-form{margin-top:26px}
.mon-glacier-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px);max-width:1180px;margin:0 auto}
.mon-glacier-steps li{border-bottom:0;border-top:1px solid var(--line);padding:18px 0 0}
.mon-glacier-steps li:first-child{padding-top:18px}
.mon-glacier-back{display:inline-flex;margin-top:18px}
@media(max-width:900px){
  .mon-glacier-steps{grid-template-columns:1fr 1fr;gap:0 clamp(18px,4vw,32px)}
  .mon-glacier-steps li{padding:18px 0}
}
@media(max-width:560px){.mon-glacier-steps{grid-template-columns:1fr}}
/* Home, From the Founder: the whole chapter fits a short laptop screen (0.1.70). */
@media (min-width:821px) and (max-height:820px){
  .mon-home-founder-copy .mon-statement{font-size:clamp(2rem,8.2vh,3.9rem)!important}
  .mon-home-founder-copy .mon-eye:first-child{margin-bottom:clamp(14px,3vh,34px)!important}
  .mon-home-founder-copy .mon-lead{margin-top:clamp(16px,3.4vh,42px)!important}
  .mon-home-founder-copy .mon-btn{margin-top:clamp(18px,4vh,48px)!important}
}

/* ============ THE CASEBACK: the menu on phones and tablets (0.1.70) ============
   The page turns over like a watch in the hand; the menu is engraved on the
   back (caseback.jsx). Motion: transform, opacity and clip-path only. */
.mon-cb-glyph{display:block;overflow:visible}
.mon-cb-glyph path{stroke:currentColor;stroke-width:1.4;stroke-linecap:round;fill:none;transition:transform .3s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.mon-mobile-toggle:hover .mon-cb-glyph path:last-child{transform:translateX(-8px)}}
.mon-mobile-toggle:active .mon-cb-glyph path{transform:translateX(2px)}

/* The page while it is turned: it scrolls inside itself and holds its place. */
html.mon-turning,html.mon-turning body{overflow:hidden;height:100%}
html.mon-turning{scrollbar-gutter:stable;background:radial-gradient(90% 60% at 50% 44%,#1e2125 0%,#0b0c0e 52%,#020203 100%)}
html.mon-turning body{background:transparent}
html.mon-turning .mon-flow{position:absolute;inset:0;overflow:hidden}
html.mon-turning #root{position:fixed;inset:0;overflow:hidden;background:var(--ink);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:50% 50%;will-change:transform;box-shadow:0 40px 120px rgba(0,0,0,.85)}
html.mon-turning body.mon-cursor,html.mon-turning body.mon-cursor *{cursor:auto!important}
.mon-turn-shade,.mon-turn-sheen{position:fixed;inset:0;pointer-events:none;z-index:400;opacity:0;display:none}
html.mon-turning .mon-turn-shade,html.mon-turning .mon-turn-sheen{display:block}
.mon-turn-shade{background:#000}
.mon-turn-sheen,.mon-cb-sheen{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 43%,rgba(235,242,250,.17) 50%,rgba(255,255,255,.05) 57%,transparent 70%)}

.mon-cb{position:fixed;inset:0;z-index:130}
.mon-cb-edge{position:fixed;left:50%;top:50%;width:5px;height:100%;opacity:0;pointer-events:none;z-index:2;border-radius:2px;transform:translate(-50%,-50%) scaleY(.8);
  background:linear-gradient(90deg,#08090a 0%,#5b6168 22%,#eef1f4 47%,#fff 53%,#7a8087 78%,#08090a 100%);
  box-shadow:0 0 22px rgba(220,230,240,.4),0 0 2px rgba(255,255,255,.7)}
.mon-cb-face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:#08090a;color:var(--txt);
  transform:perspective(1500px) rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-origin:50% 50%;
  touch-action:pan-y;will-change:transform;box-shadow:0 40px 120px rgba(0,0,0,.85)}
.mon-cb-steel{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 55% at 50% 0%,rgba(160,172,186,.14) 0%,rgba(160,172,186,0) 62%),
    repeating-radial-gradient(circle at 50% 16%,rgba(255,255,255,.016) 0 1px,rgba(0,0,0,0) 1px 3px),
    linear-gradient(180deg,#0e0f11 0%,#08090a 55%,#060607 100%)}
.mon-cb-sheen{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0}
.mon-cb-shade{position:absolute;inset:0;pointer-events:none;z-index:6;background:#000;opacity:0}

.mon-cb-top{position:relative;z-index:2;flex:none;display:flex;align-items:center;justify-content:flex-end;height:calc(58px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 10px 0 22px}
.mon-cb-close{width:48px;height:48px;display:grid;place-items:center;padding:0;background:none;border:0;border-radius:50%;color:var(--txt);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mon-cb-close path{stroke:currentColor;stroke-width:1.3;stroke-linecap:round;fill:none}
.mon-cb a:focus-visible,.mon-cb button:focus-visible{outline:2px solid var(--sapphire);outline-offset:3px}

.mon-cb-scroll{position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:0 clamp(20px,6vw,40px)}
.mon-cb-head{display:flex;flex-direction:column;align-items:center;padding:0 0 clamp(12px,2.4vh,24px)}
.mon-cb-case{position:relative;z-index:3;display:block;width:clamp(84px,13.4vh,136px);aspect-ratio:1/1;padding:0;border:0;border-radius:50%;background:none;cursor:grab;touch-action:none;transform-origin:50% 50%;-webkit-tap-highlight-color:transparent}
.mon-cb-turn{position:absolute;inset:0;display:block;border-radius:50%;transform:rotate(-48deg)}
.mon-cb-steelcase{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.035) 0 .6px,rgba(0,0,0,.05) .6px 1.6px),
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.16),rgba(255,255,255,0) 46%),
    conic-gradient(from 200deg,#4d535b,#16181b 55deg,#646b74 120deg,#1b1d21 185deg,#50565e 250deg,#141619 315deg,#4d535b);
  box-shadow:0 18px 50px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -14px 30px rgba(0,0,0,.55)}
.mon-cb-case-svg{position:absolute;inset:0;width:100%;height:100%}
.mon-cb-engr{transform-box:view-box;transform-origin:200px 200px}
.mon-cb[data-phase="open"] .mon-cb-engr,.mon-cb[data-phase="closing"] .mon-cb-engr{animation:mon-cb-spin 160s linear infinite}
@keyframes mon-cb-spin{to{transform:rotate(360deg)}}
.mon-cb-engr text{font:600 13px var(--font-body);letter-spacing:.2em;text-transform:uppercase}
.mon-cb-engr-lo{fill:rgba(0,0,0,.62)}
.mon-cb-engr-hi{fill:rgba(255,255,255,.2);transform:translate(.7px,.9px)}
.mon-cb-mono{position:absolute;inset:25%;pointer-events:none;background:linear-gradient(150deg,#030304,#2b2e33);
  -webkit-mask:url('../../assets/logos/monarte_m.svg') center/contain no-repeat;mask:url('../../assets/logos/monarte_m.svg') center/contain no-repeat}
.mon-cb-mono.is-hi{background:rgba(255,255,255,.24);transform:translate(.6px,.9px)}
.mon-cb-glint{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.17) 48%,rgba(255,255,255,.04) 56%,transparent 64%) 0 0/260% 100% no-repeat;background-position:130% 0}
.mon-cb[data-phase="open"] .mon-cb-glint{animation:mon-cb-glint 8s ease-in-out 1.2s infinite}
@keyframes mon-cb-glint{0%,72%{background-position:130% 0}100%{background-position:-70% 0}}
.mon-cb-time{margin-top:12px;font:500 9px var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--txt-faint)}
.mon-cb-time span{color:var(--txt-dim);font-variant-numeric:tabular-nums;letter-spacing:.18em}

.mon-cb-list{display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding-bottom:14px}
.mon-cb-item{position:relative}
.mon-cb-rule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(214,218,221,.09);transform-origin:0 50%;pointer-events:none}
.mon-cb-rule.is-end{position:relative;display:block}
.mon-cb-link{position:relative;display:flex;align-items:center;gap:14px;min-height:clamp(50px,6.6vh,60px);padding:8px 4px;color:var(--txt-dim);text-decoration:none;-webkit-tap-highlight-color:transparent}
.mon-cb-num{flex:none;width:30px;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1;color:var(--sapphire);letter-spacing:.04em}
.mon-cb-label{display:inline-block;font-family:var(--font-display);font-weight:300;font-size:clamp(26px,7.8vw,34px);line-height:1.1;letter-spacing:.005em;color:#eef0f1;transition:transform .18s cubic-bezier(.23,1,.32,1)}
.mon-cb-link:active .mon-cb-label{transform:translateX(4px)}
.mon-cb-graver{position:absolute;left:0;top:0;width:2px;height:0;opacity:0;pointer-events:none;border-radius:1px;background:linear-gradient(#fff,rgba(190,215,240,.9));box-shadow:0 0 10px 2px rgba(200,225,255,.6),0 0 2px #fff}
.mon-cb-jewel{flex:none;margin-left:auto;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e3eefa 0%,#7f9bbd 38%,#203f63 100%);box-shadow:0 0 12px rgba(127,155,189,.75)}
.mon-cb-item.is-here>.mon-cb-link .mon-cb-label{font-style:italic}
.mon-cb-item.is-chosen>.mon-cb-link .mon-cb-label,.mon-cb-sub.is-chosen{background:linear-gradient(100deg,#c9ced3 38%,#fff 50%,#c9ced3 62%) 100% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mon-cb-polish .42s cubic-bezier(.23,1,.32,1) forwards}
@keyframes mon-cb-polish{to{background-position:0 0}}
.mon-cb-subs{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 12px 44px}
.mon-cb-sub{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:1px solid var(--line-strong);border-radius:999px;font:600 9px var(--font-body);letter-spacing:.15em;text-transform:uppercase;color:var(--txt-dim);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s,color .2s,background-color .2s}
.mon-cb-sub.is-here{border-color:rgba(127,155,189,.75);color:#eef0f1}
.mon-cb-sub:active{background:rgba(255,255,255,.07)}

.mon-cb-dock{position:relative;z-index:2;flex:none;padding:12px clamp(20px,6vw,40px) calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(8,9,10,0) 0%,rgba(8,9,10,.94) 22%,#08090a 100%)}
.mon-cb-dock>*{max-width:560px;margin-left:auto;margin-right:auto}
.mon-cb-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.mon-cb-tiles.has-cart{grid-template-columns:repeat(4,minmax(0,1fr))}
.mon-cb-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:62px;padding:8px 4px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.015);color:var(--txt-dim);font:600 8.5px var(--font-body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,border-color .2s,color .2s}
.mon-cb-tile svg{width:20px;height:20px;color:var(--txt)}
.mon-cb-tile:active{background:rgba(255,255,255,.07);border-color:var(--line-strong)}
.mon-cb-tile.is-here{border-color:rgba(127,155,189,.55);color:#eef0f1}
.mon-cb-reserve{display:flex;width:100%;justify-content:center;align-items:center;min-height:52px}
.mon-cb-hint{margin:10px 0 0;text-align:center;font:500 8.5px var(--font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--txt-faint);opacity:0;animation:mon-cb-hint 6s ease 2.2s forwards}
@keyframes mon-cb-hint{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0}}

/* Before the ceremony engraves them, the chapters are not there yet. */
.mon-cb-face.is-ceremony .mon-cb-label{clip-path:inset(-20% 100% -20% 0)}
.mon-cb-face.is-ceremony .mon-cb-rule{transform:scaleX(0)}
.mon-cb-face.is-ceremony .mon-cb-num,.mon-cb-face.is-ceremony .mon-cb-subs,.mon-cb-face.is-ceremony .mon-cb-dock,.mon-cb-face.is-ceremony .mon-cb-time,.mon-cb-face.is-ceremony .mon-cb-jewel{opacity:0}
@media (prefers-reduced-motion:reduce){
  .mon-cb-engr,.mon-cb-glint{animation:none!important}
  .mon-cb-hint{animation:none;opacity:1}
  .mon-cb-link:active .mon-cb-label{transform:none}
}
@media (min-width:700px){.mon-cb-label{font-size:36px}.mon-cb-link{min-height:64px}}
/* Short phones: everything on one screen. */
@media (max-height:700px) and (max-aspect-ratio:1/1){
  .mon-cb-top{height:calc(50px + env(safe-area-inset-top,0px))}
  .mon-cb-case{width:76px}
  .mon-cb-time{margin-top:8px}
  .mon-cb-head{padding-bottom:10px}
  .mon-cb-label{font-size:25px}
  .mon-cb-link{min-height:46px;padding:5px 4px}
  .mon-cb-subs{padding-bottom:8px}
  .mon-cb-tile{min-height:52px;gap:6px}
  .mon-cb-reserve{min-height:48px}
  .mon-cb-dock{padding-top:8px}
}
@media (max-width:380px){.mon-cb-sub{padding:0 10px;letter-spacing:.12em}.mon-cb-subs{padding-left:40px}.mon-cb-num{width:26px}}
/* Phones held sideways: the chapters on the right, the quick actions on the left. */
@media (max-height:500px) and (min-aspect-ratio:1/1){
  .mon-cb-face{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto minmax(0,1fr)}
  .mon-cb-top{grid-column:1/-1;height:calc(46px + env(safe-area-inset-top,0px))}
  .mon-cb-head{display:none}
  .mon-cb-scroll{grid-column:2;grid-row:2;padding-left:10px;padding-right:calc(20px + env(safe-area-inset-right,0px))}
  .mon-cb-dock{grid-column:1;grid-row:2;align-self:center;background:none;padding:0 10px 14px calc(20px + env(safe-area-inset-left,0px))}
  .mon-cb-label{font-size:24px}
  .mon-cb-link{min-height:44px;padding:4px}
  .mon-cb-tile{min-height:54px}
}

/* ==========================================================================
   PHONES FIRST (0.1.72). Most visitors arrive on a phone, so the phone gets
   its own composition rather than a narrowed laptop page. Laptops are
   unchanged by everything in this block.
   ========================================================================== */

/* Home hero on a phone held upright: the title on one line, the words above
   the dark the film fades into rather than under it, a soft pool of shade
   behind the words only, and room between the lines. */
@media (max-aspect-ratio:1/1){
  .mon-home-hero{padding-bottom:clamp(124px,19vh,210px)!important}
  .mon-home-hero>div:not(.mon-home-hero-fade):not(.mon-home-hero-cue){position:relative;z-index:2}
  .mon-home-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:66%;z-index:1;pointer-events:none;
    background:radial-gradient(86% 42% at 50% 64%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.24) 50%,rgba(0,0,0,0) 78%)}
  .mon-home-hero-title{font-size:clamp(1.25rem,6.5vw,2.1rem)!important;letter-spacing:.17em!important;text-indent:.17em!important;white-space:nowrap;text-shadow:0 2px 30px rgba(0,0,0,.6)}
  .mon-home-hero-sub{font-size:clamp(1.06rem,4.8vw,1.4rem)!important;margin-top:12px!important;color:rgba(233,235,236,.82)!important;text-shadow:0 1px 18px rgba(0,0,0,.7)}
  .mon-home-hero-lines{margin-top:clamp(24px,3.8vh,36px)!important}
  .mon-home-hero-lines>div{font-size:10.5px!important;letter-spacing:.24em!important;white-space:nowrap;text-shadow:0 1px 14px rgba(0,0,0,.7)}
  .mon-home-hero-cue{bottom:clamp(18px,3vh,30px)!important;gap:10px!important}
  .mon-home-hero-cue-line{height:34px!important;position:relative;overflow:hidden;background:rgba(233,235,236,.14)!important}
  .mon-home-hero-cue-line::after{content:"";position:absolute;left:0;top:-14px;width:1px;height:14px;
    background:linear-gradient(rgba(233,235,236,0),rgba(233,235,236,.9));animation:monCue 2.8s cubic-bezier(.77,0,.175,1) infinite}
}
@keyframes monCue{0%{transform:translateY(0)}64%,100%{transform:translateY(48px)}}
@media (prefers-reduced-motion:reduce){.mon-home-hero-cue-line::after{animation:none;display:none}}

/* Home collection on a phone: one watch at a time on an endless ring
   (HomeRing in pageHome.jsx). Laptops keep the three side by side. */
.mon-ring{display:none}
@media (max-width:820px){
  .mon-home-trio{display:none!important}
  .mon-ring{--ring-w:min(58vw,300px);display:block;position:relative;width:100vw;margin:0 calc(50% - 50vw) clamp(30px,9vw,48px);
    touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
  .mon-ring-stage{position:relative;height:calc(var(--ring-w) * 1.59 + 16px)}
  .mon-ring-item{position:absolute;top:8px;left:50%;width:var(--ring-w);margin-left:calc(var(--ring-w) / -2);padding:0;border:0;background:none;
    cursor:pointer;transform-origin:50% 56%;will-change:transform,opacity;-webkit-tap-highlight-color:transparent}
  .mon-ring-item img{position:relative;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.85))}
  .mon-ring-glow{position:absolute;left:-30%;right:-30%;top:12%;height:76%;border-radius:50%;filter:blur(34px);pointer-events:none}
  .mon-ring-item:focus-visible{outline:1px solid rgba(233,235,236,.5);outline-offset:6px}
  .mon-ring-labels{position:relative;height:40px;margin-top:4px}
  .mon-ring-label{position:absolute;left:0;right:0;top:0;height:40px;margin:0 auto;border:0;background:none;cursor:pointer;opacity:0;
    font-family:var(--font-display);font-weight:300;font-size:clamp(1rem,4.4vw,1.2rem);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:#f3f4f4;will-change:transform,opacity}
  .mon-ring-segs{display:flex;justify-content:center;gap:8px;margin-top:8px}
  .mon-ring-seg{width:22px;height:1px;background:#e9ebec;opacity:.22}
}

/* Home Journal on a phone: a row of covers to swipe through, the next one
   showing at the edge, instead of three cards stacked down the page. */
@media (max-width:820px){
  .mon-home-journal{display:flex!important;gap:14px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * clamp(20px,4vw,56px));padding:4px clamp(20px,4vw,56px) 8px;scroll-padding:0 clamp(20px,4vw,56px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mon-home-journal::-webkit-scrollbar{display:none}
  .mon-home-journal>div{flex:0 0 min(78vw,360px);scroll-snap-align:start}
  .mon-home-journal .mon-journal-card-media{aspect-ratio:4/5}
  .mon-home-journal .mon-journal-card-title{font-size:1.38rem}
}

/* Chapters on a phone as scenes (0.1.72). The photograph fills the screen and
   holds while the words rise over it; as they arrive the picture steps back
   into the dark so they can be read, then the next scene rises from the
   black. Driven by the scroll itself, on the compositor, so it keeps pace
   with a finger. Browsers without scroll timelines, and anyone who has asked
   for less motion, keep the photograph-above-words layout of 0.1.68. */
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .mon-cht.mon-scene,
    .mon-mf .mon-mf-stick:not(.is-centre){--scene-h:min(134vw,74svh);display:block!important;overflow:clip!important;padding:0 0 26svh!important;view-timeline:--scene block}
    .mon-cht.mon-scene::before,
    .mon-mf .mon-mf-stick:not(.is-centre)::before{content:"";display:block;position:sticky;top:0;height:var(--scene-h);margin-bottom:calc(-1 * var(--scene-h));z-index:1;pointer-events:none;
      background:linear-gradient(to bottom,rgba(6,6,6,.45),#060606 82%);opacity:0;
      animation:monSceneDim linear both;animation-timeline:--scene;animation-range:entry 96% contain 60%}
    .mon-scene .mon-chapterbg,
    .mon-mf .mon-mf-stick:not(.is-centre) .mon-chapterbg{position:sticky!important;top:0!important;height:var(--scene-h)!important;z-index:0;
      -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 66%,transparent 100%)!important;
              mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 66%,transparent 100%)!important;
      will-change:transform,opacity;transform-origin:50% 0;
      animation:monSceneZoom linear both,monSceneRise linear both;animation-timeline:--scene,--scene;animation-range:entry 0% exit 0%,entry 0% entry 85%}
    .mon-scene>.mon-wrap,
    .mon-mf .mon-mf-stick:not(.is-centre) .mon-mf-copy{margin-top:-12svh!important;z-index:2}
    .mon-scene .mon-wrap :is(.mon-eye,.mon-statement,.mon-lead,.mon-btn,.mon-body),
    .mon-mf .mon-mf-stick:not(.is-centre) .mon-mf-copy :is(.mon-cap,.mon-statement,.mon-lead,.mon-body){
      animation:monWordsRise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    /* the label above each scene's words opens with a drawn line */
    .mon-scene .mon-wrap .mon-eye:first-child,
    .mon-mf .mon-mf-stick:not(.is-centre) .mon-mf-copy .mon-cap{display:flex;align-items:center;gap:14px;view-timeline:--label block}
    .mon-scene.mon-scene-centre .mon-wrap .mon-eye:first-child{justify-content:center}
    .mon-scene .mon-wrap .mon-eye:first-child::before,
    .mon-mf .mon-mf-stick:not(.is-centre) .mon-mf-copy .mon-cap::before{content:"";flex:none;width:30px;height:1px;background:currentColor;transform-origin:0 50%;
      animation:monRuleDraw linear both;animation-timeline:--label;animation-range:entry 40% cover 34%}
    /* The Manufacture title card: the words lift away and the photograph
       comes forward as the first frame arrives. */
    .mon-mf .mon-mf-stick.is-centre{view-timeline:--mfhero block}
    .mon-mf .mon-mf-stick.is-centre .mon-mf-copy{animation:monTitleAway linear both;animation-timeline:--mfhero;animation-range:exit 0% exit 70%}
    .mon-mf .mon-mf-stick.is-centre .mon-chapterbg{animation:monTitleZoom linear both;animation-timeline:--mfhero;animation-range:cover 50% exit 100%}
  }
}
@keyframes monSceneZoom{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes monSceneRise{from{opacity:.15}to{opacity:1}}
@keyframes monSceneDim{from{opacity:0}to{opacity:.6}}
@keyframes monWordsRise{from{opacity:0;transform:translate3d(0,36px,0)}to{opacity:1;transform:none}}
@keyframes monRuleDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes monTitleAway{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-60px,0)}}
@keyframes monTitleZoom{from{transform:scale(1)}to{transform:scale(1.1)}}

/* The Manufacture title arrives once, on a phone: the label, then the word
   uncovered from its baseline, then the line under it. */
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .mon-mf .mon-mf-stick.is-centre .mon-mf-copy .mon-cap{animation:monFadeIn 1.2s cubic-bezier(.23,1,.32,1) .25s both}
  .mon-mf .mon-mf-stick.is-centre .mon-mf-copy h1{animation:monUncover 1.5s cubic-bezier(.23,1,.32,1) .5s both}
  .mon-mf .mon-mf-stick.is-centre .mon-mf-copy p{animation:monFadeIn 1.2s cubic-bezier(.23,1,.32,1) 1.15s both}
}
@keyframes monFadeIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes monUncover{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translate3d(0,40%,0)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}

/* Product gallery on a phone: the photographs edge to edge in a row that
   follows the finger (SquidPhoneGallery). */
.mon-pgal{position:relative;margin:0 calc(-1 * clamp(20px,4vw,56px)) 6px}
.mon-pgal-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.mon-pgal-track::-webkit-scrollbar{display:none}
.mon-pgal-slide{flex:0 0 100%;margin:0;aspect-ratio:1;position:relative;overflow:hidden;scroll-snap-align:center;scroll-snap-stop:always;background:var(--ink)}
.mon-pgal-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.mon-pgal-foot{display:flex;align-items:center;gap:16px;padding:12px clamp(20px,4vw,56px) 0}
.mon-pgal-bar{position:relative;flex:1;height:1px;background:rgba(233,235,236,.14);overflow:hidden}
.mon-pgal-bar span{position:absolute;left:0;top:0;bottom:0;background:rgba(233,235,236,.8);will-change:transform}
.mon-pgal-count{flex:none;font:500 10px/1 var(--font-body);letter-spacing:.2em;color:var(--txt);min-width:56px;text-align:right}
.mon-pgal-count span{color:var(--txt-faint)}
.mon-pgal .mon-gallery-chips{left:clamp(20px,4vw,56px)}
.mon-pgal-track:focus-visible{outline:2px solid var(--sapphire);outline-offset:-2px}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* each photograph drifts a little slower than the swipe */
    .mon-pgal-slide img{animation:monDrift linear both;animation-timeline:view(inline);animation-range:cover 0% cover 100%}
  }
}
@keyframes monDrift{from{transform:translate3d(-18%,0,0) scale(.94)}50%{transform:none}to{transform:translate3d(18%,0,0) scale(.94)}}

/* The buy bar at the foot of a phone screen (SquidBuyBar). */
.mon-buybar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 18px;background:rgba(10,11,12,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line-strong);
  transform:translate3d(0,calc(100% + 24px),0);opacity:0;pointer-events:none;
  transition:transform .42s cubic-bezier(.32,.72,0,1),opacity .3s cubic-bezier(.23,1,.32,1)}
.mon-buybar.is-on{transform:none;opacity:1;pointer-events:auto}
.mon-buybar-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mon-buybar-name{font:600 9.5px/1.2 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-buybar-price{font-family:var(--serif);font-size:19px;line-height:1.1;color:#eef0f1}
.mon-buybar .mon-btn{flex:none;padding:14px 22px;letter-spacing:.22em}
html:has(.mon-lt-note) .mon-buybar,html:has(.mon-consent) .mon-buybar,.mon-drawer-open .mon-buybar,.mon-turning .mon-buybar{transform:translate3d(0,calc(100% + 24px),0);opacity:0;pointer-events:none}
@media (min-width:901px){.mon-buybar{display:none}}
@media (prefers-reduced-motion:reduce){.mon-buybar{transition:opacity .2s}}

/* Product details on a phone: each photograph settles into place as it
   arrives and its words follow it up. */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .mon-product-detail-media img{animation:monSettle linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    .mon-product-detail :is(h2,.mon-lead,.mon-body),
    .mon-commerce .mon-section .mon-center :is(h2,.mon-lead),
    .mon-squid-end :is(.mon-lead,.mon-script,.mon-btn){animation:monWordsRise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  }
}
@keyframes monSettle{from{opacity:.2;transform:scale(.88) translate3d(0,40px,0)}to{opacity:1;transform:none}}

/* Footer on a phone: the four groups as ruled lines that open one at a time. */
@media (max-width:820px){
  .mon-foot .cols{grid-template-columns:1fr!important;gap:0!important}
  .mon-foot-brand{margin-bottom:clamp(26px,8vw,40px)!important}
  .mon-foot-col{border-top:1px solid var(--line)}
  .mon-foot-col:last-child{border-bottom:1px solid var(--line)}
  .mon-foot .mon-foot-col h4{margin:0}
  .mon-foot-col-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:0 2px;background:none;border:0;cursor:pointer;
    font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--txt);-webkit-tap-highlight-color:transparent}
  .mon-foot-col-mark{position:relative;width:11px;height:11px;flex:none}
  .mon-foot-col-mark::before,.mon-foot-col-mark::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--txt-dim);transition:transform .32s cubic-bezier(.23,1,.32,1)}
  .mon-foot-col-mark::after{transform:rotate(90deg)}
  .mon-foot-col.is-open .mon-foot-col-mark::after{transform:rotate(0)}
  .mon-foot-col-links{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.23,1,.32,1)}
  .mon-foot-col-links>div{min-height:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .mon-foot-col.is-open .mon-foot-col-links{grid-template-rows:1fr}
  .mon-foot-col-links a{margin:0;padding:9px 2px 11px;font-size:13px}
  .mon-foot-col.is-open .mon-foot-col-links>div{padding-bottom:16px}
  .mon-foot-col-btn:focus-visible{outline:2px solid var(--sapphire);outline-offset:2px}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.mon-foot-col-links,.mon-foot-col-mark::before,.mon-foot-col-mark::after{transition:none}}

/* Content pages on a phone (.mon-rise on the page): headings, leads and
   buttons rise into place as they come up the screen, paragraphs develop at
   its foot, photographs settle. Driven by the scroll, so nothing waits on a
   timer and nothing is ever left hidden once it has been read past. */
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .mon-rise :is(h2,h3,.mon-eye,.mon-chapter,.mon-cap,.mon-lead,.mon-btn,.mon-textlink,blockquote,.mon-idx-ttl,.mon-statement,.mon-beat):not(.mon-philosophy-reveal *){
      animation:monWordsRise linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
    .mon-rise .mon-body:not(.mon-philosophy-reveal *){animation:monSoftRise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .mon-rise img:not(.mon-chapterbg):not(.mon-maison-portrait-mark):not(.mon-philosophy-reveal *){animation:monSettle linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
    .mon-rise :is(.mon-craft-card-media,.mon-journal-card-media) img{animation-name:monZoomSettle}
  }
}
@keyframes monSoftRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes monZoomSettle{from{opacity:.25;transform:scale(1.14)}to{opacity:1;transform:none}}

/* Price with the VAT apart (0.1.77): the price before VAT leads, the VAT sits
   beside it a size down, the total under it, quiet but always there. */
.mon-price{display:inline-flex;flex-direction:column;gap:4px;line-height:1.2}
.mon-price-figure{white-space:nowrap}
.mon-price-note{font-family:var(--font-body);font-size:11px;letter-spacing:.04em;color:var(--txt-faint);font-style:normal;white-space:nowrap}
.mon-price.is-center{align-items:center}

/* Glacier Blue on pre-order (0.1.77): price, delivery and the payment choice
   under the words, in the same rules and quiet type as the reservation flow. */
.mon-glacier-buy{margin:26px 0 0}
.mon-glacier-price{border-top:1px solid var(--line);padding-top:22px}
.mon-glacier-price .mon-cap{color:var(--sapphire)}
.mon-glacier-price-figure{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.4rem);color:#f3f4f4;margin:10px 0 10px}
.mon-glacier-note{font-size:13px;color:var(--txt-dim);margin:0}
/* The deposit, where the price is (0.1.85): what is paid today and when the rest is due. */
.mon-glacier-deposit{margin:2px 0 14px;padding:14px 16px;border:1px solid rgba(86,152,187,.5);background:rgba(86,152,187,.09)}
.mon-glacier-deposit .t{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.25;color:#f3f4f4;margin:0}
.mon-glacier-deposit .s{font:13.5px/1.55 var(--font-body);color:var(--txt);margin:5px 0 0}
.mon-glacier-options{margin:22px 0 0}