/* ==========================================================================
   Paperloom — base stylesheet
   Palette: deep forest ink + champagne gold on soft paper
   ========================================================================== */

:root{
  --paper:#fbfaf8;
  --surface:#ffffff;
  --surface-2:#f4f2ec;
  --ink:#17241e;
  --ink-soft:#5c6b63;
  --ink-faint:#8b968f;
  --line:#e4e2db;
  --line-soft:#efede7;
  --green:#2e5d4b;
  --green-rgb:46,93,75;
  --green-deep:#1e4033;
  --gold:#a8823f;
  --gold-soft:#f3ecdd;
  --shadow-sm:0 1px 2px rgba(23,36,30,.05);
  --shadow-md:0 2px 4px rgba(23,36,30,.05), 0 12px 28px rgba(23,36,30,.07);
  --shadow-lg:0 4px 8px rgba(23,36,30,.06), 0 24px 56px rgba(23,36,30,.10);
  --display:'Marcellus', 'Times New Roman', serif;
  --body:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:6px;
  --wrap:1160px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}

a{color:var(--green); text-decoration:none;}
a:hover{color:var(--green-deep); text-decoration:underline;}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px;}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:#fff; padding:10px 16px; z-index:200;
}
.skip-link:focus{left:8px; top:8px;}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:400; line-height:1.2; text-wrap:balance; margin:0;}
h1{font-size:clamp(30px,4.4vw,46px); letter-spacing:-.005em;}
h2{font-size:clamp(24px,3vw,32px);}
h3{font-size:20px;}
h4{font-size:17px;}
p{margin:0 0 1em;}

.eyebrow{
  font-family:var(--body);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0 0 10px;
}
.lede{font-size:18px; color:var(--ink-soft); max-width:62ch;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,250,248,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:28px;
  height:70px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; flex-shrink:0;}
.brand:hover{color:var(--ink); text-decoration:none;}
.brand-mark{width:26px; height:26px; flex-shrink:0;}
.brand-name{font-family:var(--display); font-size:21px; letter-spacing:.01em;}

.nav{margin-left:auto; display:flex; align-items:center; gap:4px;}
.nav-link{
  display:block; padding:9px 13px; border-radius:var(--radius);
  color:var(--ink); font-size:15px; font-weight:500;
}
.nav-link:hover{background:var(--surface-2); color:var(--ink); text-decoration:none;}
.nav-link[aria-current="page"]{color:var(--green); font-weight:600;}

/* dropdown */
.has-dropdown{position:relative;}
.dropdown-toggle{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:15px; font-weight:500; color:var(--ink);
  padding:9px 13px; border-radius:var(--radius);
}
.dropdown-toggle:hover{background:var(--surface-2);}
.dropdown-toggle .caret{transition:transform .18s ease;}
.dropdown-toggle[aria-expanded="true"] .caret{transform:rotate(180deg);}
.dropdown-panel{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:268px; padding:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; box-shadow:var(--shadow-lg);
}
.dropdown-panel[hidden]{display:none;}
.dropdown-panel .panel-head{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); padding:8px 12px 6px;
}
.dropdown-panel a{
  display:block; padding:8px 12px; border-radius:var(--radius);
  color:var(--ink); font-size:14.5px;
}
.dropdown-panel a:hover{background:var(--surface-2); color:var(--green); text-decoration:none;}

/* the categories panel: one card per category rather than a list of every
   subcategory, which at six categories would be fifty-two links.
   Two columns, not one: stacked, six cards ran about 660px tall, so on a laptop
   viewport the sixth sat below the fold and the menu looked like it held five
   categories. Three rows of two clears any screen the site is read on. */
.dropdown-wide{
  min-width:560px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px 6px;
}
.dropdown-wide .panel-head{grid-column:1 / -1;}
.dd-cat{display:block; padding:11px 12px; border-radius:var(--radius);}
.dd-cat-name{display:block; font-weight:600; font-size:14.5px; color:var(--ink);}
.dd-cat:hover .dd-cat-name{color:var(--green);}
.dd-cat-blurb{display:block; font-size:13px; color:var(--ink-soft); margin-top:2px; line-height:1.45;}
.dd-cat-count{
  display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); margin-top:5px;
}

