/* ═══════════════════════════════════════════════════════════════════════
   sensuality.girijaregmi.com — one page, read from top to bottom

   Same hand as studio.girijaregmi.com — the two typefaces, the plates, the
   rising — but a different room. The studio is a bright morning with light
   coming through glass onto cream. This is later, and closer, and the light
   is coming through a body. So: the ground goes dark and warm, the plates
   stay lit, and the accent moves off gold onto madder.

   The page is one continuous descent rather than a set of pages, because
   the senses are not a menu. You do not pick one.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#2a1a14;
  --ink-soft:rgba(42,26,20,.8);
  --ink-faint:rgba(42,26,20,.52);
  --heat:#a83b26;             /* madder — this site's gold */
  --heat-soft:#c1653f;
  --line:rgba(168,59,38,.24);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad:clamp(1.4rem,5vw,4.5rem);
  --plate:linear-gradient(158deg,rgba(255,251,244,.955),rgba(253,240,224,.9));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{
  background:#24070a;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,canvas{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(168,59,38,.22)}

/* ═══════ the field ═══════
   #field is the breathing wrapper; the canvas inside it carries the scroll
   parallax. Two elements, because one cannot hold two transforms — and
   both are transforms, so neither costs a repaint. */
#field{
  position:fixed;left:50%;top:50%;z-index:0;pointer-events:none;
  width:124vw;height:140vh;margin:-70vh 0 0 -62vw;
  will-change:transform;
}
/* 140vh, not 118: twenty viewport-height percent of slack above and below,
   which is what the parallax spends. The first version was 118vh and the
   bottom edge of the field came into view a third of the way down the
   page — a hard black line across a picture with no edges in it. */
#field .field-img{
  width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.4s ease;
  animation:breathe 13s ease-in-out infinite;   /* a slow resting breath —
                                                   about four and a half a
                                                   minute, which is slower
                                                   than yours, and pulls
                                                   yours down toward it */
  will-change:transform;
}
body.field-ready #field .field-img{opacity:1}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}

/* a warm hold while the field is being drawn — never a white flash */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 28%,#7d2113,#3a0c0c 58%,#1d0507);
  transition:opacity 1.3s ease;
}
body.field-ready::before{opacity:0}

/* the bloom that leans toward the pointer */
#bloom{position:fixed;inset:-10%;z-index:2;pointer-events:none;will-change:transform}
#bloom i{
  position:absolute;display:block;border-radius:50%;
  opacity:var(--o,.18);
  transform:translateZ(0);
  animation:pulse var(--dur,44s) ease-in-out infinite;animation-delay:var(--d,0s);
  will-change:opacity;backface-visibility:hidden;
}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* phosphenes — the small lights that drift when you press your eyes shut.
   Nine of them, all opacity and transform, all on the compositor. */
#motes{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
#motes i{
  position:absolute;display:block;border-radius:50%;
  width:var(--s,10rem);height:var(--s,10rem);
  background:radial-gradient(closest-side,rgba(255,231,190,.5),rgba(255,190,120,.12) 52%,rgba(255,170,90,0));
  animation:drift var(--dur,60s) linear infinite;animation-delay:var(--d,0s);
  will-change:transform,opacity;
}
@keyframes drift{
  0%{transform:translate3d(0,12vh,0) scale(.85);opacity:0}
  14%{opacity:.9}
  86%{opacity:.7}
  100%{transform:translate3d(6vw,-84vh,0) scale(1.25);opacity:0}
}

/* the room falls away at the corners, the way vision does */
.room{
  position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(122% 96% at 48% 34%,rgba(24,4,6,0) 40%,rgba(24,4,6,.58) 100%);
}

/* ═══════ lit plates ═══════ */
.plate{
  position:relative;
  background:var(--plate);
  contain:paint;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 0 1px rgba(255,250,240,.6),
    inset 0 0 80px rgba(255,247,232,.8),
    0 0 0 1px rgba(168,59,38,.2),
    0 30px 70px -44px rgba(30,4,6,.92);
  border-radius:3px;
}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(158deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,0) 24%,
    rgba(255,255,255,0) 76%,rgba(255,243,224,.3) 100%);
}

