/* ============================================================================
   PAGE FAMILY: under-the-light immersive page (C7) - STRUCTURE tier - from the
   global files, original order. Migrated 2026-07-06. PHASE-A FIDELITY:
   verbatim relocation. NOTE: shared form classes on these pages (e_card_form,
   e_card_section, add_tocart_btn, art_info_*) stay in their own families.
   ========================================================================= */

.utl-reading {
  --utl-canvas:#f4eee2; --utl-paper:#fbf7ee; --utl-linen:#ede5d2; --utl-gesso:#f9f4e8; --utl-shadow:#e6dec8;
  --utl-ink:#2a2438; --utl-ink-soft:#4a4358; --utl-ink-mute:#6c647a; --utl-ink-faint:#9a93a4; --utl-ink-vapor:#bdb6c3;
  --utl-monet:#6b8eb3; --utl-wisteria:#9a8bb8; --utl-plein:#d89a78; --utl-lichen:#8fa280; --utl-rose:#c8a2a2; --utl-ochre:#b78b4a;
  --utl-rule:#c7bea8; --utl-rule-soft:#ddd4be;
  --utl-f-display:'Italiana',serif; --utl-f-edit:'Cormorant Garamond',Garamond,serif;
  --utl-f-ui:'Manrope',-apple-system,sans-serif; --utl-f-mono:'DM Mono',ui-monospace,monospace;
}

.utl-reading * { box-sizing:border-box; }

.utl-reading {
  font-family:var(--utl-f-ui); color:var(--utl-ink);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  max-width:1380px; margin:0 auto; padding:clamp(32px,5vw,80px) clamp(20px,4vw,64px);
}

.utl-breadcrumb { margin-bottom:28px; }

.utl-breadcrumb .breadcrumb-navigation-list { margin:0; flex-wrap:wrap; }

.utl-eyebrow,.utl-head,.utl-studio { animation:utl-riseIn .7s cubic-bezier(.22,.61,.36,1) backwards; }

.utl-head { animation-delay:.08s; }

.utl-studio { animation-delay:.16s; }

.utl-eyebrow {
  font-family:var(--utl-f-ui); font-size:10px; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--utl-ochre); display:flex; align-items:center; gap:12px; margin-bottom:22px;
}

.utl-eyebrow::before { content:""; width:34px; height:.5px; background:var(--utl-ochre); }

.utl-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,64px);
}

h1.utl-title {
  font-family:var(--utl-f-display); font-weight:400; font-size:clamp(36px,5vw,68px);
  line-height:.96; letter-spacing:-.005em; max-width:16ch; margin:0;
}

h1.utl-title em { font-family:var(--utl-f-edit); font-style:italic; color:var(--utl-monet); font-size:.82em; }

.utl-lede {
  font-family:var(--utl-f-edit); font-size:19px; line-height:1.7;
  color:var(--utl-ink-soft); max-width:44ch; margin:0;
}

.utl-lede em { color:var(--utl-ink); font-style:italic; }

.utl-studio {
  display:grid; grid-template-columns:1.32fr .68fr;
  gap:clamp(32px,4vw,64px); align-items:start;
}

.utl-stage-wrap { position:relative; }

.utl-plate-no {
  position:absolute; top:-11px; left:18px; z-index:6;
  background:var(--utl-ink); color:var(--utl-gesso); font-family:var(--utl-f-mono);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px;
}

.utl-stage {
  position:relative; background:var(--utl-shadow); padding:18px; border-radius:3px;
  box-shadow:0 30px 60px -20px rgba(42,36,56,.28); border:.5px solid var(--utl-rule);
  overflow:hidden; user-select:none; touch-action:none; cursor:grab;
}

.utl-stage.dragging { cursor:grabbing; }

.utl-stage::after {
  content:""; position:absolute; inset:18px;
  outline:.5px solid var(--utl-rule-soft); outline-offset:-1px;
  pointer-events:none; z-index:7;
}

