/* =========================================================================
   विसर्जन — the world
   Konkan fishing boat at dusk. Tarred hull, coir rope, bleached teak,
   netting knots, one brass lamp. Chrome lives on the boat; the sea is free.
   ========================================================================= */

:root {
  /* material */
  --tar:        #070c0d;
  --tar-2:      #0d1517;
  --salt:       #e7dfcb;
  --salt-2:     #c9bfa6;
  --shell:      #d8c9a4;
  --rope:       #6d5c40;
  --rope-lit:   #b3a37e;
  --brass:      #c08a3e;
  --brass-lit:  #f0b466;
  --flame:      #ffc27a;
  --ochre:      #c4703a;
  --sindoor:    #c8402a;
  --ink:        #1b1409;
  --ink-2:      #43351d;
  --ink-3:      #6b300c;

  /* type on the water */

  /* spacing rhythm */
  --r2: .85rem;
  --r3: 1.4rem;


  --r-sm: 4px;

  /* material: shadows, lit edges, and the paint that is mixed rather than bought */
  --shade-soft:   rgba(0, 0, 0, .34);
  --shade:        rgba(0, 0, 0, .52);
  --shade-mid:    rgba(0, 0, 0, .66);
  --shade-deep:   rgba(0, 0, 0, .80);
  --shade-max:    rgba(0, 0, 0, .95);
  --rope-lit-soft: rgba(255, 230, 184, .26);
  --glow:         rgba(255, 176, 92, .32);
  --glow-strong:  rgba(255, 176, 92, .45);
  --sea-light:    rgba(120, 180, 170, .10);
  --timber-line:  rgba(74, 56, 26, .12);
  --timber-shade: rgba(54, 38, 14, .34);
  --sindoor-line: rgba(110, 30, 16, .5);
  --sindoor-deep: #5e1d0e;
  --brass-deep:   #6a4413;
  --brass-core:   #ffe6b6;
  --pitting:      #6b5636;
  --pitting-deep: #241a0c;
  --rope-shadow:  #2c2517;
  --rope-lit-hi:  #5c4f39;
  --sea-ink-lit:  #c2d3c9;
  --sea-ink-bright: #dfe9e2;
  --flame-pale:   #ffe6bb;

  /* type ramp — every size in the file maps onto one of these */
  --t-wordmark:    clamp(1.9rem, 3.6vw, 3.05rem);
  --t-display:     clamp(1.45rem, 3.7vw, 2.25rem);
  --t-benediction: clamp(1.35rem, 4.6vw, 2.7rem);
  --t-body:        clamp(15px, .55vw + 13.4px, 17px);
  --t-body-sm:     clamp(.8rem, 1vw, .92rem);
  --t-label:       clamp(.7rem, .82vw, .8rem);
  --t-label-sm:    .64rem;
  --t-micro:       .58rem;

  --ease: cubic-bezier(.16, .84, .28, 1);
  --ease-soft: cubic-bezier(.32, .72, .24, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.86' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='360' height='140' filter='url(%23g)' opacity='.6'/%3E%3C/svg%3E");
  --speck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--tar);
  color: var(--salt);
  font-family: 'Mukta', 'Noto Sans Devanagari', system-ui, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- layers ------------------------------------------------------ */

.sea, .pigment {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sea     { z-index: 0; }
.pigment {
  z-index: 1;
  pointer-events: none;
  /* pigment suspended in water: drawn cheap and hard, then diffused by the compositor */
  filter: blur(5px) saturate(1.14);
}

.reader {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vessel {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* film of grain over the whole frame — the material of the picture itself */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background-image: var(--speck);
  background-size: 220px 220px;
  opacity: .05;
  mix-blend-mode: overlay;
}

/* ---------- netting ----------------------------------------------------- */

.netting {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 9%;
  height: 21%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Cpath d='M0 0L78 78M78 0L0 78' stroke='%23cbbf9c' stroke-opacity='.34' stroke-width='1.4'/%3E%3Ccircle cx='39' cy='39' r='3.6' fill='%23e8dcbb' fill-opacity='.34'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='47'%3E%3Cg transform='rotate(17 23.5 23.5)'%3E%3Cpath d='M0 0L47 47M47 0L0 47' stroke='%23b8ac8c' stroke-opacity='.24' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 78px 78px, 47px 47px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 60%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 60%, transparent 98%);
  transform: scaleY(1.05);
  transform-origin: 50% 100%;
  opacity: .42;
}
.netting::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--shade-soft), transparent 46%);
}

