/* ============================================================
   AISLE & AFTER — resource documents
   A printable-document layer for the Template Drawer, workbooks
   and checklists. Self-contained on purpose: a resource must
   print predictably even if the marketing stylesheet changes.

   Screen: a warm sheet of paper on champagne light.
   Print:  A4 or US Letter, hairline gold rules, no chrome.
   ============================================================ */

:root{
  --cream:#FFFBF4; --champ:#F8EFDF; --white:#FFFFFF;
  --ink:#3D332A; --mut:#7C6C5C; --mut2:#A4937C;
  --gold:#B78A2E; --gold2:#8F6A1F; --gold-soft:#E4CE9F; --rose:#C4756B;
  --rule:rgba(143,106,31,.34); --rule2:rgba(143,106,31,.15);
  --cg:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --jost:"Jost","Century Gothic",Futura,Verdana,sans-serif;
  --sheet-w:210mm;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(900px 420px at 50% -200px, rgba(226,193,113,.30), transparent 70%),
    linear-gradient(180deg,var(--champ),var(--cream) 46%);
  background-attachment:fixed;
  color:var(--ink);
  font:400 16.5px/1.62 var(--cg);
  -webkit-font-smoothing:antialiased;
  padding:0 0 72px;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
::selection{background:rgba(228,206,159,.6)}

/* ---------- screen-only chrome ---------- */

.res-bar{
  position:sticky;top:0;z-index:20;
  background:rgba(255,251,244,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule2);
}
.res-bar__in{
  max-width:var(--sheet-w);margin:0 auto;padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.res-back{
  font-family:var(--jost);font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut);transition:.2s;
}
.res-back:hover{color:var(--gold2)}
.res-print{
  font-family:var(--jost);font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#FFF9EC;cursor:pointer;
  background:linear-gradient(115deg,#A87B25,#C99F45 45%,#E2C171 55%,#B78A2E);
  background-size:170% 100%;border:0;border-radius:999px;padding:11px 22px;
  box-shadow:0 12px 28px -14px rgba(143,106,31,.6);transition:.3s;
}
.res-print:hover{background-position:100% 0;transform:translateY(-1px)}

/* ---------- the sheet ---------- */

.doc{
  max-width:var(--sheet-w);margin:34px auto;background:var(--white);
  border:1px solid var(--rule2);border-radius:4px;
  box-shadow:0 30px 70px -34px rgba(120,90,40,.45);
  padding:26mm 20mm 20mm;
}

/* ---------- masthead ---------- */

.doc-mast{text-align:center;margin-bottom:30px}
.doc-brand{
  font-family:var(--cg);font-size:19px;font-weight:500;letter-spacing:.02em;
  color:var(--ink);
}
.doc-brand .amp{font-family:var(--script);font-size:21px;color:var(--gold);padding:0 2px}
.doc-brand .mark{color:var(--gold);margin-right:6px;font-size:12px;vertical-align:2px}
.doc-kicker{
  font-family:var(--jost);font-weight:500;font-size:10.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold2);margin:16px 0 12px;
}
.doc h1{
  font-family:var(--cg);font-weight:500;font-size:40px;line-height:1.1;
  letter-spacing:.005em;margin-bottom:12px;
}
.doc-script{
  font-family:var(--script);font-size:30px;color:var(--gold);
  line-height:1;display:block;margin-bottom:2px;
}
.doc-lede{
  font-style:italic;font-size:17.5px;color:var(--mut);line-height:1.6;
  max-width:56ch;margin:0 auto;
}

/* thin ornamental divider */
.vine{
  display:flex;align-items:center;gap:14px;justify-content:center;
  margin:26px 0;color:var(--gold);
}
.vine::before,.vine::after{content:"";flex:1;max-width:150px;border-top:1px solid var(--rule)}
.vine span{font-size:12px;letter-spacing:.5em;padding-left:.5em}

/* ---------- sections ---------- */

.sect{margin-top:30px;break-inside:auto}
.sect h2{
  font-family:var(--cg);font-weight:500;font-size:24px;line-height:1.2;
  margin-bottom:6px;break-after:avoid;
}
.sect h3{
  font-family:var(--jost);font-weight:500;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold2);margin:22px 0 10px;break-after:avoid;
}
.sect > p{margin-bottom:12px;max-width:66ch}
.sect .hint{font-style:italic;color:var(--mut);font-size:15.5px;margin-bottom:14px}
.tight > p{margin-bottom:8px}

.sect-head{
  border-top:1px solid var(--rule);padding-top:14px;margin-top:34px;
  break-after:avoid;
}
.sect-head .n{
  font-family:var(--jost);font-weight:500;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:6px;
}

/* ---------- prose lists ---------- */

