/* Rextail utility pages: privacy, thanks and 404. The print theme
   (assets/theme.css, loaded first) draws the bar, type, buttons and footer, as
   on the homepage; this file lays out the notices and the privacy
   record on the studio backdrop. */

/* Short pages fill the view: the notice takes the room between bar and footer. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main{flex:1;display:flex;flex-direction:column}

/* A run of document metadata above each page's label. */
.doc-line{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:18px;font:500 12px/1.6 var(--mono);color:var(--text-3)}

.notice h1,.legal-head h1{font-size:clamp(46px,6.4vw,92px);line-height:1;font-weight:600;letter-spacing:-.042em;text-wrap:balance}
.notice h1 em,.legal-head h1 em{display:block;font-style:normal;color:var(--text-3)}
.message{max-width:60ch;margin-top:28px;font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--text-2)}

/* Notices (thanks, 404) */
.notice{flex:1;display:grid;align-content:center;padding-block:clamp(64px,10vh,112px)}
.notice-inner>:not(.message){max-width:900px}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:32px;font:500 12px/1.6 var(--mono);color:var(--text-3)}

/* Privacy: a heading, then the record as ruled rows. */
.legal-head{padding-block:clamp(56px,6vw,92px) clamp(40px,4vw,60px);border-bottom:1px solid var(--line)}
.legal-head h1{max-width:18ch}
.pad{padding-block:clamp(56px,8vw,100px)}
.legal{border-top:1.5px solid var(--ink)}
.legal-row{display:grid;grid-template-columns:260px 1fr;border-bottom:1px solid var(--line)}
.legal-row:last-child{border-bottom:1.5px solid var(--ink)}
.legal-label{padding:24px 22px 24px 0;border-right:1px solid var(--line)}
.legal-label h2{font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.legal-body{padding:24px 0 24px 30px}
.legal-body p{max-width:56ch;font-size:16px;line-height:1.65}
.legal-body p+p{margin-top:14px}
.legal-body a{font-weight:600;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.legal-body a:hover{text-decoration-color:currentColor}
.legal-actions{margin-top:44px}

@media(max-width:820px){
  .legal-row{grid-template-columns:1fr}
  .legal-label{padding:20px 0 8px;border-right:0}
  .legal-body{padding:0 0 24px}
}
@media(max-width:560px){
  .trust{grid-template-columns:1fr}
}