/* the one lamp that comes back at the end */
.diya {
  position: fixed;
  z-index: 3;
  left: -160px;
  bottom: 30%;
  pointer-events: none;
  transition: transform 34s linear, opacity 5s var(--ease-soft);
  opacity: 0;
  filter: drop-shadow(0 10px 22px var(--shade-mid));
}
.diya.is-in {
  opacity: 1;
  transform: translateX(calc(100vw + 320px)) translateY(-4vh);
}
.diya::after {
  content: '';
  position: absolute;
  inset: -60% -40%;
  background: radial-gradient(50% 50% at 50% 52%, var(--glow), transparent 70%);
}

/* ---------- the hull ---------------------------------------------------- */

.hull {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10.5%;
  min-height: 62px;
}

.hull__timber {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #1c2724 0%, var(--tar-2) 22%, var(--tar) 100%);
  background-image: var(--grain), linear-gradient(180deg, #1c2724 0%, var(--tar-2) 22%, var(--tar) 100%);
  background-size: 360px 140px, auto;
  background-blend-mode: overlay, normal;
}
.hull__timber::before {
  /* the wet sheen of tarred planks catching the lamp */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 150% at 9% 6%, var(--glow), transparent 70%),
    radial-gradient(60% 120% at 50% 0%, var(--sea-light), transparent 72%);
}
.hull__timber::after {
  /* plank seams */
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 178px,
    var(--shade) 178px 180px);
  opacity: .7;
}
.hull__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--shade), transparent 30%);
  pointer-events: none;
}

.gunwale {
  position: absolute;
  left: -2%; right: -2%; top: -9px;
  height: 20px;
  border-radius: 10px;
  background: var(--rope);
  background-image:
    linear-gradient(180deg, var(--rope-lit-soft), var(--shade) 68%, var(--shade-mid)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cg transform='rotate(38)'%3E%3Crect x='-20' y='-20' width='54' height='54' fill='%236d5c40'/%3E%3Cpath d='M-20 -16 L34 -18 M-20 -11.6 L34 -13.6 M-20 -7.2 L34 -9.2 M-20 -2.8 L34 -4.8' stroke='%23938159' stroke-width='2.1'/%3E%3Cpath d='M-20 -13.8 L34 -15.8 M-20 -9.4 L34 -11.4 M-20 -5 L34 -7' stroke='%234a3f2e' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 14px 14px;
  box-shadow: 0 6px 14px var(--shade-mid), inset 0 1px 0 var(--rope-lit-soft);
}

/* ---------- lamp -------------------------------------------------------- */

.lamp {
  position: absolute;
  left: max(3vw, 18px);
  bottom: 58%;
  width: clamp(58px, 5.4vw, 86px);
  height: auto;
  transform: translateY(4px);
  filter: drop-shadow(0 18px 34px var(--shade-deep));
}
.lamp svg { width: 100%; height: auto; display: block; }
.lamp__pool {
  fill: var(--flame);
  opacity: .16;
  filter: blur(7px);
}
.lamp__flame {
  transform-origin: 60px 86px;
  animation: flicker 3.4s var(--ease-soft) infinite;
}
.lamp__flame--core { animation-duration: 1.7s; opacity: .85; }
.lamp__wick { opacity: .9; }

@keyframes flicker {
  0%, 100% { transform: scale(1, 1) translateY(0); opacity: .95; }
  22%      { transform: scale(.94, 1.07) translateY(-1px); opacity: 1; }
  47%      { transform: scale(1.04, .95) translateY(1px); opacity: .88; }
  71%      { transform: scale(.97, 1.03) translateY(-.5px); opacity: 1; }
}

/* ---------- masthead ---------------------------------------------------- */

.masthead {
  position: fixed;
  top: clamp(16px, 3.2vh, 34px);
  left: clamp(16px, 3.4vw, 46px);
  z-index: 5;
  margin: 0;
  pointer-events: none;
}
.masthead::before {
  content: '';
  position: absolute;
  inset: -140% -90%;
  background: radial-gradient(70% 70% at 34% 40%, rgba(3, 9, 11, .82), transparent 72%);
  z-index: -1;
}
.wordmark {
  margin: 0;
  font-family: 'Sarpanch', 'Noto Sans Devanagari', sans-serif;
  font-weight: 800;
  font-size: var(--t-wordmark);
  line-height: 1.14;
  letter-spacing: .004em;
  color: var(--salt);
  text-shadow: 0 2px 0 var(--shade-soft), 0 10px 30px var(--shade);
}
.wordmark__sub {
  margin: .1em 0 0;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rope-lit);
  text-shadow: 0 2px 12px var(--shade-deep);
}
.wordmark__dot { opacity: .55; }

