/* founder.mhatreinnovations.com
   A biodata, reimagined. See DESIGN.md for the direction this serves. */

/* ------------------------------------------------------------- tokens */
:root {
  --ink: #0C0D11;
  --paper: #E9E2D0;
  --sindoor: #D8321C;
  --haldi: #E9A422;
  --ash: #7A7F8A;

  /* derived, never new hues: the five above at other opacities */
  --paper-70: rgba(233, 226, 208, .70);
  --paper-40: rgba(233, 226, 208, .40);
  --paper-12: rgba(233, 226, 208, .12);
  --paper-06: rgba(233, 226, 208, .06);
  --ink-80: rgba(12, 13, 17, .80);

  --display: "Instrument Serif", "Mukta", Georgia, serif;
  --sans: "Instrument Sans", "Mukta", system-ui, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --deva: "Mukta", "Noto Sans Devanagari", "Nirmala UI", sans-serif;

  /* 1.25 modular scale */
  --s-1: .8rem;
  --s0: 1rem;
  --s1: 1.25rem;
  --s2: 1.5625rem;
  --s3: 1.953rem;
  --s4: 2.441rem;
  --s5: 3.052rem;
  --s6: 3.815rem;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 34rem;
  --scene-pad: clamp(6rem, 14vh, 11rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* -------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--s0);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, picture { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--haldi); }

:focus-visible { outline: 2px solid var(--sindoor); outline-offset: 4px; border-radius: 2px; }
.skip {
  position: fixed; left: var(--gutter); top: -4rem; z-index: 50;
  padding: .6rem 1rem; background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: var(--s-1);
}
.skip:focus { top: var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------- the sheet */
/* The WebGL surface draws the paper on desktop. Below that, or when the
   user has asked for less motion, the same paper is a still CSS texture:
   two layered noise gradients on a dark warm ground. */
.sheet {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  display: none;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(233, 226, 208, .07), transparent 60%),
    radial-gradient(90% 70% at 50% 100%, rgba(12, 13, 17, .9), transparent 70%),
    #14151B;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .55;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, transparent 0 2px, rgba(233,226,208,.025) 2px 3px),
    repeating-radial-gradient(circle at 71% 64%, transparent 0 3px, rgba(0,0,0,.05) 3px 4px);
  mix-blend-mode: overlay;
}
.has-gl body::before, .has-gl body::after { display: none; }
.has-gl .sheet { display: block; }

main, header, footer { position: relative; z-index: 1; }

/* ----------------------------------------------------------- type */
.mono {
  font-family: var(--mono);
  font-size: var(--s-1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ash);
}
.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: min(clamp(2.2rem, 1.2rem + 4.2vw, 5.2rem), 9vh);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 18ch;
  text-wrap: balance;
}
.num { font-variant-numeric: tabular-nums lining-nums; }
.prose { max-width: var(--measure); font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.6; }
.prose p + p { margin-top: 1.2em; }

/* what hangs in the right column of a field: a mark, never a second
   paragraph. Mumbai in Mukta, hung off the bottom right corner. */
/* The place, set as a specimen rather than washed in behind the text: the
   word at display size in full paper, its gloss in mono under a vermilion
   rule. It reads as a plate on the page, which is what a biodata does with
   a place name. */
.place { display: none; margin: 0; }
@media (min-width: 1024px) {
  .place { display: block; text-align: right; }
  .place-word {
    font-family: var(--deva); font-weight: 400; line-height: .95;
    font-size: min(26vw, 48vh);
    color: var(--paper);
    letter-spacing: -.02em; white-space: nowrap; margin: 0;
  }
  .place-gloss {
    display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
    margin-top: 1rem; color: var(--paper-70);
  }
  .place-rule { display: block; width: 4rem; height: 1px; background: var(--sindoor); }
  .scene-born { overflow: hidden; }
  .scene.scene-born > .aside { align-self: center; }
  /* the bio runs as two short columns rather than one narrow one: it keeps a
     readable measure and still reaches across the sheet to meet the plate */
  .scene-born .display { max-width: 24ch; }
  .scene-born .prose { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .scene-born .prose p + p { margin-top: 0; }
}

/* placeholder: what he still has to give me. Loud on purpose. */
.ph {
  color: var(--haldi);
  font-style: normal;
  border-bottom: 1px dashed rgba(233, 164, 34, .55);
}

/* the biodata field label: mono word, vermilion rule */
.field {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.2rem, 3vh, 2.4rem);
}
.field .mono { color: var(--paper-70); }
.rule {
  display: block; height: 1px; flex: 0 0 auto; width: 3.5rem;
  background: var(--sindoor);
  transform-origin: left center;
}

