/* =====================================================================
   Vāk ribbons — section layout.
   Uses the site's existing tokens where they exist; the values after the
   commas are fallbacks taken from the Vāk design brief. If the site's
   token names differ (e.g. --color-bone), map them here rather than
   hardcoding new values.
   Film grain is NOT added here: the site already applies it globally.
   ===================================================================== */

.vak-name{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--bone,#FEF9F5);
  color:var(--ink,#141110);
}

/* The engine fills this element with a canvas. It must have a real size. */
.vak-name__stage{position:absolute;inset:0;z-index:0}
.vak-ribbons__canvas{display:block;width:100%;height:100%}

/* The ribbons' free ends stop just right of this column (the engine measures it). */
.vak-name__copy{
  position:relative;z-index:1;
  width:min(33vw,440px);
  margin-left:var(--pad,clamp(20px,4.2vw,64px));
  padding-block:14vh 16vh;
}

.vak-name__label{
  margin:0 0 30px;display:flex;gap:18px;
  font-family:var(--font-ui,"Jost","Helvetica Neue",Arial,sans-serif);
  font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:var(--track-label,.26em);
  color:rgba(20,17,16,.62);
}
.vak-name__n{color:var(--gold,#B48A4E)}

.vak-name__lockup{
  margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .22em;
  font-family:var(--font-display,"Cormorant Garamond",Georgia,serif);
  font-weight:500;line-height:.86;letter-spacing:-.01em;
  font-size:clamp(64px,8.4vw,132px);
}
.vak-name__deva{
  font-family:"Noto Serif Devanagari",var(--font-display,"Cormorant Garamond",serif);
  font-size:.5em;letter-spacing:0;color:rgba(20,17,16,.62);
}

.vak-name__body{
  margin:38px 0 0;max-width:36ch;
  font-family:var(--font-ui,"Jost","Helvetica Neue",Arial,sans-serif);
  font-size:17px;line-height:1.7;
}
.vak-name__caption{
  position:relative;margin:30px 0 0;padding-top:18px;max-width:40ch;
  font-family:var(--font-ui,"Jost","Helvetica Neue",Arial,sans-serif);
  font-size:13px;line-height:1.65;color:rgba(20,17,16,.62);
}
.vak-name__caption::before{content:"";position:absolute;top:0;left:0;width:32px;height:1px;background:var(--gold,#B48A4E)}

/* Accessible copy of the words (created by the engine). Hidden visually
   unless WebGL is unavailable, in which case it becomes the visible fallback. */
.vak-ribbons__words{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;list-style:none;
}
.vak-name__stage.is-fallback{display:flex;align-items:center;justify-content:flex-end;padding:var(--pad,clamp(20px,4.2vw,64px))}
.is-fallback .vak-ribbons__words{
  position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;max-width:520px;
}
.is-fallback .vak-ribbons__words li{padding:8px 16px;border-radius:3px;background:var(--ink,#141110);color:var(--bone,#FEF9F5);font-size:20px}

/* Stacked layout: ribbons on top, copy underneath. Keep this breakpoint in sync
   with the engine's `narrowQuery` option (default max-width: 760px). */
@media (max-width:760px){
  .vak-name{display:block;min-height:0}
  .vak-name__stage{position:relative;height:72svh;min-height:460px}
  .vak-name__copy{width:auto;margin:0 var(--pad,20px);padding:6px 0 96px}
  .vak-name__label{margin-bottom:22px}
  .vak-name__body{font-size:16px}
}