/* Aspirations Study Library — storefront styles.
   Visual system = the approved "exam paper / parchment" design
   (public-web/index.html): Source Serif 4 headings, Libre Franklin body,
   IBM Plex Mono labels, paper tones, subject colour-coding.
   Mobile-first: 16px base, 44px tap targets. Light + dark. */

:root{
  --ink:#16213A; --ink-soft:#4E5A70;
  --paper:#ECE8DA; --paper-raised:#F7F5EC; --paper-deep:#E2DDCB;
  --rule:#CFC9B4;
  --accent:#2B4C7E; --accent-soft:#DCE6F2; --on-accent:#F7F5EC;
  --highlight:#E2A33B; --highlight-ink:#4A3006;
  --ok:#2F7D52; --warn-bg:#FBEBD0; --warn-rule:#E2A33B;
  --subj-physics:#2B6CB0; --subj-chem:#2F7D52; --subj-math:#A9721B; --subj-bio:#8C2A6B;
  --subj-science:#1F7A7A; --subj-english:#B04A2F; --subj-sst:#6B5B2E; --subj-commerce:#5A4FA3;
  --shadow:0 1px 0 rgba(22,33,58,0.06);
  --shadow-lift:0 6px 14px rgba(22,33,58,0.10);
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Libre Franklin', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDEAD9; --ink-soft:#B0AB98;
    --paper:#13161F; --paper-raised:#1B1F29; --paper-deep:#0D0F16;
    --rule:#333849;
    --accent:#87ABE3; --accent-soft:#1E2C44; --on-accent:#13161F;
    --highlight:#E8B65A; --highlight-ink:#2A1B04;
    --ok:#6FCB98; --warn-bg:#2E2412; --warn-rule:#8A6A2C;
    --subj-physics:#79ACEA; --subj-chem:#6FCB98; --subj-math:#E3B85B; --subj-bio:#D97FBB;
    --subj-science:#6CC9C9; --subj-english:#E68B70; --subj-sst:#C9B47A; --subj-commerce:#A79CF0;
    --shadow:0 1px 0 rgba(0,0,0,0.4); --shadow-lift:0 6px 14px rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --ink:#EDEAD9; --ink-soft:#B0AB98;
  --paper:#13161F; --paper-raised:#1B1F29; --paper-deep:#0D0F16;
  --rule:#333849;
  --accent:#87ABE3; --accent-soft:#1E2C44; --on-accent:#13161F;
  --highlight:#E8B65A; --highlight-ink:#2A1B04;
  --ok:#6FCB98; --warn-bg:#2E2412; --warn-rule:#8A6A2C;
  --subj-physics:#79ACEA; --subj-chem:#6FCB98; --subj-math:#E3B85B; --subj-bio:#D97FBB;
  --subj-science:#6CC9C9; --subj-english:#E68B70; --subj-sst:#C9B47A; --subj-commerce:#A79CF0;
  --shadow:0 1px 0 rgba(0,0,0,0.4); --shadow-lift:0 6px 14px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
}
a{color:var(--accent);}
img{max-width:100%;}
h1,h2,h3{font-family:var(--serif); font-weight:600; text-wrap:balance; margin:0; color:var(--ink);}
p{margin:0;}
.mono{font-family:var(--mono);}
.muted{color:var(--ink-soft); font-size:0.88rem;}

.page{max-width:1180px; margin-inline:auto; padding-inline:16px;}
@media (min-width:640px){ .page{padding-inline:32px;} }

/* ---------- Letterhead (header) ---------- */
.letterhead{border-bottom:1px solid var(--rule); background:var(--paper);}
.letterhead-inner{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; padding-block:12px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);}
.brand-logo-tile{background:#fff; border:1px solid var(--rule); padding:4px 8px; display:flex; align-items:center;}
.brand-logo{height:34px; width:auto; display:block;}
.brand-mark{font-family:var(--serif); font-weight:700; font-size:1.2rem; letter-spacing:0.01em; line-height:1.15;}
.brand-mark em{font-style:normal; color:var(--accent);}
.site-nav{display:flex; gap:4px 20px; align-items:center; font-size:0.92rem; flex-wrap:wrap;}
.site-nav a{
  text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent;
  min-height:44px; display:inline-flex; align-items:center;
}
.site-nav a:hover{color:var(--ink); border-bottom-color:var(--accent);}
.site-nav a.current{color:var(--ink); border-bottom-color:var(--accent);}
.site-nav a.nav-cta{
  color:var(--on-accent); background:var(--accent); border:1px solid var(--accent);
  padding:0 16px; font-weight:600;
}
.site-nav a.nav-cta:hover{opacity:0.92; color:var(--on-accent);}
.site-nav a.nav-staff{font-family:var(--mono); font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase;}
@media (max-width:640px){
  .brand-mark{font-size:1.05rem;}
  .brand-logo{height:28px;}
  .site-nav{width:100%; gap:0 16px; font-size:0.88rem;}
  .site-nav a.nav-cta{display:none;} /* the floating Enquire button covers this on phones */
}

/* ---------- Buttons & forms ---------- */
.btn, button.btn, .enquiry-form button, #buy-form button, .lookup-form button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:10px 20px;
  font-family:var(--sans); font-weight:600; font-size:0.95rem; text-decoration:none;
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent);
  cursor:pointer; border-radius:0;
}
.btn:hover, .enquiry-form button:hover, #buy-form button:hover, .lookup-form button:hover{opacity:0.92;}
.btn-ghost{background:transparent; color:var(--accent);}
.btn-ghost:hover{background:var(--accent-soft);}