/* ------------------------------------------------------------- bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  mix-blend-mode: difference;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar-mark { display: inline-flex; align-items: center; gap: .8rem; }
.bar-mark .mono { color: var(--paper); }
.bar-rule { display: block; width: 2rem; height: 1px; background: var(--paper); }
.bar-nav { display: none; gap: 1.6rem; margin-left: auto; }
.bar-nav a {
  font-family: var(--mono); font-size: var(--s-1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); opacity: .65;
  transition: opacity .25s var(--ease);
}
.bar-nav a:hover, .bar-nav a[aria-current] { opacity: 1; }
@media (min-width: 1024px) { .bar-nav { display: flex; } }

/* ------------------------------------------------------------ hero */
.hero {
  min-height: 100svh;
  padding: clamp(5rem, 10vh, 8rem) var(--gutter) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "name"
    "line"
    "portrait"
    "cue";
  align-content: start;
  gap: 0;
}
.hero-line a { white-space: nowrap; }
/* one sentence per line, but not with a <br>: that fires on the phone too
   and grows the hero past the viewport */
@media (min-width: 1024px) { .hero-sentence { display: block; } }
.name {
  grid-area: name;
  font-family: var(--display);
  font-weight: 400;
  /* sized by width, then capped by height, so the whole cover fits one screen */
  font-size: min(clamp(4rem, 2rem + 12vw, 13rem), 21vh);
  line-height: .9;
  letter-spacing: -.03em;
  display: flex; flex-direction: column;
}
/* Latin at the gutter, Devanagari at the far edge, one baseline. The line
   fills the panel because it carries two words, not because a typeface has
   been stretched to cover the distance. */
.name-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.name-latin { display: block; }
.name-deva {
  font-family: var(--deva); font-weight: 400;
  font-size: .44em; line-height: 1;
  letter-spacing: -.01em; color: var(--paper-70);
  white-space: nowrap;
}
.hero > * { min-width: 0; }
.hero-line {
  grid-area: line;
  margin-top: clamp(1rem, 2.5vh, 2rem);
  max-width: min(28rem, 100%);
  font-size: clamp(1rem, .95rem + .4vw, 1.25rem);
  color: var(--paper-70);
}
.hero-line a { color: var(--paper); border-bottom: 1px solid var(--sindoor); }
.portrait {
  grid-area: portrait;
  margin-top: 3rem;
  width: min(78vw, 22rem);
}
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait figcaption { margin-top: .8rem; }
.cue {
  grid-area: cue;
  margin-top: clamp(1.5rem, 4vh, 3rem);
  display: inline-flex; align-items: center; gap: 1rem;
}
.cue-line { display: block; width: 1px; height: 3rem; background: var(--paper-40); transform-origin: top; }

