/* On the Clock — Get your evenings back (scoped, so no other page is affected).
   Geometry and type are fractions of --page, which maps the mockup's 4096px
   canvas onto the viewport. Type fractions were set by measuring each string's
   width in the mockup against the rendered width, not by eye. */
[data-view="evenings2"]{
  --page:min(100vw,1560px);
  --paper:#fffefa;
  --ink:#14140f;
  --body:#2b2b25;
  --muted:#5c5d55;
  --dark:#1a2327;
  --foot:#1a2327;
  --lime:#dcf934;
  --rule:#e6e1d4;
  --gut:1.76%;          /* full-width panels, measured off the mockup */
  --hero-inset:12.11%;  /* header and hero copy sit on a narrower inset */
  /* The hero copy sits on the real photograph — there is no scrim to hide
     behind — so it has to stop before the artwork. Measured on the inpainted
     ev-hero.webp: in the first headline row nothing hard starts until
     x=1950/4096 = 0.4761; from the second line down the blue speech-bubble
     character and the chairs start at x=1750/4096 = 0.4272. Two caps, because
     one number would either wrap the headline or run the button into a chair. */
  --hero-cap:.3330;
  --hero-cap-low:.2975;
  /* Closing band: the copy is centred, and the narrowest clear window across
     its rows (the button's) runs 1325..2925 of 4096. */
  --close-cap:.3810;
  --nw:nowrap;        /* desktop holds these strings on one line, as the mockup does */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Type fractions of --page. Each one is set by a tuner that renders the
     string with white-space:var(--nw) and matches its width to the same string's
     width in the mockup, as a fraction of the mockup's 4096px canvas. Do not
     hand-nudge these: re-run tune-evenings.mjs. */
  --fs-h1:0.04365;
  --fs-hero-sub:0.01475;
  --fs-cta:0.02776;
  --fs-micro:0.00755;
  --fs-intro:0.02996;
  --fs-intro-sub:0.01599;
  --fs-qnum:0.01605;
  --fs-qtag:0.00943;
  --fs-q-head:0.04625;
  --fs-q-sub:0.01826;
  --fs-hint:0.01334;
  --fs-opt:0.01195;
  --fs-optsub:0.00922;
  --fs-foot:0.01065;
  --fs-next:0.01786;
  --fs-shortlbl:0.00765;
  --fs-tray:0.01787;
  --fs-hand:0.00866;
  --fs-few:0.02173;
  --fs-step:0.01447;
  --fs-stepq:0.00851;
  --fs-note:0.01383;
  --fs-pre:0.01591;
  --fs-result:0.05374;
  --fs-rec:0.00931;
  --fs-because:0.01272;
  --fs-why:0.01170;
  --fs-rowb:0.00976;
  --fs-rowd:0.00798;
  --fs-h3:0.02130;
  --fs-howp:0.00885;
  --fs-price:0.02317;
  --fs-pricebig:0.04906;
  --fs-btn:0.01643;
  --fs-fine:0.00825;
  --fs-close-head:0.02526;
  --fs-close-sub:0.01284;

  background:var(--paper); color:var(--ink);
}
[data-view="evenings2"] main{max-width:1560px;margin:0 auto}
[data-view="evenings2"] h1,[data-view="evenings2"] h2,[data-view="evenings2"] h3{
  font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;margin:0}
[data-view="evenings2"] p{margin:0;max-width:none}
[data-view="evenings2"] img{display:block;width:100%;height:auto}
[data-view="evenings2"] ul,[data-view="evenings2"] ol{list-style:none;margin:0;padding:0}

/* ---------- header floating over the hero ---------- */
[data-view="evenings2"] .site-header{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;border:0;
  max-width:1560px;margin:0 auto;padding:calc(var(--page)*.0140) 4.79% calc(var(--page)*.0140) var(--hero-inset)}
[data-view="evenings2"] .site-header a,[data-view="evenings2"] .site-header .wordmark{color:#fff}
[data-view="evenings2"] .site-header .wordmark{font-size:calc(var(--page)*.0225);letter-spacing:-.05em}
[data-view="evenings2"] .site-header nav{gap:calc(var(--page)*.0147);font-size:calc(var(--page)*.0117);
  margin:0 auto 0 calc(var(--page)*.026);flex-wrap:nowrap}
[data-view="evenings2"] .site-header nav a{opacity:.95;padding:10px 0;display:inline-block;white-space:var(--nw)}
[data-view="evenings2"] .site-header nav a[aria-current]{border-bottom:2px solid var(--lime)}
[data-view="evenings2"] .site-header .nav-workspace{background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.85);border-radius:999px;white-space:var(--nw);
  padding:calc(var(--page)*.0062) calc(var(--page)*.0140);font-weight:600;font-size:calc(var(--page)*.0095)}
