/* =====================================================================================================
   t-legal.css (hand-written, 21 Oct 2026): template "legal" ("the document"): /legal/privacy-policy/,
   /legal/terms-and-conditions/, /legal/gdpr/. Loads after wine-chrome.css and wine-base.css.
   A short wine hero (the breadcrumb across the top; the live badge above the live H1 and lead, as on the live page),
   then a white sheet holding the live text in one reading column of 720px, beside a sticky "On this page" list.
   Calm: one reveal (the sheet), no drawings. Print stylesheet at the end (Ctrl+P; no print button on the page).
   Prefix lg- (never .legal: that is a homepage footer class).
   Breakpoints as wine-base.css: 1200 / 1024 / 768 / 480 (desktop 1440 is the design).
   Review fixes (21 Oct 2026): badges in the live capitals, dimmer hero glow (H1 gradient text >= 4.5:1), sticky
   .lg-side__in wrapper (contents list scrolls inside it), the GDPR closing block not printed.
   Evening review (21 Oct 2026): print button removed (the privacy Notice says the document may not be reproduced);
   the sticky box is only as tall as the space left above the end of the sheet (--lg-room from t-legal.js) and fades
   out when too little is left, so it never slides under the see-through header; the badge moved from the left
   column (under a breadcrumb that says the same name) to above the H1; "Link copied" note for the section links.
   ===================================================================================================== */

body.t-legal { --lg-side: 264px; --lg-gap: 64px; --lg-pad-x: 88px; --lg-lift: 72px; }

/* ---------- hero ---------- */
body.t-legal .lg-hero { padding: 172px 0 calc(var(--lg-lift) + 64px); }
body.t-legal .lg-hero::after { content: ""; position: absolute; z-index: -1; left: -10%; bottom: -320px; width: 720px; height: 520px; border-radius: 50%;
  pointer-events: none; background: radial-gradient(closest-side, rgba(176,32,92,.32), rgba(176,32,92,0)); }
/* the glow sits further right and dimmer than on landing heroes: the rose gradient half of the H1 ("Protection
   Regulation" on GDPR) reaches into it and must keep at least 4.5:1 on its real background pixels */
body.t-legal .lg-hero__glow { right: -24%; top: -6%; width: 760px; height: 760px; opacity: .7; }
.lg-hero__grid { display: grid; grid-template-columns: var(--lg-side) minmax(0, 1fr); column-gap: var(--lg-gap); row-gap: 28px; max-width: 1240px; }
.lg-hero__crumbs { grid-column: 1 / -1; }
/* the text column lines up with the reading column of the sheet below (the left column is the contents list's) */
.lg-hero__main { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-left: var(--lg-pad-x); min-width: 0; }
.lg-hero__main > .lg-h1, .lg-hero__main > .lg-lead { align-self: stretch; }
.lg-kicker { flex-wrap: wrap; }
/* the live badge in the live capitals ("Privacy Policy", "Terms & Condition", "GDPR"), not upper-cased */
body.t-legal .lg-kicker { text-transform: none; letter-spacing: .01em; }
body.t-legal .lg-h1 { max-width: 820px; text-wrap: balance; }
.lg-h1__b { white-space: nowrap; background: linear-gradient(92deg, #ffd0dc 0%, #ffb3c7 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; }
body.t-legal .lg-lead { max-width: 720px; }

/* ---------- the document: contents list + white sheet ---------- */
.lg-doc { position: relative; z-index: 1; padding: 0 0 120px; }
.lg-doc__grid { display: grid; grid-template-columns: var(--lg-side) minmax(0, 1fr); column-gap: var(--lg-gap); align-items: stretch;
  max-width: 1240px; margin-top: calc(var(--lg-lift) * -1); }
.lg-side { min-width: 0; padding-top: calc(var(--lg-lift) + 48px); }
/* the sticky box: the contents list scrolls inside it. --lg-room (t-legal.js) = the space between the sticky line and
   the end of the sheet, so near the end the box shrinks instead of being pushed up under the see-through header;
   .lg-off fades it out when too little is left */
.lg-side__in { position: sticky; top: 150px; max-height: min(calc(100vh - 172px), var(--lg-room, 100vh)); display: flex; flex-direction: column;
  align-items: flex-start; transition: opacity .2s ease, visibility .2s; }
.lg-side__in.lg-off { opacity: 0; visibility: hidden; }
.lg-toc { align-self: stretch; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 6px 8px 0;
  scrollbar-width: thin; scrollbar-color: var(--wn-rose-20) transparent; }
/* edge fades while the list scrolls inside the box (classes from t-legal.js) */
.lg-toc.lg-toc--up { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px); mask-image: linear-gradient(to bottom, transparent 0, #000 30px); }
.lg-toc.lg-toc--down { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30px); mask-image: linear-gradient(to top, transparent 0, #000 30px); }
.lg-toc.lg-toc--up.lg-toc--down { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%); }
.lg-toc__t { margin: 0 0 16px; font: 600 13px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--grey70); }
.lg-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--wn-line); }
.lg-toc__list a { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 6px; padding: 7px 0 7px 18px;
  font: 500 14.5px/20px var(--text); color: var(--grey70); text-decoration: none; transition: color .2s var(--ease-link); }
