/* ============================================================================
   Bookworm's Paradise Library — design system
   Palette sampled from the real logo (cream/gold ring, navy text) and the
   actual teal study-desk partitions in the Hastsal hall.
   ========================================================================== */

:root{
  /* Real brand colours */
  --ink:        #13211D;   /* deep teal-charcoal (logo navy + partition shadow) */
  --ink-soft:   #46564F;   /* muted slate for secondary text */
  --teal:       #0C5C4E;   /* partition teal — primary */
  --teal-deep:  #083F36;   /* darker teal for depth */
  --teal-hover: #0a4e43;
  --cyan-edge:  #0FA6A0;   /* bright lit partition edge — thin accent only */
  --brass:      #B5802A;   /* logo gold rim — high-intent accent */
  --brass-soft: #d8b771;

  --paper:      #F6F2E9;   /* warm reading-paper background */
  --paper-2:    #EFE9DB;   /* slightly deeper panel */
  --surface:    #FFFFFF;
  --hair:       #E3DDCF;   /* hairline borders on paper */
  --hair-2:     #D8D0BE;

  --focus:      #0FA6A0;

  --maxw: 1160px;
  --gutter: clamp(16px, 5vw, 48px);
  --radius: 14px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(19,33,29,.06), 0 2px 8px rgba(19,33,29,.05);
  --shadow-md: 0 8px 30px rgba(19,33,29,.10);

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---- reset ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
/* Avoid horizontal scroll WITHOUT breaking position:sticky on the header.
   (overflow-x:hidden on html/body would cancel the sticky header, so we
   clip overflow at the main wrapper instead.) */
body{ overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ max-width:100%; display:block; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--teal-hover); }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.1; letter-spacing:-.01em; margin:0 0 .4em; color:var(--ink); }
p{ margin:0 0 1em; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.tnum{ font-variant-numeric:tabular-nums; }

/* Section rhythm */
section{ padding-block:clamp(56px, 9vw, 104px); }
section[id]{ scroll-margin-top:84px; }
.section-head{ max-width:46rem; margin-bottom:2.6rem; }
.section-head h2{ font-size:clamp(1.9rem, 4.2vw, 2.9rem); }
.section-head p{ color:var(--ink-soft); font-size:1.08rem; }

/* Desk-tab eyebrow — borrowed from the numbered desk plates on the real
   partitions. Structural, content-derived, not decorative. */
.desk-tab{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-deep);
  background:var(--paper-2);
  border:1px solid var(--hair-2);
  border-left:4px solid var(--teal);
  padding:.34rem .7rem .34rem .6rem;
  border-radius:0 6px 6px 0;
  margin-bottom:1rem;
}

/* ---- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:1rem;
  padding:.82rem 1.4rem; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  text-align:center; line-height:1.2;
}
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-hover); color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--hair-2); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }
.btn-brass{ background:var(--brass); color:#fff; }
.btn-brass:hover{ background:#9d6d20; color:#fff; }
.btn-lg{ padding:1rem 1.7rem; font-size:1.06rem; }
@media (prefers-reduced-motion:no-preference){ .btn:active{ transform:translateY(1px); } }

/* ---- header --------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,242,233,.88);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--hair);
}
.site-header .wrap{ display:flex; align-items:center; gap:1rem; height:68px; }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--font-head);
  font-weight:600; font-size:1.06rem; color:var(--ink); }
.brand img{ width:38px; height:38px; border-radius:50%; }
.brand span small{ display:block; font-family:var(--font-body); font-weight:500;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-top:1px; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:1.5rem; }
.nav a.navlink{ font-size:.95rem; font-weight:500; color:var(--ink-soft); }
.nav a.navlink:hover{ color:var(--teal); }
.header-cta{ display:inline-flex; }
.nav-toggle{ display:none; margin-left:auto; background:none; border:1px solid var(--hair-2);
  border-radius:8px; width:44px; height:40px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

@media (max-width:860px){
  .nav{ position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper); border-bottom:1px solid var(--hair);
    padding:.5rem var(--gutter) 1.2rem; transform:translateY(-130%); transition:transform .28s ease; }
  .nav.open{ transform:translateY(0); }
  .nav a.navlink{ padding:.85rem .2rem; border-bottom:1px solid var(--hair); }
  .nav .header-cta{ margin-top:.9rem; }
  .nav-toggle{ display:inline-flex; }
}

/* ---- hero ----------------------------------------------------------------- */
.hero{ position:relative; padding:0; }
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,33,28,.92) 0%, rgba(8,33,28,.78) 42%, rgba(8,33,28,.30) 100%); }
.hero-inner{ position:relative; z-index:2; padding-block:clamp(84px,14vw,150px); }
.hero-inner .wrap{ max-width:var(--maxw); }
.hero-copy{ max-width:40rem; color:#fff; }
.hero-loc{ display:inline-flex; align-items:center; gap:.5rem; color:var(--brass-soft);
  font-weight:600; font-size:.9rem; letter-spacing:.04em; margin-bottom:1.1rem; }
.hero-loc::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan-edge);
  box-shadow:0 0 0 4px rgba(15,166,160,.25); }
