.tb-public {
  --public-edge: clamp(18px, 4vw, 48px);
  --public-gap: clamp(18px, 2.5vw, 28px);
  --public-radius: 22px;
}
.tb-public .tb-public-main {
  padding: clamp(16px, 3vw, 42px) var(--public-edge) 52px !important;
}
.tb-skip {
  position: fixed;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  z-index: calc(var(--z-nav) + 1);
  padding: .5rem 1rem;
  border-radius: 8px;
  background: white;
  transform: translateY(-160%);
}
.tb-skip:focus { transform: none; }
.tb-public :is(a,button,summary):focus-visible { outline: 3px solid #9b671d; outline-offset: 4px; }
.tb-public-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding: clamp(23px, 4.4vw, 62px);
  border: 1px solid var(--line);
  border-radius: var(--public-radius);
  background: #edf5f0;
}
.tb-public .tb-public-hero h1 {
  font-size: clamp(34px, 4.3vw, 64px) !important;
  line-height: 1.32;
  letter-spacing: -.015em;
  margin: 8px 0 13px;
  text-wrap: balance;
}
.tb-public:lang(ar) .tb-public-hero h1 { letter-spacing: normal; }
.tb-public:lang(en) :is(h1,h2,h3) { font-family: Inter, sans-serif; }
.tb-public .tb-kicker {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tb-kicker::before {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  background: var(--gold);
  border-radius: 2px;
  transform: rotate(45deg);
}
.tb-public .tb-lead {
  color: #344e45;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.8;
  margin: 0 0 24px;
  max-inline-size: 42ch;
}
.tb-public-art {
  margin: 0;
  min-inline-size: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #d7e4de;
}
.tb-public-art img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1.22;
  object-fit: cover;
}
.tb-public-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tb-public .tb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  padding: 6px 16px;
  text-align: center;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
}
.tb-public .tb-button:hover { background: #205f52; }
.tb-public .tb-button-outline { color: var(--ink); background: #fff; }
.tb-public .tb-button-outline:hover { color: #fff; }
.tb-public-section { margin-block: clamp(34px, 5vw, 70px); }
.tb-section-head h2 { margin: 0 0 6px; }
.tb-section-head { margin-block-end: var(--public-gap); }
.tb-section-head p { margin: 0; color: var(--muted); }
.tb-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--public-gap);
}
.tb-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-inline-size: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--public-radius);
  padding: clamp(20px, 2.5vw, 32px);
}
.tb-icon-wrap {
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 13px;
  background: var(--mint);
  color: var(--ink);
}
.tb-card:nth-child(2n) .tb-icon-wrap { background: var(--info); }
.tb-card:nth-child(3n) .tb-icon-wrap { background: #f7eedf; }
.tb-icon { display: block; inline-size: 25px; block-size: 25px; }
.tb-card h3 { margin: 12px 0 3px; }
.tb-card p { margin: 0 0 12px; color: var(--muted); }
.tb-public .tb-text-link { margin-block-start: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 4px; }
.tb-directory { display: grid; gap: 10px; }
.tb-directory a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  text-decoration: none;
  color: var(--ink);
}
.tb-directory a:hover { background: var(--mint); }
.tb-directory strong, .tb-directory strong + span { display: block; }
.tb-directory strong + span { font-size: 16px; color: var(--muted); }
.tb-arrow { font-size: 24px; }
[dir=rtl] .tb-arrow { transform: scaleX(-1); }
.tb-steps { display: grid; gap: 10px; padding: 0; list-style: none; }
.tb-steps li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px clamp(16px, 3vw, 28px);
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.tb-steps li > span { color: #6b511f; font-size: 16px; font-weight: 700; line-height: 2.3; }
.tb-steps h3, .tb-steps p, .tb-public-note p { margin: 0; }
.tb-public-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(16px, 3vw, 28px);
  background: #f4eee2;
  border: 1px solid #eadfcd;
  border-radius: var(--public-radius);
}
.tb-public-note h2 { margin: 0 0 5px; font-size: clamp(22px, 2vw, 29px); }
.tb-public-note .tb-icon-wrap { background: #fffaf0; }
.tb-public-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 32px max(var(--public-edge), calc((100% - 1344px) / 2));
  background: var(--ink);
  color: white;
}
.tb-public-footer strong { font: 700 26px Cairo, sans-serif; }
.tb-public-footer p { margin: 0; font-size: 16px; }
.tb-footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0 18px; }
.tb-public-footer a { color: white; display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; font-size: 16px; }
@media (max-width: 760px) {
  .tb-public { font-size: 17px !important; }
  .tb-public-hero { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .tb-public-art img { aspect-ratio: 16 / 9; }
  .tb-section-head h2 { font-size: clamp(26px, 5vw, 31px); }
}
@media (max-width: 550px) {
  .tb-card-grid { grid-template-columns: minmax(0, 1fr); }
  .tb-public-note .tb-icon-wrap { inline-size: 37px; block-size: 37px; }
  .tb-directory a { gap: 10px; }
}
@media print {
  .tb-skip, .tb-public-footer, .tb-public-actions { display: none; }
  .tb-public-hero { display: block; }
  .tb-public-art { display: none; }
  .tb-card, .tb-public-note, .tb-steps li { break-inside: avoid; }
}

.tb-lesson-samples {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--public-gap)}
.tb-lesson-samples article {overflow:hidden;border:1px solid var(--line);border-radius:var(--public-radius);background:white;display:grid;grid-template-columns:minmax(100px,.9fr) minmax(0,1.1fr)}
.tb-lesson-samples article>img {width:100%;height:100%;min-height:150px;object-fit:cover;display:block}
.tb-lesson-samples article>div {padding:clamp(12px,2vw,26px)}
.tb-lesson-samples h3,.tb-lesson-samples p {margin:0}
.tb-sample-meta {font-size:14px;font-weight:700;color:#5f461e}
@media (max-width:660px) {
  .tb-lesson-samples {grid-template-columns:minmax(0,1fr)}
}
@media print {.tb-public .tb-home-hero,.tb-public .tb-home-hero :is(h1,.tb-kicker,.tb-lead) {color:#103f38;background:#fff}}

/* Public landing pages share the same image, typography and action hierarchy. */
@media screen {
  .tb-public { --public-radius: 24px; }
  .tb-public .tb-public-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    background: #123e37;
    color: white;
    padding: clamp(24px, 4vw, 56px);
    border: 0;
  }
  .tb-public .tb-hero-learning { background: #174b43; }
  .tb-public .tb-hero-library { background: #214858; }
  .tb-public .tb-hero-research { background: #293d34; }
  .tb-public .tb-public-hero :is(h1,.tb-kicker) { color: white; }
  .tb-public .tb-public-hero .tb-lead { color: #edf5f1; }
  .tb-public .tb-home-hero h1 { font-size: clamp(36px,4.1vw,62px) !important; }
  .tb-public .tb-public-art { border: 1px solid #ffffff42; }
  .tb-public .tb-public-art img { height: auto; aspect-ratio: 1.44; }
  .tb-public .tb-public-hero .tb-button { background: #f3dbac; border-color: #f3dbac; color: #17372e; }
  .tb-public .tb-public-hero .tb-button:hover { background: #fff0d4; }
  .tb-public .tb-public-hero .tb-button-outline { background: transparent; color: white; border-color: #afc6bb; }
  .tb-public .tb-public-hero .tb-button-outline:hover { background: #ffffff18; }
  .tb-public .tb-public-hero :focus-visible { outline-color: #f6ddaa !important; }
  .tb-hero-meta { display:flex; flex-wrap:wrap; gap:8px 14px; color:#e3ece6; margin:22px 0 0; font-size:15px; }
  .tb-hero-meta > * { padding-inline-start: 12px; border-inline-start: 2px solid #d6b575; }

  .tb-public-section .tb-section-head { border-block-end:1px solid var(--line); padding-block-end:12px; }
  .tb-card,.tb-directory a,.tb-lesson-samples article,.tb-story-card { box-shadow:0 5px 18px #103f3809; }
  .tb-public .tb-card h3 { margin-block:10px 3px; }
  .tb-public .tb-text-link { color:#14574d; gap:10px; }
  .tb-public .tb-text-link:hover { color:#0a3c32; }

  .tb-role-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tb-role-grid .tb-card { --role-tint:#e7f1eb; padding:16px 19px 18px; }
  .tb-role-grid .tb-card:nth-child(2) { --role-tint:#e7f0f9; }
  .tb-role-grid .tb-card:nth-child(3) { --role-tint:#f8edde; }
  .tb-role-grid .tb-card:nth-child(4) { --role-tint:#efece2; }
  .tb-character-art {
    display:grid;
    place-items:end center;
    background:radial-gradient(circle at 50% 64%,#fff8 0 34%,transparent 35%),var(--role-tint);
    width:100%;
    border-radius:15px;
    min-width:0;
  }
  .tb-role-grid .tb-character-art img { display:block; width:auto; height:156px; max-width:100%; object-fit:contain; }

  .tb-race-feature { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:22px; background:#edf0fa; border:1px solid #d7e0f1; padding:clamp(22px,4vw,44px); border-radius:var(--public-radius); }
  .tb-race-feature h2 { color:#262851; margin:4px 0; }
  .tb-race-feature p:not(.tb-kicker) { color:#394366; margin:6px 0 18px; max-width:47ch; }
  .tb-public .tb-race-feature .tb-button { background:#34386f; border-color:#34386f; }
  .tb-public .tb-race-feature .tb-button:hover { background:#4a4c91; }
  .tb-race-art { display:flex; align-items:center; justify-content:center; gap:clamp(8px,2vw,22px); }
  .tb-race-art img { width:min(42%,172px); border-radius:22%; border:3px solid #fff; box-shadow:0 7px 18px #30375d26; }
  .tb-race-art img:first-child { transform:rotate(-6deg); }
  .tb-race-art img:last-child { transform:rotate(5deg) translateY(-6px); }

  .tb-story-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--public-gap); }
  .tb-story-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--public-radius); }
  .tb-story-card a { display:block; color:var(--ink); text-decoration:none; }
  .tb-story-card a:focus-visible { outline-offset:-4px; }
  .tb-story-card a:hover h3 { text-decoration:underline; text-underline-offset:4px; }
  .tb-story-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
  .tb-story-card h3 { margin:3px clamp(16px,3vw,26px) 20px; }
  .tb-story-label { display:inline-block; margin:14px clamp(16px,3vw,26px) 0; color:#584321; font-weight:700; font-size:15px; }
  .tb-home .tb-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (max-width:1060px) { .tb-role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:760px) {
    .tb-public .tb-public-hero { grid-template-columns:minmax(0,1fr); }
    .tb-public .tb-public-art img { aspect-ratio:16/9; }
    .tb-home .tb-directory { grid-template-columns:minmax(0,1fr); }
  }
  @media (max-width:550px) {
    .tb-role-grid,.tb-story-grid,.tb-race-feature { grid-template-columns:minmax(0,1fr); }
    .tb-role-grid .tb-card { display:grid; grid-template-columns:minmax(0,1fr) 74px; column-gap:12px; align-items:center; padding:14px 16px; }
    .tb-role-grid .tb-character-art { grid-area:1/2/4/3; }
    .tb-role-grid .tb-character-art img { height:101px; }
    .tb-role-grid .tb-card :is(h3,p,.tb-text-link) { grid-column:1; margin-block:0; }
    .tb-race-art img { width:min(32%,110px); }
  }
}

@media screen {
  .tb-hero-meta > :first-child { padding-inline-start:0; border-inline-start:0; }
}

/* The two doors are equally prominent, and each is an entry point. */
@media screen {
  .tb-public .tb-home-hero {grid-template-columns:minmax(0,1fr);text-align:center;gap:clamp(16px,2vw,26px);padding:clamp(14px,2.5vw,38px)}
  .tb-public .tb-home-hero .tb-lead {max-inline-size:68ch;margin:0 auto;line-height:1.65}
  .tb-home-portals {position:relative;overflow:hidden;border-radius:clamp(10px,1.5vw,20px);background:#826949;isolation:isolate}
  .tb-home-portals > img {display:block;width:100%;height:auto;aspect-ratio:2.2;object-fit:cover;object-position:center 19%}
  .tb-portal-links {position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));direction:ltr}
  .tb-portal-links a {display:flex;align-items:end;justify-content:center;padding:clamp(8px,2vw,25px);text-decoration:none;color:#fff;background:linear-gradient(transparent 58%,#071d18bc 100%)}
  .tb-portal-study {grid-column:2;grid-row:1}
  .tb-portal-research {grid-column:1;grid-row:1}
  .tb-portal-links a:hover {background:linear-gradient(transparent 32%,#071d18cf 100%)}
  .tb-home-portals .tb-portal-links a:focus-visible {outline-offset:-5px}
  .tb-portal-links a span {display:grid;justify-items:center;gap:.2rem;background:#103f38f5;border:1px solid #d9bc82;border-radius:.8rem;padding:clamp(6px,1vw,13px);width:min(100%,22rem);line-height:1.32}
  .tb-portal-links strong {font-size:clamp(16px,2.2vw,31px)}
  .tb-portal-links small {font-size:clamp(12px,1.2vw,17px);color:#f7e9cc}
  .tb-role-grid .tb-character-art:has(.tb-research-emblem) {background:#173c34}
  .tb-role-grid .tb-character-art .tb-research-emblem {width:100%;height:100%;object-fit:contain;object-position:center}
  @media(max-width:550px) {
    .tb-home-portals > img {aspect-ratio:1.4}
    .tb-portal-links a span {min-height:58px;align-content:center;padding:5px 4px}
    .tb-portal-links small {font-size:11px}
    .tb-public .tb-home-hero h1 {font-size:clamp(27px,8vw,39px)!important}
  }
}
@media print { .tb-home-portals {display:none} }