.nav-toggle{
  display:none; margin-left:auto;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 10px; cursor:pointer; color:var(--ink);
}

/* ---------- search ---------- */
/* An icon rather than an input, because at four category dropdowns the header
   has no room left for a field. */
.search-open{
  order:99; margin-left:6px;
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 10px; cursor:pointer; color:var(--ink-soft);
  display:flex; align-items:center;
}
.search-open:hover{background:var(--surface-2); color:var(--ink);}

.search-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(23,36,30,.4);
  display:flex; justify-content:center; align-items:flex-start;
  padding:80px 20px 20px;
}
.search-overlay[hidden]{display:none;}
.search-panel{
  width:min(620px,100%); background:var(--surface);
  border-radius:10px; box-shadow:var(--shadow-lg); overflow:hidden;
  max-height:calc(100vh - 120px); display:flex; flex-direction:column;
}
.search-bar{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink-faint);
}
.search-bar input{
  flex:1; border:0; outline:none; background:none;
  font-family:var(--body); font-size:16.5px; color:var(--ink);
}
.search-close{
  background:var(--surface-2); border:1px solid var(--line); border-radius:4px;
  font-size:11.5px; letter-spacing:.06em; color:var(--ink-faint);
  padding:4px 8px; cursor:pointer;
}
.search-results{overflow-y:auto;}
.search-hit{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:baseline;
  padding:12px 16px; border-bottom:1px solid var(--line-soft);
  color:var(--ink); text-decoration:none;
}
.search-hit:last-child{border-bottom:0;}
.search-hit:hover,
.search-hit[aria-selected="true"]{background:var(--surface-2); text-decoration:none; color:var(--ink);}
.sh-name{font-weight:600; font-size:15px;}
.sh-where{font-size:13.5px; color:var(--ink-soft);}
.sh-kind{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
}
.search-empty{padding:22px 16px; margin:0; color:var(--ink-faint); font-size:14.5px;}

@media (max-width:900px){
  .search-open{order:0; margin-left:auto;}
  .search-overlay{padding:60px 12px 12px;}
}

@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav{
    display:none; position:absolute; top:70px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:12px 16px 18px; box-shadow:var(--shadow-md);
  }
  .nav.open{display:flex;}
  .has-dropdown{position:static;}
  .dropdown-panel{position:static; box-shadow:none; border:0; padding:4px 0 4px 10px; min-width:0;}
  .dropdown-toggle{width:100%; justify-content:space-between;}
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:13.5px; color:var(--ink-faint); padding:22px 0 0;}
.crumbs a{color:var(--ink-soft);}
.crumbs span{margin:0 7px; color:var(--line);}