@media (min-width: 1024px) {
  /* A split sheet. The print runs floor to ceiling down the right and bleeds
     past the padding on three sides, so half the cover IS the photograph and
     there is no middle band left to sit empty. The name owns the other half
     and grows into it. */
  .hero {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "name" "line" "cue";
    /* the right side of the sheet is reserved for the print, which is
       positioned rather than placed: a grid item with negative margins made
       the cover 922px tall against an 860px screen */
    padding-right: calc(42vw + clamp(2.5rem, 5vw, 5rem));
    align-content: start;
  }
  .name {
    align-self: start;
    /* tight tracking so the letterforms sit close, and a bigger cap so the
       block stretches down the panel. Height budget checked: two lines plus
       the Devanagari, the roles and the cue still fit one screen at 768. */
    font-size: min(clamp(4rem, 2rem + 13vw, 14rem), 27vh);
    letter-spacing: -.035em;
    line-height: .95;
    margin-bottom: .12em;
  }
  /* a taller screen can carry a bigger name; 27vh pushed the cover to 775px
     against a 768px screen, so the growth is gated on the height that can
     actually take it */
  @media (min-height: 840px) {
    .name { font-size: min(clamp(4rem, 2rem + 13vw, 14rem), 29vh); }
  }
  .cue { align-self: end; margin-top: 0; }

  /* full bleed: pull the print out past the hero's own padding on the top,
     the right and the bottom. A definite height, not a percentage, so the
     image has something real to resolve against. */
  .portrait {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 42vw; margin: 0; height: auto;
    display: block;
  }
  /* the nav sits over the print, and the print is bright at the top: a
     scrim of ink at alpha keeps it readable without a new colour */
  .portrait::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 34%;
    background: linear-gradient(to bottom, rgba(12, 13, 17, .92), rgba(12, 13, 17, 0));
    z-index: 1; pointer-events: none;
  }
  .portrait picture { display: block; height: 100%; }
  .portrait img {
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    object-fit: cover; object-position: 50% 30%;
  }
  /* the caption sits on the print rather than under it, since the print now
     runs to the edge of the sheet */
  .portrait figcaption {
    position: absolute; left: 1.4rem; bottom: 1.2rem; margin: 0;
    color: var(--paper); mix-blend-mode: difference;
  }
}

/* ----------------------------------------------------------- scenes */
.scene {
  padding: var(--scene-pad) var(--gutter);
  border-top: 1px solid var(--paper-06);
}
/* On a desktop each field is a page: one screen tall, content centred, so
   the reader lands on a whole field rather than a half of one. */
@media (min-width: 1024px) {
  .scene {
    min-height: 100svh;
    /* the top never sits under the fixed bar, whatever the screen height,
       and it is the same top in every field, so the labels line up */
    padding: clamp(6rem, 12vh, 8rem) var(--gutter) clamp(3rem, 6vh, 5rem);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: clamp(3rem, 5vw, 6rem);
    align-content: start;
  }
  .scene > * { grid-column: 1; min-width: 0; }
  .scene > .field { grid-column: 1 / -1; }
  /* whatever hangs in the right column rests on the bottom padding line */
  .scene > .aside { grid-column: 2; grid-row: 2 / -1; align-self: end; justify-self: end; }
}
.scene-grid {
  margin-top: clamp(2rem, 6vh, 4rem);
  display: grid; gap: 3rem;
}
@media (min-width: 1024px) {
  .scene-grid { margin-top: 2.4rem; display: block; }
}
.photo img { width: 100%; object-fit: cover; }
.photo figcaption { margin-top: .8rem; }
.photo-born img { aspect-ratio: 4 / 3; }

/* education */
.edu { margin-top: clamp(2rem, 5vh, 4rem); border-top: 1px solid var(--paper-12); }
.edu-row {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.2rem 1.5rem;
  padding: clamp(1.2rem, 2.6vh, 2rem) 0;
  border-bottom: 1px solid var(--paper-12);
  position: relative;
}
.edu-row::before {
  /* the marker: a vermilion tick that lights when the row is current */
  content: ""; position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 1px; background: var(--sindoor);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.edu-row.is-current::before { transform: scaleX(1); }
.edu-year { padding-top: .35em; }
.edu-name { font-family: var(--display); font-weight: 400; font-size: var(--s3); line-height: 1.05; letter-spacing: -.01em; }
.edu-meta { margin-top: .4rem; color: var(--paper-70); }
.edu-note { margin-top: .8rem; max-width: var(--measure); color: var(--paper-70); }
/* one body size for every field, so nothing reads as a different document */
.edu-meta, .edu-note, .venture-desc { font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.6; }
@media (min-width: 1024px) {
  /* this field alone flips to 5/7 so the notes keep a readable measure */
  .scene-edu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .edu { grid-column: 2; grid-row: 2 / -1; align-self: start; margin-top: .55rem; }
  .edu-row { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1.5rem; }
  .edu-name { font-size: var(--s4); }
}
@media (max-width: 1023px) {
  .edu-row { grid-template-columns: 1fr; gap: .35rem 0; }
  .edu-year { padding-top: 0; }
}

/* occupation */
.ventures {
  margin-top: clamp(2rem, 5vh, 4rem);
  display: grid; gap: 1.5rem;
}
@media (min-width: 1024px) {
  .ventures { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 6rem); margin-top: 2.4rem; }
  .venture-desc { max-width: 38rem; }
}
.venture {
  position: relative;
  padding: clamp(1.4rem, 3vh, 2.2rem) clamp(1.4rem, 2.6vw, 2.2rem);
  border: 1px solid var(--paper-12);
  background: rgba(12, 13, 17, .35);
  transform-style: preserve-3d;
  transition: border-color .3s var(--ease);
}
.venture:hover { border-color: var(--paper-40); }
.venture-kicker { margin-bottom: 1.4rem; }
.venture-name { font-family: var(--display); font-weight: 400; font-size: var(--s5); line-height: 1; letter-spacing: -.02em; }
.venture-desc { margin-top: 1.2rem; max-width: 34rem; color: var(--paper-70); }
.venture-link { margin-top: 1.6rem; }
.venture-link a { font-family: var(--mono); font-size: var(--s-1); letter-spacing: .08em; border-bottom: 1px solid var(--sindoor); }
.work-before { margin-top: clamp(3rem, 8vh, 5rem); }
.work-before-label { display: block; margin-bottom: .8rem; }