.utl-frame { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; background:#15121d; }

.utl-grain {
  position:absolute; inset:0; z-index:8; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.utl-grid-ovl { position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0; transition:opacity .35s; }

.utl-grid-ovl .ln { position:absolute; background:rgba(251,247,238,.5); box-shadow:0 0 0 .5px rgba(42,36,56,.2); }

.utl-grid-ovl .v { width:1px; top:0; bottom:0; }

.utl-grid-ovl .h { height:1px; left:0; right:0; }

.utl-grid-ovl .gold { background:rgba(216,154,120,.7); box-shadow:0 0 6px rgba(216,154,120,.5); }

.utl-grid-ovl .v1 { left:33.33%; }

.utl-grid-ovl .v2 { left:66.66%; }

.utl-grid-ovl .h1 { top:33.33%; }

.utl-grid-ovl .h2 { top:66.66%; }

.utl-grid-ovl .v3 { left:38.2%; }

.utl-grid-ovl .h3 { top:38.2%; }

.utl-grid-ovl .node {
  position:absolute; width:10px; height:10px; border:1px solid var(--utl-plein);
  border-radius:50%; transform:translate(-50%,-50%); background:rgba(216,154,120,.2);
  animation:utl-pulse 2.4s ease-in-out infinite;
}

.utl-track {
  position:absolute; top:18px; bottom:18px; right:-2px; width:54px; z-index:10;
  display:flex; flex-direction:column; align-items:center; cursor:ns-resize;
}

.utl-rail {
  position:absolute; top:8px; bottom:8px; width:2px;
  background:rgba(251,247,238,.35); box-shadow:0 0 0 .5px rgba(42,36,56,.3);
}

.utl-rail::after {
  content:""; position:absolute; left:0; top:0; width:100%;
  background:var(--utl-plein); height:var(--fill,0%);
  box-shadow:0 0 8px rgba(216,154,120,.6); transition:height .08s linear;
}

.utl-handle {
  position:absolute; left:50%; transform:translate(-50%,-50%) scale(1); top:0;
  width:44px; height:44px; border-radius:50%; background:var(--utl-gesso);
  border:.5px solid var(--utl-rule); box-shadow:0 6px 18px -4px rgba(42,36,56,.5);
  display:grid; place-items:center; cursor:grab; outline:none;
  transition:box-shadow .25s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}

.utl-handle:hover {
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 0 5px rgba(216,154,120,.12), 0 8px 22px -4px rgba(42,36,56,.55);
}

.utl-handle:hover::before { border-color:var(--utl-ochre); background:rgba(216,154,120,.22); }

.utl-handle:focus-visible {
  box-shadow:0 0 0 3px var(--utl-paper), 0 0 0 6px var(--utl-monet), 0 8px 22px -4px rgba(42,36,56,.55);
}

.utl-handle:active { cursor:grabbing; transform:translate(-50%,-50%) scale(1.04); }

.utl-handle::before {
  content:""; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--utl-plein); background:rgba(216,154,120,.12);
  transition:border-color .2s, background .2s;
}

.utl-handle .utl-car {
  position:absolute; font-family:var(--utl-f-mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; color:var(--utl-ink-soft); top:-17px; white-space:nowrap;
  transition:color .2s;
}

.utl-stage.dragging .utl-handle {
  box-shadow:0 0 0 6px rgba(216,154,120,.18), 0 6px 18px -4px rgba(42,36,56,.5);
}

.utl-stage.dragging .utl-handle .utl-car { color:var(--utl-ink); }

.utl-caption {
  margin-top:18px; font-family:var(--utl-f-edit); font-size:14px; font-style:italic;
  color:var(--utl-ink-mute); display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}

.utl-caption b { font-style:normal; font-family:var(--utl-f-display); font-size:18px; color:var(--utl-ink); }

.utl-hint {
  text-align:center; font-family:var(--utl-f-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--utl-ink-faint); margin-top:14px;
  animation:utl-hintPulse 2.8s ease-in-out infinite;
}

.utl-loading {
  position:absolute; inset:18px; z-index:9; display:grid; place-items:center;
  background:#15121d; color:var(--utl-ink-vapor); font-family:var(--utl-f-mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; transition:opacity .6s;
  animation:utl-loadShimmer 1.6s ease-in-out infinite;
}

.utl-loading.gone { opacity:0; pointer-events:none; animation:none; }

.utl-panel {
  background:var(--utl-paper); border:.5px solid var(--utl-rule); border-radius:3px;
  box-shadow:0 18px 50px -22px rgba(42,36,56,.2); overflow:hidden;
}

.utl-panel-top { border-top:6px double rgba(216,154,120,.4); }

.utl-p-head { padding:20px 22px 16px; border-bottom:.5px solid var(--utl-rule-soft); }

.utl-p-kick {
  font-family:var(--utl-f-mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--utl-ink-faint);
}

.utl-p-stage {
  font-family:var(--utl-f-display); font-size:26px; line-height:1.05;
  margin-top:6px; transition:opacity .25s;
}

.utl-p-stage em { font-family:var(--utl-f-edit); font-style:italic; color:var(--utl-monet); }

.utl-p-sub {
  font-family:var(--utl-f-edit); font-size:14.5px; font-style:italic;
  color:var(--utl-ink-mute); margin-top:6px; line-height:1.5; min-height:62px; transition:opacity .25s;
}

.utl-gauges {
  padding:20px 22px; display:flex; flex-direction:column; gap:16px;
  border-bottom:.5px solid var(--utl-rule-soft);
}

.utl-g-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }

.utl-g-name { font-family:var(--utl-f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--utl-ink-mute); }

.utl-g-val { font-family:var(--utl-f-display); font-size:21px; color:var(--utl-ink); }

.utl-g-val span { font-family:var(--utl-f-ui); font-size:9px; letter-spacing:.16em; color:var(--utl-ink-faint); text-transform:uppercase; margin-left:3px; }

.utl-g-bar { height:5px; background:var(--utl-shadow); border-radius:3px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(42,36,56,.12); }

.utl-g-fill { height:100%; width:0%; border-radius:3px; transition:width .12s linear; box-shadow:0 0 6px -1px currentColor; }

.utl-g1 .utl-g-fill { background:linear-gradient(90deg,var(--utl-monet),var(--utl-plein)); }

.utl-g2 .utl-g-fill { background:linear-gradient(90deg,var(--utl-ink-faint),#fff); }

.utl-g3 .utl-g-fill { background:linear-gradient(90deg,var(--utl-lichen),var(--utl-ochre)); }

.utl-g4 .utl-g-fill { background:linear-gradient(90deg,#9aa9bb,var(--utl-rose),var(--utl-plein)); }

.utl-g5 .utl-g-fill { background:linear-gradient(90deg,var(--utl-wisteria),var(--utl-lichen)); }

.utl-g6 .utl-g-fill { background:linear-gradient(90deg,var(--utl-ink-faint),var(--utl-monet),var(--utl-plein),var(--utl-ochre)); }

.utl-g-live { font-family:var(--utl-f-mono); font-size:8px; letter-spacing:.1em; color:var(--utl-lichen); text-transform:uppercase; }

.utl-medium { padding:16px 22px; border-bottom:.5px solid var(--utl-rule-soft); }

.utl-medium .utl-p-kick { margin-bottom:6px; }

.utl-medium p { font-family:var(--utl-f-edit); font-size:15px; font-style:italic; color:var(--utl-ink-soft); line-height:1.55; }

.utl-verdict { padding:22px; background:var(--utl-gesso); position:relative; }

.utl-verdict .utl-badge {
  display:inline-block; font-family:var(--utl-f-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--utl-ochre); border:.5px solid var(--utl-rule);
  background:var(--utl-paper); padding:4px 9px; border-radius:30px; margin-bottom:14px;
}

.utl-verdict h3 { font-family:var(--utl-f-display); font-size:30px; line-height:1.04; margin-bottom:10px; }

.utl-verdict h3 em { font-family:var(--utl-f-edit); font-style:italic; color:var(--utl-plein); }

.utl-verdict p { font-family:var(--utl-f-edit); font-size:16px; line-height:1.6; color:var(--utl-ink-soft); }

.utl-verdict p em { color:var(--utl-ink); font-style:italic; }

.utl-verdict .utl-labels {
  margin-top:16px; padding-top:14px; border-top:.5px solid var(--utl-rule-soft);
  display:flex; flex-wrap:wrap; gap:7px;
}

.utl-verdict .utl-lab {
  font-family:var(--utl-f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--utl-ink-mute); border:.5px solid var(--utl-rule-soft); padding:4px 9px;
  border-radius:2px; background:var(--utl-paper);
  transition:transform .18s ease, border-color .18s ease, color .18s ease; cursor:default;
}

.utl-verdict a.utl-lab {
  text-decoration:none; color:var(--utl-ink-mute); cursor:pointer;
}

.utl-verdict .utl-lab:hover,.utl-verdict a.utl-lab:hover { transform:translateY(-2px); border-color:var(--utl-plein); color:var(--utl-ink); }

.utl-verdict.utl-locked { animation:utl-flash .6s ease; }

@media(max-width:1100px) {
  .utl-studio { grid-template-columns:1fr; }

  .utl-stage-wrap { max-width:520px; margin:0 auto; width:100%; }

}
@media(max-width:560px) {
  .utl-head { gap:20px; }

  .utl-gauges { gap:13px; }

  .utl-track { width:60px; }

  .utl-handle { width:48px; height:48px; }

}
@media(prefers-reduced-motion: reduce) {
  .utl-reading *,.utl-reading *::before,.utl-reading *::after {
    animation-duration:.001ms; animation-iteration-count:1;
    transition-duration:.001ms; scroll-behavior:auto;
  }

  .utl-handle:hover { transform:translate(-50%,-50%); }

  .utl-verdict .utl-lab:hover,.utl-verdict a.utl-lab:hover { transform:none; }

}