ul.marks,ol.marks{list-style:none;margin:0 0 14px}
ul.marks li{padding:5px 0 5px 22px;position:relative;font-size:16px}
ul.marks li::before{content:"✦";position:absolute;left:0;top:5px;color:var(--gold);font-size:11px}
ol.marks{counter-reset:m}
ol.marks li{
  padding:6px 0 6px 30px;position:relative;font-size:16px;counter-increment:m;
  break-inside:avoid;
}
ol.marks li::before{
  content:counter(m) ".";position:absolute;left:0;top:6px;
  font-family:var(--jost);font-weight:500;font-size:12px;color:var(--gold2);
}
.marks li b,.marks li strong{font-weight:600}

/* two-column reference list, collapses on narrow paper */
.cols2{columns:2;column-gap:22mm}
.cols2 > *{break-inside:avoid}

/* ---------- checkboxes ---------- */

ul.checks{list-style:none;margin:0 0 14px}
ul.checks li{
  padding:7px 0 7px 26px;position:relative;font-size:16px;
  border-bottom:1px solid var(--rule2);break-inside:avoid;
}
ul.checks li:last-child{border-bottom:0}
ul.checks li::before{
  content:"";position:absolute;left:0;top:11px;width:12px;height:12px;
  border:1px solid var(--gold);border-radius:2px;
}
ul.checks.plain li{border-bottom:0}
ul.checks li .sub{
  display:block;font-style:italic;color:var(--mut);font-size:14.5px;margin-top:2px;
}
.ck{
  display:inline-block;width:12px;height:12px;border:1px solid var(--gold);
  border-radius:2px;vertical-align:-1px;margin-right:8px;
}

/* ---------- write-on rules ---------- */

.write{margin:6px 0 16px;break-inside:avoid}
.write .ln{display:block;height:10mm;border-bottom:1px solid var(--rule2)}
.write .ln:first-child{border-top:1px solid var(--rule2)}
.write.tightlines .ln{height:8mm}

.fld{margin:0 0 14px;break-inside:avoid}
.fld > .lab,label.lab{
  display:block;font-family:var(--jost);font-weight:500;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:5px;
}
.fld .line{display:block;height:9mm;border-bottom:1px solid var(--rule2)}
.fld-row{display:flex;gap:16px;break-inside:avoid}
.fld-row > .fld{flex:1}

/* inline fill-in blank inside a sentence */
.blank{
  display:inline-block;min-width:120px;border-bottom:1px solid var(--rule);
  margin:0 3px;
}

/* ---------- tables ---------- */

.sheet-wrap{margin:10px 0 18px;overflow-x:auto}
table.sheet{
  width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.4;
}
table.sheet thead th{
  font-family:var(--jost);font-weight:500;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold2);text-align:left;
  padding:8px 8px;border-bottom:1.5px solid var(--rule);vertical-align:bottom;
}
table.sheet td,table.sheet tbody th{
  padding:0 8px;border-bottom:1px solid var(--rule2);
  height:11mm;text-align:left;font-weight:400;vertical-align:middle;
}
table.sheet tbody th{font-family:var(--cg);font-size:14.5px}
table.sheet tr{break-inside:avoid}
/* vertical hairlines: these are grids people write inside, so the columns
   need edges as well as rules */
table.sheet td + td,table.sheet td + th,
table.sheet th + td,table.sheet th + th{border-left:1px solid var(--rule2)}
table.sheet.open td + td,table.sheet.open th + td,
table.sheet.open td + th,table.sheet.open th + th{border-left:0}
table.sheet td.num,table.sheet th.num{text-align:right}
table.sheet .rowlab{
  font-family:var(--jost);font-weight:500;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);
}
table.sheet.dense td,table.sheet.dense tbody th{height:9mm}
table.sheet.tall td,table.sheet.tall tbody th{height:15mm}
table.sheet caption{
  caption-side:top;text-align:left;font-style:italic;color:var(--mut);
  font-size:14.5px;padding-bottom:8px;
}
table.sheet .tick{width:14mm;text-align:center}
table.sheet td.tick::before{
  content:"";display:inline-block;width:11px;height:11px;
  border:1px solid var(--gold);border-radius:2px;vertical-align:-1px;
}

/* ---------- call-outs ---------- */