/* ---------- hero ---------- */
.hero{padding:60px 0 56px; border-bottom:1px solid var(--line-soft);}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero h1{margin-bottom:16px;}
.hero .lede{margin-bottom:26px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.hero-fan{display:flex; gap:16px; justify-content:center; align-items:center;}
/* .doc-preview as well as .card-preview: the fan holds a CV and a poster
   alongside the invitation, and with only the card sized the other two took
   the flex container's full width and pushed themselves out of the hero -
   which is why it looked like one lonely card on an empty half-page. */
.hero-fan .card-preview,.hero-fan .doc-preview{height:262px; width:auto; min-width:0;}
.hero-fan .fan-a{transform:rotate(-6deg) translateY(10px);}
.hero-fan .fan-b{transform:translateY(-8px); z-index:2;}
.hero-fan .fan-c{transform:rotate(6deg) translateY(10px);}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  /* Width-driven on a phone, not height-driven: three previews sized from a
     fixed height came to about 460px of fan on a 390px screen, and the whole
     page scrolled sideways because of it. Sharing the row instead means the
     fan always fits whatever the screen is. */
  .hero-fan{gap:10px;}
  .hero-fan .card-preview,.hero-fan .doc-preview{
    height:auto; width:100%; min-width:0; flex:1 1 0;
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius);
  font-family:var(--body); font-size:15px; font-weight:600;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{background:var(--green-deep); color:#fff; text-decoration:none;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{background:var(--surface-2); color:var(--ink); text-decoration:none;}

/* ---------- sections ---------- */
.section{padding:60px 0;}
.section-head{margin-bottom:30px; max-width:64ch;}
.section-head p{color:var(--ink-soft); margin:8px 0 0;}

/* ---------- category tiles ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px;}
.cat-tile{
  display:block; padding:22px 22px 20px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
.cat-tile:hover{box-shadow:var(--shadow-md); transform:translateY(-2px); color:var(--ink); text-decoration:none;}
.cat-tile h3{margin-bottom:6px;}
.cat-tile p{font-size:14.5px; color:var(--ink-soft); margin:0 0 12px;}
.cat-tile .count{font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold);}

/* ---------- home: the six collections ----------
   Each card carries its category's own accent through --coll, set inline on the
   element. One shared rule, six identities - and the same variable drives the
   category band further down the page, so a colour never has to be repeated in
   two places and drift. */
.collections{padding-top:52px;}
.coll-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px;}
.coll-card{
  display:flex; flex-direction:column; gap:7px;
  padding:20px 20px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:8px;
  color:var(--ink); box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.coll-card:hover{
  box-shadow:var(--shadow-md); transform:translateY(-2px);
  border-color:var(--coll); color:var(--ink); text-decoration:none;
}
.coll-rule{display:block; width:30px; height:3px; background:var(--coll); border-radius:2px;}
.coll-name{font-family:var(--display); font-size:19px; line-height:1.25;}
.coll-blurb{font-size:13.5px; color:var(--ink-soft); line-height:1.5; flex:1;}
.coll-meta{
  font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--coll);
}

/* ---------- home: one band per category ---------- */
.cat-band{padding:56px 0; border-top:1px solid var(--line-soft);}
.cat-band-alt{background:var(--surface-2);}
.cat-band-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:26px; flex-wrap:wrap;
}
.coll-eyebrow{color:var(--coll);}
.cat-band-blurb{color:var(--ink-soft); margin:8px 0 0; max-width:60ch;}
.cat-band-all{
  font-size:14px; font-weight:600; white-space:nowrap;
  color:var(--coll); border-bottom:1px solid transparent; padding-bottom:2px;
}
.cat-band-all:hover{color:var(--coll); border-bottom-color:var(--coll); text-decoration:none;}

/* three real previews per band - the thing that stops six text grids reading
   as one list. Sized by the row, not by the template's own aspect ratio. */
/* minmax(0,1fr), not 1fr: a plain 1fr track keeps an automatic minimum equal to
   its content, so the wide formats - a 7x3 voucher, a 5x3 flashcard - grew
   their own column past the page and squeezed the other two. */
.shot-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-bottom:22px;}
.shot{display:block; color:var(--ink);}
.shot:hover{color:var(--ink); text-decoration:none;}
/* Sized by height, not width: a 5x7 card, an A4 sheet and a landscape
   certificate all set their own aspect-ratio, so three of them at width:100%
   produced a row of wildly different heights with the short one adrift in a
   gap. Fixing the frame height and letting the ratio decide the width lands
   them on one baseline - and the previews scale their type from their own
   width, so this costs nothing internally. */
/* One frame size for all three, contents fitted inside and centred. Sitting
   loose on the page, a portrait sheet stood 320px tall next to a landscape
   certificate at 220 and the row felt like a mistake rather than a set. The
   frame is the constant; what varies inside it is the paper, which is the
   honest difference. Ground flips with the band so the frame reads on both. */