/* interests */
.scene-interests { position: relative; overflow: hidden; }
.words { margin-top: clamp(1rem, 3vh, 2rem); }
.word {
  font-family: var(--display);
  font-size: min(clamp(2.6rem, 1.4rem + 7vw, 8rem), 12vh);
  line-height: 1.05;
  letter-spacing: -.02em;
  padding: .12em 0;
  border-bottom: 1px solid var(--paper-12);
  color: var(--paper-70);
  transition: color .35s var(--ease);
  cursor: default;
}
.word.is-live { color: var(--paper); }
.words-hint { display: none; margin-top: 1.4rem; }
.word-photo {
  position: absolute; z-index: -1; inset: 0;
  opacity: 0; pointer-events: none;
}
.word-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .32; }
@media (min-width: 1024px) {
  /* the words keep column one, so a hairline stops at the column edge
     instead of running on under the print */
  .word { font-size: min(clamp(2.6rem, 1.4rem + 7vw, 8rem), 12vh, 5.4vw); white-space: nowrap; }
  .words-hint { display: block; }
  /* a grid item, not an absolute layer, so it lands on the same bottom
     right corner every other field hangs things from */
  .word-photo {
    position: static; z-index: auto; inset: auto;
    grid-column: 2; grid-row: 2 / -1; align-self: end; justify-self: end;
    width: auto; height: 62vh; aspect-ratio: 4 / 5;
  }
  .word-photo img { opacity: .8; }
}

/* photographs */
/* Phone: a tight two-column grid, every frame the same 4:5, the first one
   full width. No captions in the grid; it reads as a contact sheet. */
.gallery { margin-top: clamp(1.5rem, 4vh, 3rem); }
.track { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.shot:first-child { grid-column: 1 / -1; }
/* the 4:5 crop lives on the wrapper, never on the image itself: an image
   with its ratio overridden has no width until it loads, and the desktop
   track measures itself before lazy images arrive */
.shot picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot figcaption { display: none; }
.shot:last-child { grid-column: 1 / -1; }
.shot:first-child figcaption, .shot:last-child figcaption { display: block; margin-top: .6rem; }

.gallery-bar {
  display: none;
  margin-top: clamp(1.6rem, 4vh, 3rem);
  align-items: baseline; gap: 1.5rem;
}
.gallery-count { color: var(--paper); font-family: var(--display); font-size: var(--s2); letter-spacing: 0; text-transform: none; }
.gallery-count .num { display: inline-block; min-width: 1.3em; }
.gallery-cap { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--paper-70); }
.gallery-progress { display: block; width: 8rem; height: 1px; background: var(--paper-12); overflow: hidden; }
.gallery-progress span { display: block; height: 100%; width: 100%; background: var(--sindoor); transform: scaleX(0); transform-origin: left; }

/* Desktop: one aligned row, every frame the same height, sliding sideways
   under a pin. The bar above counts and captions. */