.note{
  border:1px solid var(--gold-soft);border-radius:10px;
  background:linear-gradient(180deg,#FFF8EA,var(--white));
  padding:16px 20px;margin:18px 0;font-size:15.5px;line-height:1.6;
  break-inside:avoid;
}
.note strong{font-weight:600;color:var(--gold2)}
.note p + p{margin-top:8px}
.bound{
  border-left:2px solid var(--rose);background:#FDF6F4;
  padding:14px 18px;margin:18px 0;font-size:15px;line-height:1.6;
  color:#6B4D46;break-inside:avoid;border-radius:0 8px 8px 0;
}
.bound strong{color:#8F4C41}
.pull{
  font-family:var(--cg);font-style:italic;font-size:19px;color:var(--gold2);
  text-align:center;line-height:1.5;margin:22px auto;max-width:52ch;
  break-inside:avoid;
}

/* ---------- question blocks (workbooks) ---------- */

.qa{margin:0 0 18px;break-inside:avoid}
.qa .q{
  font-size:16.5px;margin-bottom:4px;display:flex;gap:10px;align-items:baseline;
}
.qa .q .n{
  font-family:var(--jost);font-weight:500;font-size:11px;color:var(--gold2);
  letter-spacing:.1em;flex:none;
}

/* ---------- page control ---------- */

.pbreak{break-before:page;page-break-before:always}
.keep{break-inside:avoid;page-break-inside:avoid}

/* ---------- foot ---------- */

.doc-foot{
  margin-top:34px;border-top:1px solid var(--rule);padding-top:14px;
  font-family:var(--jost);font-size:9.5px;letter-spacing:.1em;color:var(--mut2);
  line-height:1.7;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  text-transform:uppercase;
}
.doc-foot .lic{text-transform:none;font-family:var(--cg);font-size:12.5px;
  letter-spacing:0;font-style:italic;flex-basis:100%;color:var(--mut);}

/* the drawer index page */
.res-index{max-width:var(--sheet-w);margin:0 auto;padding:0 18px}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}
.res-card{
  background:var(--white);border:1px solid var(--rule2);border-radius:14px;
  padding:22px 24px;box-shadow:0 20px 44px -30px rgba(120,90,40,.4);
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
a.res-card:hover{transform:translateY(-4px);box-shadow:0 28px 56px -28px rgba(120,90,40,.5)}
.res-card .no{
  font-family:var(--jost);font-weight:500;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px;
}
.res-card h3{font-family:var(--cg);font-weight:500;font-size:21px;margin-bottom:7px}
.res-card p{font-style:italic;color:var(--mut);font-size:15.5px;line-height:1.6;flex:1}
.res-card .go{
  font-family:var(--jost);font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold2);margin-top:14px;
}

/* screen-only: a printed page is narrower than 820px, so an unscoped
   breakpoint would stack every field row on paper */
@media screen and (max-width:820px){
  .doc{margin:18px 12px;padding:24px 22px;border-radius:3px}
  .doc h1{font-size:32px}
  .cols2{columns:1}
  .res-grid{grid-template-columns:1fr}
  .fld-row{flex-direction:column;gap:0}
  body{font-size:16px}
}

/* ============================================================
   PRINT — A4 and US Letter. Page size follows the printer so a
   single file works in both; only the margin is fixed here.
   ============================================================ */

@page{ margin:14mm 13mm 15mm; }

@media print{
  html,body{background:#fff!important}
  body{font-size:10.6pt;line-height:1.5;padding:0;color:#25201A}
  .res-bar,.res-noprint{display:none!important}
  .doc{
    max-width:none;margin:0;padding:0;border:0;border-radius:0;
    box-shadow:none;background:#fff;
  }
  .doc-mast{margin-bottom:12px}
  .doc-brand{font-size:12pt}
  .doc h1{font-size:22pt;margin-bottom:8px}
  .doc-script{font-size:16pt}
  .doc-lede{font-size:10.8pt}
  .doc-kicker{font-size:7.5pt;margin:8px 0 6px}
  .vine{margin:14px 0}
  .sect{margin-top:20px}
  .sect-head{margin-top:22px;padding-top:10px}
  .sect h2{font-size:14.5pt}
  .sect h3{font-size:8pt}
  .sect,.sect > p,ul.marks li,ol.marks li{font-size:10.6pt}
  table.sheet{font-size:9pt}
  table.sheet thead{display:table-header-group}
  table.sheet thead th{font-size:7pt;padding:5px 6px}
  table.sheet td,table.sheet tbody th{padding:0 6px;font-size:9pt;height:10mm}
  table.sheet.dense td,table.sheet.dense tbody th{height:6.6mm}
  .fld .line{height:7.5mm}
  /* .compact — for sheets that are meant to land on exactly one page */
  .doc.compact .doc-mast{margin-bottom:8px}
  .doc.compact .doc-script{display:none}
  .doc.compact h1{font-size:18pt;margin-bottom:6px}
  .doc.compact .doc-lede{font-size:10pt}
  .doc.compact .vine{margin:10px 0}
  .doc.compact .note{padding:8px 12px;font-size:9.2pt}
  .doc.compact .doc-kicker{margin:6px 0 4px}
  .doc.compact .sect{margin-top:12px}
  .doc.compact .vine{margin:8px 0}
  .doc.compact .doc-foot{margin-top:14px;padding-top:10px}
  table.sheet.tall td,table.sheet.tall tbody th{height:13mm}
  .note,.bound{font-size:9.6pt;padding:10px 14px}
  .doc-foot{font-size:7pt;margin-top:20px}
  .doc-foot .lic{font-size:8.5pt}
  a{color:inherit;text-decoration:none}
  .sect{break-inside:auto}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .keep,.qa,.note,.bound,.write,.fld,table.sheet tr{page-break-inside:avoid}
}

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