.shot-frame{
  display:flex; align-items:center; justify-content:center;
  height:330px; padding:22px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px;
  transition:border-color .2s ease;
}
.cat-band-alt .shot-frame{background:var(--paper);}
.shot:hover .shot-frame{border-color:var(--coll);}
.shot-frame .card-preview,.shot-frame .doc-preview{
  height:100%; width:auto; max-width:100%;
  /* flex items default to min-width:auto, which lets a landscape certificate
     ignore max-width and spill over its neighbours */
  min-width:0;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
/* Landscape formats size from the column width instead, and keep their real
   proportions. Sized from height like the portraits, a 7x3 voucher would want
   747px in a 355px column - clamping the width there would just squash it out
   of shape. They sit on the same baseline, shorter, which is honest: a voucher
   really is a strip and an A4 sheet really is a page. */
.shot-frame .sz-voucher,.shot-frame .sz-voucher-a6,
.shot-frame .sz-flash,.shot-frame .sz-flash-lg,
.shot-frame .sz-cert,.shot-frame .sz-cert-letter,
.shot-frame .sz-bcard,.shot-frame .sz-bcard-eu,
.shot-frame .sz-yt,.shot-frame .sz-linkedin,.shot-frame .sz-fbcover,
.shot-frame .sz-mrec,.shot-frame .sz-leaderboard,.shot-frame .sz-recipe{
  height:auto; width:100%;
}
.shot:hover .card-preview,.shot:hover .doc-preview{
  box-shadow:var(--shadow-lg); transform:translateY(-3px);
}
.shot-label{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:11px; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
/* the real sheet size - 5 x 7 in, A4, 1080 square. Only a site set for paper
   and for particular platforms has this to say, so it is worth saying. */
.shot-size{letter-spacing:.04em; color:var(--ink-faint); text-transform:none; white-space:nowrap;}
.shot:hover .shot-label{color:var(--coll);}

/* every subcategory stays a link, but as a chip rather than a card - same
   internal linking, a fraction of the vertical space */
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:7px 13px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; color:var(--ink);
}
.chip span{font-size:11.5px; color:var(--ink-faint);}
.chip:hover{border-color:var(--coll); color:var(--coll); text-decoration:none;}
.chip:hover span{color:var(--coll);}

/* ---------- home: guides band ----------
   Dark, and a list rather than cards, so the reading section cannot be mistaken
   for a seventh collection of templates. */
.guides-band{background:var(--green-deep); color:#f1f0e9; padding:58px 0;}
.guides-band h2{color:#fff;}
.guides-band .eyebrow{color:var(--gold);}
.guides-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:26px; flex-wrap:wrap;
}
.guides-head p{color:rgba(241,240,233,.72); margin:8px 0 0; max-width:58ch;}
.guides-all{color:#fff; font-size:14px; font-weight:600; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px;}
.guides-all:hover{color:#fff; border-bottom-color:#fff; text-decoration:none;}
.guide-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:0 34px;
}
.guide-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.13);
  color:#f1f0e9;
}
.guide-row:hover{color:#fff; text-decoration:none;}
.guide-title{font-family:var(--display); font-size:16.5px; line-height:1.3;}
.guide-row:hover .guide-title{text-decoration:underline; text-underline-offset:3px;}
.guide-read{font-size:12px; color:rgba(241,240,233,.55); white-space:nowrap;}

@media (max-width:720px){
  /* minmax(0,1fr) here too. Plain 1fr kept its automatic content minimum, so
     each shot held itself at 330px on a 390px screen and the whole home page
     scrolled sideways at 617px wide. On a narrow screen the previews size from
     the column instead of from a fixed frame height, which cannot overflow;
     the frames stretch to the tallest in the row so they still match. */
  .shot-row{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
  .shot-row .shot:nth-child(3){display:none;}
  .shot{display:flex; flex-direction:column;}
  .shot-frame{height:auto; flex:1; padding:12px;}
  .shot-frame .card-preview,.shot-frame .doc-preview{height:auto; width:100%; max-width:100%;}
}

/* ---------- feature list ---------- */
.feature-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:2px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.feature{background:var(--paper); padding:26px 24px 24px;}
.feature h3{font-size:18px; margin-bottom:8px;}
.feature h3::before{
  content:""; display:block; width:26px; height:2px;
  background:var(--gold); margin-bottom:14px;
}
.feature p{font-size:14.5px; color:var(--ink-soft); margin:0;}

/* ---------- template grid ---------- */
.tpl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:26px;}
.tpl-item{display:block; color:var(--ink);}
.tpl-item:hover{color:var(--ink); text-decoration:none;}
.tpl-item:hover .card-preview{box-shadow:var(--shadow-lg); transform:translateY(-3px);}
.tpl-meta{padding:12px 2px 0;}
.tpl-meta .name{font-family:var(--display); font-size:16.5px; display:block;}
.tpl-meta .sub{font-size:13px; color:var(--ink-faint);}

/* ---------- prose ---------- */
.prose{max-width:68ch;}
.prose h2{margin:38px 0 12px;}
.prose h3{margin:28px 0 10px;}
.prose p, .prose li{color:var(--ink-soft); font-size:16.5px;}
.prose li{margin-bottom:8px;}
.prose ul, .prose ol{padding-left:22px; margin:0 0 1.2em;}
.prose strong{color:var(--ink);}
.prose blockquote{
  margin:22px 0; padding:14px 20px;
  border-left:3px solid var(--gold); background:var(--gold-soft);
  border-radius:0 6px 6px 0;
}
.prose blockquote p{margin:0; color:var(--ink);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line); padding:16px 0;}
.faq summary{
  cursor:pointer; font-family:var(--display); font-size:18px;
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--gold); font-size:22px; line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details p{margin:12px 0 0; color:var(--ink-soft);}

/* ---------- detail page ---------- */
.detail-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start; padding:30px 0 20px;}
.detail-stage{
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:44px; display:flex; justify-content:center;
}
/* The preview is a flex item whose own content is absolutely positioned, so it
   collapses to zero width unless it is given one here. */