label{display:flex; flex-direction:column; gap:5px; font-size:0.78rem; font-family:var(--mono); letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft);}
input, select, textarea{
  font-family:var(--sans); font-size:1rem; /* 16px stops iOS zoom */
  text-transform:none; letter-spacing:normal;
  width:100%; padding:11px 12px; min-height:44px;
  background:var(--paper-raised); color:var(--ink);
  border:1px solid var(--rule); border-radius:0;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent);}
[role="status"]{font-size:0.9rem; color:var(--ink-soft); margin-top:10px; min-height:1.2em;}

/* ---------- Hero ---------- */
.hero{padding-block:48px 36px; border-bottom:1px solid var(--rule);}
.hero-meta{display:flex; gap:12px; align-items:center; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:18px; flex-wrap:wrap;}
.hero-meta .divider{width:1px; height:12px; background:var(--rule);}
h1.hero-title{font-size:clamp(1.9rem, 4.2vw, 3.1rem); line-height:1.12; max-width:18ch;}
h1.hero-title .accent-word{color:var(--accent);}
.hero-sub{margin-top:18px; max-width:58ch; font-size:1.06rem; color:var(--ink-soft);}
.search-row{margin-top:26px; display:flex; gap:0; max-width:620px;}
.search-row input{flex:1; min-width:0; border-right:none; background:var(--paper-raised);}
.search-row .btn{flex-shrink:0;}
@media (max-width:640px){ .hero{padding-block:32px 28px;} }

/* ---------- Catalog ---------- */
.catalog-head{padding-block:32px 16px; display:flex; justify-content:space-between; align-items:flex-end; gap:12px 20px; flex-wrap:wrap;}
.catalog-head h2{font-size:1.5rem;}
.catalog-count{font-family:var(--mono); font-size:0.76rem; color:var(--ink-soft);}
.catalog-count a{color:var(--accent);}
.tabs{display:flex; gap:2px; flex-wrap:nowrap; overflow-x:auto; margin-bottom:10px; padding-bottom:2px; scrollbar-width:thin;}
.tab{
  font-family:var(--mono); font-size:0.76rem; letter-spacing:0.03em; text-transform:uppercase; white-space:nowrap;
  padding:12px 14px 10px; min-height:44px; display:inline-flex; align-items:center;
  background:var(--paper-raised); border:1px solid var(--rule); border-bottom:3px solid var(--tab-color, var(--rule));
  color:var(--ink-soft); text-decoration:none;
}
.tab[aria-current="true"]{color:var(--ink); background:var(--paper-deep); border-bottom-color:var(--tab-color, var(--accent));}
.tab:hover{color:var(--ink);}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:18px; padding-block:8px 48px;}
.card{
  position:relative; background:var(--paper-raised); border:1px solid var(--rule); box-shadow:var(--shadow);
  padding:18px 18px 14px; display:flex; flex-direction:column; gap:10px;
  border-top:3px solid var(--subj-color, var(--accent)); color:var(--ink); text-decoration:none;
}
.card-cover{margin:-18px -18px 4px; border-bottom:1px solid var(--rule); background:var(--paper-deep); aspect-ratio:16/9; overflow:hidden;}
.card-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.card-eyebrow{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.card-eyebrow .tag{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--subj-color, var(--ink-soft));}
.stamp{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.07em; text-transform:uppercase; padding:3px 8px; white-space:nowrap;}
.stamp-free{color:var(--highlight-ink); background:var(--highlight);}
.stamp-price{color:var(--accent); border:1px solid var(--accent); font-weight:600;}
.card h3{font-size:1.08rem; line-height:1.3;}
.card-desc{font-size:0.88rem; color:var(--ink-soft); flex-grow:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.card-foot{display:flex; justify-content:space-between; align-items:center; gap:8px; font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); border-top:1px solid var(--rule); padding-top:10px; margin-top:2px;}
.card-foot .open{color:var(--accent); font-weight:600; font-family:var(--sans); font-size:0.85rem; white-space:nowrap;}
.card:hover .open{text-decoration:underline;}
@media (prefers-reduced-motion: no-preference){
  .card{transition:transform 0.15s ease, box-shadow 0.15s ease;}
  .card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift);}
}
@media (max-width:640px){ .grid{grid-template-columns:1fr; gap:14px;} }