.hero h1{ color:#fff; font-size:clamp(2.4rem, 6vw, 4.1rem); font-weight:600; line-height:1.03; }
.hero-copy p.lead{ color:rgba(255,255,255,.9); font-size:clamp(1.05rem,2.2vw,1.25rem); max-width:34rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.hero-meta{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1.6rem 2.2rem;
  padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.18); }
.hero-meta .mi{ color:#fff; }
.hero-meta .mi b{ font-family:var(--font-head); font-size:1.5rem; font-weight:600; display:block; }
.hero-meta .mi span{ color:rgba(255,255,255,.72); font-size:.86rem; }

/* ---- trust strip ---------------------------------------------------------- */
.trust{ background:var(--ink); color:#fff; padding-block:0; }
.trust .wrap{ display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem; align-items:center;
  padding-block:1.1rem; font-size:.95rem; }
.trust .ti{ display:flex; align-items:center; gap:.55rem; color:rgba(255,255,255,.82); }
.trust .ti svg{ width:18px; height:18px; stroke:var(--cyan-edge); flex:none; }
.trust a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ---- about / lede --------------------------------------------------------- */
.about .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.about .lede-big{ font-family:var(--font-head); font-size:clamp(1.5rem,3.2vw,2.15rem);
  line-height:1.28; color:var(--ink); font-weight:500; }
.about .lede-big b{ color:var(--teal); font-weight:600; }
.about ul.ticks{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.7rem; }
.about ul.ticks li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-soft); font-size:1rem; }
.about ul.ticks li svg{ width:20px; height:20px; stroke:var(--teal); flex:none; margin-top:2px; }
.about-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); }
.about-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
@media (max-width:820px){ .about .wrap{ grid-template-columns:1fr; } .about-photo{ order:-1; } .about-photo img{ aspect-ratio:16/11; } }

/* ---- environment bento ---------------------------------------------------- */
.env-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.env-cell{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink);
  min-height:200px; box-shadow:var(--shadow-sm); }
.env-cell img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform .5s ease; }
.env-cell:hover img{ transform:scale(1.04); }
.env-cell .cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem 1.1rem;
  color:#fff; background:linear-gradient(transparent, rgba(8,33,28,.86));
  font-size:.92rem; font-weight:500; }
.env-wide{ grid-column:span 2; grid-row:span 2; min-height:420px; }
.env-tall{ grid-row:span 2; min-height:420px; }
@media (max-width:820px){ .env-grid{ grid-template-columns:repeat(2,1fr); }
  .env-wide{ grid-column:span 2; grid-row:auto; min-height:260px; } .env-tall{ grid-row:auto; min-height:220px; } }
@media (max-width:520px){ .env-grid{ grid-template-columns:1fr; } .env-wide,.env-tall{ min-height:220px; } }

/* ---- plans ---------------------------------------------------------------- */
.plans-note{ display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem;
  color:var(--ink-soft); background:var(--surface); border:1px solid var(--hair);
  padding:.45rem .9rem; border-radius:999px; margin-bottom:1.6rem; }
