/* FAQ — pinned notes, opened one at a time.

   Values are taken verbatim from the Claude Design file. This is a separate
   stylesheet so nothing on the pages already built can be disturbed by it;
   only faq.html loads it. */

.fq-header{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:baseline;
  gap:24px;background:#faf9f4;color:#121210;padding:15px clamp(24px,4vw,64px)}
.fq-header a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase}
.fq-nav{display:flex;gap:clamp(18px,2.4vw,34px);font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}

.fq-section{position:relative;z-index:4;
  padding:clamp(46px,6vw,104px) clamp(24px,5vw,96px) clamp(70px,8vw,140px)}

.fq-intro{display:flex;flex-direction:column;gap:clamp(10px,1vw,18px);max-width:26ch;
  padding-bottom:clamp(40px,5vw,88px)}
.fq-title{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(46px,7.2vw,116px);line-height:.88;letter-spacing:-.03em;color:#faf9f4;
  text-shadow:0 2px 24px rgba(24,40,22,.5)}

/* One shadow over the whole stack, so the notes read as a single pinned pile
   rather than eight separately floating cards. */
.fq-list{display:flex;flex-direction:column;gap:7px;max-width:1080px;margin:0 auto;
  filter:drop-shadow(0 30px 46px rgba(24,38,22,.34))}

