/* ============================================================================
   THE ACADEMY ROOMS.                                 Shanae, 2026-09-12

   "For the movies academy you need to look through all the generators with the
    word movie that is what it should open"
   "For the academy also and teaching, learning or education item should be
    house under here"

   Two rooms, one stylesheet, one renderer. Nothing here is per-page, so a third
   room costs a JSON entry and an eleven line HTML file.

   Her palette: champagne gold on near-black, cream for reading. Same as the
   Lo-Fi rooms and the world, so walking in from the city does not feel like
   landing on somebody else's site.
   ========================================================================= */

:root{
 --ac-ink:#06070C;
 --ac-ink-2:#0C0E16;
 --ac-line:rgba(233,200,119,.16);
 --ac-gold:#E9C877;
 --ac-gold-soft:rgba(233,200,119,.34);
 --ac-text:#F4E7C4;
 --ac-dim:rgba(244,231,196,.66);
 --ac-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
 --ac-body:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
body{
 margin:0;background:var(--ac-ink);color:var(--ac-text);
 font:400 15px/1.65 var(--ac-body);
 -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ------------------------------------------------------------------ the rail
   The same left rail as the front door, so every room on the site is left the
   same way. Her complaint was two of every control and not knowing which was
   real, so there is exactly one of each here too. */
.ac-shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.ac-rail{
 position:sticky;top:0;align-self:start;height:100vh;
 display:flex;flex-direction:column;gap:26px;
 padding:26px 20px;border-right:1px solid var(--ac-line);
 background:var(--ac-ink-2);
}
.ac-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.ac-omega{font:400 26px/1 var(--ac-serif);color:var(--ac-gold)}
.ac-brand-name{font:600 12px/1.35 var(--ac-body);letter-spacing:.06em}
.ac-brand-name b{display:block;font-weight:400;opacity:.7}
.ac-nav{display:flex;flex-direction:column;gap:2px}
.ac-link{
 display:block;padding:9px 11px;border-radius:9px;text-decoration:none;
 font:500 13px/1.3 var(--ac-body);color:var(--ac-dim);transition:.18s ease;
}
.ac-link:hover{background:rgba(233,200,119,.08);color:var(--ac-text)}
.ac-link.is-here{background:rgba(233,200,119,.14);color:var(--ac-gold)}
.ac-rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.ac-account{
 display:block;text-align:center;text-decoration:none;border-radius:999px;
 border:1px solid var(--ac-gold-soft);padding:11px 14px;
 font:600 10px/1 var(--ac-body);letter-spacing:.18em;text-transform:uppercase;
 color:var(--ac-gold);transition:.2s ease;
}
.ac-account:hover{background:var(--ac-gold);color:#12100a}

/* ------------------------------------------------------------------ the room */
.ac-main{padding:44px 40px 80px;max-width:1320px}
.ac-eyebrow{
 margin:0 0 10px;font:600 10px/1 var(--ac-body);letter-spacing:.26em;
 text-transform:uppercase;color:var(--ac-gold);
}
.ac-title{
 margin:0;font:400 clamp(38px,5.4vw,62px)/1.03 var(--ac-serif);
 color:var(--ac-text);text-wrap:balance;
}
.ac-tagline{margin:8px 0 0;font:400 17px/1.5 var(--ac-serif);color:var(--ac-gold)}
.ac-blurb{margin:18px 0 0;max-width:62ch;color:var(--ac-dim)}

.ac-tools{
 display:flex;flex-wrap:wrap;gap:12px;align-items:center;
 margin:30px 0 8px;padding-bottom:22px;border-bottom:1px solid var(--ac-line);
}
.ac-search{
 flex:1 1 320px;min-width:0;border-radius:999px;
 border:1px solid var(--ac-gold-soft);background:rgba(255,255,255,.05);
 color:inherit;font:400 15px/1 var(--ac-body);padding:13px 18px;
}
.ac-search::placeholder{color:rgba(244,231,196,.42)}
.ac-count{font:600 10px/1 var(--ac-body);letter-spacing:.18em;
 text-transform:uppercase;color:var(--ac-dim);white-space:nowrap}

/* one group, one heading. The heading is doing real work here: it is what keeps
   the room honest about which half of it is actual lesson material. */
.ac-group{margin:38px 0 0}
.ac-group-head{
 display:flex;align-items:baseline;gap:12px;margin:0 0 4px;
}
.ac-group-head h2{
 margin:0;font:400 25px/1.2 var(--ac-serif);color:var(--ac-gold);
}
.ac-group-head span{
 font:600 10px/1 var(--ac-body);letter-spacing:.18em;text-transform:uppercase;
 color:var(--ac-dim);
}
.ac-group-rule{height:1px;background:var(--ac-line);margin:14px 0 20px}

.ac-grid{
 display:grid;gap:14px;
 grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
}
.ac-card{
 display:flex;flex-direction:column;gap:8px;
 padding:17px 18px;border-radius:13px;text-decoration:none;
 border:1px solid var(--ac-line);background:rgba(255,255,255,.028);
 transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.ac-card:hover{
 border-color:var(--ac-gold-soft);background:rgba(233,200,119,.07);
 transform:translateY(-2px);
}
.ac-card h3{
 margin:0;font:500 15px/1.35 var(--ac-body);color:var(--ac-text);
}
.ac-card p{margin:0;font-size:13px;line-height:1.55;color:var(--ac-dim)}
.ac-card-foot{
 margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.ac-tag{
 font:600 9px/1 var(--ac-body);letter-spacing:.14em;text-transform:uppercase;
 padding:5px 9px;border-radius:999px;
 border:1px solid var(--ac-line);color:var(--ac-dim);
}
/* Honest labelling, carried over from the generator pages. A page that hands
   you instructions instead of the finished thing says so here, before you pay,
   not after you press the button. */
.ac-tag.is-brief{
 border-color:rgba(233,160,119,.42);color:#E9A077;
}
.ac-tag.is-ready{
 border-color:rgba(150,220,170,.36);color:#96DCAA;
}

.ac-empty{
 margin:34px 0;padding:22px;border-radius:13px;
 border:1px dashed var(--ac-gold-soft);color:var(--ac-dim);
}

@media (max-width:900px){
 .ac-shell{grid-template-columns:1fr}
 .ac-rail{
  position:static;height:auto;flex-direction:row;flex-wrap:wrap;
  align-items:center;gap:12px;border-right:0;
  border-bottom:1px solid var(--ac-line);padding:16px 18px;
 }
 .ac-nav{flex-direction:row;flex-wrap:wrap;gap:4px}
 .ac-rail-foot{margin:0 0 0 auto;flex-direction:row}
 .ac-main{padding:30px 20px 70px}
}
@media (prefers-reduced-motion:reduce){
 .ac-card{transition:none}
 .ac-card:hover{transform:none}
}