/* ---------- the hanging plank ------------------------------------------- */

.ritual {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.offering {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}

.plaque {
  position: relative;
  margin-top: clamp(60px, 13.5vh, 150px);
  width: min(520px, calc(100vw - 44px));
  transform-origin: 50% -60vh;
  animation: sway 11s ease-in-out infinite;
  transition: transform 1.5s var(--ease), opacity 1.1s var(--ease), filter 1.1s var(--ease);
  pointer-events: auto;
}

@keyframes sway {
  0%, 100% { transform: rotate(-.65deg); }
  50%      { transform: rotate(.5deg); }
}

.plaque__rope {
  position: absolute;
  top: -140vh;
  left: 7%;
  width: 15px;
  height: calc(140vh + 20px);
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cg transform='rotate(34)'%3E%3Crect x='-20' y='-20' width='56' height='56' fill='%23604f36'/%3E%3Cpath d='M-20 -15 L36 -17 M-20 -10 L36 -12 M-20 -5 L36 -7 M-20 0 L36 -2 M-20 5 L36 3' stroke='%23988765' stroke-width='1.9'/%3E%3Cpath d='M-20 -12.5 L36 -14.5 M-20 -7.5 L36 -9.5 M-20 -2.5 L36 -4.5 M-20 2.5 L36 .5' stroke='%233f3524' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 15px 15px;
  box-shadow: inset 2px 0 4px var(--shade), inset -3px 0 5px var(--shade-soft);
  opacity: .95;
}
.plaque__rope--b { left: 93%; }

.board {
  position: relative;
  background: var(--shell);
  background-image: var(--grain), linear-gradient(184deg, #ded3b4 0%, #cabb95 44%, #ab9d76 100%);
  background-size: 420px 165px, auto;
  background-blend-mode: hard-light, normal;
  /* the painted rules sit in the shadow stack: innermost last so it paints on top */
  box-shadow:
    inset 0 0 0 4px rgba(38, 28, 14, .78),
    inset 0 0 0 7px rgba(186, 54, 32, .92),
    inset 0 0 0 15px var(--ochre),
    inset 0 -30px 46px -24px rgba(52, 34, 8, .5),
    0 30px 60px -22px var(--shade-deep),
    0 4px 12px var(--shade-soft);
  padding: clamp(30px, 4.2vw, 44px) clamp(30px, 5.2vw, 58px) clamp(24px, 3.4vw, 36px);
  clip-path: polygon(.32% 1.1%, 99.6% .25%, 99.9% 98.4%, 41% 99.9%, .15% 98.9%, .05% 34%);
}

/* a shallow shadow where the painted rules meet the wood */
.board::after {
  content: '';
  position: absolute;
  inset: 15px;
  pointer-events: none;
  box-shadow: 0 2px 7px var(--timber-shade) inset;
}

.board__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(93.4deg, var(--timber-line) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(92.1deg, var(--timber-line) 0 2px, transparent 2px 21px),
    radial-gradient(120% 80% at 50% 118%, var(--timber-shade), transparent 68%);
  mix-blend-mode: multiply;
}

.board__nail {
  position: absolute;
  top: 13px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--pitting), var(--pitting-deep) 68%);
  box-shadow: 0 1px 2px var(--shade), 0 0 0 2px var(--timber-shade);
}
.board__nail--l { left: 15px; }
.board__nail--r { right: 15px; }

.board__face {
  position: relative;
  z-index: 2;
  text-align: center;
}

.board__title {
  margin: 0;
  font-family: 'Sarpanch', 'Noto Sans Devanagari', sans-serif;
  font-weight: 800;
  font-size: var(--t-display);
  line-height: 1.42;
  letter-spacing: .002em;
  color: var(--ink);
  text-wrap: balance;
}