/* ═══════ chrome ═══════ */
.page{position:relative;z-index:6}
main{position:relative;z-index:6}
section{position:relative}

header{
  position:fixed;top:0;left:0;right:0;z-index:8;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:clamp(1rem,2.2vw,1.6rem) var(--pad);
}
.mark,.nav{
  padding:.58rem 1.05rem;border-radius:2px;
  background:linear-gradient(157deg,rgba(255,251,244,.92),rgba(253,239,222,.82));
  box-shadow:inset 0 0 0 1px rgba(255,250,240,.8),0 0 0 1px rgba(168,59,38,.2),
    0 14px 30px -22px rgba(30,4,6,.8);
}
.mark{font-weight:400;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(42,26,20,.88);text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:clamp(.8rem,1.8vw,1.7rem)}
.nav a{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(42,26,20,.66);text-decoration:none;white-space:nowrap;
  transition:color .45s ease;
}
.nav a:hover,.nav a:focus-visible{color:var(--heat)}

/* the rail — where you are in the descent. It is the only navigation the
   page has, because a single page cannot have a menu without admitting it
   is really several pages. */
.rail{
  position:fixed;left:clamp(.9rem,2.2vw,1.9rem);top:50%;transform:translateY(-50%);
  z-index:8;display:flex;flex-direction:column;gap:.85rem;
}
.rail a{
  display:flex;align-items:center;gap:.7rem;
  font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,229,199,.42);text-decoration:none;
  transition:color .5s ease;
}
.rail a::before{
  content:"";flex:0 0 auto;width:.42rem;height:.42rem;border-radius:50%;
  background:rgba(255,214,170,.34);
  box-shadow:0 0 0 1px rgba(255,214,170,.2);
  transition:background .5s ease,box-shadow .5s ease,transform .5s ease;
}
.rail a:hover,.rail a:focus-visible{color:rgba(255,238,214,.94)}
.rail a[aria-current]{color:rgba(255,241,220,.98)}
.rail a[aria-current]::before{
  background:#ffd39a;transform:scale(1.35);
  box-shadow:0 0 0 1px rgba(255,211,154,.5),0 0 14px 2px rgba(255,178,96,.7);
}
.rail span{opacity:0;transform:translateX(-4px);transition:opacity .5s ease,transform .5s ease}
.rail:hover span,.rail a[aria-current] span{opacity:1;transform:none}
/* the break between the channels and the modes. It sits where a dot would
   and is not one, which is the only thing it has to say. */
.rail-turn{
  display:block;width:1px;height:.85rem;margin:.1rem 0 .1rem .2rem;
  background:linear-gradient(180deg,rgba(255,214,170,0),rgba(255,214,170,.42),rgba(255,214,170,0));
}

/* ═══════ typography ═══════ */
.eyebrow{font-size:.65rem;letter-spacing:.42em;text-transform:uppercase;color:var(--heat)}
h1,h2,h3{font-family:var(--serif);font-weight:300;color:#241209;line-height:1.08}
h1{font-size:clamp(3rem,8vw,5.6rem);letter-spacing:-.022em}
h2{font-size:clamp(1.75rem,3.4vw,2.8rem);line-height:1.14}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:400;line-height:1.2}
.serif-lede{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.32;color:#8a4326;
}
p{font-size:clamp(.93rem,1.02vw,1.02rem);line-height:1.88;color:var(--ink-soft)}
p + p{margin-top:1.1rem}
.rule{width:3rem;height:1px;margin:1.6rem 0;background:linear-gradient(90deg,var(--line),transparent)}
.rule.mid{margin-left:auto;margin-right:auto;
  background:linear-gradient(90deg,transparent,rgba(168,59,38,.5),transparent)}

.link{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding-bottom:.42rem;border-bottom:1px solid var(--line);
  transition:border-color .45s ease,color .45s ease,gap .45s ease;
}
.link:hover,.link:focus-visible{border-color:var(--heat);color:var(--heat);gap:1.2rem}

/* ═══════ layout ═══════ */
.wrap{max-width:74rem;margin:0 auto}
.narrow{max-width:38rem}

