/* ============================================================
   THE INSPIRATION SPACE — scoped brand stylesheet
   For theme-template use. Nothing here restyles global elements,
   so post, tag and author templates are unaffected.

   Place at:  assets/css/tis-brand.css
   Fonts at:  assets/fonts/
   Images at: assets/img/
   ============================================================ */

/* ---------- licensed fonts ---------- */
/* Twentieth Century is client-licensed and NOT cleared for public CDN hosting.
   Serving from the theme's own assets directory is fine. Only Medium and Bold
   exist — there is no Light cut, so 300 deliberately maps to Medium. */
@font-face {
  font-family: "Twentieth Century";
  src: url("../fonts/TwentiethCentury-Medium.ttf") format("truetype");
  font-weight: 300 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Twentieth Century";
  src: url("../fonts/TwentiethCentury-Bold.ttf") format("truetype");
  font-weight: 600 800; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
.tis {
  --tis-orange: #eb7e47;
  --tis-orange-press: #cf6a34;
  --tis-black: #363636;
  --tis-ground-black: #2b2a29;
  --tis-lilac: #c9b9dc;
  --tis-teal: #57818e;
  --tis-cream: #f8f4f0;
  --tis-stone: #eeecea;
  --tis-paper: #ffffff;
  --tis-divider: #d8d0c8;
  --tis-body: #565250;
  --tis-muted: #6b6560;   /* AA-compliant on white, cream and stone */
  --tis-on-black: #f5efe9;
  --tis-display: "Sentient", Georgia, serif;
  --tis-text: "Twentieth Century", system-ui, sans-serif;
  --tis-rule: rgba(54,54,54,0.08);
  --tis-bg-hero: url("../images/brand/hero-cream.png");
  --tis-bg-dark: url("../images/brand/closing-band-dark.png");
}

/* ---------- surfaces ---------- */
.tis-hero, .tis-band {
  position: relative; overflow: hidden; box-sizing: border-box;
  background-size: cover; background-position: center;
}
.tis-hero {
  min-height: 620px; background-color: var(--tis-cream); background-image: var(--tis-bg-hero);
  padding: 88px 56px 104px; display: flex; flex-direction: column; gap: 26px;
  justify-content: center; align-items: flex-start;
}
.tis-band {
  min-height: 380px; background-color: var(--tis-ground-black); background-image: var(--tis-bg-dark);
  padding: 56px; display: flex; flex-direction: column; gap: 24px;
  justify-content: flex-end; align-items: flex-start;
}
.tis-paper {
  background-color: var(--tis-paper); padding: 64px 56px;
  background-image: repeating-linear-gradient(to bottom,
    var(--tis-rule) 0px, var(--tis-rule) 1px, transparent 1px, transparent 28px);
}

/* ---------- type (scoped — no bare h1/h2/body selectors) ---------- */
.tis-eyebrow {
  font-family: var(--tis-text); font-weight: 700; font-size: 12.5px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--tis-orange); margin: 0;
}
.tis-h1 { font-family: var(--tis-display); font-weight: 300; font-size: 58px; line-height: 1.08;
          color: var(--tis-black); margin: 0; max-width: 15em; text-wrap: pretty; }
.tis-h2 { font-family: var(--tis-display); font-weight: 300; font-size: 36px; line-height: 1.12;
          color: var(--tis-black); margin: 0; max-width: 20em; text-wrap: pretty; }
.tis-lead { font-family: var(--tis-text); font-weight: 400; font-size: 19px; line-height: 1.55;
            color: var(--tis-body); margin: 0; max-width: 32em; text-wrap: pretty; }
.tis-band .tis-h1, .tis-band .tis-h2, .tis-band .tis-lead { color: var(--tis-on-black); }
/* headline emphasis is charcoal italic, never a colour tint */
.tis-h1 em, .tis-h2 em { font-style: italic; color: inherit; }

/* ---------- buttons ---------- */
.tis-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 30px; border-radius: 10px;
  background: var(--tis-orange); color: var(--tis-black); text-decoration: none;
  font-family: var(--tis-text); font-weight: 500; font-size: 14px; letter-spacing: 2px;
  text-transform: uppercase; transition: background 180ms cubic-bezier(0.4,0,0.2,1);
}
.tis-btn:hover { background: var(--tis-orange-press); color: var(--tis-black); }
.tis-btn:focus-visible { outline: 1.5px solid var(--tis-black); outline-offset: 2px; }
.tis-btn--ghost {
  background: transparent; border: 1.5px solid var(--tis-black);
  color: var(--tis-black); padding: 15.5px 28.5px;
}
.tis-btn--ghost:hover {
  background: transparent; color: var(--tis-orange-press); border-color: var(--tis-orange-press);
}
.tis-band .tis-btn--ghost { border-color: var(--tis-on-black); color: var(--tis-on-black); }
.tis-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---------- category cards ---------- */
.tis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tis-card {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  background: var(--tis-paper); border: 1px solid var(--tis-divider); padding: 26px;
  box-shadow: 0 2px 16px rgba(54,54,54,0.08); text-decoration: none;
  justify-content: flex-start;
}
.tis-card:hover { box-shadow: 0 6px 28px rgba(54,54,54,0.12); }
.tis-card img { width: 30px; height: 30px; }
.tis-card-title { font-family: var(--tis-display); font-weight: 300; font-size: 22px; color: var(--tis-black); }
.tis-card-meta { font-family: var(--tis-text); font-weight: 400; font-size: 13.5px;
                 color: var(--tis-muted); margin-top: auto; padding-top: 6px; }

/* ---------- photography ---------- */
.tis-leaf { border-radius: 0 42% 0 42%; overflow: hidden; background: var(--tis-stone); }
.tis-leaf img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- editorial split ---------- */
.tis-split { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--tis-paper);
             align-items: stretch; }
.tis-split > div:first-child { padding: 64px 56px; display: flex; flex-direction: column;
                               gap: 20px; justify-content: center; }
.tis-split > .tis-leaf { margin: 56px 56px 56px 0; }

@media (max-width: 800px) {
  .tis-hero { min-height: 480px; padding: 64px 24px 72px; }
  .tis-band { padding: 32px 24px; }
  .tis-paper { padding: 40px 24px; }
  .tis-h1 { font-size: 38px; }
  .tis-h2 { font-size: 28px; }
  .tis-grid { grid-template-columns: 1fr; }
  .tis-split { grid-template-columns: 1fr; }
  .tis-split > .tis-leaf { margin: 0 24px 40px; }
}