/* The Old Schoolhouse — Brand Package
   Warm Stout & Amber. Dark brand-book shell + social artboards.
   Tokens mirror osh-site/src/styles/global.css (the live identity). */

:root{
  --stout:#221712;   /* page / artboard background */
  --bark:#2E2018;    /* cards / surfaces / photo wells */
  --ember:#3D2C22;   /* borders / dividers */
  --amber:#D9913E;   /* accent / CTAs — never large fills */
  --amber-soft:#E5AD6A;
  --cream:#F3E9DA;   /* headings / primary text */
  --latte:#BFA890;   /* muted text */
  --book-bg:#16100c; /* book backdrop, a shade under stout */

  --display:"Oswald","Arial Narrow",sans-serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --logo:"Montserrat",sans-serif;
  --black-letter:"UnifrakturCook","Times New Roman",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--book-bg); color:var(--cream);
  font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--amber-soft)}
img{display:block; max-width:100%}

/* ---------- masthead ---------- */
.mast{
  position:sticky; top:0; z-index:50; background:rgba(18,12,9,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--ember);
  display:flex; align-items:center; gap:16px; padding:12px 28px;
}
.mast .crest{width:34px;height:34px;color:var(--amber);flex:0 0 auto}
.mast h1{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;margin:0;color:var(--cream)}
.mast nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.mast nav a{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--latte);text-decoration:none}
.mast nav a:hover{color:var(--amber)}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
section{padding:64px 0;border-bottom:1px solid var(--ember)}
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--amber);margin:0 0 10px}
.sec-title{font-family:var(--display);font-weight:600;font-size:32px;letter-spacing:.04em;
  text-transform:uppercase;margin:0 0 8px;color:var(--cream)}
.sec-intro{color:var(--latte);max-width:62ch;margin:0 0 34px}
.note{color:var(--latte);font-size:13px}

/* ---------- cover ---------- */
.cover{background:var(--stout);text-align:center;padding:90px 28px;border-bottom:1px solid var(--ember)}
.cover .badge{width:min(440px,80vw);margin:0 auto 26px;color:var(--cream)}
.cover .est{font-family:var(--black-letter);font-size:30px;color:var(--amber-soft);margin:6px 0 18px}
.cover .line{font-family:var(--display);letter-spacing:.4em;text-transform:uppercase;color:var(--latte);font-size:14px}
.cover .sub{margin-top:26px;font-family:var(--display);letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream);font-size:13px;border-top:1px solid var(--ember);display:inline-block;padding-top:14px}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:20px}
.card{background:var(--bark);border:1px solid var(--ember);border-radius:14px;padding:22px}
.card .cap{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--latte);margin:0 0 12px}

/* logo lockups */
.logo-grid{grid-template-columns:1fr 1fr}
.lockup{display:flex;align-items:center;justify-content:center;min-height:150px;border-radius:10px}
.bg-stout{background:var(--stout)} .bg-black{background:#000} .bg-cream{background:var(--cream)} .bg-amber{background:var(--amber)}
.swatches{grid-template-columns:repeat(4,1fr)}
.swatch{border-radius:12px;overflow:hidden;border:1px solid var(--ember)}
.swatch .chip{height:88px}
.swatch .meta{padding:10px 12px;background:var(--bark)}
.swatch .nm{font-family:var(--display);letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.swatch .hx{font-size:12px;color:var(--latte)}
.swatch .use{font-size:11px;color:var(--latte);margin-top:3px}

/* type specimens */
.specimen{border-top:1px solid var(--ember);padding-top:18px;margin-top:18px}
.specimen:first-child{border-top:0;padding-top:0;margin-top:0}
.sp-osw{font-family:var(--display);font-weight:700;font-size:46px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.sp-inter{font-family:var(--sans);font-size:17px}
.sp-mono{font-family:var(--logo);font-weight:600;letter-spacing:.18em;font-size:22px;text-transform:uppercase}
.sp-bl{font-family:var(--black-letter);font-size:40px;color:var(--amber-soft)}

/* voice do/don't */
.dd{grid-template-columns:1fr 1fr}
.dd .do{border-left:3px solid var(--amber)} .dd .dont{border-left:3px solid #7a3b34}
.dd ul{margin:8px 0 0;padding-left:18px} .dd li{margin:6px 0;color:var(--latte)}
.dd h4{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;font-size:14px;margin:0;color:var(--cream)}

/* photography strip */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.strip img{aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:1px solid var(--ember)}

/* ---------- social artboards ---------- */
.boards{display:flex;flex-wrap:wrap;gap:28px}
.board-item{display:flex;flex-direction:column;gap:10px}
.board-cap{font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--latte)}
.dl{align-self:flex-start;font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--amber);border:1px solid var(--amber);border-radius:6px;padding:6px 12px;cursor:pointer}
.dl:hover{background:var(--amber);color:var(--stout)}
.stage{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--ember);background:var(--stout)}
.stage.feed{width:324px;height:405px}
.stage.story{width:270px;height:480px}

/* the artboard itself, native px, scaled by the stage */
.ab{position:absolute;top:0;left:0;transform-origin:top left;background:var(--stout);color:var(--cream);overflow:hidden}
.ab.feed{width:1080px;height:1350px;transform:scale(.3)}
.ab.story{width:1080px;height:1920px;transform:scale(.25)}
.ab *{box-sizing:border-box}

/* shared artboard pieces (native px sizes) */
.ab .pad{position:absolute;inset:0;display:flex;flex-direction:column;padding:64px}
.ab .top{display:flex;align-items:center;justify-content:space-between}
.ab .wm{font-family:var(--display);font-weight:600;letter-spacing:.16em;color:var(--cream);text-transform:uppercase}
.ab.feed .wm{font-size:34px}
.ab.story .wm{font-size:30px}
.ab .daytag{font-family:var(--display);font-weight:700;letter-spacing:.12em;background:var(--amber);color:var(--stout);
  text-transform:uppercase;border-radius:8px}
.ab.feed .daytag{font-size:30px;padding:8px 20px}
.ab .photo{flex:1;margin:40px 0;border-radius:18px;background-size:cover;background-position:center;
  border:2px solid var(--ember)}
.ab .headline{font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--cream);line-height:.92;letter-spacing:.01em}
.ab.feed .headline{font-size:104px}
.ab.story .headline{font-size:96px}
.ab .sub{font-family:var(--sans);color:var(--latte);margin-top:18px}
.ab.feed .sub{font-size:34px}
.ab.story .sub{font-size:34px}
.ab .foot{display:flex;align-items:flex-end;justify-content:space-between;border-top:2px solid var(--ember);padding-top:28px;margin-top:28px}
.ab .price{font-family:var(--display);font-weight:700;color:var(--amber);font-size:64px;line-height:1}
.ab .meta{font-family:var(--sans);color:var(--latte);font-size:26px;text-align:right;line-height:1.35}

