/* =========================================================
   THE KEEPER — Vol 1 / Udaipur
   Shared stylesheet for index.html (Home) and volume.html
   Desktop layout is measured 1:1 from the 1113pt-wide PDF
   artboard using the --u unit (1u = 1pt on the artboard).
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Weezer";
  src: url("../assets/fonts/weezerfont.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "WomanFont";
  src: url("../assets/fonts/WomanFontBold.otf") format("opentype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../assets/fonts/Quicksand-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Comfortaa";
  src: url("../assets/fonts/Comfortaa-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Andrea Bellarosa";
  src: url("../assets/fonts/Andrea_Bellarosa.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Courier Keeper";
  src: url("../assets/fonts/Courier_New.woff2") format("woff2");
  font-display: swap;
}
/* Masthead face in the PDF is ITC Garamond Std Light Condensed.
   If you own it, drop it in assets/fonts/ with this name and it will be used. */
@font-face {
  font-family: "ITC Garamond Cond";
  src: local("ITCGaramondStd-LtCond"), local("ITC Garamond Std Light Condensed"),
       url("../assets/fonts/ITCGaramondStd-LtCond.otf") format("opentype");
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --u: calc(min(100vw, 1440px) / 1113);

  --olive: #555326;
  --olive-2: #565325;
  --olive-soft: #6b6941;
  --sage: #b2b298;
  --ink: #746a6a;
  --ink-2: #676767;
  --cream: #f7f7f1;
  --stone: #efefe9;
  --white: #ffffff;

  --f-mast: "ITC Garamond Cond", "Cormorant Garamond", Garamond, serif;
  --f-nav: "Weezer", "Comfortaa", "Quicksand", sans-serif;
  --f-display: "WomanFont", "Cormorant Garamond", serif;
  --f-body: "Quicksand", "Comfortaa", system-ui, sans-serif;
  --f-foot: "Comfortaa", "Quicksand", sans-serif;
  --f-script: "Andrea Bellarosa", "Brush Script MT", cursive;
  --f-mono: "Courier Keeper", "Courier New", Courier, monospace;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 300;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.page { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; }
.bg-cream { position: absolute; inset: 0 0 auto 0; z-index: -2; background: var(--cream); }
/* bleed the cream band to the viewport edges on very wide screens */
.page::before {
  content: ""; position: absolute; z-index: -3; top: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  height: calc(1156 * var(--u)); background: var(--cream);
}

.body-copy {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: calc(17 * var(--u));
  line-height: 1.2;
  color: var(--ink);
}

/* ---------- Masthead ---------- */
.masthead {
  position: relative;
  height: var(--mast-h, calc(330 * var(--u)));
}
.mast-title {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(14 * var(--u));
  margin: 0;
  font-family: var(--f-mast);
  font-weight: 500;
  font-size: calc(176 * var(--u));
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--olive-2);
  white-space: nowrap;
}
.mast-title a { display: inline-block; }
/* fallback face is wider than ITC Garamond Condensed — narrow it to match the PDF */
.mast-title .cond { display: inline-block; transform-origin: left center; transform: scaleX(.8); }
.fonts-itc .mast-title .cond { transform: none; }
.mast-title .char { display: inline-block; will-change: transform; }