.detail-stage .card-preview,
.detail-stage .doc-preview{width:min(420px,100%); flex:0 0 auto;}
.detail-stage .doc-preview.sz-cert,
.detail-stage .doc-preview.sz-cert-letter,
.detail-stage .doc-preview.sz-bcard,
.detail-stage .doc-preview.sz-bcard-eu{width:min(520px,100%);}
.spec-list{list-style:none; padding:0; margin:20px 0 24px; border-top:1px solid var(--line);}
.spec-list li{display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px;}
.spec-list .k{color:var(--ink-faint);}
.spec-list .v{font-weight:600;}
@media (max-width:860px){
  .detail-grid{grid-template-columns:1fr; gap:32px;}
  .detail-stage{padding:24px;}
}

/* ---------- contact form ---------- */
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:14px; font-weight:600; margin-bottom:6px;}
.form-field input, .form-field textarea{
  width:100%; padding:11px 13px; font-family:var(--body); font-size:15px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink);
}
.form-field textarea{min-height:140px; resize:vertical;}
.form-note{font-size:14px; color:var(--ink-faint);}

/* ---------- footer ---------- */
.site-footer{
  margin-top:70px; padding:52px 0 32px;
  background:var(--green-deep); color:#dfe7e1;
}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;}
/* h3, not h4: footer sections follow the main content, which mostly tops out
   at h2 - h4 here would skip a level, which trips up screen-reader heading
   navigation. Kept visually identical via the class name, just the tag changed. */
.site-footer h3{color:#fff; font-size:14px; font-family:var(--body); font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px;}
.site-footer a{color:#dfe7e1; font-size:14.5px;}
.site-footer a:hover{color:#fff;}
.site-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.footer-brand p{font-size:14.5px; color:#b9c9c0; max-width:34ch;}
.footer-brand .brand-name{color:#fff;}
.footer-bottom{
  margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13.5px; color:#a9bcb2;
}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr; gap:28px;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

/* ---------- misc ---------- */
.pill-row{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0;}
.pill{
  font-size:13px; padding:5px 12px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft);
}
.note-band{
  background:var(--gold-soft); border:1px solid #e8dcc2; border-radius:8px;
  padding:18px 22px; font-size:15px; color:var(--ink);
}
.link-list{display:flex; flex-wrap:wrap; gap:10px 20px; list-style:none; padding:0; margin:0;}

@media print{
  .site-header,.site-footer,.crumbs,.btn,.detail-side,.no-print{display:none !important;}
  body{background:#fff;}
  .detail-stage{border:0; background:#fff; padding:0;}
  .detail-grid{display:block;}
  .card-preview,
  .doc-preview{width:100% !important; box-shadow:none !important; page-break-inside:avoid;}
  /* the page itself is the sheet - let it fill the paper with no browser margin */
  @page{margin:0;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}