/* Services, version 2 (2026-11-04, evening), sized in the reference's own pixels (--u, see page.css): four numbered
   columns between full-height hairlines, the free audit on the wine band with an example answer on tissue over what the
   report holds, and the close. Version 1: archive/subpages-v1-2026-11-04/. */

/* ---------- head: the two tissue sheets run off the top and right; the lower one's corner curls ---------- */
.sv-head__sheets { width: 60%; }

/* ---------- the four services ---------- */
.sv-list { padding: calc(34 * var(--u)) 0 calc(40 * var(--u)); }
.sv-cols { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto 1fr auto; }
.sv-col { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.sv-col + .sv-col { border-left: 1px solid var(--rule); }
.sv-col__link { position: relative; z-index: 0; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding: calc(2 * var(--u)) calc(18 * var(--u)) calc(4 * var(--u)) calc(20 * var(--u)); color: var(--ink); }
.sv-col:first-child .sv-col__link { padding-left: 0; }
.sv-col__n { justify-self: start; font: 500 calc(14 * var(--u)) / 1 var(--read); color: #182124; padding-bottom: calc(9 * var(--u)); margin-bottom: calc(24 * var(--u)); border-bottom: 2px solid #182124; min-width: calc(26 * var(--u)); }
.sv-col__title { font-size: calc(34 * var(--u)); line-height: 1; letter-spacing: -.022em; margin-bottom: calc(28 * var(--u)); color: var(--hd); }
.sv-col__sum { font: 400 calc(15 * var(--u)) / 1.3 var(--read); color: var(--ink); max-width: calc(230 * var(--u)); }
.sv-col__arrow { width: calc(30 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(22 * var(--u)); fill: none; stroke: var(--hd); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .36s steps(3, end); }
.sv-col__free { position: absolute; right: calc(10 * var(--u)); top: calc(44 * var(--u)); }
/* pointing at a service lays a sheet of paper under it, drawn up in held frames, and steps the arrow on */
.sv-col__link::before { content: ""; position: absolute; z-index: -1; inset: calc(-16 * var(--u)) calc(6 * var(--u)) calc(-16 * var(--u)); background: #F9F5EE var(--sheet-a); background-size: 760px;
  box-shadow: 0 1px 2px rgb(21 31 34 / .12), 8px 16px 26px -16px rgb(13 22 25 / .4); transform: rotate(-.6deg); clip-path: inset(100% 0 0 0); transition: clip-path .42s steps(5, end); }
.sv-col:first-child .sv-col__link::before { left: calc(-16 * var(--u)); }
.sv-col__link:hover::before, .sv-col__link:focus-visible::before { clip-path: inset(0 0 0 0); }
.sv-col__link:hover .sv-col__arrow, .sv-col__link:focus-visible .sv-col__arrow { transform: translateX(10px); }
.sv-col__link:focus-visible { outline-offset: 8px; }

/* ---------- the free audit on the wine band ---------- */
.sv-audit { padding: calc(44 * var(--u)) 0 calc(40 * var(--u)); }
.sv-reveal { align-items: start; }
.sv-audit__grid { position: relative; }
.sv-audit__head { max-width: calc(560 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.sv-audit__head .psec__lede { max-width: calc(470 * var(--u)); }
.sv-audit__note { left: 72%; top: calc(26 * var(--u)); }

.sv-answer { padding: calc(34 * var(--u)) calc(54 * var(--u)) calc(28 * var(--u)) calc(36 * var(--u)); }
.sv-answer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: calc(18 * var(--u)); }
.sv-answer__ask { padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: 99px; background: rgb(120 90 70 / .1); box-shadow: inset 1px 1px 2px rgb(80 50 40 / .18), inset -1px -1px 0 rgb(258 255 252 / .5); font: 500 calc(12.5 * var(--u)) var(--read); color: var(--ink-2); }
.sv-answer__intro { font: italic 400 calc(28 * var(--u)) / 1.14 var(--serif); color: #14191B; letter-spacing: -.012em; margin-bottom: calc(14 * var(--u)); }
.sv-answer__list { counter-reset: n; display: grid; }
.sv-answer__list li { counter-increment: n; display: grid; grid-template-columns: calc(24 * var(--u)) 1fr; padding: calc(5 * var(--u)) 0; border-top: 1px solid rgb(42 62 68 / .14); }
.sv-answer__list li::before { content: counter(n) "."; grid-row: span 2; font: 700 calc(15 * var(--u)) / 1.35 var(--display); color: var(--muted); }
.sv-answer__list b { font: 700 calc(15.5 * var(--u)) / 1.2 var(--display); color: var(--hd); }
.sv-answer__list span { font: 400 calc(12 * var(--u)) / 1.3 var(--read); color: var(--ink-2); }
.sv-answer__you { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(12 * var(--u)); font: italic 400 calc(21 * var(--u)) var(--serif); color: #14191B; }
.sv-answer__you .stamp { font-size: calc(10.5 * var(--u)); font-style: normal; }

.sv-report { display: grid; grid-template-columns: 1fr minmax(120px, 25%); gap: 0 calc(22 * var(--u)); padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)) calc(var(--fw) + var(--bw) - 100% + 30 * var(--u)); }
.sv-rows { display: grid; margin-top: calc(12 * var(--u)); }
.sv-rows div { position: relative; padding: calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(40 * var(--u)); border-bottom: 1px solid rgb(42 62 68 / .16); }
.sv-rows div::before { content: ""; position: absolute; left: 0; top: calc(11 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; border: 1.5px solid var(--ink-red);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356808C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.6'/%3E%3C/svg%3E") center / 100% no-repeat; }
.sv-rows dt { font: 700 calc(19 * var(--u)) / 1.15 var(--display); color: var(--hd); letter-spacing: -.01em; }
.sv-rows dd { margin: calc(3 * var(--u)) 0 0; font: 400 calc(12.5 * var(--u)) / 1.32 var(--read); color: var(--ink); }
.sv-report__page { align-self: start; margin: calc(34 * var(--u)) 0 0; transform: rotate(3deg); }
.sv-report__pdf { margin-top: calc(6 * var(--u)); }
.sv-report__page img { width: 100%; background: #fff; box-shadow: 0 1px 2px rgb(13 22 25 / .25), 6px 12px 20px -10px rgb(13 22 25 / .45); }
.sv-report__page figcaption { margin-top: calc(10 * var(--u)); transform: rotate(-3deg); }
.sv-report__page .tlink { font-size: calc(12.5 * var(--u)); min-height: 0; }
.sv-report__cap { grid-column: 1 / -1; margin-top: calc(10 * var(--u)); font: italic 400 calc(11.5 * var(--u)) / 1.45 var(--serif); color: var(--muted); max-width: calc(420 * var(--u)); }

/* ---------- the close ---------- */
.sv-close { overflow: hidden; padding-block: calc(56 * var(--u)) calc(62 * var(--u)); }
.sv-close__sheets { width: 46%; }
.sv-close__inner { position: relative; z-index: 2; }
.sv-close__title { font-size: calc(52 * var(--u)); line-height: 1; letter-spacing: -.025em; color: var(--hd); }
.sv-close__fine { margin-top: calc(14 * var(--u)); font: 400 calc(19 * var(--u)) / 1.32 var(--read); color: var(--ink); }
.sv-close__act { display: flex; align-items: center; gap: calc(30 * var(--u)); flex-wrap: wrap; margin-top: calc(26 * var(--u)); }

/* ---------- tablets ---------- */
@media (max-width: 1100px) {
  .sv-cols { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .sv-col:nth-child(3) { border-left: 0; }
  .sv-col:nth-child(3) .sv-col__link { padding-left: 0; }
  .sv-reveal { --fw: 70% !important; --bw: 80% !important; }
  .sv-report { grid-template-columns: 1fr; }
  .sv-report__page { display: none; }
  .sv-audit__note { display: none; }
}
/* ---------- phones ---------- */
@media (max-width: 760px) {
  .sv-cols { grid-template-columns: 1fr; row-gap: 0; }
  .sv-col, .sv-col__link { display: block; }
  .sv-col + .sv-col { border-left: 0; border-top: 1px solid var(--rule); }
  .sv-col__link, .sv-col:first-child .sv-col__link, .sv-col:nth-child(3) .sv-col__link { padding: 26px 0 24px; }
  .sv-col__link::before { inset: 8px -10px; }
  .sv-col__n { display: inline-block; }
  .sv-col__title { font-size: 2rem; margin-bottom: 12px; }
  .sv-col__sum { max-width: none; font-size: 1.02rem; }
  .sv-col__arrow { display: block; margin-top: 14px; }
  .sv-col__free { top: 20px; right: 0; }
  .sv-list { padding-top: 12px; }
  .sv-reveal { --fw: 92% !important; --bw: 92% !important; }
  .sv-answer { padding: 26px 22px 24px; }
  .sv-answer__intro { font-size: 1.45rem; }
  .sv-answer__ask { display: none; }
  .sv-report { padding: 24px 22px; }
  .sv-close__title { font-size: 2.4rem; }
  .sv-close__sheets { width: 100%; opacity: .5; }
}

/* ---------- version 3 (2026-11-04, Jonah: "missing personality"): the reference's handwriting and marks ---------- */
.sv-report { grid-template-columns: 1fr; }
.sv-rows div { padding-right: 34%; }
.sv-rows dd.sv-rows__note { position: absolute; right: 0; top: 50%; translate: 0 -50%; margin: 0; width: 31%; font: 500 calc(17 * var(--u)) / 1.02 var(--hand); color: var(--note-red); white-space: nowrap; }
.sv-rows__note .note__arrow { position: static; display: block; width: calc(30 * var(--u)); height: calc(14 * var(--u)); margin: 0 0 2px -2px; }
.sv-rows .is-gap::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356808C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Ccircle cx='12' cy='17.3' r='.6' fill='%2356808C'/%3E%3C/svg%3E"); }
.sv-answer__intro::before { content: "\201C"; margin-left: -.42em; }
.sv-answer__intro::after { content: "\201D"; }
.sv-answer__note { right: calc(30 * var(--u)); bottom: calc(12 * var(--u)); font-size: calc(17 * var(--u)); text-align: left; }
.sv-answer__note .note__arrow { position: absolute; right: 102%; bottom: 60%; width: calc(48 * var(--u)); height: calc(40 * var(--u)); }
.sv-answer { padding-bottom: calc(70 * var(--u)); }
@media (max-width: 1100px) { .sv-rows div { padding-right: 0; } .sv-rows__note { display: none; } }
@media (max-width: 760px) { .sv-answer__note { display: none; } .sv-answer { padding-bottom: 24px; } }

/* the five marks as small paper chips under the audit's line */
.sv-marks { display: flex; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); }
.sv-marks span { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: #F9F5EE; box-shadow: 0 1px 1px rgb(0 0 0 / .2), 0 4px 8px -4px rgb(0 0 0 / .4); }
.sv-marks svg { width: 58%; height: 58%; }
.mark--chatgpt-light { fill: #0D0D0D; }
@media (max-width: 760px) { .sv-marks span { width: 36px; height: 36px; } }