/* ==========================================================================
   The About page (src/components/pages/About.astro): Hannah's motto over the
   painting, the letter in two columns, the questions beside their answers,
   and the quick ones.
   ========================================================================== */
.ab{padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,80px)}
.ab p{margin:0 0 14px}

/* The painting, with her motto over its darker side */
.ab-open{position:relative;overflow:hidden;margin-bottom:clamp(36px,5vw,56px);border-radius:4px}
.ab-art{position:relative;margin:0}
.ab-art img{display:block;width:100%;height:clamp(420px,42vw,600px);object-fit:cover;object-position:50% 30%;border-radius:3px}
.ab-open::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,24,42,.78),rgba(12,24,42,.35) 55%,rgba(12,24,42,0) 80%)}
.ab-quote{position:absolute;z-index:1;left:clamp(24px,5vw,72px);bottom:clamp(24px,5vw,64px);max-width:min(560px,80%);margin:0}
.ab-quote blockquote{margin:0;padding:0}
.ab-quote blockquote p{max-width:20em;margin:0;font:italic 400 clamp(1.9rem,3.4vw,3rem)/1.2 var(--f-display);color:#fff;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.ab-quote blockquote p::before{content:"\201C";display:block;height:.45em;margin-left:-.05em;font-size:2.2em;line-height:1;color:#f0a091}
.ab-quote figcaption{margin-top:14px;font:600 2rem/1 "Dancing Script",cursive;color:#fff}
.ab-quote figcaption::before{content:"\2014  ";font-family:var(--f-body);font-size:.6em;vertical-align:.25em}

/* The letter */
.ab-letter{columns:2;column-gap:56px;column-rule:1px solid var(--line)}
.ab-letter p{margin:0 0 16px;font-size:1.07rem;line-height:1.72}
.ab-letter>div>p:first-child::first-letter{float:left;margin:7px 10px 0 0;font:600 4rem/.78 var(--f-display);color:var(--accent-strong)}
.ab-letter a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
/* Signed in the site's own italic, like the byline under each booklet, not a script face. */
.ab-letter .ab-sig{margin:4px 0 0;font:italic 500 2rem/1 var(--f-display);color:var(--accent-strong)}
/* In two columns the signature sits a little lower, clear of the last line. */
@media(min-width:821px){.ab-letter .ab-sig{padding-top:12px}}

/* A small heading with a line running out after it */
.ab-head{display:flex;align-items:center;gap:16px;margin:0 0 22px;font:700 .76rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:left}
.ab-head::after{content:"";flex:1;height:1px;background:var(--line)}

/* The questions: the list on the left, the answer to the one picked beside it */
.ab-qs{margin-top:clamp(48px,6vw,76px)}
.ab-two.is-tabs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:start}
.ab-qlist{display:flex;flex-direction:column}
.ab-qlist[hidden]{display:none}
.ab-qlist button{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;min-height:56px;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--muted);font:italic 400 1.12rem/1.3 var(--f-display);text-align:left;cursor:pointer}
.ab-qlist button:first-child{border-top:1px solid var(--line)}
.ab-qlist button:hover,.ab-qlist button[aria-selected="true"]{color:var(--head)}
.ab-qlist .t{font:italic 400 1.12rem/1.3 var(--f-display)}
.ab-qlist button::after{content:"\2192";color:var(--accent);opacity:0;transition:opacity .2s}
.ab-qlist button[aria-selected="true"]::after{opacity:1}
.ab-qlist button:focus-visible,.ab-pane:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ab-pane[hidden]{display:none}
.ab-pane p{margin:0;font-size:1.15rem;line-height:1.75}
.ab-pane p+p{margin-top:12px}
/* Without scripts each answer is listed under its question. */
.ab-q{margin:28px 0 8px;font:italic 400 1.3rem/1.3 var(--f-display);color:var(--head)}
.ab-pane:first-child .ab-q{margin-top:0}
.is-tabs .ab-q{display:none}

/* The quick ones */
.ab-last{margin-top:clamp(40px,5vw,60px)}
.ab-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 40px;margin:0}
.ab-quick dt{font:700 .7rem/1.3 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ab-quick dd{margin:4px 0 0;font:400 1.08rem/1.4 var(--f-display);color:var(--head)}

@media(prefers-reduced-motion:reduce){.ab-qlist button::after{transition:none}}
@media(max-width:820px){
  .ab-letter{columns:1}
  .ab-two.is-tabs{grid-template-columns:1fr}
}
@media(max-width:760px){.ab-quick{grid-template-columns:1fr 1fr}}
/* On a phone the motto sits along the bottom, over a darker foot of the painting */
@media(max-width:700px){
  .ab-art img{height:520px}
  .ab-open::after{background:linear-gradient(0deg,rgba(12,24,42,.85),rgba(12,24,42,.45) 60%,rgba(12,24,42,.1))}
  .ab-quote{left:22px;right:22px;bottom:24px;max-width:none}
}
@media(max-width:480px){.ab-quick{grid-template-columns:1fr}}