.clock {
  position: absolute;
  right: calc(23 * var(--u));
  top: calc(93 * var(--u));
  text-align: right;
}
.clock__time {
  display: block;
  font-family: var(--f-mono);
  font-size: calc(34 * var(--u));
  line-height: 1;
  letter-spacing: .02em;
  color: var(--olive);
}
.clock__time .colon { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.clock__vol {
  display: block;
  margin-top: calc(8 * var(--u));
  font-family: var(--f-nav);
  font-size: calc(13 * var(--u));
  letter-spacing: .01em;
  color: var(--ink);
}

.nav {
  position: absolute;
  top: var(--nav-top, calc(248 * var(--u)));
  right: calc(22 * var(--u));
  display: flex;
  gap: 0;
}
.nav a {
  position: relative;
  display: block;
  font-family: var(--f-nav);
  font-size: calc(27 * var(--u));
  line-height: 1.3;
  color: var(--ink);
  padding: 0 calc(4 * var(--u));
  transition: color .4s var(--ease);
}
.nav a + a { margin-left: var(--gap, calc(70 * var(--u))); }
.nav a:nth-child(2) { --gap: calc(66 * var(--u)); }
.nav a:nth-child(3) { --gap: calc(56 * var(--u)); }
.nav a:nth-child(4) { --gap: calc(46 * var(--u)); }
.nav a:hover, .nav a.is-active { color: var(--olive); }
.nav__dot {
  position: absolute;
  left: 0; top: 100%;
  width: calc(13 * var(--u)); height: calc(13 * var(--u));
  min-width: 7px; min-height: 7px;
  margin-top: calc(4 * var(--u));
  border-radius: 50%;
  background: var(--olive);
  transition: transform .6s var(--ease), width .3s var(--ease);
  pointer-events: none;
}

/* ---------- Border squiggle (Rajasthan outline) ---------- */
.border-line {
  position: absolute;
  left: 0; right: 0;
  top: calc(368 * var(--u));
  height: calc(1045 * var(--u));
  z-index: -1;
  background: url("../assets/img/border.svg") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
  clip-path: inset(0 0 calc(100% - var(--draw, 0%)) 0);
  transition: clip-path .2s linear;
}

/* =========================================================
   HOME
   ========================================================= */
.home { --mast-h: calc(342 * var(--u)); --nav-top: calc(248 * var(--u)); }

/* Hero film */
.hero {
  position: relative;
  margin: 0 calc(22 * var(--u)) 0 calc(24 * var(--u));
  height: calc(334 * var(--u));
  overflow: hidden;
  background: #2a2112;
}
.hero__media, .hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transform-origin: 60% 55%;
}
.hero.is-film .hero__media { animation: kenburns 24s linear infinite alternate; }
.hero.is-paused .hero__media { animation-play-state: paused; }
@keyframes kenburns {
  0%   { transform: scale(1.02) translate3d(0, 0, 0); object-position: 50% 62%; }
  100% { transform: scale(1.16) translate3d(-3%, -2%, 0); object-position: 50% 48%; }
}
.hero__shimmer {
  position: absolute; inset: 52% 0 0 0;
  background: repeating-linear-gradient(90deg, rgba(255,210,140,0) 0 18px, rgba(255,210,140,.09) 18px 22px);
  mix-blend-mode: screen; opacity: 0;
  transition: opacity 1s;
}

@keyframes shimmer { to { background-position: 160px 0; } }

.hero__play {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(105 * var(--u)); height: calc(105 * var(--u));
  min-width: 52px; min-height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: center;
  transition: transform .5s var(--ease), background .4s, opacity .5s;
}
.hero__play:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,.4); }
.hero__play svg { width: 34%; height: 34%; fill: #fff; margin-left: 6%; }
.hero__play .i-pause { display: none; margin-left: 0; }
.hero.is-film:not(.is-paused) .hero__play { opacity: 0; }
.hero.is-film:not(.is-paused):hover .hero__play { opacity: 1; }
.hero.is-film:not(.is-paused) .hero__play .i-play { display: none; }
.hero.is-film:not(.is-paused) .hero__play .i-pause { display: block; }

.hero__bar {
  position: absolute;
  left: calc(36 * var(--u)); right: calc(32 * var(--u));
  top: calc(302 * var(--u));
  height: 18px; margin-top: -9px;
  cursor: pointer;
}
.hero__bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px; background: var(--stone);
}
.hero__fill {
  position: absolute; left: 0; top: 50%;
  height: 2px; margin-top: -1px; width: var(--p, 82%);
  background: #fff;
}
.hero__knob {
  position: absolute; top: 50%; left: var(--p, 82%);
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  min-width: 10px; min-height: 10px;
  border-radius: 50%; background: var(--stone);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease);
}
.hero__bar:hover .hero__knob { transform: translate(-50%, -50%) scale(1.5); }

/* Intro columns */
.intro {
  display: grid;
  grid-template-columns: calc(470 * var(--u)) calc(460 * var(--u));
  justify-content: space-between;
  padding: calc(38 * var(--u)) calc(30 * var(--u)) 0 calc(37 * var(--u));
}
.intro .body-copy:last-child { margin-right: calc(4 * var(--u)); }