.plan-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:560px){ .plan-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .plan-grid{ grid-template-columns:repeat(4,1fr); } }
.plan{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; position:relative; }
.plan.feat{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal), var(--shadow-md); }
.plan .ptag{ position:absolute; top:-12px; left:1.4rem; background:var(--teal); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:.28rem .7rem; border-radius:999px; }
.plan h3{ font-size:1.18rem; margin-bottom:.2rem; min-height:2.5em; }
.plan .price{ font-family:var(--font-head); font-weight:600; color:var(--ink); display:flex; align-items:baseline; gap:.25rem; margin:.2rem 0 .1rem; }
.plan .price .amt{ font-size:2.5rem; line-height:1; }
.plan .price .per{ font-size:.86rem; color:var(--ink-soft); font-family:var(--font-body); }
.plan .psum{ font-size:.92rem; color:var(--ink-soft); margin:.5rem 0 1rem; }
.plan ul.inc{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.5rem; }
.plan ul.inc li{ display:flex; gap:.5rem; font-size:.92rem; color:var(--ink); }
.plan ul.inc li svg{ width:17px; height:17px; stroke:var(--teal); flex:none; margin-top:3px; }
.plan .pnote{ font-size:.78rem; color:var(--ink-soft); background:var(--paper); border-radius:8px;
  padding:.5rem .6rem; margin:0 0 1.1rem; line-height:1.4; }
.plan .btn{ margin-top:auto; width:100%; }
.addon-bar{ margin-top:18px; background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:1.3rem 1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.addon-bar .ab-price{ font-family:var(--font-head); font-size:2rem; font-weight:600; color:var(--brass-soft); }
.addon-bar .ab-txt{ flex:1; min-width:220px; }
.addon-bar .ab-txt b{ font-size:1.05rem; } .addon-bar .ab-txt p{ margin:.2rem 0 0; color:rgba(255,255,255,.75); font-size:.9rem; }

/* ---- gallery -------------------------------------------------------------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:720px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
.gcard{ border:0; padding:0; background:var(--ink); border-radius:var(--radius-sm); overflow:hidden;
  cursor:zoom-in; aspect-ratio:4/3; position:relative; }
.gcard img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gcard:hover img{ transform:scale(1.05); }

/* ---- videos --------------------------------------------------------------- */
.video-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:720px){ .video-grid{ grid-template-columns:1fr; } }
.vcard{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; }
.vframe{ position:relative; aspect-ratio:16/10; background:var(--ink); overflow:hidden; transition:aspect-ratio .25s ease; }
.vframe video{ width:100%; height:100%; object-fit:cover; background:#000; }
/* When a (vertical) video is playing, give it room and show it fully
   instead of cropping faces/captions. */
.vframe.playing{ aspect-ratio:4/5; background:#000; }
.vframe.playing video{ object-fit:contain; }
@media (min-width:721px){ .vframe.playing{ aspect-ratio:16/11; } }
.vframe .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vframe .play{ position:absolute; inset:0; margin:auto; width:66px; height:66px; border-radius:50%;
  background:rgba(255,255,255,.92); border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); transition:transform .2s ease, background .2s ease; z-index:3; }
.vframe .play:hover{ transform:scale(1.07); background:#fff; }
.vframe .play svg{ width:26px; height:26px; fill:var(--teal); margin-left:3px; }
.vframe.playing .poster,.vframe.playing .play{ display:none; }
.vcard .vmeta{ padding:1rem 1.2rem; }
.vcard .vmeta b{ font-size:1rem; } .vcard .vmeta p{ margin:.25rem 0 0; font-size:.88rem; color:var(--ink-soft); }

/* ---- testimonials note ---------------------------------------------------- */
.proof-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.8rem; }

/* ---- steps / how to join -------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; counter-reset:step; }
@media (max-width:720px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:1.5rem 1.4rem; position:relative; }
.step::before{ counter-increment:step; content:counter(step); font-family:var(--font-head); font-weight:600;
  font-size:1.1rem; color:#fff; background:var(--teal); width:2.1rem; height:2.1rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; }
.step h3{ font-size:1.1rem; } .step p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq-list{ max-width:52rem; border-top:1px solid var(--hair); }
.faq{ border-bottom:1px solid var(--hair); }
.faq summary{ cursor:pointer; list-style:none; padding:1.15rem .2rem; font-weight:600; font-size:1.05rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:center; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.5rem; color:var(--teal); font-weight:400; transition:transform .2s ease; }
.faq[open] summary::after{ transform:rotate(45deg); }
.faq .faq-body{ padding:0 .2rem 1.2rem; color:var(--ink-soft); }
.faq .faq-body p{ margin:0; }

/* ---- blog preview --------------------------------------------------------- */
.blog-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:720px){ .blog-strip{ grid-template-columns:1fr; } }
.bpost{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:1.4rem; }
.bpost .bk{ font-size:.75rem; font-weight:600; color:var(--brass); letter-spacing:.05em; }
.bpost h3{ font-size:1.12rem; margin:.5rem 0 .4rem; }
.bpost p{ font-size:.92rem; color:var(--ink-soft); margin:0; }
.blog-standby{ background:var(--paper-2); border:1px dashed var(--hair-2); border-radius:var(--radius);
  padding:1.6rem; display:flex; gap:1rem; align-items:flex-start; color:var(--ink-soft); font-size:.95rem; }