.lg-toc__list a::before { content: ""; position: absolute; left: -1px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--wn-btn);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .35s var(--wn-ease-out); }
.lg-toc__list a:hover { color: var(--ink); }
.lg-toc__list a:hover .lg-toc__x { text-decoration: underline; text-decoration-color: var(--wn-rose-20); text-underline-offset: 4px; }
.lg-toc__list a[aria-current] { color: var(--ink); font-weight: 600; }
.lg-toc__list a[aria-current]::before { transform: scaleY(1); }
.lg-toc__list a:focus-visible { outline: 2px solid var(--wn-link); outline-offset: 2px; border-radius: 6px; }
.lg-toc__n { font: 500 12px/20px var(--display); letter-spacing: .02em; color: var(--wn-link); font-variant-numeric: tabular-nums; }

.lg-paper { position: relative; min-width: 0; overflow: clip; padding: 80px var(--lg-pad-x) 96px; border-radius: 28px; background: #fff;
  border: 1px solid var(--wn-line); box-shadow: 0 1px 0 rgba(30,10,26,.03), 0 40px 90px -30px rgba(74,18,56,.24); }
.lg-paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, #8e1a47 0%, #d6335e 45%, #ffb3c7 100%); }

/* ---------- the reading column ---------- */
.lg-prose { max-width: 720px; }
.lg-sec + .lg-sec { margin-top: 56px; padding-top: 52px; border-top: 1px solid var(--wn-line); }
.lg-hrow { position: relative; margin-bottom: 20px; }
.lg-h { margin: 0; font: 500 28px/36px var(--display); letter-spacing: -.4px; color: var(--ink); text-wrap: balance; }
.lg-h:focus { outline: none; }
.lg-h:focus-visible { outline: 2px solid var(--wn-link); outline-offset: 4px; border-radius: 4px; }
body.t-legal main [id] { scroll-margin-top: 150px; }
.lg-anchor { position: absolute; left: -42px; top: 4px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  color: var(--wn-link); opacity: 0; transition: opacity .2s ease, background-color .2s ease; }
.lg-hrow:hover .lg-anchor, .lg-anchor:focus-visible { opacity: 1; }
.lg-anchor:hover { background: var(--wn-rose-10); }
.lg-anchor:focus-visible { outline: 2px solid var(--wn-link); outline-offset: 1px; }
/* "Link copied" (t-legal.js, after a section link copied its address): a small note at the foot of the window (the
   link has just moved its heading up under the header); the words also go to a live region */