[data-subj="physics"]{--subj-color:var(--subj-physics); --tab-color:var(--subj-physics);}
[data-subj="chemistry"]{--subj-color:var(--subj-chem); --tab-color:var(--subj-chem);}
[data-subj="maths"]{--subj-color:var(--subj-math); --tab-color:var(--subj-math);}
[data-subj="biology"]{--subj-color:var(--subj-bio); --tab-color:var(--subj-bio);}
[data-subj="science"]{--subj-color:var(--subj-science); --tab-color:var(--subj-science);}
[data-subj="english"]{--subj-color:var(--subj-english); --tab-color:var(--subj-english);}
[data-subj="sst"]{--subj-color:var(--subj-sst); --tab-color:var(--subj-sst);}
[data-subj="commerce"]{--subj-color:var(--subj-commerce); --tab-color:var(--subj-commerce);}

.empty{grid-column:1/-1; padding:40px 20px; text-align:center; background:var(--paper-raised); border:1px dashed var(--rule); color:var(--ink-soft);}
.empty h3{margin-bottom:6px;}

.pagination{display:flex; gap:2px; flex-wrap:wrap; padding-bottom:48px;}
.pagination a{
  font-family:var(--mono); font-size:0.85rem; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper-raised); border:1px solid var(--rule); color:var(--ink-soft); text-decoration:none;
}
.pagination a.active{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}

/* ---------- Strips (Why free / cross-links) ---------- */
.strip{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--accent-soft); padding-block:22px;}
.strip-inner{display:flex; gap:10px 14px; align-items:baseline; flex-wrap:wrap; font-size:0.95rem;}
.strip-inner strong{font-family:var(--serif); font-weight:600; font-size:1.05rem;}
.sister-sites{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; padding-block:36px;}
.sister{background:var(--paper-raised); border:1px solid var(--rule); padding:18px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:6px;}
.sister .mono{font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--accent);}
.sister h3{font-size:1.05rem;}
.sister p{font-size:0.88rem; color:var(--ink-soft);}
.sister:hover{border-color:var(--accent);}