.blog-standby svg{ width:22px; height:22px; stroke:var(--teal); flex:none; margin-top:2px; }

/* ---- location ------------------------------------------------------------- */
.loc .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width:820px){ .loc .wrap{ grid-template-columns:1fr; } }
.loc-card{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:1.8rem; }
.loc-card h3{ font-size:1.3rem; }
.loc-line{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1rem; color:var(--ink); }
.loc-line svg{ width:20px; height:20px; stroke:var(--teal); flex:none; margin-top:3px; }
.loc-line .muted{ color:var(--ink-soft); font-size:.9rem; }
.pending{ display:inline-block; font-size:.78rem; color:#8a6d1e; background:#faf3df;
  border:1px solid #ecd9a3; border-radius:6px; padding:.1rem .5rem; }
.loc-photo{ border-radius:var(--radius); overflow:hidden; height:clamp(280px, 48vh, 460px); }
.loc-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
@media (max-width:820px){ .loc-photo{ height:clamp(240px, 56vw, 340px); } }

/* ---- final CTA + footer --------------------------------------------------- */
.final-cta{ background:linear-gradient(135deg, var(--teal-deep), var(--teal)); color:#fff; border-radius:0; }
.final-cta .wrap{ text-align:center; max-width:46rem; }
.final-cta h2{ color:#fff; font-size:clamp(2rem,4.5vw,3rem); }
.final-cta p{ color:rgba(255,255,255,.9); font-size:1.1rem; }
.final-cta .hero-cta{ justify-content:center; }

.site-footer{ background:var(--ink); color:rgba(255,255,255,.72); padding-block:3rem 2rem; font-size:.92rem; }
.site-footer .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
@media (max-width:720px){ .site-footer .wrap{ grid-template-columns:1fr; gap:1.6rem; } }
.site-footer .brand{ color:#fff; margin-bottom:.8rem; }
.site-footer .brand span small{ color:var(--brass-soft); }
.site-footer h4{ color:#fff; font-family:var(--font-body); font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; margin:0 0 .9rem; }
.site-footer a{ color:rgba(255,255,255,.75); display:block; padding:.25rem 0; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.14); margin-top:2.2rem; padding-top:1.4rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; font-size:.84rem; color:rgba(255,255,255,.55); }

/* ---- lightbox ------------------------------------------------------------- */
.lightbox{ position:fixed; inset:0; background:rgba(8,20,17,.93); z-index:100;
  display:none; align-items:center; justify-content:center; padding:2rem; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(92vw,1200px); max-height:86vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox .lb-close,.lightbox .lb-nav{ position:absolute; background:rgba(255,255,255,.14); border:0; color:#fff;
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.5rem; display:flex; align-items:center; justify-content:center; }
.lightbox .lb-close{ top:1.3rem; right:1.3rem; }
.lightbox .lb-nav{ top:50%; transform:translateY(-50%); }
.lightbox .lb-prev{ left:1.3rem; } .lightbox .lb-next{ right:1.3rem; }
.lightbox .lb-nav:hover,.lightbox .lb-close:hover{ background:rgba(255,255,255,.26); }
@media (max-width:620px){ .lightbox .lb-nav{ width:44px; height:44px; } }

.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:.7rem 1rem; z-index:200; border-radius:0 0 8px 0; }
.skip:focus{ left:0; color:#fff; }