/* 613 trial layer (#628 6224745729). Every control is at least 44 px tall (the touch-target rule the rev 19 checks enforce). Uses each page's own tokens (Sketch 5: --gold --ivory --muted --hair --n2 --ui; demo: --accent --ink
   --muted --line --bg2), with fallbacks, so the additions sit in the existing midnight-and-gold language. Every rule is scoped to [data-trial]. */
.trial{--tr-gold:var(--gold,var(--accent,#D9B45A));--tr-ink:var(--ivory,var(--ink,#EFE9DC));--tr-muted:var(--muted,#A9B2C8);--tr-line:var(--hair,var(--line,rgba(217,180,90,.36)));--tr-panel:var(--n2,var(--bg2,#0F1D44));--tr-font:var(--ui,inherit)}
[data-trial]{font-family:var(--tr-font);color:var(--tr-ink);box-sizing:border-box;text-align:start}
[data-trial] *,[data-trial] *::before,[data-trial] *::after{box-sizing:border-box}
[data-trial] a{color:var(--tr-gold);text-underline-offset:3px}
[data-trial] p{margin:0}
[data-trial] [hidden]{display:none!important}
.tr-flag{position:fixed;z-index:9000;pointer-events:none;user-select:none;inset-inline-start:8px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:min(560px,calc(100vw - 16px));padding:7px 12px;border:1px solid var(--tr-line);border-radius:999px;background:rgba(6,13,36,.92);font-size:12px;line-height:1.35;color:var(--tr-ink);box-shadow:0 6px 24px rgba(0,0,0,.35)}
html.trial body:has(#bar) .tr-flag{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
.tr-fail{border-color:#c66}
.tr-pill{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--tr-gold);color:#0B1431;font-weight:700;font-size:11px;letter-spacing:.12em}
.tr-block{display:grid;gap:12px;margin:28px auto;max-width:980px;padding:22px clamp(16px,3vw,28px);border:1px solid var(--tr-line);border-radius:14px;background:color-mix(in srgb,var(--tr-panel) 72%,transparent)}
section.tr-block{width:calc(100% - 32px)}
.tr-offers{margin:22px 0;width:auto}
.tr-k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tr-gold)}
.tr-h{margin:0;font:500 clamp(20px,2.4vw,26px)/1.25 var(--disp,var(--display,Georgia,serif));color:var(--tr-ink);text-wrap:balance}
.tr-h2{margin:0;font:500 clamp(22px,2.8vw,30px)/1.2 var(--disp,var(--display,Georgia,serif));color:var(--tr-ink);text-wrap:balance}
.tr-sub{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--tr-gold);margin-top:6px!important}
.tr-small,.tr-note,.tr-cap{font-size:13.5px;line-height:1.55;color:var(--tr-muted)}
.tr-note{border-inline-start:2px solid var(--tr-line);padding-inline-start:10px}
.tr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tr-cards.tr-one{grid-template-columns:minmax(0,600px)}
.tr-card{display:grid;align-content:start;gap:6px;padding:16px;border:1px solid var(--tr-line);border-radius:12px;background:rgba(6,12,32,.35);font-size:14px;line-height:1.5}
.tr-card header{display:grid;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--tr-line)}
.tr-card h4{margin:0;font:600 17px/1.3 var(--tr-font);color:var(--tr-ink)}
.tr-price{font:500 24px/1.2 var(--lat,Georgia,serif);color:var(--tr-gold);font-variant-numeric:tabular-nums}
.tr-status{font-size:12.5px;color:var(--tr-muted)}
.tr-test{border-style:dashed}
.tr-test .tr-status{color:#E9C46A}
#trOffers .tr-card ul,#trProof ul{margin:0;padding:0;padding-inline-start:18px;display:grid;gap:3px;list-style:disc;border:0}
#trOffers .tr-card li{margin:0;padding:0;font-size:14px;line-height:1.5;border:0;background:none}
#trOffers .tr-card li::before{content:none}
.tr-no li{color:var(--tr-muted)}
.tr-why{font-size:13px;color:var(--tr-muted);padding-top:6px;border-top:1px dashed var(--tr-line)}
.tr-family{font-size:14px;line-height:1.55}
.tr-steps summary{cursor:pointer;color:var(--tr-gold);font-weight:600}
.tr-steps ol{margin:8px 0 0;padding-inline-start:20px;display:grid;gap:4px;font-size:14px}
.tr-links{font-size:14px}
.tr-chips{display:flex;flex-wrap:wrap;gap:8px}
.tr-chip{display:inline-flex;align-items:center;min-height:44px;padding:6px 13px;border:1px solid var(--tr-line);border-radius:999px;background:transparent;color:var(--tr-ink);font:inherit;font-size:13.5px;text-decoration:none;cursor:pointer}
.tr-chip:hover,.tr-chip[aria-pressed="true"]{border-color:var(--tr-gold);background:color-mix(in srgb,var(--tr-gold) 18%,transparent)}
.tr-chip:focus-visible,.tr-btn:focus-visible,.tr-verse:focus-visible{outline:2px solid var(--tr-gold);outline-offset:2px}
.tr-dlgocc{display:grid;gap:10px;margin:14px 0}
.tr-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tr-btn{min-height:44px;padding:9px 16px;border:1px solid var(--tr-gold);border-radius:8px;background:var(--tr-gold);color:#0B1431;font:600 14px/1.25 var(--tr-font);cursor:pointer;text-align:center}
.tr-btn.tr-ghost{background:transparent;color:var(--tr-gold)}
.tr-btn[disabled]{opacity:.45;cursor:not-allowed}
.tr-msg{font-size:13px;color:var(--tr-muted);min-height:1em}
.tr-dl{display:grid;gap:6px;margin:4px 0 0;font-size:14px}
.tr-dl div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--tr-line)}
.tr-dl dt{color:var(--tr-muted)} .tr-dl dd{margin:0}
.tr-who p,.tr-unveil>p{max-width:68ch;line-height:1.65}
.tr-video{width:100%;max-width:900px;aspect-ratio:1098/716;border:1px solid var(--tr-line);border-radius:10px;background:#081131}
figure.framed{position:relative}
.tr-illus{position:absolute;top:10px;inset-inline-start:10px;z-index:2;padding:3px 10px;border-radius:999px;background:rgba(6,13,36,.82);border:1px solid var(--tr-line);font-size:12px;letter-spacing:.06em;color:var(--tr-ink)}
.tr-pkg{display:grid;gap:8px;margin:14px 0;padding:12px 14px;border:1px solid var(--tr-line);border-radius:10px}
.tr-strong{font-weight:600}
/* demo: the occasion-first start inside the personal card */
.tr-occ{display:grid;gap:8px;margin:8px 0 12px}
.tr-price-up{font-size:12.5px;line-height:1.5;color:var(--tr-muted);padding:8px 10px;border:1px solid var(--tr-line);border-radius:8px}
.tr-occ .tr-chip{min-height:44px;font-size:13px;padding:5px 11px}
.tr-sug{display:grid;gap:6px}
.tr-verses{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tr-verse{display:grid;gap:3px;width:100%;padding:9px 11px;border:1px solid var(--tr-line);border-radius:9px;background:transparent;color:var(--tr-ink);font:inherit;text-align:start;cursor:pointer}
.tr-verse[aria-pressed="true"]{border-color:var(--tr-gold);background:color-mix(in srgb,var(--tr-gold) 14%,transparent)}
.tr-ref{font-size:12px;color:var(--tr-gold)} .tr-heb{font-size:16px;line-height:1.45;text-align:right} .tr-aid{font-size:12.5px;color:var(--tr-muted);font-style:italic}
.tr-go{margin:8px 0}
.tr-go .tr-btn{min-height:44px;font-size:13px;padding:7px 12px}
/* draft image and proof walk-through */
.tr-draft{display:grid;gap:8px;margin:12px 0;padding:12px 14px;border:1px solid var(--tr-gold);border-radius:10px}
.tr-draftimg{display:block;width:100%;max-width:420px;border:1px solid var(--tr-line);border-radius:8px}
.tr-proof{margin:18px 0;width:auto}
.tr-fs{display:grid;gap:6px;margin:0;padding:10px 12px;border:1px solid var(--tr-line);border-radius:10px}
.tr-fs legend{padding:0 6px;font-weight:600;color:var(--tr-gold);font-size:14px}
.tr-opt{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer}
.tr-opt input{margin-top:3px;accent-color:var(--tr-gold)}
.tr-field{display:grid;gap:4px;font-size:13.5px;color:var(--tr-muted)}
.tr-field input,.tr-field textarea{width:100%;padding:8px 10px;border:1px solid var(--tr-line);border-radius:8px;background:rgba(6,12,32,.4);color:var(--tr-ink);font:inherit}
.tr-warn{color:#E9C46A}
.tr-total{font-size:15px;font-variant-numeric:tabular-nums}
.tr-ok{padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--tr-gold) 16%,transparent);font-size:14px}
.tr-tl{margin:0;padding-inline-start:22px;display:grid;gap:6px;font-size:14px}
.tr-tl em{font-style:normal;font-size:11.5px;letter-spacing:.06em;padding:1px 7px;border-radius:999px;border:1px solid var(--tr-line);color:var(--tr-muted);white-space:nowrap}
.tr-tl .tr-real em{border-color:var(--tr-gold);color:var(--tr-gold)} .tr-tl .tr-sim em{border-style:dashed;color:#E9C46A}
.tr-tl .tr-no span,.tr-tl .tr-nb span{color:var(--tr-muted)} .tr-tl .tr-nb em{border-style:dotted}
.tr-proofimg{margin:0;display:grid;gap:6px} .tr-proofimg img{width:100%;max-width:760px;border:1px solid var(--tr-line);border-radius:8px}
.tr-proofimg figcaption{font-size:13px;color:var(--tr-muted)}
.tr-stop{padding:10px 12px;border:1px dashed var(--tr-line);border-radius:8px;font-size:14px;line-height:1.55}
/* the poem entry (#628 6232405005, owner-approved): the heading, its supporting line beneath, and the poem's own title */
.poem .psub,.core .psub{margin:calc(-1 * clamp(8px,1vw,14px)) auto clamp(18px,1.8vw,26px);font:400 clamp(15px,1.15vw,17px)/1.5 var(--ui,system-ui,sans-serif);letter-spacing:.04em;color:var(--muted,#A9B2C8);text-align:center}
.poem .pname,.core .pname{margin:0 auto clamp(14px,1.4vw,20px);font:500 clamp(19px,1.5vw,23px)/1.3 var(--disp,Georgia,serif);color:var(--hi,#FBF8F1);text-align:center}
html.trial .poemCol > .eyebrow{font:500 clamp(20px,1.7vw,24px)/1.3 var(--disp,var(--display,Georgia,serif));letter-spacing:.01em;text-transform:none;color:var(--accent,var(--gold,#D9B45A))}
html.trial .poemCol > .eyebrowSub{margin-top:-10px;font:400 14.5px/1.5 var(--ui,system-ui,sans-serif);color:var(--muted,#A9B2C8)}
html.trial .poemCol > .poemName{font:500 19px/1.3 var(--display,Georgia,serif);color:var(--ink-hi,var(--ink,#EFE9DC))}
/* long names on a phone (#628 6231856530): the preview of your thread uses the full screen width, so the woven name is larger */
@media (max-width:600px){html.trial #pvWrap>.stage.small{width:100vw;max-width:none;margin-inline:calc(50% - 50vw);border-inline:0}}
/* the reading view for the woven name (#628 6233983142): the note and the control under the preview; the complete name, as text, above the enlarged view */
html.trial .trRead{display:grid;gap:6px;justify-items:start;margin-top:6px}
html.trial .trReadNote{margin:0;max-width:60ch;font-size:13.5px;line-height:1.5;color:var(--tr-muted)}
html.trial .trReadCap .nm{font-size:clamp(18px,5vw,22px);line-height:1.35;overflow-wrap:anywhere}
/* a quiet sense of belonging (#628 6236825950): three gold points on the flag and the short illustrated dedication they open, under the flag */
html.trial .trMark{position:absolute;z-index:3;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.trial .trMark::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#E2C27A;box-shadow:0 0 0 2px rgba(9,17,42,.6),0 0 9px 2px rgba(226,194,122,.5);transition:transform .2s}
html.trial .trMark:hover::before,html.trial .trMark[aria-expanded="true"]::before{transform:scale(1.45);background:#F4DFA6}
html.trial .trMark:focus-visible{outline:2px solid #E2C27A;outline-offset:-8px}
html.trial .flag.zooming .trMark{opacity:0;visibility:hidden}
html.trial .trBelBox{display:grid;gap:6px;margin-top:14px;text-align:start}
html.trial .trBelLine{margin:0;font:400 clamp(17px,1.5vw,20px)/1.45 var(--disp,var(--display,Georgia,serif));color:var(--ivory,#EFE9DC);text-wrap:balance}
html.trial .trBelGo{margin:-4px 0 0}
html.trial .trBelCta{display:inline-flex;align-items:center;min-height:44px;color:var(--gold,#D9B45A);font:600 15.5px/1.2 var(--ui,inherit);text-underline-offset:4px}
html.trial .trBelFig figcaption{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--muted,#A9B2C8)}
html.trial .trBelHint{margin:0;font-size:13px;line-height:1.5;color:var(--muted,#A9B2C8)}
html.trial .trBel{display:grid;gap:8px;margin-top:8px;padding:16px 18px;border:1px solid rgba(217,180,90,.36);border-radius:12px;background:rgba(6,12,32,.55);max-width:620px}
html.trial .trBel[hidden]{display:none}
html.trial .trBelK{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#D9B45A)}
html.trial .trBelTitle{margin:0;font:500 clamp(20px,1.9vw,24px)/1.3 var(--disp,var(--display,Georgia,serif));color:var(--ivory,#EFE9DC);outline:none}
html.trial .trBelM,html.trial .trBelW{margin:0;font-size:15px;line-height:1.55;color:var(--ivory,#EFE9DC)}
html.trial .trBelW{color:var(--muted,#A9B2C8);font-size:14px}
html.trial .trBelFig{margin:0} html.trial .trBelFig img{display:block;width:100%;height:auto;border:1px solid rgba(217,180,90,.36);border-radius:8px}
html.trial .trBelNote{margin:0;font-size:13px;line-height:1.5;color:var(--muted,#A9B2C8)}
/* the dive (#628 6238520299): a point being prepared breathes; after the dive the dedication arrives quietly, on the work on wide screens */
html.trial .tr-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.trial .trMark.trPrep::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:1.5px solid rgba(244,223,166,.9);animation:trBreath 1.3s ease-in-out infinite}
@keyframes trBreath{0%,100%{transform:scale(.7);opacity:.35}50%{transform:scale(1.25);opacity:1}}
@media (prefers-reduced-motion:reduce){html.trial .trMark.trPrep::after{animation:none;opacity:.9}}
html.trial #flag.zdived ~ .zAid{display:none}   /* the zoom's own note is about thread 180 */
html.trial .trBelCard{position:absolute;z-index:6;right:12px;bottom:12px;width:min(380px,48%)}
html.trial .trBelCard .trBel{margin:0;max-width:none;padding:14px 16px;gap:6px;background:rgba(6,12,32,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
html.trial .trBelCard .trBelTitle{font-size:clamp(19px,1.6vw,22px)}
html.trial .trBelCard .trBelM{font-size:14px} html.trial .trBelCard .trBelW{font-size:13px} html.trial .trBelCard .trBelNote{font-size:12.5px}
html.trial .trBelBackFig{position:absolute;z-index:6;top:10px;right:10px;min-height:44px;padding:8px 14px;border:1px solid rgba(226,194,122,.8);border-radius:999px;background:rgba(7,13,32,.84);color:#E2C27A;font:600 14px/1.2 var(--ui,inherit);cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.4)}
html.trial .trBelBackFig[hidden]{display:none}
html.trial .trBelBackFig:focus-visible{outline:2px solid #F0D58C;outline-offset:3px}
html.trial .trBelDive{transition:opacity .6s ease,transform .6s ease}
html.trial .trBelDive.trBelIn{opacity:0;transform:translateY(6px)}
html.trial .trBelDive.trBelOut{opacity:0;transition-duration:.3s}
@media (prefers-reduced-motion:reduce){html.trial .trBelDive{transition:none}}
@media (max-width:480px){.tr-block{padding:16px;margin:20px auto}.tr-dl div{grid-template-columns:1fr;gap:2px}.tr-btn{width:100%}.tr-flag{font-size:11px}}