/* ---------- Product page ---------- */
.crumbs{font-family:var(--mono); font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); padding-top:22px; display:flex; gap:8px; flex-wrap:wrap;}
.crumbs a{color:var(--ink-soft); text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.product-layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:32px; padding-block:18px 48px; align-items:start;}
@media (max-width:900px){ .product-layout{grid-template-columns:1fr; gap:24px;} }
.product-head{border-top:3px solid var(--subj-color, var(--accent)); padding-top:16px;}
.product-head .tag{font-family:var(--mono); font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--subj-color, var(--ink-soft));}
.product-head h1{font-size:clamp(1.6rem, 3.4vw, 2.3rem); line-height:1.15; margin-top:8px;}
.product-description{margin-top:14px; color:var(--ink-soft); font-size:1.02rem; max-width:65ch; white-space:pre-line;}
.section{margin-top:32px;}
.section-title{font-size:1.2rem; padding-bottom:8px; border-bottom:1px solid var(--rule); margin-bottom:14px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
.section-title .muted{font-family:var(--mono); font-size:0.72rem; font-weight:400;}
.preview-pages{display:flex; flex-direction:column; gap:14px;}
.preview-pages img{width:100%; background:#fff; border:1px solid var(--rule); box-shadow:var(--shadow-lift); user-select:none; -webkit-user-drag:none;}
.preview-lock{position:relative; margin-top:-80px; padding:80px 20px 20px; text-align:center; background:linear-gradient(to bottom, transparent, var(--paper) 70%);}
.preview-lock p{font-family:var(--serif); font-size:1.05rem;}

.buy-card{position:sticky; top:16px; background:var(--paper-raised); border:1px solid var(--rule); box-shadow:var(--shadow); padding:20px;}
.buy-card .price-tag{font-family:var(--serif); font-weight:700; font-size:2rem; line-height:1;}
.buy-card .price-note{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px;}
.buy-card form{display:flex; flex-direction:column; gap:12px; margin-top:18px;}
.buy-card form button{width:100%; margin-top:4px;}
.buy-card ul{list-style:none; padding:14px 0 0; margin:16px 0 0; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:8px; font-size:0.86rem; color:var(--ink-soft);}
.buy-card li::before{content:"✓"; color:var(--ok); font-weight:700; margin-right:8px;}
@media (max-width:900px){ .buy-card{position:static;} }

.solution-card{margin-top:24px; padding:16px 18px; background:var(--warn-bg); border:1px solid var(--warn-rule); border-left:4px solid var(--highlight);}
.solution-card h2{font-size:1.1rem;}
.solution-card p{font-size:0.92rem; color:var(--ink-soft); margin-top:4px;}
.solution-card .btn{margin-top:12px;}

.faq details{border-bottom:1px solid var(--rule); padding-block:4px;}
.faq summary{cursor:pointer; font-family:var(--serif); font-weight:600; font-size:1.02rem; min-height:44px; display:flex; align-items:center; list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+"; font-family:var(--mono); color:var(--accent); width:22px; flex-shrink:0;}
.faq details[open] summary::before{content:"–";}
.faq details p{padding:0 0 12px 22px; color:var(--ink-soft); font-size:0.95rem;}

/* ---------- Simple content pages (legal, my purchases, errors) ---------- */
.content-page{padding-block:36px 48px; max-width:780px;}
.content-page h1{font-size:clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom:16px;}
.content-page h2{font-size:1.25rem; margin:26px 0 8px;}
.content-page p, .content-page li{color:var(--ink-soft); margin-bottom:10px;}
.lookup-form{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:18px; padding:18px; background:var(--paper-raised); border:1px solid var(--rule);}
.lookup-form label{flex:1; min-width:220px;}
.purchase-list{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:10px;}
.purchase-list li{display:flex; justify-content:space-between; align-items:center; gap:6px 14px; flex-wrap:wrap; background:var(--paper-raised); border:1px solid var(--rule); border-left:3px solid var(--accent); padding:14px 16px; margin:0;}
.purchase-list a{font-family:var(--serif); font-weight:600; font-size:1.02rem; text-decoration:none; color:var(--ink);}
.purchase-list a:hover{color:var(--accent);}

/* ---------- Enquiry (every page) ---------- */
.enquiry-section{background:var(--paper-deep); border-top:1px solid var(--rule); padding-block:40px;}
.enquiry-inner{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr); gap:28px; align-items:start;}
@media (max-width:900px){ .enquiry-inner{grid-template-columns:1fr; gap:18px;} }
.enquiry-intro .mono{font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);}
.enquiry-intro h2{font-size:1.6rem; margin-top:8px; line-height:1.2;}
.enquiry-intro p{color:var(--ink-soft); margin-top:10px;}
.enquiry-form{background:var(--paper-raised); border:1px solid var(--rule); padding:20px;}
.enquiry-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px;}
.enquiry-message{margin-top:14px;}
.enquiry-form button{margin-top:16px;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--rule); background:var(--paper);}
.footer-inner{padding-block:28px 32px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:0.84rem; color:var(--ink-soft);}
.footer-links{display:flex; gap:4px 18px; flex-wrap:wrap;}
.footer-links a{color:var(--ink-soft); text-decoration:none; min-height:32px; display:inline-flex; align-items:center;}
.footer-links a:hover{color:var(--accent);}
.site-footer .mono{font-size:0.76rem;}

.mobile-enquire-fab{
  display:none; position:fixed; right:16px; bottom:16px; z-index:20;
  background:var(--accent); color:var(--on-accent); padding:0 20px; min-height:48px; align-items:center;
  font-weight:700; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.25); border-radius:999px;
}
@media (max-width:640px){ .mobile-enquire-fab{display:inline-flex;} }

/* ---------- Secure viewer (kept dark for reading) ---------- */
.viewer-body{background:#111; margin:0; color:#eee;}
.viewer-header{position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px; background:#000; color:#fff; z-index:10; font-family:var(--sans);}
.viewer-header strong{font-family:var(--serif); font-weight:600;}
.viewer-header #page-indicator{font-family:var(--mono); font-size:0.8rem; color:#aaa;}
.viewer-pages{display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; user-select:none;}
.viewer-pages img{max-width:100%; pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.5);}
.viewer-note{text-align:center; color:#aaa; font-size:0.8rem; padding:12px;}
@media print{ .viewer-body{display:none !important;} }