[data-view="evenings2"] .site-header .menu-toggle{color:#fff;border-color:rgba(255,255,255,.6)}

/* ---------- hero ---------- */
[data-view="evenings2"] .ev-hero{position:relative;width:100%;aspect-ratio:4096/1490;
  min-height:calc(var(--page)*.2400);display:flex;align-items:flex-start;overflow:hidden;background:#12161a;color:#fff}
[data-view="evenings2"] .ev-hero-img{position:absolute;inset:0;z-index:0}
[data-view="evenings2"] .ev-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
[data-view="evenings2"] .ev-hero-copy{position:relative;z-index:2;width:100%;box-sizing:border-box;
  padding:calc(var(--page)*.0610) var(--hero-inset) 0}
/* The copy sits on the real scene, so it must stop before the artwork: the
   hanging cards, the blue character and the chair labels all begin at 0.4307
   of the width. This cap is the backstop; --fs-h1 is what sets the headline. */
[data-view="evenings2"] .ev-hero-copy>*{max-width:calc(var(--page)*var(--hero-cap))}
[data-view="evenings2"] .ev-hero-sub,[data-view="evenings2"] .ev-hero .ev-cta,
[data-view="evenings2"] .ev-micro{max-width:calc(var(--page)*var(--hero-cap-low))}
[data-view="evenings2"] .ev-hero h1{font-size:calc(var(--page)*var(--fs-h1));line-height:1.04;letter-spacing:-.035em}
[data-view="evenings2"] .ev-h1-a,[data-view="evenings2"] .ev-h1-b{display:block}
[data-view="evenings2"] .ev-h1-b{color:var(--lime)}
[data-view="evenings2"] .ev-hero-sub{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-hero-sub));
  line-height:1.34;margin-top:calc(var(--page)*-.0055)}
[data-view="evenings2"] .ev-cta{display:inline-flex;align-items:center;gap:.7em;background:var(--lime);color:#14140f;
  border-radius:999px;text-decoration:none;font-weight:800;font-family:Clock,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.02em;font-size:calc(var(--page)*var(--fs-cta));line-height:1;
  padding:calc(var(--page)*.0064) calc(var(--page)*.0299);margin-top:calc(var(--page)*.0029)}
[data-view="evenings2"] .ev-micro{font-family:var(--mono);font-size:calc(var(--page)*var(--fs-micro));letter-spacing:.10em;
  text-transform:uppercase;margin-top:calc(var(--page)*.0093);opacity:.94}

/* ---------- intro ---------- */
[data-view="evenings2"] .ev-intro{padding:calc(var(--page)*.0128) var(--gut) 0;text-align:center}
[data-view="evenings2"] .ev-intro h2{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;
  font-size:calc(var(--page)*var(--fs-intro));line-height:1.05;text-wrap:balance}
[data-view="evenings2"] .ev-intro p{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-intro-sub));
  margin-top:0;color:var(--body)}

/* ---------- questionnaire panel ----------
   Geometry read off the mockup, not eyeballed. Panel box x 72..3980 of 4096;
   inner 82..3969. The photograph occupies 2612..3969, so the left area is
   82..2612. Inside it the white question header runs the full width down to
   y 2408, and only below that does the body split: options 82..2006 and the
   cream shortlist column 2006..2612. Building it as one three-column grid is
   what forced the heading onto two lines. */
[data-view="evenings2"] .ev-panel{display:grid;grid-template-columns:65.09fr 34.91fr;
  margin:calc(var(--page)*.0107) var(--gut) 0;border:2px solid var(--ink);border-radius:calc(var(--page)*.0030);
  overflow:hidden;background:#fff}
[data-view="evenings2"] .ev-panel-left{display:flex;flex-direction:column;min-width:0}
[data-view="evenings2"] .ev-form-head{padding:calc(var(--page)*.0122) calc(var(--page)*.0315) calc(var(--page)*.0046) calc(var(--page)*.0210)}
[data-view="evenings2"] .ev-panel-body{flex:1;display:grid;grid-template-columns:76.13fr 23.87fr;min-width:0}
[data-view="evenings2"] .ev-form{display:flex;flex-direction:column;min-width:0;
  padding:calc(var(--page)*.0100) calc(var(--page)*.0237) calc(var(--page)*.0103) calc(var(--page)*.0210)}
[data-view="evenings2"] .ev-qtop{display:flex;align-items:center;gap:calc(var(--page)*.0105);
  border-bottom:1.5px solid var(--ink);padding-bottom:calc(var(--page)*.0056)}
[data-view="evenings2"] .ev-qnum,[data-view="evenings2"] .ev-qtag{font-family:var(--mono);
  font-size:calc(var(--page)*var(--fs-qnum));letter-spacing:.12em;text-transform:uppercase;
  white-space:var(--nw);line-height:1}
[data-view="evenings2"] .ev-qtag{margin-left:auto;letter-spacing:.10em;text-transform:none;
  font-family:var(--serif);font-size:calc(var(--page)*var(--fs-qtag))}
[data-view="evenings2"] .ev-dots{display:flex;align-items:center;gap:calc(var(--page)*.0102)}
[data-view="evenings2"] .ev-dots li{width:calc(var(--page)*.0120);height:calc(var(--page)*.0120);
  border-radius:50%;border:2px solid var(--ink)}
[data-view="evenings2"] .ev-dots li.on{background:var(--lime);border-color:var(--ink)}
[data-view="evenings2"] .ev-form-head h2{font-size:calc(var(--page)*var(--fs-q-head));margin-top:calc(var(--page)*.0095);
  letter-spacing:-.038em;white-space:var(--nw)}
[data-view="evenings2"] .ev-q{font-family:var(--serif);font-weight:600;font-size:calc(var(--page)*var(--fs-q-sub));
  margin-top:calc(var(--page)*.0090);white-space:var(--nw);line-height:1}
[data-view="evenings2"] .ev-hint{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-hint));color:var(--body);
  margin-top:calc(var(--page)*.0063);line-height:1.1}