.lg-copied { position: fixed; left: 50%; bottom: 28px; z-index: 60; padding: 9px 16px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: #fff; font: 600 14px/20px var(--text); box-shadow: 0 12px 30px -10px rgba(30,10,26,.45);
  transform: translateX(-50%); animation: lg-copied 1.8s ease both; }
@keyframes lg-copied { 0% { opacity: 0; transform: translate(-50%, 6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
body.t-legal .lg-prose p { font: 400 18px/31px var(--text); color: var(--body); }
body.t-legal .lg-prose p + p { margin-top: 18px; }
.lg-prose ul, .lg-prose ol { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0; padding-left: 26px; }
.lg-prose .lg-hrow + ul, .lg-prose .lg-hrow + ol { margin-top: 0; }
body.t-legal .lg-prose ul + p, body.t-legal .lg-prose ol + p { margin-top: 20px; }
.lg-prose li { padding-left: 6px; font: 400 18px/30px var(--text); color: var(--body); }
.lg-prose ul { list-style: disc; }
.lg-prose ol { list-style: decimal; }
.lg-prose ul > li::marker { color: var(--wn-btn); }
.lg-prose ol > li::marker { color: var(--wn-link); font-weight: 600; }
.lg-prose strong { font-weight: 600; color: var(--ink); }
.lg-prose a { color: var(--wn-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .2s var(--ease-link); }
.lg-prose a:hover { color: var(--wn-deep); text-decoration-thickness: 2px; }
.lg-prose a:focus-visible { outline: 2px solid var(--wn-link); outline-offset: 2px; border-radius: 3px; }

/* ---------- the GDPR page's own closing block ---------- */
body.t-legal .lg-cta { padding: 0 0 120px; }
body.t-legal .lg-cta__box { padding: 96px 64px 80px; }
body.t-legal .lg-cta__box .wn-lead { color: rgba(255,255,255,.88); }

/* ---------- 1200: small laptop ---------- */
@media (max-width: 1199.98px) {
  body.t-legal { --lg-side: 220px; --lg-gap: 48px; --lg-pad-x: 64px; }
  .lg-paper { padding-top: 64px; padding-bottom: 80px; }
}

/* ---------- 1024: one column; the contents list becomes a card above the sheet ---------- */
@media (max-width: 1023.98px) {
  body.t-legal { --lg-pad-x: 56px; --lg-lift: 0px; }
  body.t-legal .lg-hero { padding-bottom: 72px; }
  .lg-hero__grid, .lg-doc__grid { grid-template-columns: minmax(0, 1fr); }
  .lg-hero__grid { row-gap: 22px; }
  .lg-hero__main { grid-column: 1; padding-left: 0; }
  .lg-doc { padding: 40px 0 96px; }
  .lg-doc__grid { margin-top: 0; row-gap: 24px; }
  .lg-side { padding-top: 0; }
  .lg-side__in { position: static; max-height: none; display: block; }
  .lg-toc { position: static; max-height: none; overflow: visible; padding: 24px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--wn-line); }
  .lg-toc__list { columns: 2; column-gap: 28px; border-left: 0; }
  .lg-toc__list li { break-inside: avoid; }
  .lg-toc__list a { padding-left: 0; min-height: 44px; align-items: center; }
  .lg-toc__list a::before { display: none; }
  .lg-anchor { left: -36px; }
  body.t-legal .lg-cta { padding-bottom: 96px; }
}

/* ---------- 768: phones ---------- */
@media (max-width: 767.98px) {
  body.t-legal { --lg-pad-x: 22px; }
  .lg-paper { padding: 40px var(--lg-pad-x) 48px; border-radius: 22px; }
  .lg-toc { padding: 20px 20px 16px; }
  .lg-toc__list { columns: 1; }
  .lg-h { font-size: 23px; line-height: 30px; }
  .lg-sec + .lg-sec { margin-top: 40px; padding-top: 36px; }
  body.t-legal .lg-prose p, .lg-prose li { font-size: 17px; line-height: 28px; }
  .lg-prose ul, .lg-prose ol { padding-left: 22px; }
  .lg-prose li { padding-left: 4px; }
  .lg-anchor { display: none; }
  body.t-legal .lg-cta__box { padding: 64px 24px 48px; }
  body.t-legal .lg-cta { padding-bottom: 72px; }
}
@media (hover: none) and (pointer: coarse) {
  .lg-anchor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-side__in { transition: none; }
  .lg-copied { animation: none; }
}

/* ---------- print: the document only, black on white ---------- */
@media print {
  @page { margin: 16mm 18mm; }
  html, body.t-legal { background: #fff !important; }
  body.t-legal > :not(main) { display: none !important; }
  body.t-legal .wrap { padding: 0 !important; max-width: none !important; }
  body.t-legal .lg-hero { padding: 0 0 14pt !important; background: none !important; color: #000 !important; border-bottom: .75pt solid #999;
    overflow: visible; }
  body.t-legal .lg-hero::after, .lg-hero__glow, .wn-cta__glow, body.t-legal .wn-crumbs, .lg-side, .lg-anchor, .lg-copied, .lg-cta .btn,
  .wm-progress { display: none !important; }
  .lg-hero__grid, .lg-doc__grid { display: block !important; max-width: none !important; margin: 0 !important; }
  .lg-hero__main { padding: 0 !important; gap: 8pt; }
  .lg-kicker, .lg-kicker i { color: #000 !important; box-shadow: none !important; }
  .lg-kicker { margin-bottom: 6pt; font-size: 9pt; }
  body.t-legal .lg-h1 { font-size: 24pt; line-height: 1.2; letter-spacing: 0; color: #000 !important; }
  .lg-h1 span, .lg-h1__b { color: #000 !important; background: none !important; -webkit-text-fill-color: #000 !important; }
  body.t-legal .lg-lead { font-size: 11.5pt; line-height: 1.5; color: #000 !important; max-width: none; }
  .lg-doc { padding: 0 !important; background: none !important; }
  .lg-paper { padding: 14pt 0 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; }
  .lg-paper::before { display: none !important; }
  .lg-prose { max-width: none; }
  body.t-legal .lg-prose p, .lg-prose li { font-size: 10.5pt; line-height: 1.55; color: #000 !important; orphans: 3; widows: 3; }
  .lg-prose li::marker { color: #000 !important; }
  .lg-h { font-size: 14pt; line-height: 1.3; letter-spacing: 0; color: #000 !important; break-after: avoid; page-break-after: avoid; }
  .lg-hrow { margin-bottom: 6pt; break-after: avoid; page-break-after: avoid; }
  .lg-sec + .lg-sec { margin-top: 14pt; padding-top: 12pt; border-top: .5pt solid #bbb; }
  .lg-prose a { color: #000 !important; text-decoration: underline; }
  /* the GDPR page's closing sales block is not part of the document: not printed */
  body.t-legal .lg-cta { display: none !important; }
}

/* @@ RESPONSIVE-HC BEGIN (phone and tablet pass, 21 Oct 2026; keep this block last in the file) @@ */
/* hero top space for the small header through the wine-base.css variables; the H1's rose half may wrap on phones
   ("Protection Regulation" is wider than a phone); the contents list at reading size */
@media (max-width: 1199.98px) {
  .lg-h1__b { white-space: normal; }           /* "Protection Regulation" ran past a 1024 screen */
}
@media (max-width: 1023.98px) {
  body.t-legal .lg-hero { padding-top: var(--wn-hdr-clear, 96px); }
}
@media (hover: none) and (pointer: coarse) {
  .lg-toc__list a { min-height: 44px; align-items: center; }   /* contents links: 44px taps on touch screens */
}
@media (max-width: 767.98px) {
  body.t-legal .lg-hero { padding-top: var(--wn-hdr-clear-m, 88px); }
  .lg-toc__list a { font-size: 16px; line-height: 22px; }
}
/* @@ RESPONSIVE-HC END @@ */