/* Hidden Royale */
.royale {
  position: relative;
  margin-top: calc(66 * var(--u));
  height: calc(640 * var(--u));
}
.royale__frame {
  position: absolute;
  left: calc(71 * var(--u)); top: 0;
  width: calc(434 * var(--u)); height: calc(620 * var(--u));
  overflow: hidden;
}
.royale__frame > img { width: 100%; height: 100%; object-fit: cover; }
.royale__inset {
  position: absolute;
  left: calc(50 * var(--u)); top: calc(37 * var(--u));
  width: calc(333 * var(--u)); height: calc(460 * var(--u));
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(40, 20, 10, .18);
}
.royale__inset img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.4s var(--ease); }
.royale__inset:hover img { transform: scale(1.05); }
.paperclip {
  position: absolute;
  left: calc(339 * var(--u)); top: calc(-61 * var(--u));
  width: calc(162 * var(--u));
  transform-origin: 70% 20%;
  z-index: 3;
  pointer-events: auto;
  transition: transform .6s var(--ease);
}
.paperclip:hover { animation: wiggle .8s var(--ease); }
@keyframes wiggle {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  55% { transform: rotate(5deg); }
  80% { transform: rotate(-2deg); }
}
.royale__head {
  position: absolute;
  left: calc(519 * var(--u)); top: calc(86 * var(--u));
  margin: 0;
  font-family: var(--f-nav);
  font-weight: 400;
  font-size: calc(27 * var(--u));
  line-height: 1.07;
  color: var(--olive);
}
.royale__head .roy {
  font-family: var(--f-display);
  font-size: calc(36 * var(--u));
  letter-spacing: .01em;
}
.royale__copy {
  position: absolute;
  left: calc(519 * var(--u)); top: calc(443 * var(--u));
  width: calc(470 * var(--u));
}
.royale__copy p + p { margin-top: calc(19 * var(--u)); }

/* Map band */
.mapband {
  position: relative;
  margin-top: calc(96 * var(--u));
  height: calc(555 * var(--u));
  background: var(--olive);
  overflow: hidden;
}
.mapband::before, .mapband::after { content: none; }
.map {
  position: absolute;
  left: calc(250 * var(--u)); top: calc(14 * var(--u));
  width: calc(584 * var(--u)); height: calc(523 * var(--u));
}
.map > img { width: 100%; height: 100%; }
.map__copy {
  position: absolute;
  left: calc(88 * var(--u)); top: calc(234 * var(--u));
  width: calc(330 * var(--u));
}
.map__pin {
  position: absolute;
  left: 44.07%; top: 76.7%;
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  min-width: 9px; min-height: 9px;
  border-radius: 50%;
  background: var(--olive);
  transform: translate(-50%, -50%);
}
.map__pin::before, .map__pin::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--olive);
  animation: ripple 2.6s var(--ease) infinite;
}
.map__pin::after { animation-delay: 1.3s; }
@keyframes ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }
.map__label {
  position: absolute; left: 140%; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-foot); font-size: calc(13 * var(--u)); letter-spacing: .06em;
  color: var(--olive); white-space: nowrap;
  opacity: 0; transition: opacity .4s, transform .4s var(--ease);
}
.map__pin:hover .map__label, .map.in .map__label { opacity: 1; }

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: calc(257 * var(--u)) calc(251 * var(--u)) calc(288 * var(--u)) calc(267 * var(--u));
  gap: calc(16 * var(--u));
  margin-top: calc(38 * var(--u));
  height: calc(359 * var(--u));
}
.gallery figure { margin: 0; overflow: hidden; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .8s; }
.gallery figure:nth-child(1) img { object-position: 0% 20%; }
.gallery figure:nth-child(2) img { object-position: 60% 50%; }
.gallery figure:nth-child(3) img { object-position: 50% 60%; }
.gallery figure:nth-child(4) img { object-position: 0% 50%; }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--f-foot); font-size: 11px; letter-spacing: .08em; color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s, transform .5s var(--ease);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.gallery figure:hover figcaption { opacity: 1; transform: none; }