[data-view="evenings2"] .ev-opts{display:grid;grid-template-columns:840fr 836fr;
  column-gap:calc(var(--page)*.0164);row-gap:calc(var(--page)*.0107)}
[data-view="evenings2"] .ev-opts>li{grid-column:1;display:contents}
[data-view="evenings2"] .ev-opt{display:flex;align-items:center;gap:calc(var(--page)*.0090);
  border:1.5px solid #d8d2c2;border-radius:calc(var(--page)*.0022);background:#fffdf8;
  padding:calc(var(--page)*.0050) calc(var(--page)*.0072);font-size:calc(var(--page)*var(--fs-opt));
  line-height:1;grid-column:1;width:100%;text-align:left;font-family:inherit;color:inherit;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease}
[data-view="evenings2"] .ev-opt:hover{border-color:#a9a08a;background:#fffefb;transform:translateY(-1px)}
[data-view="evenings2"] .ev-opt:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
[data-view="evenings2"] .ev-opts>li:nth-child(even){grid-column:2}
[data-view="evenings2"] .ev-opts>li:nth-child(odd){grid-column:1}
[data-view="evenings2"] .ev-opt-wide{grid-column:1/-1;align-items:flex-start;max-width:calc(var(--page)*.2456);
  padding-top:calc(var(--page)*.0080);padding-bottom:calc(var(--page)*.0080)}
[data-view="evenings2"] .ev-opt.on{background:var(--lime);border-color:var(--ink);border-width:2px;font-weight:700}
[data-view="evenings2"] .ev-box{flex:none;width:calc(var(--page)*.0135);height:calc(var(--page)*.0135);
  border:2px solid var(--ink);border-radius:calc(var(--page)*.0015);background:#fff;display:grid;place-items:center}
[data-view="evenings2"] .ev-opt.on .ev-box{background:var(--ink);color:var(--lime)}
[data-view="evenings2"] .ev-box svg{width:72%;height:72%;opacity:0;transform:scale(.6);
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.3,1.3)}
[data-view="evenings2"] .ev-opt.on .ev-box svg{opacity:1;transform:none}
[data-view="evenings2"] .ev-opt[role="radio"] .ev-box{border-radius:50%}
[data-view="evenings2"] .ev-opt-sub{display:block;font-weight:400;font-size:calc(var(--page)*var(--fs-optsub));
  color:var(--muted);margin-top:calc(var(--page)*.0022)}
[data-view="evenings2"] .ev-formfoot{display:flex;align-items:center;gap:calc(var(--page)*.0150);
  margin-top:auto;padding-top:calc(var(--page)*.0112)}
[data-view="evenings2"] .ev-notsure{font-size:calc(var(--page)*var(--fs-foot));color:#2b3d8f;text-decoration:underline;
  text-underline-offset:.28em}
[data-view="evenings2"] .ev-back{margin-left:auto;font-size:calc(var(--page)*var(--fs-foot));
  background:none;border:0;padding:calc(var(--page)*.0040) 0;font-family:inherit;color:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:.28em}
[data-view="evenings2"] .ev-back[hidden]{display:none}
[data-view="evenings2"] .ev-notsure{margin-left:auto}
[data-view="evenings2"] .ev-next{background:var(--lime);color:#14140f;border-radius:calc(var(--page)*.0022);
  text-decoration:none;font-weight:800;font-family:Clock,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em;
  font-size:calc(var(--page)*var(--fs-next));padding:calc(var(--page)*.0075) calc(var(--page)*.0140);
  display:inline-flex;align-items:center;gap:.6em;white-space:var(--nw);line-height:1;
  border:0;font-family:Clock,"Helvetica Neue",Arial,sans-serif;cursor:pointer;
  transition:transform .16s ease,opacity .16s ease}
[data-view="evenings2"] .ev-next:hover:not(:disabled){transform:translateY(-2px)}
[data-view="evenings2"] .ev-next:disabled{opacity:.42;cursor:not-allowed}

[data-view="evenings2"] .ev-short{position:relative;background:#f5f0e2;
  padding:calc(var(--page)*.0112) calc(var(--page)*.0090)}
[data-view="evenings2"] .ev-short-label{font-family:var(--mono);font-size:calc(var(--page)*var(--fs-shortlbl));
  letter-spacing:.10em;text-transform:uppercase;text-align:center;line-height:1}
/* The shortlist tray is drawn artwork inside the questionnaire panel, so it is
   built here rather than cut as an image. Geometry off the mockup: the tray
   runs the full width of this column (2015..2610 of 4096) from y 2690 to 2990,
   and the card sits in it from 2565 to 2830 with a second card peeking behind. */
[data-view="evenings2"] .ev-tray{position:relative;height:calc(var(--page)*.0732);
  margin:calc(var(--page)*.0503) calc(var(--page)*-.0090) 0;
  border-radius:0 0 calc(var(--page)*.0090) calc(var(--page)*.0090);
  background:linear-gradient(180deg,#2b2622 0 7%,#cfa87e 13%,#9c7d59 44%,#e2c69e 70%,#7d6446 90%,#57462f);
  box-shadow:0 calc(var(--page)*.0022) calc(var(--page)*.0045) #0000002e}
[data-view="evenings2"] .ev-tray-card{position:absolute;left:calc(var(--page)*.0135);
  right:calc(var(--page)*.0135);bottom:calc(var(--page)*.0390);z-index:2;
  background:#fdf6f1;border:1px solid #eadfd7;border-radius:calc(var(--page)*.0010);
  padding:calc(var(--page)*.0075) calc(var(--page)*.0060);font-size:calc(var(--page)*var(--fs-tray));
  line-height:1.22;box-shadow:0 calc(var(--page)*.0012) calc(var(--page)*.0035) #00000022}
[data-view="evenings2"] .ev-tray-card::before{content:"";position:absolute;z-index:-1;
  left:5%;right:5%;top:calc(var(--page)*-.0090);height:calc(var(--page)*.0130);
  background:#f4eae3;border:1px solid #eadfd7;border-bottom:0;
  border-radius:calc(var(--page)*.0010) calc(var(--page)*.0010) 0 0}
[data-view="evenings2"] .ev-tray-arrow{display:block;text-align:right;margin-top:calc(var(--page)*.0018);
  font-size:calc(var(--page)*.0150);line-height:1}
[data-view="evenings2"] .ev-hand{font-family:var(--mono);font-style:italic;font-size:calc(var(--page)*var(--fs-hand));
  letter-spacing:.03em;line-height:1.45;margin-top:calc(var(--page)*.0229);transform:rotate(-3deg);text-transform:uppercase}
/* The curved arrow runs from the ticked option across to the tray: in the
   mockup x 1010..1990, y 2640..2770, i.e. it starts well left of this column. */
[data-view="evenings2"] .ev-arrow{position:absolute;left:calc(var(--page)*-.2429);top:calc(var(--page)*.0566);
  width:calc(var(--page)*.2393);height:auto}
[data-view="evenings2"] .ev-panel-photo{overflow:hidden}
[data-view="evenings2"] .ev-panel-photo img{height:100%;object-fit:cover}


/* ---------- the question stack ---------- */
[data-view="evenings2"] .ev-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-view="evenings2"] .ev-step{border:0;padding:0;margin:0;min-width:0}
[data-view="evenings2"] .ev-step[hidden]{display:none}
[data-view="evenings2"] .ev-step[data-dir="fwd"]{animation:ev-in-fwd .26s cubic-bezier(.2,.7,.3,1) both}
[data-view="evenings2"] .ev-step[data-dir="back"]{animation:ev-in-back .26s cubic-bezier(.2,.7,.3,1) both}
@keyframes ev-in-fwd{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes ev-in-back{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
[data-view="evenings2"] .ev-dots li{transition:background .22s ease,border-color .22s ease}
[data-view="evenings2"] .ev-dots li.done{background:#cfe05a;border-color:#cfe05a}

/* ---------- the tray keeps the running shortlist ---------- */
[data-view="evenings2"] .ev-tray-list{display:grid;gap:calc(var(--page)*.0030);
  padding:0 calc(var(--page)*.0045) calc(var(--page)*.0040)}
[data-view="evenings2"] .ev-tray-list li{background:#fffdf6;border:1px solid #ddd2b8;
  border-radius:calc(var(--page)*.0010);padding:calc(var(--page)*.0038) calc(var(--page)*.0050);
  font-size:calc(var(--page)*.0100);line-height:1.2;box-shadow:0 1px 2px #00000014;
  animation:ev-chit .22s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes ev-chit{from{opacity:0;transform:translateY(-5px) rotate(-1.2deg)}to{opacity:1;transform:none}}
[data-view="evenings2"] .ev-tray-card[hidden]{display:none}

/* ---------- the recommendation ---------- */
[data-view="evenings2"] .ev-match{margin-block:auto;padding:calc(var(--page)*.0150) calc(var(--page)*.0315)
  calc(var(--page)*.0180) calc(var(--page)*.0210);animation:ev-result .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes ev-result{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
[data-view="evenings2"] .ev-match[hidden]{display:none}
[data-view="evenings2"] .ev-match-kicker{font-family:var(--serif);font-weight:700;
  font-size:calc(var(--page)*var(--fs-pre));line-height:1}
[data-view="evenings2"] .ev-match h2{font-size:calc(var(--page)*var(--fs-result));letter-spacing:-.04em;
  line-height:.85;margin-top:calc(var(--page)*.0120);outline:0}
[data-view="evenings2"] .ev-match-why{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-because));
  margin-top:calc(var(--page)*.0090);line-height:1.2;max-width:34ch}
[data-view="evenings2"] .ev-match-because{display:flex;flex-wrap:wrap;gap:calc(var(--page)*.0050);
  margin-top:calc(var(--page)*.0110)}
[data-view="evenings2"] .ev-match-because li{border:1.5px solid var(--ink);border-radius:999px;
  padding:calc(var(--page)*.0040) calc(var(--page)*.0085);font-size:calc(var(--page)*.0105);
  background:var(--lime)}
[data-view="evenings2"] .ev-match-because::before{content:"You said";font-family:var(--mono);
  font-size:calc(var(--page)*.0084);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  align-self:center;margin-right:calc(var(--page)*.0030)}
[data-view="evenings2"] .ev-match-cta{display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(var(--page)*.0150);margin-top:calc(var(--page)*.0150)}
[data-view="evenings2"] .ev-match-cta .ev-back{margin-left:0}
[data-view="evenings2"] .ev-match-fine{font-size:calc(var(--page)*.0098);color:var(--muted);
  margin-top:calc(var(--page)*.0110)}
[data-view="evenings2"] .ev-match-fine a{text-decoration:underline;text-underline-offset:.24em}

/* ---------- a few questions row ---------- */
[data-view="evenings2"] .ev-few{display:grid;grid-template-columns:1fr auto;align-items:start;
  padding:calc(var(--page)*.0073) var(--gut) 0}
[data-view="evenings2"] .ev-few h2{grid-column:1/-1;font-family:var(--serif);font-weight:600;
  letter-spacing:-.015em;font-size:calc(var(--page)*var(--fs-few));white-space:var(--nw);
  display:flex;align-items:center;gap:calc(var(--page)*.0130);justify-content:center}
[data-view="evenings2"] .ev-few h2::before,[data-view="evenings2"] .ev-few h2::after{
  content:"";height:1px;background:var(--rule);flex:1}
[data-view="evenings2"] .ev-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:calc(var(--page)*.0178)}
[data-view="evenings2"] .ev-steps li{display:flex;align-items:center;gap:calc(var(--page)*.0110);
  padding:0 calc(var(--page)*.0235)}
[data-view="evenings2"] .ev-steps li+li{border-left:1px solid var(--rule)}
[data-view="evenings2"] .ev-step-n{flex:none;width:calc(var(--page)*.0359);height:calc(var(--page)*.0359);
  box-sizing:border-box;border-radius:50%;background:var(--ink);color:var(--lime);
  border:calc(var(--page)*.0034) solid var(--lime);display:grid;place-items:center;font-weight:800;
  font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-size:calc(var(--page)*.0150)}
[data-view="evenings2"] .ev-step-i{flex:none;width:calc(var(--page)*.0232);height:calc(var(--page)*.0232)}
[data-view="evenings2"] .ev-step-copy{min-width:0}
[data-view="evenings2"] .ev-step-copy b{display:block;font-family:Clock,"Helvetica Neue",Arial,sans-serif;
  font-weight:800;letter-spacing:-.02em;font-size:calc(var(--page)*var(--fs-step));white-space:var(--nw)}
[data-view="evenings2"] .ev-step-copy span{display:block;font-family:var(--mono);
  font-size:calc(var(--page)*var(--fs-stepq));letter-spacing:.06em;color:var(--body);
  margin-top:calc(var(--page)*.0035);white-space:var(--nw)}
[data-view="evenings2"] .ev-few-note{font-family:var(--mono);font-size:calc(var(--page)*var(--fs-note));
  line-height:.95;letter-spacing:.03em;text-transform:uppercase;text-align:left;transform:rotate(-4deg);
  white-space:var(--nw);border-left:1px solid var(--rule);padding-left:calc(var(--page)*.0180);
  margin-top:calc(var(--page)*.0066)}

/* ---------- dark example-result band ----------
   Band inner 93..4016 of 4096: photograph 93..1461, card 1461..4016. Inside the
   card the main column runs 1528..2840 and the pale side box 2887..3982. */
[data-view="evenings2"] .ev-result{background:var(--dark);margin-top:calc(var(--page)*.0212);
  padding:calc(var(--page)*.0120) var(--gut);display:grid;grid-template-columns:34.87fr 65.13fr}
[data-view="evenings2"] .ev-result-photo{position:relative;overflow:hidden}
[data-view="evenings2"] .ev-result-photo img{height:100%;object-fit:cover}
[data-view="evenings2"] .ev-card{background:#fffefa;display:grid;
  grid-template-columns:1fr calc(var(--page)*.2673);gap:calc(var(--page)*.0115);
  padding:calc(var(--page)*.0083) calc(var(--page)*.0083) calc(var(--page)*.0137) calc(var(--page)*.0164)}
[data-view="evenings2"] .ev-card-main{min-width:0}
[data-view="evenings2"] .ev-pre{font-family:var(--serif);font-weight:700;font-size:calc(var(--page)*var(--fs-pre));
  letter-spacing:-.01em;white-space:var(--nw);line-height:1}
[data-view="evenings2"] .ev-card h2{font-size:calc(var(--page)*var(--fs-result));letter-spacing:-.04em;line-height:.85;
  margin-top:calc(var(--page)*.0146);white-space:var(--nw)}
[data-view="evenings2"] .ev-rec{display:inline-block;background:var(--lime);font-family:var(--mono);
  font-size:calc(var(--page)*var(--fs-rec));letter-spacing:.10em;text-transform:uppercase;border-radius:999px;
  padding:calc(var(--page)*.0032) calc(var(--page)*.0075);margin-top:calc(var(--page)*.0034);white-space:var(--nw);line-height:1}
[data-view="evenings2"] .ev-because{font-family:var(--serif);font-weight:700;font-size:calc(var(--page)*var(--fs-because));
  margin-top:calc(var(--page)*.0049);letter-spacing:-.01em;white-space:var(--nw);line-height:1.2}
[data-view="evenings2"] .ev-why{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-why));line-height:1.3;
  color:var(--body);margin-top:calc(var(--page)*.0098);white-space:var(--nw)}
[data-view="evenings2"] .ev-rows{margin-top:calc(var(--page)*.0051)}
[data-view="evenings2"] .ev-rows li{display:flex;align-items:center;gap:calc(var(--page)*.0075);
  border-top:1px solid var(--rule);padding:calc(var(--page)*.0085) 0}
[data-view="evenings2"] .ev-rows li:first-child{border-top:0}
[data-view="evenings2"] .ev-row-n{flex:none;width:calc(var(--page)*.0180);height:calc(var(--page)*.0180);
  border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:calc(var(--page)*.0100);font-weight:700}
[data-view="evenings2"] .ev-rows b{font-size:calc(var(--page)*var(--fs-rowb));min-width:calc(var(--page)*.0940);
  white-space:var(--nw)}
[data-view="evenings2"] .ev-rows span:last-child{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-rowd));
  color:var(--body);white-space:var(--nw)}
[data-view="evenings2"] .ev-side{background:#fbf6ea;border:1px solid #e3dcca;border-radius:calc(var(--page)*.0022);
  padding:calc(var(--page)*.0100) calc(var(--page)*.0100);align-self:start;min-width:0;
  margin-top:calc(var(--page)*.0049)}
[data-view="evenings2"] .ev-howbox{display:flex;gap:calc(var(--page)*.0170)}
[data-view="evenings2"] .ev-how-i{flex:none;width:calc(var(--page)*.0300);height:calc(var(--page)*.0300)}
[data-view="evenings2"] .ev-side h3{font-size:calc(var(--page)*var(--fs-h3));white-space:var(--nw)}
[data-view="evenings2"] .ev-side .ev-howbox p{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-howp));
  line-height:1.3;color:var(--body);margin-top:calc(var(--page)*.0022);white-space:var(--nw)}
