/* pages.css: the inner pages (Privacy, Terms, Support, Learn, Live) in the same system as the home page (docs/design/BRIEF.md).
 * Loaded after site.css. The arch opens every page: a gold band with an arched top carries the page title; the text below sits on the
 * ground in full-strength ink, hanging from one off-centre line.
 */

/* ============================================================ page head */
.page-head{margin-top:clamp(16px,3vw,44px);padding:clamp(88px,9vw,150px) var(--margin) clamp(48px,6vw,96px);clip-path:url(#arch-band)}
.page-head h1{font-size:var(--step-xl);max-width:16ch}
.page-head .lede{font-size:var(--step-lead);line-height:1.45;max-width:52ch;margin-top:clamp(14px,2vw,26px);color:var(--cream)}
.page-head .when{font-size:var(--step-s);margin-top:clamp(14px,2vw,22px);color:var(--cream-dim)}

/* ============================================================ prose */
.prose{padding:clamp(48px,7vw,120px) var(--margin) clamp(72px,10vw,160px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.prose__in{grid-column:4/span 7;max-width:62ch}
.prose__in>*+*{margin-top:1.1em}
.prose .intro{font-size:var(--step-lead);line-height:1.55}
.prose h2{font-family:var(--serif);font-weight:500;font-size:var(--step-m);line-height:1.1;letter-spacing:-.015em;margin-top:clamp(40px,5vw,72px);scroll-margin-top:calc(var(--nav-h) + 20px)}
.prose h3{font-family:var(--sans);font-size:var(--step-t);font-weight:600;margin-top:1.8em}
.prose p,.prose li{font-size:var(--step-t);line-height:1.7;color:var(--cream)}
.prose p.tiny{font-size:var(--step-s);color:var(--cream-dim)}
.prose ul{display:grid;gap:.55em}
.prose ul li{position:relative;padding-left:1.35em}
.prose ul li::before{content:'';position:absolute;left:0;top:.62em;width:.62em;height:.8em;background:var(--gold-text);clip-path:url(#arch-bullet)}
.prose a{text-decoration:underline;text-decoration-color:var(--gold-text);text-underline-offset:.22em;text-decoration-thickness:.08em}
@media (hover:hover) and (pointer:fine){.prose a:hover{text-decoration-color:currentColor}}
.prose strong{font-weight:600}
@media (max-width:1000px){.prose__in{grid-column:2/-2}}
@media (max-width:860px){.prose__in{grid-column:1/-1}}

/* ============================================================ support */
.callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:clamp(22px,3vw,40px)}
.callout .label{font-size:var(--step-s);font-weight:600}
.callout .email{font-family:var(--serif);font-size:var(--step-l);line-height:1;letter-spacing:-.02em;margin:10px 0 8px;overflow-wrap:anywhere}
.callout .response{font-size:var(--step-t)}
.help{padding:clamp(56px,8vw,140px) var(--margin) clamp(96px,10vw,150px)}
.help__in{max-width:1100px;margin:0 auto}
.help h2{font-size:var(--step-l);margin-bottom:clamp(14px,2vw,24px)}
.help .lede{font-size:var(--step-lead);line-height:1.5;max-width:56ch;margin-bottom:clamp(28px,4vw,56px)}
.help .card__a a,.help .lede a{text-decoration:underline;text-underline-offset:.22em}

/* ============================================================ Rahti Live (/live) */
.page-head--live{position:relative;overflow:clip}
.page-head--live h1{max-width:14ch}
.page-head__ar{position:absolute;right:var(--margin);bottom:clamp(20px,3vw,48px);font-size:calc(var(--step-giant) * 1.15);line-height:1.2;color:var(--cream);pointer-events:none}
.live-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vw,36px)}
.live-actions .btn{min-height:52px}
.lead{font-size:var(--step-lead);line-height:1.5;max-width:52ch}

.live-in,.how{padding:clamp(72px,9vw,160px) var(--margin) 0}
.live-in__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:20px;margin-bottom:clamp(28px,4vw,56px)}
.live-in__head h2{grid-column:1/span 7;font-size:var(--step-l)}
.live-in__head .lead{grid-column:8/-1;align-self:end}
.ltiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ltile{min-height:clamp(300px,30vw,460px);padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;gap:12px}
.ltile__ar{font-size:var(--step-l);line-height:1.6;margin-bottom:auto;direction:rtl;text-align:left;padding-top:.15em}
.ltile h3{font-size:var(--step-m);line-height:1.05}
.ltile p{max-width:30ch}
.soon{margin-top:8px;padding:clamp(18px,2vw,28px) clamp(20px,2.2vw,32px);font-size:var(--step-t)}
.soon b{font-weight:600}


.how h2{font-size:var(--step-l);margin-bottom:clamp(28px,4vw,56px)}
.lsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lstep{min-height:clamp(260px,26vw,400px);padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.lstep__n{font-size:var(--step-xl);line-height:1.3}
.lstep h3{font-size:var(--step-m);line-height:1.05;margin-bottom:10px;min-height:2.1em}
.lstep p{max-width:28ch}

.request{padding:clamp(72px,9vw,160px) var(--margin) 0}
.request__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);padding:clamp(96px,11vw,190px) clamp(24px,4vw,64px) clamp(32px,4vw,64px);clip-path:url(#arch-stage)}
.request__say h2{font-size:var(--step-l);margin-bottom:20px}

/* the access form: same behaviour as ever, drawn from the tokens so it follows its field */
.fbform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fbform .field{margin-bottom:14px}
.fbform label{display:block;font-size:var(--step-s);font-weight:600;margin-bottom:6px}
.fbform input,.fbform textarea{width:100%;background:var(--ink-2);color:var(--cream);border:1.5px solid var(--field-border,var(--cream-faint));border-radius:12px;padding:13px 16px;font:400 16px/1.4 var(--sans);outline:none}
.fbform textarea{resize:vertical;min-height:110px}
.fbform input:focus-visible,.fbform textarea:focus-visible{outline:2px solid var(--btn-gold);outline-offset:2px}
.fbform input:disabled,.fbform textarea:disabled{opacity:.6}
.fbform .actions{margin-top:8px}
.fbform .btn{min-height:54px;padding:0 32px}
.fbform .btn:disabled{opacity:.6;cursor:default}
.fb-msg{margin-top:14px;font-size:var(--step-s);font-weight:500}
.fb-msg[hidden]{display:none}
.fb-msg.fb-err{color:var(--err)}
.fb-done{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 0}
.fb-check{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--btn-bg);color:var(--btn-ink);font-size:24px;font-weight:700;margin-bottom:6px}
.fb-done-title{font-family:var(--serif);font-size:var(--step-l);line-height:1}
.fb-done-sub{font-size:var(--step-t);max-width:44ch}
.request__grid .fb-done{grid-column:2}

@media (max-width:1200px){
  .request__grid{clip-path:none;--arch:clamp(72px,9vw,110px);padding-top:calc(var(--arch) + 28px);
    -webkit-mask:var(--arch-img) top/100% var(--arch) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--arch) - 1px)/100% calc(100% - var(--arch) + 1px) no-repeat; /* taste-skill-ignore: a solid mask layer, not a gradient fill */
    mask:var(--arch-img) top/100% var(--arch) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--arch) - 1px)/100% calc(100% - var(--arch) + 1px) no-repeat} /* taste-skill-ignore: a solid mask layer, not a gradient fill */
}
@media (max-width:860px){
  .page-head__ar{display:none}
  .live-in__head h2,.live-in__head .lead{grid-column:1/-1}
  .ltiles,.lsteps{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .ltile,.lstep{min-height:240px}
  .request__grid{grid-template-columns:1fr;padding:calc(var(--arch) + 28px) 20px 28px}
  .fbform .row{grid-template-columns:1fr}
  .request__grid .fb-done{grid-column:auto}
}
@media (max-width:480px){
  .ltiles,.lsteps{grid-template-columns:1fr}
  .ltile,.lstep{min-height:0}
  .ltile__ar{margin-bottom:20px}
}

/* On wide screens the four tiles and the four steps share their rows, so every heading and every paragraph starts on the same line. */
@supports (grid-template-rows: subgrid) {
  @media (min-width:861px){
    .ltiles,.lsteps{grid-template-rows:1fr auto auto}
    .ltile,.lstep{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px}
    .ltile__ar{margin-bottom:0;align-self:start}
    .lstep__n{align-self:start}
    .lstep>div{display:contents}
    .lstep h3{margin-bottom:0}
  }
}

@supports (grid-template-rows: subgrid) {
  @media (min-width:481px) and (max-width:860px){
    .ltiles,.lsteps{grid-template-rows:repeat(2,1fr auto auto)}
    .ltile,.lstep{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px}
    .ltile__ar{margin-bottom:0;align-self:start}
    .lstep__n{align-self:start}
    .lstep>div{display:contents}
    .lstep h3{margin-bottom:0}
  }
}

/* the support address never leaves a lone letter on a second line at 320px */
.callout .email{font-size:clamp(26px,9.5vw,var(--step-l))}
.prose__in--wide{grid-column:1/-1;max-width:1100px;margin:0 auto;width:100%}