/* story event pieces */
.ab.story .crest{width:150px;height:150px;color:var(--amber);margin:8px auto 0}
.ab.story .kicker{font-family:var(--display);letter-spacing:.34em;text-transform:uppercase;color:var(--latte);font-size:34px;text-align:center;margin-top:30px}
.ab.story .headline.ctr{text-align:center;margin-top:18px}
.ab.story .cta{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--amber);color:var(--stout);text-align:center;font-size:42px;border-radius:12px;padding:26px}
.ab .crestmark{position:absolute;right:54px;bottom:48px;width:120px;height:120px;color:var(--amber);opacity:.92}

/* stacked primary badge (HTML wordmark + SVG crest) */
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:var(--cream);font-family:var(--logo);container-type:inline-size}
.badge .wm-top{font-weight:600;letter-spacing:.16em;font-size:6cqw;text-transform:uppercase;line-height:1.05;white-space:nowrap}
.badge .crest{width:58%;max-width:240px;color:inherit;margin:4px 0}
.badge .wm-bot{font-weight:600;letter-spacing:.3em;font-size:4.1cqw;text-transform:uppercase;line-height:1;white-space:nowrap}

/* horizontal lockup */
.lockup-h{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--cream);font-family:var(--logo);max-width:100%}
.lockup-h .crest{width:92px;height:92px;flex:0 0 auto;color:inherit}
.lockup-h .t{font-weight:600;letter-spacing:.13em;text-transform:uppercase;font-size:15px;line-height:1.2;white-space:nowrap;flex:0 0 auto}
.lockup-h .t.r{text-align:left} .lockup-h .t.l{text-align:right}

/* SH monogram */
.monogram{display:flex;align-items:center;justify-content:center}
.monogram .ring{width:120px;height:120px;border:3px solid var(--amber);border-radius:50%;display:flex;align-items:center;justify-content:center}
.monogram .sh{font-family:var(--display);font-weight:700;color:var(--amber);font-size:58px;letter-spacing:.02em;line-height:1}

/* clear-space + misuse */
.clearspace{position:relative;background:var(--stout);border-radius:10px;padding:40px;display:flex;justify-content:center}
.clearspace .crest{width:150px;height:150px;color:var(--cream);outline:1px dashed var(--ember);outline-offset:38px}
.misuse{grid-template-columns:repeat(3,1fr)}
.misuse .m{background:var(--stout);border:1px solid var(--ember);border-radius:10px;padding:18px;text-align:center}
.misuse .m .x{color:#c8584c;font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-top:10px}
.misuse .m .crest{width:84px;height:84px;color:var(--cream);margin:0 auto}

@media (max-width:720px){
  .logo-grid,.dd{grid-template-columns:1fr}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(3,1fr)}
  #logo .grid[style]{grid-template-columns:1fr !important}
}