/* Stone band: copy + envelope */
.stone {
  position: relative;
  margin-top: calc(29 * var(--u));
  background: var(--stone);
  padding: calc(19 * var(--u)) 0 calc(126 * var(--u));
}
.stone__cols {
  display: grid;
  grid-template-columns: calc(360 * var(--u)) calc(360 * var(--u));
  column-gap: calc(64 * var(--u));
  padding-left: calc(38 * var(--u));
}
.envelope-wrap {
  position: relative;
  width: calc(579 * var(--u));
  margin: calc(66 * var(--u)) auto 0;
}
.envelope {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 579 / 410;
  perspective: 900px;
}
.envelope__letter {
  position: absolute;
  left: 7%; right: 7%; top: 8%; height: 84%;
  background: url("../assets/img/handmade-paper.jpg") center / cover;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  transform: translateY(0);
  transition: transform .9s var(--ease);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(14 * var(--u));
  padding: 6%;
  z-index: 0;
}
.envelope__body {
  position: absolute; inset: 0;
  background: url("../assets/img/envelope-olive.jpg") center / 100% 100%;
  z-index: 1;
  transition: transform .9s var(--ease), filter .5s;
}
.envelope__body::after {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/img/envelope-red.jpg") center / 100% 100%;
  opacity: 0; transition: opacity .6s;
}
.envelope__tag {
  position: absolute;
  left: 50%; top: 45%;
  padding: .9% 3.2% 1.4%;
  background: var(--cream);
  font-family: var(--f-mast);
  font-weight: 500;
  font-size: calc(61 * var(--u));
  line-height: 1;
  color: var(--olive-2);
  text-align: center;
  transform: translate(-50%, -50%) rotate(-14.5deg) scaleX(var(--cx, .8));
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  z-index: 2;
  transition: transform .9s var(--ease);
  white-space: nowrap;
}
.fonts-itc .envelope__tag { --cx: 1; }
.envelope:hover .envelope__body::after { opacity: .0; }
.envelope:hover .envelope__tag { transform: translate(-50%, -58%) rotate(-10deg) scaleX(var(--cx, .8)); }
.envelope.is-open .envelope__letter { transform: translateY(-50%); z-index: 0; }
.envelope.is-open .envelope__body::after { opacity: 1; }
.envelope.is-open .envelope__tag { transform: translate(-50%, 120%) rotate(-4deg) scale(.8) scaleX(var(--cx, .8)); }
.letter__title { font-family: var(--f-script); font-size: calc(46 * var(--u)); color: #222; line-height: 1; }
.letter__form { display: flex; width: 100%; max-width: 360px; border-bottom: 1px solid var(--olive); }
.letter__form input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  font-family: var(--f-body); font-size: max(14px, calc(15 * var(--u))); color: var(--olive);
  padding: 8px 2px;
}
.letter__form input::placeholder { color: #8f8a7a; }
.letter__form button { font-family: var(--f-foot); font-size: 13px; color: var(--olive); padding: 0 4px; }
.letter__note { font-family: var(--f-foot); font-size: 12px; color: var(--olive-soft); min-height: 1em; }

.subscribe {
  display: block;
  margin: calc(32 * var(--u)) auto 0;
  font-family: var(--f-display);
  font-size: calc(36 * var(--u));
  color: var(--olive);
  letter-spacing: .01em;
  position: relative;
}
.subscribe::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
.subscribe:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Footer ---------- */
.footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: calc(116 * var(--u)) calc(23 * var(--u)) calc(70 * var(--u)) calc(26 * var(--u));
  background: var(--white);
}
.footer__links a {
  display: block;
  font-family: var(--f-nav);
  font-size: calc(27 * var(--u));
  line-height: calc(33 * var(--u));
  color: var(--ink);
  transition: color .3s, transform .5s var(--ease);
  width: max-content;
}
.footer__links a:hover { color: var(--olive); transform: translateX(8px); }
.footer__info {
  width: calc(430 * var(--u));
  padding-top: calc(4 * var(--u));
  font-family: var(--f-foot);
  color: var(--ink-2);
}
.footer__addr { font-size: calc(21 * var(--u)); line-height: calc(31 * var(--u)); padding-left: calc(7 * var(--u)); }
.footer__tel { display: flex; gap: calc(28 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(22.4 * var(--u)); }
.footer__tel a:hover { color: var(--olive); }

/* =========================================================
   VOLUME PAGE
   ========================================================= */
.volume { --mast-h: calc(287 * var(--u)); --nav-top: calc(209 * var(--u)); }

.vol-hero {
  position: relative;
  height: calc(500 * var(--u));
}
.vol-hero__copy {
  position: absolute;
  left: calc(104 * var(--u)); top: calc(81 * var(--u));
  width: calc(310 * var(--u));
}
.vol-hero__copy p + p { margin-top: calc(41 * var(--u)); }
.vol-hero__sign { margin-top: calc(24 * var(--u)) !important; font-family: var(--f-body); letter-spacing: .02em; }

.vol-photo {
  position: absolute;
  left: calc(598 * var(--u)); top: calc(34 * var(--u));
  width: calc(432 * var(--u)); height: calc(531 * var(--u));
  overflow: hidden;
}
.vol-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1) contrast(1.02); }
.vol-paper {
  position: absolute;
  left: calc(645 * var(--u)); top: calc(46 * var(--u));
  width: calc(404 * var(--u)); height: calc(470 * var(--u));
  background: url("../assets/img/handmade-paper.jpg") center / cover;
  opacity: .62;
  transform: rotate(-12deg) translate3d(0, var(--py, 0px), 0);
  transform-origin: 50% 50%;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  mix-blend-mode: normal;
  will-change: transform;
}
.vol-paper::after { content: ""; position: absolute; inset: 0; background: #c9c7b6; mix-blend-mode: multiply; opacity: .5; }
.vol-card {
  position: absolute;
  left: calc(696 * var(--u)); top: 0;
  width: calc(253 * var(--u)); height: calc(305 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(1.5px) saturate(.9);
  -webkit-backdrop-filter: blur(1.5px) saturate(.9);
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease);
  z-index: 2;
}
.vol-card span {
  font-family: var(--f-nav);
  font-size: calc(27 * var(--u));
  color: var(--olive);
  white-space: nowrap;
  letter-spacing: .005em;
}

.script-line {
  position: relative; z-index: 3;
  margin: 0;
  padding-left: calc(175 * var(--u));
  font-family: var(--f-script);
  font-weight: 400;
  font-size: calc(65 * var(--u));
  line-height: 1.2;
  color: #000;
  white-space: nowrap;
}
.script-line span { display: inline-block; clip-path: inset(-30% 100% -40% -5%); transition: clip-path 2.4s cubic-bezier(.45,.05,.3,1) .2s; padding: 0 .1em; }
.script-line.in span { clip-path: inset(-30% -5% -40% -5%); }

.vol-feature {
  position: relative;
  width: calc(736 * var(--u));
  height: calc(981 * var(--u));
  margin: calc(165 * var(--u)) 0 0 calc(192 * var(--u));
  overflow: hidden;
}
.vol-feature img { width: 100%; height: 115%; object-fit: cover; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.vol-outro {
  max-width: calc(930 * var(--u));
  margin: calc(80 * var(--u)) auto 0;
  text-align: center;
  font-size: calc(20 * var(--u));
  line-height: 1.2;
}

/* =========================================================
   Cursor — dot + trailing dots
   ========================================================= */
.cursor, .cursor-trail { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  .cursor, .cursor-trail { display: block; }
  .cursor {
    position: fixed; left: 0; top: 0; z-index: 9999;
    width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--olive);
    pointer-events: none;
    transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease),
                background-color .35s, border-color .35s, opacity .3s;
    border: 1px solid transparent;
    display: grid; place-items: center;
    will-change: transform;
  }
  .cursor__label {
    font-family: var(--f-foot); font-size: 11px; letter-spacing: .08em; color: var(--cream);
    opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s var(--ease);
    white-space: nowrap;
  }
  .cursor.is-link { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
  .cursor.is-media {
    width: 74px; height: 74px; margin: -37px 0 0 -37px;
    background: rgba(85,83,38,.82);
    backdrop-filter: blur(2px);
  }
  .cursor.is-media .cursor__label { opacity: 1; transform: none; }
  .cursor.is-text { width: 4px; height: 26px; margin: -13px 0 0 -2px; border-radius: 2px; }
  .cursor.is-down { transform-origin: center; }
  .cursor.is-hidden { opacity: 0; }
  .cursor-trail {
    position: fixed; left: 0; top: 0; z-index: 9998;
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--olive);
    pointer-events: none;
    will-change: transform, opacity;
  }
  .cursor-burst {
    position: fixed; z-index: 9997; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
    border-radius: 50%; background: var(--olive); pointer-events: none;
    animation: burst .7s var(--ease) forwards;
  }
  @keyframes burst { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-img { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-io); }
.reveal-img.in { clip-path: inset(0 0 0 0); }
.mast-title .char { transform: translateY(105%); opacity: 0; transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); }
.loaded .mast-title .char { transform: none; opacity: 1; }