[data-rise]{opacity:0;transform:translateY(24px);
  transition:opacity 1.1s cubic-bezier(.2,.8,.25,1),transform 1.1s cubic-bezier(.2,.8,.25,1)}
[data-rise].in{opacity:1;transform:none}
[data-rise][data-delay="1"]{transition-delay:.1s}
[data-rise][data-delay="2"]{transition-delay:.2s}
[data-rise][data-delay="3"]{transition-delay:.3s}
[data-rise][data-delay="4"]{transition-delay:.4s}

.band{padding:clamp(4rem,10vh,8rem) var(--pad)}
.band.tight{padding-top:clamp(2rem,5vh,4rem)}
.head{max-width:42rem;margin:0 auto clamp(2rem,4vh,3rem);text-align:center;
  padding:clamp(1.7rem,2.6vw,2.3rem)}
.head .eyebrow{margin-bottom:1rem}
.head p{margin-top:1.1rem}
.prose{padding:clamp(2rem,3.4vw,3rem) clamp(1.8rem,3vw,2.6rem)}
.prose h2{margin-bottom:1.2rem}
.prose h3{margin:2.2rem 0 .8rem}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:7rem var(--pad) 5rem}
.hero-inner{max-width:min(40rem,92vw);
  padding:clamp(2.4rem,3.8vw,3.4rem) clamp(1.9rem,3vw,2.8rem) clamp(2.6rem,4vw,3.2rem)}
.hero-inner .eyebrow{margin-bottom:1.5rem}
.hero-inner .serif-lede{margin-top:1rem}
.hero-inner .rule{margin-left:auto;margin-right:auto}
.hero-inner .link{margin-top:.4rem}

.scroll-cue{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,232,205,.82);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  text-shadow:0 1px 12px rgba(70,12,6,.8);
}
.scroll-cue span{display:block;width:1px;height:2.4rem;
  background:linear-gradient(180deg,rgba(255,214,170,.7),transparent);
  animation:cue 3.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.55);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* ═══════ the chapters ═══════
   Each sense gets a number, a plain noun and a body of writing. The number
   is set large and pale behind the heading rather than beside it, so the
   sequence is felt without being counted. */
.chapter{padding:clamp(4.5rem,13vh,10rem) var(--pad)}
.chapter .sheet{max-width:44rem;margin:0 auto;
  padding:clamp(2.4rem,4vw,3.6rem) clamp(1.9rem,3.2vw,3rem) clamp(2.6rem,4.2vw,3.8rem)}
/* the number sits inside the sheet, not hanging off it: .plate carries
   contain:paint for the compositing, and anything outside its box is cut */
.chapter .no{
  position:absolute;top:clamp(.5rem,1.4vw,1.4rem);right:clamp(1rem,2.4vw,2.2rem);
  font-family:var(--serif);font-size:clamp(4rem,9vw,7rem);line-height:1;
  color:rgba(168,59,38,.16);pointer-events:none;user-select:none;
}
.chapter h2{margin-bottom:.6rem}
.chapter .serif-lede{margin-bottom:1.6rem}
.chapter .rule{margin-top:1.8rem}

/* the question a chapter is actually asking, set apart */
.ask{
  margin:2rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--line);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.42;color:#8a4326;
}

/* ═══════ part two — the modes ═══════
   Deliberately unlike a chapter. A chapter is a single centred sheet: one
   sense, self-contained, and the run of them reads as a column. A mode is
   the six played together, so it is set as two things at once — the name
   on the bare field, held still while the writing scrolls past it, and the
   plate offset to one side, alternating. Read at speed, part one is a
   column of sheets and part two is visibly something else. That is the
   whole reason for this block. */
.mode{padding:clamp(4rem,12vh,9rem) var(--pad)}
.mode-inner{
  max-width:74rem;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:center;
}
.mode.alt .mode-inner{grid-template-columns:minmax(0,1fr) minmax(0,21rem)}
.mode.alt .mode-head{grid-column:2;grid-row:1}
.mode.alt .mode-body{grid-column:1;grid-row:1}

/* The name sits opposite the middle of the writing, and does not follow you.
   It was sticky in the first version — held while the writing scrolled past —
   and on the way out of each section it slid up through the fixed header and
   collided with it. Any sticky element does. Centred is calmer, and the
   offset plate alone is already enough to say this is not a chapter. */