/* --rot is set per note so the scatter carries on for questions added later */
.fq-note{position:relative;background:#faf9f4;color:#121210;transform:rotate(var(--rot,0deg))}

.fq-head{position:relative;display:flex;align-items:center;gap:clamp(16px,2vw,32px);cursor:pointer;
  padding:clamp(18px,1.9vw,26px) clamp(22px,2.4vw,40px);border-top:1px solid rgba(255,255,255,.9)}
.fq-head:focus-visible{outline:2px solid #aed277;outline-offset:-4px}
/* the green spine down the left edge of every note */
.fq-spine{position:absolute;left:0;top:0;bottom:0;width:clamp(9px,.9vw,13px);
  background:linear-gradient(90deg,#2f4a2c,#3a5a34 62%,rgba(58,90,52,.55))}
/* the ruled hatching along the bottom edge of the head */
.fq-hatch{position:absolute;left:clamp(9px,.9vw,13px);right:0;bottom:0;height:9px;
  background:repeating-linear-gradient(to bottom,rgba(120,112,92,.16) 0 1px,rgba(255,255,255,0) 1px 3px)}
.fq-num{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#8b877c;padding-left:clamp(6px,.8vw,14px)}
.fq-q{margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(21px,2.1vw,32px);line-height:1.04;letter-spacing:-.02em}
.fq-cue{margin-left:auto;white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#4a6338}

.fq-panel{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.22,.9,.28,1)}
.fq-answer{padding:clamp(6px,.8vw,12px) clamp(26px,3vw,56px) clamp(28px,3vw,44px) clamp(38px,4vw,72px);
  border-top:1px solid #e2dfd2;
  background:linear-gradient(90deg,rgba(120,112,92,.09),rgba(255,255,255,0) 90px)}
.fq-answer p{margin:0;max-width:62ch;font-size:clamp(16px,1.2vw,19px);line-height:1.55;
  font-weight:300;text-wrap:pretty}
.fq-answer p + p{margin:14px 0 0}
.fq-answer a{border-bottom:1px solid #aed277}
.fq-pending{font-family:'Newsreader',serif;font-style:italic;color:#8b877c}

.fq-empty{color:#faf9f4;text-shadow:0 2px 22px rgba(24,40,22,.55);
  font-size:clamp(18px,2vw,26px);font-family:'Instrument Serif',Georgia,serif;text-align:center}

/* ---- anything else, please write ---- */

.fq-ask{display:flex;flex-direction:column;align-items:center;gap:clamp(26px,3vw,48px);
  padding-top:clamp(56px,6vw,104px)}
/* On the Contact page the letter is the whole section, with no list of
   questions between the title and it. Both gaps were sized to clear that list,
   so without it they leave a hole. */
.fq-ask--alone{padding-top:0}
.fq-section--letter .fq-intro{padding-bottom:clamp(20px,2.4vw,40px)}
.fq-ask-line{margin:0;max-width:18ch;text-align:center;font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(24px,3.2vw,50px);line-height:1.06;color:#faf9f4;
  text-shadow:0 2px 22px rgba(24,40,22,.55)}

.fq-letter{position:relative;width:min(720px,100%);background:#faf9f4;color:#121210;
  padding:clamp(24px,2.6vw,40px) clamp(24px,3vw,52px) clamp(30px,3.2vw,52px);
  box-shadow:0 30px 54px rgba(24,38,22,.34);transform:rotate(-.4deg)}
/* where the sheet was folded before it went in the envelope */
.fq-fold{position:absolute;left:0;right:0;top:38%;height:1px;background:rgba(150,146,132,.18)}
.fq-letter-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.fq-stamps{display:flex;gap:10px}
.fq-stamp{width:clamp(50px,4.4vw,62px);padding:5px;background:#f2efe2;border:2px dashed #d3d0c5;
  transform:rotate(-3deg)}
.fq-stamp:last-child{transform:rotate(2.4deg) translateY(5px)}
.fq-stamp-face{display:flex;flex-direction:column;justify-content:space-between;
  height:clamp(56px,5vw,70px);padding:6px;background:#aed277;font-family:'IBM Plex Mono',monospace;
  font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:#22301c}
.fq-stamp-face--dark{background:#3a5a34;color:#faf9f4}
.fq-stamp-face span:last-child{align-self:flex-end}
.fq-to{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#8b877c}

.fq-fields{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,34px);
  margin-top:clamp(34px,4vw,62px)}
.fq-field{display:flex;flex-direction:column;gap:8px}
.fq-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#8b877c}
.fq-input{width:100%;border:0;border-bottom:1px solid #121210;background:transparent;padding:0 0 9px;
  font-family:'Newsreader',Georgia,serif;font-size:clamp(17px,1.3vw,20px);color:#121210;outline:none}
.fq-textarea{width:100%;resize:vertical;border:0;border-bottom:1px solid #121210;
  background:repeating-linear-gradient(to bottom,rgba(150,146,132,0) 0 33px,rgba(150,146,132,.2) 33px 34px);
  padding:0 0 9px;font-family:'Newsreader',Georgia,serif;font-weight:300;
  font-size:clamp(17px,1.3vw,20px);line-height:34px;color:#121210;outline:none}
.fq-input:focus-visible,.fq-textarea:focus-visible{border-bottom-color:#3a5a34}
.fq-send-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fq-send-note{font-family:'Newsreader',serif;font-style:italic;font-size:16px;color:#8b877c}
.fq-send{display:inline-flex;align-items:center;gap:16px;border:0;cursor:pointer;background:#121210;
  color:#faf9f4;padding:16px 26px;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase}
.fq-send:hover{background:#3a5a34;color:#faf9f4}
.fq-send[disabled]{cursor:default;opacity:.55}

.fq-sent{margin:0;font-family:'Newsreader',serif;font-style:italic;font-size:16px;color:#4a6338}
.fq-sent--err{color:#8a3a2c}

/* The design is drawn wide. It has no narrow-screen variant, so these steps
   only stop the head row crushing on a phone — type, spine, hatching, tilts
   and paddings are untouched. */
@media (max-width:620px){
  .fq-header{flex-wrap:wrap;gap:10px 18px}
  .fq-head{flex-wrap:wrap;gap:8px clamp(12px,3vw,18px)}
  .fq-cue{margin-left:0;flex-basis:100%}
  .fq-letter-head{flex-wrap:wrap;gap:18px}
  .fq-to{align-items:flex-start;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .fq-panel{transition:none}
}