@media (min-width: 1024px) {
  /* a definite height, not just a floor: the frames are sized height 100%,
     and a percentage chain with no definite ancestor falls back to the
     image intrinsic height, which grew this field to 1682px the moment the
     photographs finished loading */
  .scene-gallery { height: 100svh; grid-template-rows: auto auto minmax(0, 1fr); padding-bottom: clamp(2rem, 4vh, 3rem); }
  .scene-gallery > .gallery-head, .scene-gallery > .gallery { grid-column: 1 / -1; }
  .gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; }
  .gallery-head .display { max-width: 18ch; }
  .gallery-bar { display: flex; flex: 0 1 48rem; margin: 0 0 .4rem; }
  /* the frames take the whole remaining row, so the field is one screen by
     construction instead of by a guess at the viewport height. No padding
     on the track: at full travel the last frame lands on the gutter line. */
  .gallery { min-height: 0; height: 100%; overflow: hidden; margin-top: 1.5rem; }
  .track { height: 100%; display: flex; gap: 2rem; align-items: stretch; width: max-content; }
  .shot { flex: 0 0 auto; height: 100%; }
  .shot:first-child, .shot:last-child { grid-column: auto; }
  /* overflow on the figure keeps the scale tween out of the 2rem gaps */
  .shot figure { height: 100%; overflow: hidden; }
  .shot picture { height: 100%; max-width: none; aspect-ratio: auto; overflow: visible; }
  .shot img { height: 100%; width: auto; max-width: none; object-fit: cover; }
  /* These three selectors, not one: the phone rule .shot:first-child
     figcaption is 0,2,1 and beat a bare .shot figcaption at 0,1,1 from
     inside this media query. The first frame was 507px wide around a 348px
     photograph because its caption set the width. */
  .shot figcaption,
  .shot:first-child figcaption,
  .shot:last-child figcaption { display: none; }
}

/* references */
/* Desktop: the contacts on the left, the form on the right, one screen. */
.refs-grid { display: grid; gap: clamp(1.5rem, 4vh, 3rem); }
@media (min-width: 1024px) {
  .refs-grid {
    grid-column: 1 / -1; margin-top: 2.4rem;
    grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 8rem); align-items: start;
  }
  .refs-grid .refs { margin-top: 0; }
  .refs-grid .enquiry { margin-top: 0; max-width: none; }
  .refs li { grid-template-columns: 9rem 1fr; column-gap: 1.5rem; }
  /* the rule rests on the same bottom line the other fields hang from */
  .scene-refs > .handover { grid-column: 1 / -1; grid-row: 5; align-self: end; margin-top: clamp(2rem, 6vh, 4rem); }
}
@media (max-width: 1023px) {
  .refs li { grid-template-columns: 1fr; gap: .2rem; }
  .handover-text { font-size: var(--s1); }
}
.refs { margin-top: clamp(1.8rem, 4vh, 3rem); border-top: 1px solid var(--paper-12); }
.refs li {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem;
  padding: clamp(.8rem, 1.6vh, 1.3rem) 0; border-bottom: 1px solid var(--paper-12);
  font-size: clamp(1.05rem, 1rem + .6vw, 1.5rem);
}
.refs li > :last-child { min-width: 0; overflow-wrap: anywhere; }
.refs a { border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); }
.refs a:hover { border-color: var(--sindoor); }

/* footer */
.foot {
  padding: 3rem var(--gutter) 2.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  border-top: 1px solid var(--paper-06);
}

/* ---------------------------------------------------------- bookmark */
/* The margin knows the year and the place of whatever is on screen. */
.mark {
  display: none; align-items: baseline; gap: .7rem;
  margin-left: 2.4rem;
  pointer-events: none;
}
.mark-year {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--paper);
  display: inline-block;
  overflow: hidden;
  height: 1em;
  min-width: 2.6em;
}
.mark-year span { display: inline-block; }
.mark-place { color: var(--paper); opacity: .6; font-size: .72rem; }
@media (min-width: 1024px) { .mark { display: inline-flex; } }

/* ---------------------------------------------------- photo develop */
/* A photograph arrives as a warm tint and settles into colour, the way a
   print comes up in the tray. Still state is the finished print. */
.motion .develop { filter: sepia(.55) contrast(.85) brightness(1.05) saturate(.6); }
.develop.is-developed { filter: none; transition: filter 1.4s var(--ease); }