.board__en {
  margin: .18em 0 0;
  font-size: var(--t-body-sm);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.board__mantra {
  margin: var(--r3) auto 0;
  max-width: 34ch;
  font-family: 'Sarpanch', 'Noto Sans Devanagari', sans-serif;
  font-weight: 500;
  font-size: var(--t-body-sm);
  line-height: 1.78;
  color: var(--ink-2);
  text-wrap: balance;
}

/* rope-and-float handle — the only button in the first viewport */
.handle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: var(--r3);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.handle__rope { display: block; margin-bottom: -6px; }
.float { display: block; transition: transform .45s var(--ease); filter: drop-shadow(0 6px 10px rgba(40, 24, 4, .45)); }
.handle__label {
  margin-top: -2px;
  font-size: var(--t-body-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
}
.handle__label em {
  display: block;
  font-style: normal;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.handle:hover { transform: translateY(3px); }
.handle:hover .float { transform: translateY(4px) rotate(2deg); }
.handle:active { transform: translateY(7px); }

.sr-only:focus-visible ~ .handle,
.handle:focus-within {
  outline: 2px solid var(--sindoor);
  outline-offset: 6px;
}

.board__hint {
  margin: var(--r2) 0 0;
  font-size: var(--t-label);
  letter-spacing: .06em;
  color: var(--ink-2);
}

.board__hint--warn {
  margin-top: var(--r2);
  max-width: 36ch;
  padding: .5rem .7rem;
  border: 1px solid var(--sindoor-line);
  background: rgba(200, 64, 42, .12);
  color: var(--sindoor-deep);
  line-height: 1.5;
}

/* drag-over the water */
body.is-dragover .board {
  box-shadow:
    0 0 0 3px var(--sindoor),
    0 30px 60px -22px var(--shade-deep);
}
body.is-dragover .board::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(32, 24, 14, .45);
  pointer-events: none;
}

/* ---------- benediction -------------------------------------------------- */

.benediction {
  position: absolute;
  margin: 0;
  top: clamp(84px, 10vh, 104px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  filter: blur(9px);
  transition: opacity 2.6s var(--ease-soft), filter 2.6s var(--ease-soft);
  pointer-events: none;
}
.benediction__line {
  display: block;
  font-family: 'Sarpanch', 'Noto Sans Devanagari', sans-serif;
  font-weight: 700;
  font-size: var(--t-benediction);
  line-height: 1.4;
  color: var(--flame-pale);
  text-shadow: 0 0 26px var(--glow-strong), 0 6px 30px var(--shade-deep);
}
.benediction__close {
  display: block;
  margin-top: 1.15em;
  font-family: 'Sarpanch', 'Noto Sans Devanagari', sans-serif;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .13em;
  color: var(--sea-ink-lit);
  opacity: 0;
  transition: opacity 2.6s var(--ease-soft) 3.4s;
}
body[data-ritual="calm"] .benediction__close { opacity: .9; }

.benediction__sub {
  display: block;
  margin-top: .34em;
  font-size: var(--t-body-sm);
  letter-spacing: .06em;
  color: var(--sea-ink-bright);
  text-shadow: 0 2px 10px var(--shade-max), 0 0 26px var(--shade-deep);
}
body[data-ritual="calm"] .benediction { opacity: 1; filter: blur(0); }

/* ---------- console: rope pulls on the hull ------------------------------ */

.console {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 7;
  height: 10.5%;
  min-height: 62px;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: clamp(12px, 3vw, 44px);
  padding: 0 clamp(14px, 3.4vw, 46px) 9px;
  pointer-events: none;
}
.console[hidden] { display: none; }

.pull {
  position: relative;
  pointer-events: auto;
  appearance: none;
  border: 0;
  background: none;
  padding: 0 0 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  color: var(--rope-lit);
  font: inherit;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
body.is-console .pull { opacity: 1; transform: translateY(0); }
body.is-console .pull:nth-child(2) { transition-delay: .07s; }
body.is-console .pull:nth-child(3) { transition-delay: .14s; }
body.is-console .pull:nth-child(4) { transition-delay: .21s; }

.pull__rope {
  display: block;
  height: clamp(30px, 5.4vh, 50px);
  width: auto;
  filter: drop-shadow(0 8px 12px var(--shade-mid));
  transition: transform .4s var(--ease);
}
.pull__label {
  margin-top: 2px;
  max-width: 9ch;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.32;
  text-align: center;
  letter-spacing: .01em;
  color: var(--salt-2);
  text-shadow: 0 2px 10px var(--shade-max);
}
.pull__label em {
  display: block;
  font-style: normal;
  font-size: var(--t-label-sm);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a3bcb0;
}
.pull:hover .pull__rope { transform: translateY(5px); }
.pull:active .pull__rope { transform: translateY(11px); }
.pull:focus-visible { outline: 2px solid var(--sindoor); outline-offset: 4px; border-radius: 6px; }

.pull[aria-pressed="true"] .pull__label em { color: var(--brass-lit); }

/* only the right pulls exist in each phase */
body[data-ritual="calm"] .pull--still,
body[data-ritual="calm"] #hold { display: none; }
body:not([data-ritual="calm"]) .pull--again,
body:not([data-ritual="calm"]) .pull--release { display: none; }

/* ---------- knot rail ---------------------------------------------------- */

.knots {
  position: fixed;
  left: clamp(84px, 11vw, 174px);
  bottom: calc(10.5% - 5px);
  z-index: 8;
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transition: opacity .9s var(--ease);
  pointer-events: none;
}
body.is-console .knots { opacity: 1; }

.knot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.knot__bead {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, var(--rope-lit-hi), var(--rope-shadow) 70%);
  box-shadow:
    inset 0 -2px 3px var(--shade-mid),
    0 0 0 1.5px rgba(0, 0, 0, .45),
    0 2px 4px var(--shade);
  transition: background .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease);
}
.knot__name {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--salt-2);
  text-shadow: 0 2px 8px var(--shade-max), 0 0 14px var(--shade-deep);
  transition: color .6s var(--ease);
  white-space: nowrap;
}
.knot.is-done .knot__bead {
  background: radial-gradient(circle at 36% 32%, var(--brass-core), var(--brass) 62%, var(--brass-deep) 100%);
  box-shadow:
    inset 0 -1px 2px rgba(120, 70, 10, .5),
    0 0 0 1.5px var(--shade-soft),
    0 0 12px var(--glow-strong);
  transform: scale(1.16);
}
.knot.is-done .knot__name { color: var(--flame); }
.knot.is-live .knot__bead {
  animation: knot-breathe 2.6s ease-in-out infinite;
}
@keyframes knot-breathe {
  0%, 100% { transform: scale(1.16); }
  50%      { transform: scale(1.34); }
}

/* ---------- ritual states ------------------------------------------------ */

body:not([data-ritual="idle"]) .plaque {
  transform: translateY(-64vh) rotate(-2.4deg);
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  animation: none;
}
body[data-ritual="calm"] .plaque { display: none; }

.board__mantra--noscript {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--shell);
  padding: 1rem 1.4rem;
  margin: 0;
  width: min(420px, 86vw);
}