.mode-head{position:relative}
/* the same pool of quiet the breath lines get, for the same reason: this
   type sits on the field itself with nothing behind it */
.mode-head::before{
  content:"";position:absolute;left:50%;top:48%;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);
  width:min(30rem,116%);height:min(20rem,150%);
  background:
    radial-gradient(closest-side at 50% 50%,rgba(116,16,10,.66),rgba(116,16,10,.26) 58%,rgba(116,16,10,0) 100%),
    radial-gradient(closest-side at 46% 58%,rgba(74,6,8,.36),rgba(74,6,8,0) 100%);
}
.mode-head > *{position:relative;z-index:1}
.mode-head .eyebrow{color:rgba(255,206,158,.78);margin-bottom:.9rem}
.mode-head h2{
  font-size:clamp(2.4rem,5.6vw,4.1rem);letter-spacing:-.018em;
  color:rgba(255,246,232,.99);
  text-shadow:0 2px 20px rgba(44,5,4,.9),0 0 52px rgba(44,5,4,.7);
}
.mode-head .serif-lede{
  margin-top:.7rem;color:rgba(255,224,194,.94);
  text-shadow:0 2px 16px rgba(44,5,4,.9),0 0 40px rgba(44,5,4,.65);
}
.mode-body{padding:clamp(2.1rem,3.4vw,3rem) clamp(1.8rem,3vw,2.6rem)}
.mode-body .ask{margin-top:1.8rem}

/* the ledger — a fact, then what a body does about it. The studio's format,
   and the one place the writing is allowed to be specific to the millimetre. */
.ledger{list-style:none;margin:1.4rem 0 0;padding:0}
.ledger li{padding:1.4rem 0;border-top:1px solid var(--line)}
.ledger li:last-child{border-bottom:1px solid var(--line)}
.ledger b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.1rem,1.6vw,1.38rem);line-height:1.3;color:#241209;
}
.ledger span{
  display:block;margin-top:.42rem;
  font-size:clamp(.9rem,1vw,.99rem);line-height:1.74;color:var(--ink-soft);
}
.prose ul,.sheet ul{margin:1rem 0 0;padding-left:1.1rem}
.prose li,.sheet li{font-size:clamp(.92rem,1.02vw,1rem);line-height:1.8;
  color:var(--ink-soft);margin-bottom:.55rem}
.prose li::marker,.sheet li::marker{color:var(--heat)}

/* a line set on the field itself, with no plate under it — the page opening
   its eyes for a moment between chapters */
.breath{padding:clamp(5rem,16vh,11rem) var(--pad);text-align:center}
/* The line sits in a pool of quiet rather than on a plate — two overlapping
   radial gradients, both sized closest-side so they reach zero exactly at
   the edge of their box and leave no straight edge behind. The introduction
   at girijaregmi.com solves the same problem the same way; here it is doing
   more work, because the blaze this text crosses is the brightest thing on
   the site and pale type over it was simply unreadable. */
.breath::before{
  content:"";position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);
  width:min(58rem,98vw);height:min(36rem,64vh);
  /* deep red rather than a neutral dark: a grey pool over a saturated
     orange field reads as a smudge on the lens, and this picture has no
     lens in it */
  background:
    radial-gradient(closest-side at 50% 50%,rgba(116,16,10,.72),rgba(116,16,10,.3) 56%,rgba(116,16,10,0) 100%),
    radial-gradient(closest-side at 44% 58%,rgba(74,6,8,.44),rgba(74,6,8,0) 100%);
}
.breath p{
  position:relative;z-index:1;
  max-width:26rem;margin:0 auto;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:1.32;
  color:rgba(255,243,226,.98);
  text-shadow:0 2px 18px rgba(40,4,4,.9),0 0 46px rgba(40,4,4,.75);
}