/* --------------------------------------------------------- enquiry */
/* The form is written on the sheet, not boxed on top of it: a hairline
   under each answer, a mono label above, and the vermilion rule when a
   field is the one being filled. */
.enquiry {
  margin-top: clamp(1.2rem, 3vh, 2.2rem);
  max-width: 40rem;
}
.enquiry-row { display: grid; gap: 0 2.5rem; }
@media (min-width: 640px) { .enquiry-row { grid-template-columns: 1fr 1fr; } }
.enquiry-field { display: block; padding-top: clamp(.6rem, 1.4vh, 1rem); }
.enquiry-field > .mono { display: block; margin-bottom: .2rem; color: var(--ash); }
.enquiry-field input,
.enquiry-field textarea {
  display: block; width: 100%;
  background: transparent; border: 0; outline: 0;
  border-bottom: 1px solid var(--paper-40);
  padding: .45rem 0 .55rem;
  font-family: var(--sans); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  color: var(--paper);
  border-radius: 0;
  transition: border-color .25s var(--ease);
}
.enquiry-field textarea { resize: vertical; min-height: 3.2rem; line-height: 1.45; }
.enquiry-field input:focus,
.enquiry-field textarea:focus { border-bottom-color: var(--sindoor); }
.enquiry-field input:focus-visible,
.enquiry-field textarea:focus-visible { outline: 0; box-shadow: 0 1px 0 0 var(--sindoor); }
.enquiry-field.is-bad input { border-bottom-color: var(--sindoor); }
.enquiry-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-send {
  margin-top: clamp(1.2rem, 3vh, 2rem);
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}
/* Send is the word plus the same vermilion rule the field labels carry.
   The cream box was the last opaque object sitting on the sheet. */
.enquiry-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--paper);
  font-family: var(--display); font-size: var(--s2); line-height: 1;
  display: inline-flex; align-items: center; gap: 1rem;
}
.enquiry-btn-rule {
  display: block; width: 3.5rem; height: 1px;
  background: var(--sindoor);
  transform-origin: left center;
  transition: transform .5s var(--ease), background-color .3s var(--ease);
}
.enquiry-btn:hover .enquiry-btn-rule,
.enquiry-btn:focus-visible .enquiry-btn-rule { transform: scaleX(1.6); }
.enquiry-btn[disabled] { cursor: default; }
/* the rule carries the state: pulsing while it sends, long and marigold
   once it has gone, and the answers stay on the sheet either way */
.enquiry[data-state="sending"] .enquiry-btn-rule { animation: send-pulse .8s var(--ease) infinite alternate; }
.enquiry[data-state="sent"] .enquiry-field { opacity: .55; }
.enquiry[data-state="sent"] .enquiry-btn-rule { transform: scaleX(1.6); background: var(--haldi); }
@keyframes send-pulse { from { transform: scaleX(1); } to { transform: scaleX(1.6); } }
.enquiry-status { color: var(--paper-70); text-transform: none; letter-spacing: .04em; }
.enquiry-status.is-ok { color: var(--haldi); }
.enquiry-status.is-bad { color: var(--sindoor); }

/* --------------------------------------------------------- handover */
/* The vermilion rule turns and points at the business site. */
.handover {
  margin-top: clamp(4rem, 10vh, 7rem);
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.handover-rule {
  display: block; height: 1px; width: min(20rem, 40vw);
  background: var(--sindoor);
  transform-origin: left center;
}
.handover-text { font-family: var(--display); font-size: var(--s2); color: var(--paper-70); }
.handover-text a { color: var(--paper); border-bottom: 1px solid var(--sindoor); }
.motion .handover-rule { transform: scaleX(0); }

/* ------------------------------------------------------------ cursor */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--sindoor);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
}
.has-cursor .cursor { opacity: 1; }
.has-cursor a:hover ~ .cursor { transform: scale(2.4); }

/* ------------------------------------------------------ motion prep */
/* Elements the script will reveal start hidden ONLY when motion is on.
   The class is added by JS after it confirms it will run, so a page with
   no script, or reduced motion, is complete and visible immediately. */
.motion .reveal-lines .line { overflow: hidden; }
.motion .reveal-photo img { clip-path: inset(0 0 100% 0); }
.motion .rule { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}