/* ---------- small screens ------------------------------------------------ */

@media (max-width: 640px) {
  .wordmark__sub { letter-spacing: .13em; }
  .plaque { margin-top: clamp(56px, 11vh, 110px); width: min(520px, calc(100vw - 32px)); }
  .board { padding: 26px 20px 20px; }
  .board__en { font-size: var(--t-label); letter-spacing: .1em; }
  .board__hint { font-size: var(--t-label); }
  .netting { bottom: 8%; height: 18%; opacity: .3; background-size: 56px 56px, 34px 34px; }
  .console { min-height: 56px; gap: 16px; }
  .knots { left: 62px; bottom: calc(10.5% - 3px); gap: 9px; }
  .knot__name { display: none; font-size: var(--t-label-sm); }
  .knot.is-live .knot__name { display: block; }
  .knot__bead { width: 11px; height: 11px; }
  .pull__label { max-width: 7.5ch; }
  .pull__label em { font-size: var(--t-micro); letter-spacing: .06em; }
  .lamp { left: 10px; bottom: 52%; }
  .benediction { top: clamp(80px, 10.5vh, 104px); }
}

@media (max-width: 400px) {
  .board { padding: 24px 16px 22px; }
  .board__hint { display: none; }
}

@media (max-height: 560px) {
  .plaque { margin-top: 54px; }
  .board__hint { display: none; }
}

/* ---------- reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .plaque { animation: none; }
  .lamp__flame { animation: none; }
  .knot.is-live .knot__bead { animation: none; }
  .pull, .knot__bead, .float, .handle, .benediction, .benediction__close { transition-duration: .3s; }
  .benediction__close { transition-delay: 1.4s; }
  .plaque { transition-duration: .5s; }
  .diya { transition: transform 60s linear, opacity 3s var(--ease-soft); }
}

/* ---------- forced colors / high contrast -------------------------------- */

@media (prefers-contrast: more) {
  .board { background: #fff; background-image: none; }
  .board__mantra, .board__hint, .board__en { color: #000; }
  .pull__label { color: #fff; }
}