/* the six, as a run of cards before the chapters begin */
.senses{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.5rem,1vw,1rem);max-width:74rem;margin:0 auto}
.sense{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(13rem,26vh,17rem);text-align:center;text-decoration:none;color:inherit;
  padding:clamp(3rem,4vw,3.8rem) clamp(1rem,1.5vw,1.5rem) clamp(1.4rem,2vw,1.8rem);
  transition:transform .7s cubic-bezier(.2,.8,.25,1);
}
.sense:hover,.sense:focus-visible{transform:translateY(-10px)}
.sense .num{font-size:.6rem;letter-spacing:.3em;color:var(--ink-faint);margin-bottom:auto}
.sense h3{margin-bottom:.45rem}
.sense p{font-size:.79rem;line-height:1.66}
.jewel{
  position:absolute;top:clamp(1.1rem,1.8vw,1.6rem);left:50%;transform:translateX(-50%);
  width:clamp(1.3rem,1.8vw,1.65rem);height:clamp(1.3rem,1.8vw,1.65rem);border-radius:50%;
  background:
    radial-gradient(circle at 34% 27%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 42%),
    radial-gradient(circle at 52% 56%,var(--j1),var(--j2));
  box-shadow:0 0 0 1px rgba(60,20,8,.4),0 0 20px -3px var(--j1);
  animation:jewel 14s ease-in-out infinite;animation-delay:var(--d,0s);
}
@keyframes jewel{0%,100%{filter:brightness(1)}50%{filter:brightness(1.24)}}

/* ═══════ footer ═══════ */
footer{position:relative;z-index:6;padding:0 var(--pad) clamp(2.5rem,6vh,4rem)}
.foot{
  max-width:74rem;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:clamp(1rem,1.8vw,1.4rem) clamp(1.2rem,2.2vw,1.8rem);
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(42,26,20,.62);
}
.foot nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.foot a{text-decoration:none;transition:color .4s}
.foot a:hover{color:var(--heat)}
/* the motto, in identical words, never expanded */
.foot .motto{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.02rem;letter-spacing:.005em;text-transform:none;color:var(--heat);
}

/* ═══════ drafts ═══════
   Every block of writing that is a placeholder carries data-draft. It is
   invisible on the live site and shows itself when the address ends in
   ?drafts — so the page can be looked at as a finished thing, and then
   looked at again as a worksheet, without two versions of it existing. */
body.drafts [data-draft]{
  outline:1px dashed rgba(168,59,38,.55);outline-offset:8px;
  position:relative;
}
body.drafts [data-draft]::before{
  content:"draft — " attr(data-draft);
  position:absolute;top:-1.55rem;left:0;z-index:9;
  font-family:var(--sans);font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;
  color:#fff2df;background:rgba(168,59,38,.94);padding:.24rem .5rem;border-radius:2px;
  white-space:nowrap;pointer-events:none;
}
.drafts-note{
  position:fixed;right:1rem;bottom:1rem;z-index:20;display:none;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff2df;background:rgba(90,20,10,.9);padding:.5rem .8rem;border-radius:2px;
}
body.drafts .drafts-note{display:block}

/* ═══════ responsive ═══════ */
@media (max-width:1180px){ .rail{display:none} }
@media (max-width:900px){
  .senses{grid-template-columns:repeat(2,1fr)}
  #motes{display:none}
  /* one column, and the name stops being sticky — there is no room beside
     the writing for it to be held still next to */
  .mode-inner,.mode.alt .mode-inner{grid-template-columns:1fr}
  .mode.alt .mode-head,.mode.alt .mode-body{grid-column:1}
  .mode.alt .mode-head{grid-row:1}
  .mode.alt .mode-body{grid-row:2}
  .mode-head{text-align:center;margin-bottom:.4rem}
  .mode-head::before{width:min(30rem,150%);height:min(18rem,170%)}
}
@media (max-width:640px){
  .senses{grid-template-columns:1fr}
  .sense{min-height:10rem}
  header{padding:.85rem 1rem}
  .mark{font-size:.56rem;letter-spacing:.2em;padding:.45rem .65rem}
  .nav{gap:.75rem;padding:.45rem .65rem}
  .nav a{font-size:.55rem;letter-spacing:.12em}
  .foot{flex-direction:column;text-align:center}
  .chapter .no{font-size:3.4rem;top:-1rem;right:.8rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  [data-rise]{opacity:1;transform:none}
  #motes{display:none}
}