/* ---------- Page transition ---------- */
.veil {
  position: fixed; inset: 0; z-index: 9990; background: var(--cream);
  pointer-events: none;
  transform: scaleY(1); transform-origin: top;
  transition: transform .9s var(--ease-io);
}
.loaded .veil { transform: scaleY(0); }
.leaving .veil { transform: scaleY(1); transform-origin: bottom; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 760px) {
  :root { --u: calc(100vw / 390); }  /* 1u ≈ 1px on a 390px phone */

  .page::before { height: calc(560 * var(--u)); }
  .body-copy { font-size: 14px; line-height: 1.45; }

  .masthead { height: auto; padding: 18px 16px 0; }
  .mast-title { position: static; font-size: calc(66 * var(--u)); line-height: .95; }
  .clock { top: 22px; right: 16px; }
  .clock__time { font-size: calc(17 * var(--u)); }
  .clock__vol { font-size: 9px; margin-top: 4px; }
  .nav {
    position: relative; top: auto; right: auto;
    margin-top: 16px; padding-bottom: 26px;
    justify-content: space-between;
  }
  .nav a { font-size: 16px; padding: 0; }
  .nav a + a { margin-left: 0 !important; }
  .nav__dot { width: 7px; height: 7px; margin-top: 3px; top: calc(100% - 26px); }

  .border-line { top: 230px; height: 900px; opacity: .45; background-size: 220% 100%; background-position: 30% 0; }

  /* home */
  .hero { margin: 0 16px; height: auto; aspect-ratio: 4 / 3; }
  .hero__bar { left: 18px; right: 18px; top: auto; bottom: 16px; }
  .intro { grid-template-columns: 1fr; row-gap: 14px; padding: 22px 16px 0; }

  .royale { height: auto; margin-top: 70px; padding: 0 16px; }
  .royale__frame { position: relative; left: 0; width: 100%; height: auto; aspect-ratio: 434 / 620; }
  .royale__inset { left: 11.5%; top: 6%; width: 76.7%; height: 74%; }
  .paperclip { left: auto; right: 2%; top: -44px; width: 92px; }
  .royale__head { position: static; margin: 26px 0 0; font-size: 22px; }
  .royale__head .roy { font-size: 29px; }
  .royale__copy { position: static; width: auto; margin-top: 18px; }
  .royale__copy p + p { margin-top: 14px; }

  .mapband { height: auto; margin-top: 56px; padding: 28px 16px 34px; }
  .map { position: relative; left: 0; top: 0; width: 92%; height: auto; aspect-ratio: 584 / 523; margin: 0 auto; }
  .map__copy { position: static; width: auto; margin-top: 22px; color: var(--stone); }
  .map__label { font-size: 11px; }

  .gallery {
    display: flex; height: 64vw; gap: 10px; margin-top: 28px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery figure { flex: 0 0 66%; scroll-snap-align: center; }
  .gallery figcaption { opacity: 1; transform: none; }

  .stone { margin-top: 26px; padding: 24px 16px 60px; }
  .stone__cols { grid-template-columns: 1fr; row-gap: 14px; padding: 0; }
  .envelope-wrap { width: 100%; max-width: 380px; margin-top: 110px; }
  .envelope__tag { font-size: calc(34 * var(--u)); }
  .letter__title { font-size: 26px; }
  .subscribe { font-size: 24px; margin-top: 26px; }

  .footer { flex-direction: column; gap: 34px; padding: 54px 16px 46px; }
  .footer__links a { font-size: 22px; line-height: 30px; }
  .footer__info { width: auto; }
  .footer__addr { font-size: 14px; line-height: 1.6; padding: 0; }
  .footer__tel { flex-wrap: wrap; gap: 6px 22px; font-size: 14px; margin-top: 12px; }

  /* volume */
  .vol-hero { height: auto; display: flex; flex-direction: column; padding: 0 16px; }
  .vol-hero__copy { position: static; width: auto; order: 2; margin-top: 46px; }
  .vol-hero__copy p + p { margin-top: 18px; }
  .vol-stage { position: relative; order: 1; height: calc(430 * var(--u)); margin-top: 6px; }
  .vol-photo { left: 6%; top: 52px; width: 76%; height: calc(370 * var(--u)); }
  .vol-paper { left: 16%; top: 62px; width: 72%; height: calc(320 * var(--u)); }
  .vol-card { left: 20%; top: 0; width: 56%; height: calc(210 * var(--u)); border-radius: 12px; padding: 10px 14px; }
  .vol-card span { font-size: calc(19 * var(--u)); }
  .script-line { padding: 0 12px; margin-top: 40px; font-size: calc(27 * var(--u)); text-align: center; }
  .vol-feature { width: auto; height: calc(470 * var(--u)); margin: 56px 16px 0; }
  .vol-outro { font-size: 14px; margin: 40px 16px 0; text-align: left; }
}

/* Mid-size: keep the artboard but stop text getting too small */
@media (min-width: 761px) and (max-width: 1000px) {
  .body-copy { font-size: max(13px, calc(17 * var(--u))); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-img, .mast-title .char { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .border-line { clip-path: none; }
  .script-line span { clip-path: none; }
}