[data-view="evenings2"] .ev-price{border-top:1px solid var(--rule);margin-top:calc(var(--page)*.0080);
  padding-top:calc(var(--page)*.0075);font-family:Clock,"Helvetica Neue",Arial,sans-serif;
  font-size:calc(var(--page)*var(--fs-price));letter-spacing:-.02em;white-space:var(--nw);
  display:flex;align-items:baseline;gap:.22em;line-height:1}
[data-view="evenings2"] .ev-price b{font-size:calc(var(--page)*var(--fs-pricebig));letter-spacing:-.045em}
[data-view="evenings2"] .ev-btn-lime,[data-view="evenings2"] .ev-btn-ghost{display:flex;align-items:center;
  justify-content:center;gap:.6em;width:100%;box-sizing:border-box;border-radius:calc(var(--page)*.0022);
  font-weight:800;font-family:Clock,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em;
  font-size:calc(var(--page)*var(--fs-btn));padding:calc(var(--page)*.0090) calc(var(--page)*.0080);
  margin-top:calc(var(--page)*.0068);text-decoration:none;white-space:var(--nw);line-height:1}
[data-view="evenings2"] .ev-btn-lime{background:var(--lime);color:#14140f;border:1.5px solid var(--lime)}
[data-view="evenings2"] .ev-btn-ghost{background:transparent;color:#14140f;border:2px solid var(--ink);cursor:pointer}
[data-view="evenings2"] .ev-fine{font-size:calc(var(--page)*var(--fs-fine));color:var(--muted);line-height:1.35;
  margin-top:calc(var(--page)*.0070);white-space:var(--nw)}

/* ---------- closing band ----------
   The copy is not centred vertically: in the mockup it starts 79px into a
   745px band, so it is top-aligned with a measured pad. */
[data-view="evenings2"] .ev-close{position:relative;aspect-ratio:4096/747;min-height:calc(var(--page)*.1300);
  width:100%;box-sizing:border-box;display:flex;align-items:flex-start;overflow:hidden;background:#12161a;color:#fff}
[data-view="evenings2"] .ev-close-img{position:absolute;inset:0;z-index:0}
[data-view="evenings2"] .ev-close-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
[data-view="evenings2"] .ev-close-copy{position:relative;z-index:2;width:100%;box-sizing:border-box;
  text-align:center;padding:calc(var(--page)*.0193) var(--gut) 0}
[data-view="evenings2"] .ev-close-copy>*{max-width:calc(var(--page)*var(--close-cap));margin-inline:auto}
[data-view="evenings2"] .ev-close h2{font-size:calc(var(--page)*var(--fs-close-head));letter-spacing:-.035em;
  white-space:var(--nw)}
[data-view="evenings2"] .ev-close p{font-family:var(--serif);font-size:calc(var(--page)*var(--fs-close-sub));
  margin-top:calc(var(--page)*.0060);white-space:var(--nw)}
[data-view="evenings2"] .ev-close .ev-cta{margin-top:calc(var(--page)*.0085)}

/* ---------- footer bar ---------- */
[data-view="evenings2"] .site-footer{background:var(--foot);color:#fff;padding:calc(var(--page)*.0075) 0;border:0;
  display:block;margin:0}
[data-view="evenings2"] .ev-foot{max-width:1560px;margin:0 auto;display:flex;align-items:center;
  gap:calc(var(--page)*.0140);padding:0 var(--gut)}
[data-view="evenings2"] .ev-foot .wordmark{font-family:Clock,"Helvetica Neue",Arial,sans-serif;font-weight:800;
  letter-spacing:-.045em;font-size:calc(var(--page)*.0180);color:#fff;text-decoration:none}
[data-view="evenings2"] .ev-foot-div{width:1px;height:calc(var(--page)*.0140);background:#ffffff40}
[data-view="evenings2"] .ev-foot-mono{font-family:var(--mono);font-size:calc(var(--page)*.0084);letter-spacing:.14em}
[data-view="evenings2"] .ev-foot-right{margin-left:auto}

/* ---------- responsive ----------
   The mockup is a desktop composition. Below 1000px the fixed hero and closing
   aspect ratios would crush their copy, so both revert to natural height with
   the photograph covering behind — the scene still runs behind the text. */
@media (max-width:1000px){
  [data-view="evenings2"]{--page:min(100vw,1000px);--gut:5%;--hero-inset:6%}
  /* Desktop type is held on one line to match the mockup; on a phone that
     would overflow, so every nowrap on this page is released together. */
  [data-view="evenings2"]{--nw:normal;--hero-cap:1;--hero-cap-low:1;--close-cap:1}
  [data-view="evenings2"] .ev-hero,[data-view="evenings2"] .ev-close{aspect-ratio:auto;min-height:0;display:grid}
  [data-view="evenings2"] .ev-hero-img,[data-view="evenings2"] .ev-close-img{position:relative;inset:auto;
    grid-area:1/1;width:100%;height:100%}
  [data-view="evenings2"] .ev-hero-img img,[data-view="evenings2"] .ev-close-img img{width:100%;height:100%;object-fit:cover}
  [data-view="evenings2"] .ev-hero-copy,[data-view="evenings2"] .ev-close-copy{grid-area:1/1}
  [data-view="evenings2"] .ev-hero-copy{padding:calc(var(--page)*.130) var(--hero-inset) calc(var(--page)*.055)}
  [data-view="evenings2"] .ev-hero-copy>*{max-width:none}
  [data-view="evenings2"] .ev-close-copy{padding:calc(var(--page)*.060) var(--gut)}
  [data-view="evenings2"] .ev-panel{grid-template-columns:1fr}
  [data-view="evenings2"] .ev-panel-body{grid-template-columns:1fr}
  [data-view="evenings2"] .ev-form-head{padding:calc(var(--page)*.030) calc(var(--page)*.034) 0}
  [data-view="evenings2"] .ev-form{padding:calc(var(--page)*.026) calc(var(--page)*.034) calc(var(--page)*.030)}
  [data-view="evenings2"] .ev-opt-wide{max-width:none}
  [data-view="evenings2"] .ev-opts{column-gap:calc(var(--page)*.020);row-gap:calc(var(--page)*.014)}
  /* The hero is a wide desktop composition; on a phone the crop keeps the copy
     over the dark end of the room rather than over the characters. */
  [data-view="evenings2"] .ev-hero-img img{object-position:12% 50%}
  [data-view="evenings2"] .ev-short{border-top:1.5px solid var(--rule);padding:calc(var(--page)*.030) calc(var(--page)*.034)}
  [data-view="evenings2"] .ev-arrow{display:none}
  [data-view="evenings2"] .ev-panel-photo img{height:auto;aspect-ratio:1412/1667;object-fit:cover}
  [data-view="evenings2"] .ev-few{grid-template-columns:1fr}
  [data-view="evenings2"] .ev-steps{grid-template-columns:1fr;gap:calc(var(--page)*.018)}
  [data-view="evenings2"] .ev-steps li{padding:calc(var(--page)*.014) 0}
  [data-view="evenings2"] .ev-steps li+li{border-left:0;border-top:1px solid var(--rule)}
  [data-view="evenings2"] .ev-few-note{text-align:left;transform:none;white-space:normal;
    margin-top:calc(var(--page)*.016)}
  [data-view="evenings2"] .ev-result{grid-template-columns:1fr}
  [data-view="evenings2"] .ev-result-photo img{height:auto;aspect-ratio:1368/1210}
  [data-view="evenings2"] .ev-card{grid-template-columns:1fr}
  [data-view="evenings2"] .ev-rows li{flex-wrap:wrap;row-gap:calc(var(--page)*.006)}
  [data-view="evenings2"] .ev-rows b{min-width:0}
}
@media (max-width:620px){
  [data-view="evenings2"]{--page:min(100vw,620px)}
  [data-view="evenings2"] .ev-hero h1{font-size:calc(var(--page)*.072)}
  [data-view="evenings2"] .ev-hero-sub{font-size:calc(var(--page)*.031);margin-top:calc(var(--page)*.020)}
  [data-view="evenings2"] .ev-cta{font-size:calc(var(--page)*.036);padding:calc(var(--page)*.020) calc(var(--page)*.038);
    margin-top:calc(var(--page)*.024)}
  [data-view="evenings2"] .ev-micro{font-size:calc(var(--page)*.021);margin-top:calc(var(--page)*.018)}
  [data-view="evenings2"] .ev-intro h2{font-size:calc(var(--page)*.062)}
  [data-view="evenings2"] .ev-intro p{font-size:calc(var(--page)*.030);margin-top:calc(var(--page)*.014)}
  [data-view="evenings2"] .ev-form{padding:calc(var(--page)*.034)}
  [data-view="evenings2"] .ev-qnum,[data-view="evenings2"] .ev-qtag{font-size:calc(var(--page)*.021)}
  [data-view="evenings2"] .ev-qtag{display:none}
  [data-view="evenings2"] .ev-dots li{width:calc(var(--page)*.022);height:calc(var(--page)*.022)}
  [data-view="evenings2"] .ev-form h2{font-size:calc(var(--page)*.058)}
  [data-view="evenings2"] .ev-q{font-size:calc(var(--page)*.038)}
  [data-view="evenings2"] .ev-hint{font-size:calc(var(--page)*.028)}
  [data-view="evenings2"] .ev-opts{grid-template-columns:1fr}
  [data-view="evenings2"] .ev-opt,[data-view="evenings2"] .ev-opt.r{grid-column:1}
  [data-view="evenings2"] .ev-opt{font-size:calc(var(--page)*.030);padding:calc(var(--page)*.018) calc(var(--page)*.020)}
  [data-view="evenings2"] .ev-box{width:calc(var(--page)*.038);height:calc(var(--page)*.038)}
  [data-view="evenings2"] .ev-opt-sub{font-size:calc(var(--page)*.025)}
  [data-view="evenings2"] .ev-formfoot{flex-wrap:wrap;gap:calc(var(--page)*.024)}
  [data-view="evenings2"] .ev-notsure,[data-view="evenings2"] .ev-back{font-size:calc(var(--page)*.028)}
  [data-view="evenings2"] .ev-back{margin-left:0}
  [data-view="evenings2"] .ev-next{font-size:calc(var(--page)*.034);padding:calc(var(--page)*.018) calc(var(--page)*.030);
    width:100%;justify-content:center;box-sizing:border-box}
  [data-view="evenings2"] .ev-short{padding:calc(var(--page)*.034)}
  [data-view="evenings2"] .ev-short-label{font-size:calc(var(--page)*.021)}
  [data-view="evenings2"] .ev-tray{height:calc(var(--page)*.150);margin-top:calc(var(--page)*.105)}
  [data-view="evenings2"] .ev-tray-card{font-size:calc(var(--page)*.030);left:calc(var(--page)*.035);
    right:calc(var(--page)*.035);bottom:calc(var(--page)*.080);padding:calc(var(--page)*.020)}
  [data-view="evenings2"] .ev-tray-card::before{top:calc(var(--page)*-.020);height:calc(var(--page)*.028)}
  [data-view="evenings2"] .ev-hand{font-size:calc(var(--page)*.028)}
  [data-view="evenings2"] .ev-few h2{font-size:calc(var(--page)*.058)}
  [data-view="evenings2"] .ev-step-n{width:calc(var(--page)*.058);height:calc(var(--page)*.058);font-size:calc(var(--page)*.032)}
  [data-view="evenings2"] .ev-step-i{width:calc(var(--page)*.048);height:calc(var(--page)*.048)}
  [data-view="evenings2"] .ev-step-copy b{font-size:calc(var(--page)*.036)}
  [data-view="evenings2"] .ev-step-copy span{font-size:calc(var(--page)*.026)}
  [data-view="evenings2"] .ev-few-note{font-size:calc(var(--page)*.028)}
  [data-view="evenings2"] .ev-card{padding:calc(var(--page)*.030)}
  [data-view="evenings2"] .ev-pre{font-size:calc(var(--page)*.042)}
  [data-view="evenings2"] .ev-card h2{font-size:calc(var(--page)*.086)}
  [data-view="evenings2"] .ev-rec{font-size:calc(var(--page)*.021)}
  [data-view="evenings2"] .ev-because{font-size:calc(var(--page)*.042)}
  [data-view="evenings2"] .ev-why{font-size:calc(var(--page)*.029)}
  [data-view="evenings2"] .ev-row-n{width:calc(var(--page)*.042);height:calc(var(--page)*.042);font-size:calc(var(--page)*.024)}
  [data-view="evenings2"] .ev-rows b{font-size:calc(var(--page)*.030)}
  [data-view="evenings2"] .ev-rows span:last-child{font-size:calc(var(--page)*.027)}
  [data-view="evenings2"] .ev-side{padding:calc(var(--page)*.028)}
  [data-view="evenings2"] .ev-side h3{font-size:calc(var(--page)*.034)}
  [data-view="evenings2"] .ev-side .ev-howbox p{font-size:calc(var(--page)*.027)}
  [data-view="evenings2"] .ev-how-i{width:calc(var(--page)*.052);height:calc(var(--page)*.052)}
  [data-view="evenings2"] .ev-price{font-size:calc(var(--page)*.036)}
  [data-view="evenings2"] .ev-price b{font-size:calc(var(--page)*.076)}
  [data-view="evenings2"] .ev-btn-lime,[data-view="evenings2"] .ev-btn-ghost{font-size:calc(var(--page)*.032);
    padding:calc(var(--page)*.020) calc(var(--page)*.024)}
  [data-view="evenings2"] .ev-fine{font-size:calc(var(--page)*.024)}
    [data-view="evenings2"] .ev-close h2{font-size:calc(var(--page)*.056)}
  [data-view="evenings2"] .ev-close p{font-size:calc(var(--page)*.030)}
  [data-view="evenings2"] .ev-foot{flex-wrap:wrap;gap:calc(var(--page)*.020)}
  [data-view="evenings2"] .ev-foot .wordmark{font-size:calc(var(--page)*.046)}
  [data-view="evenings2"] .ev-foot-mono{font-size:calc(var(--page)*.021)}
  [data-view="evenings2"] .ev-foot-div{display:none}
  [data-view="evenings2"] .ev-foot-right{margin-left:0;width:100%}
}