/* ==========================================================
   BISP Marketing Hub — collateral template styles
   Every size is a multiple of --u (1% of the page's short side)
   so one layout scales cleanly from 1080px posters to A4 at 300dpi.
   ========================================================== */

.pg {
  position: relative; overflow: hidden; box-sizing: border-box;
  background: var(--bg); color: var(--fg);
  font-family: var(--bf), sans-serif; line-height: 1.25;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
  --bl: 0px;
}
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg h1, .pg h2, .pg h3, .pg h4, .pg p, .pg ul, .pg ol { margin: 0; padding: 0; }
.pg ul, .pg ol { list-style: none; }
.pg img { display: block; }
.pg .hf { font-family: var(--hf), sans-serif; }
.pg .af { font-family: var(--af), serif; }

/* ---------- shared pieces ---------- */
.pg .logo { display: flex; align-items: center; gap: calc(var(--u)*1.6); }
.pg .logo img { height: calc(var(--u)*var(--logo-h, 8)); width: auto; max-width: calc(var(--u)*40); object-fit: contain; }
.pg .logo.chip { background: #fff; padding: calc(var(--u)*1) calc(var(--u)*1.6); border-radius: calc(var(--u)*.7); }
.pg .wordmark { font-family: var(--hf), sans-serif; font-weight: 700; line-height: .95; font-size: calc(var(--u)*3.6); letter-spacing: .01em; }
.pg .wordmark small { display: block; font-family: var(--bf), sans-serif; font-weight: 500; font-size: .48em; letter-spacing: .02em; opacity: .8; margin-top: .25em; }

.pg .tag {
  position: relative; display: inline-flex; align-items: center; gap: calc(var(--u)*1.2);
  font-family: var(--hf), sans-serif; font-weight: 700; line-height: 1;
  font-size: calc(var(--u)*3); padding: calc(var(--u)*1) calc(var(--u)*1.8) calc(var(--u)*1) calc(var(--u)*1.2);
  border: calc(var(--u)*.35) solid var(--mk); color: var(--fg); border-radius: calc(var(--u)*.6);
  white-space: nowrap;
}
.pg .tag::before {
  content: ''; width: calc(var(--u)*1.3); height: calc(var(--u)*1.3); border-radius: 50%;
  border: calc(var(--u)*.3) solid var(--mk); flex: none;
}
.pg .tag.solid { background: var(--hl); color: var(--on-hl); }
.pg .tag.solid::before { border-color: var(--on-hl); }

.pg .ruler-y, .pg .ruler-x { position: absolute; pointer-events: none; }
.pg .ruler-y {
  width: calc(var(--u)*3.2);
  background-image:
    repeating-linear-gradient(to bottom, var(--mk) 0 calc(var(--u)*.32), transparent calc(var(--u)*.32) calc(var(--u)*10)),
    repeating-linear-gradient(to bottom, var(--mk) 0 calc(var(--u)*.22), transparent calc(var(--u)*.22) calc(var(--u)*2));
  background-size: 100% 100%, 45% 100%; background-repeat: no-repeat;
}
.pg .ruler-y.r { background-position: right top, right top; }
.pg .ruler-x {
  height: calc(var(--u)*3.2);
  background-image:
    repeating-linear-gradient(to right, var(--mk) 0 calc(var(--u)*.32), transparent calc(var(--u)*.32) calc(var(--u)*10)),
    repeating-linear-gradient(to right, var(--mk) 0 calc(var(--u)*.22), transparent calc(var(--u)*.22) calc(var(--u)*2));
  background-size: 100% 100%, 100% 45%; background-repeat: no-repeat;
}
.pg .ruler-x.b { background-position: left bottom, left bottom; }

.pg .photo { position: relative; background: var(--pan) center/cover no-repeat; overflow: hidden; }
.pg .photo.ph {
  background-color: var(--pan);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid2) 1px, transparent 1px);
  background-size: calc(var(--u)*10) calc(var(--u)*10), calc(var(--u)*10) calc(var(--u)*10), calc(var(--u)*2) calc(var(--u)*2), calc(var(--u)*2) calc(var(--u)*2);
}
.pg .photo.ph::after {
  /* fillet weld symbol: a quiet nod to the trade when no photo is set */
  content: ''; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: linear-gradient(to top right, transparent 49.5%, var(--grid) 50%, var(--grid) 51.5%, transparent 52%);
  border-left: 2px solid var(--grid); border-bottom: 2px solid var(--grid);
}
.pg .photo.round { border-radius: 50%; }

.pg .contact { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u)*1) calc(var(--u)*3.4); font-weight: 600; font-size: calc(var(--u)*2.6); }
.pg .contact span { display: inline-flex; align-items: center; gap: calc(var(--u)*1); white-space: nowrap; }
.pg .ic { width: 1.05em; height: 1.05em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg .ic.hl { stroke: var(--mk); }

.pg .acc { display: flex; align-items: center; gap: calc(var(--u)*2.2); background: #fff; border-radius: calc(var(--u)*1); padding: calc(var(--u)*1.2) calc(var(--u)*2); }
.pg .acc img { height: calc(var(--u)*var(--acc-h, 5)); width: auto; max-width: calc(var(--u)*18); object-fit: contain; }

.pg .checks li { position: relative; padding-left: 1.5em; margin-bottom: .5em; }
.pg .checks li::before {
  content: ''; position: absolute; left: .1em; top: .28em; width: .8em; height: .42em;
  border-left: .17em solid var(--mk); border-bottom: .17em solid var(--mk); transform: rotate(-45deg);
}
.pg .dash li { position: relative; padding-left: 1.3em; margin-bottom: .4em; }
.pg .dash li::before { content: ''; position: absolute; left: 0; top: .62em; width: .75em; height: .14em; background: var(--mk); }
.pg .numbered { counter-reset: n; }
.pg .numbered li { counter-increment: n; position: relative; padding-left: 2.2em; margin-bottom: .55em; }
.pg .numbered li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--hf), sans-serif; font-weight: 700; color: var(--hl);
}

.pg .cta { font-size: calc(var(--u)*3); white-space: nowrap; display: inline-flex; align-items: center; gap: .6em; background: var(--hl); color: var(--on-hl); font-family: var(--hf), sans-serif; font-weight: 700; padding: .5em 1em; border-radius: .25em; }
.pg > .tpl { position: absolute; inset: 0; }
.pg .muted { color: var(--mut); }

/* ========== SOCIAL: Admissions open ========== */
.t-admissions { display: grid; padding: calc(var(--u)*6) calc(var(--u)*6) 0 calc(var(--u)*9); grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas: "top top" "head head" "list photo" "batch photo" "foot foot"; column-gap: calc(var(--u)*4); }
.t-admissions .ruler-y { left: calc(var(--u)*2.6); top: 0; bottom: 0; }
.t-admissions .top { grid-area: top; display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u)*5); }
.t-admissions .head { grid-area: head; margin-bottom: calc(var(--u)*4); }
.t-admissions h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*15); line-height: .86; letter-spacing: -.01em; }
.t-admissions h2 { font-family: var(--hf), sans-serif; font-weight: 600; font-size: calc(var(--u)*5.4); line-height: 1; margin-top: calc(var(--u)*2.4); color: var(--hl); }
.t-admissions .list { grid-area: list; font-size: calc(var(--u)*3.1); font-weight: 500; }
.t-admissions .batch { grid-area: batch; align-self: end; margin-bottom: calc(var(--u)*4); }
.t-admissions .batch .k { font-size: calc(var(--u)*2.4); color: var(--mut); font-weight: 500; }
.t-admissions .batch .v { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*6); line-height: 1; }
.t-admissions .photo { grid-area: photo; border-radius: calc(var(--u)*1.2) calc(var(--u)*1.2) 0 0; margin-bottom: 0; }
.t-admissions .foot { grid-area: foot; margin: 0 calc(var(--u)*-6) 0 calc(var(--u)*-9); padding: calc(var(--u)*3) calc(var(--u)*6) calc(var(--u)*3) calc(var(--u)*9); background: var(--pan); color: var(--pfg); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); }
.t-admissions .foot .cta-line { font-weight: 600; font-size: calc(var(--u)*2.5); margin-bottom: calc(var(--u)*1); color: var(--pmut); }
.is-tall .t-admissions { grid-template-columns: 1fr; grid-template-rows: auto calc(var(--u)*62) auto auto 1fr auto; grid-template-areas: "top" "photo" "head" "list" "batch" "foot"; }
.is-tall .t-admissions .photo { border-radius: calc(var(--u)*1.2); margin-bottom: calc(var(--u)*6); }
.is-tall .t-admissions h1 { font-size: calc(var(--u)*17); }
.is-tall .t-admissions .list { font-size: calc(var(--u)*3.8); }
.is-port .t-admissions h1 { font-size: calc(var(--u)*16); }
.is-wide .t-admissions { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "top photo" "head photo" "list photo" "batch photo" "foot foot"; padding-top: calc(var(--u)*5); }
.is-wide .t-admissions .photo { margin-right: calc(var(--u)*-6); margin-top: calc(var(--u)*-5); border-radius: 0; }
.is-wide .t-admissions h1 { font-size: calc(var(--u)*13); }
.is-wide .t-admissions .top { margin-bottom: calc(var(--u)*3); }
.is-wide .t-admissions .foot .contact { font-size: calc(var(--u)*2.8); }

/* ========== SOCIAL: New batch ========== */
.t-batch { padding: calc(var(--u)*6); display: flex; flex-direction: column; }
.t-batch .top { display: flex; justify-content: space-between; align-items: center; }
.t-batch .mid { flex: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(var(--u)*5); margin: calc(var(--u)*4) 0; }
.t-batch .datebox { position: relative; padding: calc(var(--u)*2) calc(var(--u)*4) calc(var(--u)*3); border: calc(var(--u)*.5) solid var(--hl); border-radius: calc(var(--u)*1); text-align: center; min-width: calc(var(--u)*34); }
.t-batch .datebox .mo { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*5.5); color: var(--hl); }
.t-batch .datebox .dd { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*24); line-height: .85; letter-spacing: -.02em; }
.t-batch .datebox .yr { font-size: calc(var(--u)*3); font-weight: 600; margin-top: calc(var(--u)*1); color: var(--mut); }
.t-batch .datebox .to { font-size: calc(var(--u)*2.6); font-weight: 600; margin-top: calc(var(--u)*1.5); padding-top: calc(var(--u)*1.5); border-top: 1px solid var(--line); }
.t-batch .what .lead { font-family: var(--hf), sans-serif; font-weight: 600; font-size: calc(var(--u)*4.2); color: var(--hl); }
.t-batch .what h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*9); line-height: .92; margin: calc(var(--u)*1.5) 0 calc(var(--u)*3); }
.t-batch .facts { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u)*1.2) calc(var(--u)*3); font-size: calc(var(--u)*3); }
.t-batch .facts dt { color: var(--mut); font-weight: 500; }
.t-batch .facts dd { margin: 0; font-weight: 700; }
.t-batch .note { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*3.6); margin-bottom: calc(var(--u)*2.5); }
.t-batch .bottom { border-top: calc(var(--u)*.35) solid var(--hl); padding-top: calc(var(--u)*3); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); }
.t-batch .ruler-x { left: 0; right: 0; top: 0; }
.is-tall .t-batch .mid, .is-port .t-batch .mid { grid-template-columns: 1fr; row-gap: calc(var(--u)*6); align-content: center; }
.is-tall .t-batch .datebox, .is-port .t-batch .datebox { justify-self: start; }
.is-tall .t-batch .what h1 { font-size: calc(var(--u)*12); }
.is-tall .t-batch .facts { font-size: calc(var(--u)*3.8); }
.is-tall .t-batch .datebox .dd { font-size: calc(var(--u)*42); }
.is-tall .t-batch .datebox { min-width: calc(var(--u)*52); padding: calc(var(--u)*3) calc(var(--u)*5) calc(var(--u)*4); }
.is-tall .t-batch .datebox .mo { font-size: calc(var(--u)*8); }
.is-tall .t-batch .datebox .yr { font-size: calc(var(--u)*4); }
.is-tall .t-batch .what .lead { font-size: calc(var(--u)*5.4); }
.is-tall .t-batch .note { font-size: calc(var(--u)*4.6); }
.is-wide .t-batch .datebox .dd { font-size: calc(var(--u)*22); }
.is-wide .t-batch .what h1 { font-size: calc(var(--u)*8); }

/* ========== SOCIAL: Course spotlight ========== */
.t-spotlight { padding: 0; }
.t-spotlight > .photo { position: absolute; inset: 0; }
.t-spotlight .shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--dk) 8%, color-mix(in srgb, var(--dk) 82%, transparent) 42%, color-mix(in srgb, var(--dk) 10%, transparent) 75%); }
.t-spotlight .inner { position: absolute; inset: 0; padding: calc(var(--u)*6); display: flex; flex-direction: column; color: #fff; }
.t-spotlight .top { display: flex; justify-content: space-between; align-items: flex-start; }
.t-spotlight .top .tag { color: #fff; background: color-mix(in srgb, var(--dk) 40%, transparent); }
.t-spotlight .body { margin-top: auto; }
.t-spotlight .lead { font-weight: 600; font-size: calc(var(--u)*3.2); color: var(--hl); margin-bottom: calc(var(--u)*1.5); }
.t-spotlight h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*11); line-height: .9; }
.t-spotlight .tagline { font-size: calc(var(--u)*3.3); margin-top: calc(var(--u)*2.4); max-width: 34ch; opacity: .92; }
.t-spotlight .facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(var(--u)*5); border-top: 1px solid rgba(255,255,255,.35); }
.t-spotlight .facts > div { padding: calc(var(--u)*2.2) calc(var(--u)*2) 0 0; position: relative; }
.t-spotlight .facts > div::before { content: ''; position: absolute; top: calc(var(--u)*-1.2); left: 0; width: calc(var(--u)*.35); height: calc(var(--u)*2.4); background: var(--hl); }
.t-spotlight .facts .k { font-size: calc(var(--u)*2.2); opacity: .75; }
.t-spotlight .facts .v { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*4); line-height: 1.05; margin-top: .2em; }
.t-spotlight .foot { margin-top: calc(var(--u)*4.5); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); }
.is-tall .t-spotlight h1 { font-size: calc(var(--u)*15); }
.is-tall .t-spotlight .foot { flex-direction: column; align-items: flex-start; }
.is-wide .t-spotlight .shade { background: linear-gradient(to right, var(--dk) 20%, color-mix(in srgb, var(--dk) 70%, transparent) 55%, transparent 85%); }
.is-wide .t-spotlight .body { max-width: 62%; }
.is-wide .t-spotlight h1 { font-size: calc(var(--u)*10); }

/* ========== SOCIAL: Results / congratulations ========== */
.t-results { padding: calc(var(--u)*6); display: flex; flex-direction: column; }
.t-results .top { display: flex; justify-content: space-between; align-items: center; }
.t-results .head { margin: calc(var(--u)*5) 0 calc(var(--u)*4); }
.t-results h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*13); line-height: .88; }
.t-results .sub { font-size: calc(var(--u)*3.6); font-weight: 500; margin-top: calc(var(--u)*2); }
.t-results .sub b { color: var(--hl); font-weight: 700; }
.t-results .grid { flex: 1; display: grid; gap: calc(var(--u)*3) calc(var(--u)*2.5); align-content: center; justify-content: center; }
.t-results .st { text-align: center; }
.t-results .st .photo { width: 100%; aspect-ratio: 1; border-radius: 50%; border: calc(var(--u)*.6) solid var(--hl); }
.t-results .st .nm { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*var(--nm, 3.4)); line-height: 1.05; margin-top: calc(var(--u)*1.4); }
.t-results .st .cp { font-size: calc(var(--u)*var(--cp, 2.3)); color: var(--mut); margin-top: .25em; }
.t-results .foot { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); margin-top: calc(var(--u)*3); padding-top: calc(var(--u)*3); border-top: 1px solid var(--line); }
.t-results .ruler-y { right: calc(var(--u)*2); top: calc(var(--u)*6); height: calc(var(--u)*30); }
.is-tall .t-results h1 { font-size: calc(var(--u)*16); }

/* ========== SOCIAL: Placement ========== */
.t-placement { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; }
.t-placement > .photo { grid-row: 1 / 2; grid-column: 2; }
.t-placement .txt { grid-column: 1; padding: calc(var(--u)*6) calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*6); display: flex; flex-direction: column; }
.t-placement .lead { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*4); color: var(--hl); margin-top: auto; }
.t-placement h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*9); line-height: .92; margin: calc(var(--u)*1.5) 0 calc(var(--u)*3); }
.t-placement .role { font-size: calc(var(--u)*3.2); font-weight: 600; }
.t-placement .co { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*5.2); line-height: 1; margin-top: calc(var(--u)*1); }
.t-placement .loc { font-size: calc(var(--u)*2.6); color: var(--mut); margin-top: calc(var(--u)*1); }
.t-placement .q { font-size: calc(var(--u)*2.8); font-style: italic; margin-top: calc(var(--u)*4); padding-left: calc(var(--u)*2.4); border-left: calc(var(--u)*.4) solid var(--hl); }
.t-placement .course { font-size: calc(var(--u)*2.4); margin-top: calc(var(--u)*3); color: var(--mut); }
.t-placement .foot { grid-column: 1 / -1; background: var(--pan); color: var(--pfg); padding: calc(var(--u)*3) calc(var(--u)*6); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); }
.t-placement .ruler-x { left: 50%; right: 0; top: 0; }
.is-tall .t-placement, .is-port .t-placement { grid-template-columns: 1fr; grid-template-rows: 50% 1fr auto; }
.is-tall .t-placement > .photo, .is-port .t-placement > .photo { grid-row: 1; grid-column: 1; }
.is-tall .t-placement .txt, .is-port .t-placement .txt { grid-row: 2; padding-top: calc(var(--u)*4); }
.is-tall .t-placement .lead, .is-port .t-placement .lead { margin-top: 0; }
.is-tall .t-placement h1 { font-size: calc(var(--u)*12); }
.is-tall .t-placement .ruler-x, .is-port .t-placement .ruler-x { left: 0; top: calc(50% - var(--u)*3.2); bottom: auto; }

/* ========== SOCIAL: Event ========== */
.t-event { padding: calc(var(--u)*6); display: flex; flex-direction: column; }
.t-event .top { display: flex; justify-content: space-between; align-items: center; }
.t-event .ev-kind { margin-top: calc(var(--u)*6); }
.t-event h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*10); line-height: .92; margin-top: calc(var(--u)*2.5); }
.t-event .sub { font-size: calc(var(--u)*3.2); margin-top: calc(var(--u)*2); color: var(--mut); max-width: 40ch; }
.t-event .mid { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u)*4); align-items: center; margin-top: auto; }
.t-event .spk { display: flex; align-items: center; gap: calc(var(--u)*3); }
.t-event .spk .photo { width: calc(var(--u)*20); height: calc(var(--u)*20); border-radius: 50%; border: calc(var(--u)*.5) solid var(--hl); flex: none; }
.t-event .spk .by { font-size: calc(var(--u)*2.3); color: var(--mut); }
.t-event .spk .nm { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*4.4); line-height: 1; margin: .15em 0; }
.t-event .spk .rl { font-size: calc(var(--u)*2.5); }
.t-event .when { display: grid; gap: calc(var(--u)*1.3); font-size: calc(var(--u)*3); font-weight: 600; border-left: 1px solid var(--line); padding-left: calc(var(--u)*4); }
.t-event .when.solo { border-left: 0; padding-left: 0; font-size: calc(var(--u)*3.8); }
.t-event .when span { display: flex; align-items: center; gap: calc(var(--u)*1.2); }
.t-event .bottom { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); margin-top: calc(var(--u)*5); }
.t-event .cta { font-size: calc(var(--u)*3); }
.t-event .ruler-y { right: 0; top: 0; bottom: 0; }
.is-tall .t-event .mid, .is-port .t-event .mid { grid-template-columns: 1fr; }
.is-tall .t-event .when, .is-port .t-event .when { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: calc(var(--u)*3); }
.is-tall .t-event h1 { font-size: calc(var(--u)*13); }
.is-tall .t-event .when, .is-tall .t-event .when.solo { font-size: calc(var(--u)*4.6); }
.is-tall .t-event .bottom { flex-direction: column; align-items: flex-start; }

/* ========== SOCIAL: Testimonial ========== */
.t-testimonial { padding: calc(var(--u)*7); display: flex; flex-direction: column; }
.t-testimonial .top { display: flex; justify-content: space-between; align-items: center; }
.t-testimonial .mark { font-family: var(--af), serif; font-size: calc(var(--u)*26); line-height: .6; color: var(--hl); height: calc(var(--u)*12); margin-top: calc(var(--u)*5); }
.t-testimonial blockquote { margin: 0 0 calc(var(--u)*3); font-family: var(--hf), sans-serif; font-weight: 600; font-size: calc(var(--u)*8); line-height: 1.06; flex: 1; display: flex; align-items: center; }
.is-wide .t-testimonial blockquote { font-size: calc(var(--u)*5.6); }
.t-testimonial .stars { display: flex; gap: calc(var(--u)*.6); margin-bottom: calc(var(--u)*3); }
.t-testimonial .stars i { width: calc(var(--u)*3.2); height: calc(var(--u)*3.2); background: var(--hl); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.t-testimonial .stars i.off { background: var(--line); }
.t-testimonial .who { display: flex; align-items: center; gap: calc(var(--u)*3); padding-top: calc(var(--u)*3.5); border-top: calc(var(--u)*.35) solid var(--hl); }
.t-testimonial .who .photo { width: calc(var(--u)*13); height: calc(var(--u)*13); border-radius: 50%; flex: none; }
.t-testimonial .who .nm { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*4.2); }
.t-testimonial .who .rl { font-size: calc(var(--u)*2.6); color: var(--mut); margin-top: .2em; }
.t-testimonial .who .logo { margin-left: auto; }
.is-tall .t-testimonial blockquote { font-size: calc(var(--u)*11); }
.is-tall .t-testimonial .mark { font-size: calc(var(--u)*40); height: calc(var(--u)*18); }
.is-tall .t-testimonial .who .nm { font-size: calc(var(--u)*5.4); }
.is-tall .t-testimonial .who .rl { font-size: calc(var(--u)*3.4); }
.is-tall .t-testimonial .who .photo { width: calc(var(--u)*18); height: calc(var(--u)*18); }

/* ========== SOCIAL: Announcement ========== */
.t-announcement { display: flex; flex-direction: column; padding: calc(var(--u)*6); }
.t-announcement .top { display: flex; justify-content: space-between; align-items: center; }
.t-announcement .art { flex: 1; margin: calc(var(--u)*5) 0; border-radius: calc(var(--u)*1.2); min-height: 0; }
.t-announcement .art.none { flex: .4; background: none; }
.t-announcement h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*12); line-height: .92; }
.t-announcement .msg { font-size: calc(var(--u)*3.3); margin-top: calc(var(--u)*2.5); max-width: 46ch; }
.t-announcement .bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--u)*3); margin-top: calc(var(--u)*4); }
.t-announcement .note { font-size: calc(var(--u)*2.4); color: var(--mut); }
.t-announcement .ruler-x { left: 0; right: 0; bottom: 0; }
.is-tall .t-announcement h1 { font-size: calc(var(--u)*14); }
.is-tall .t-announcement .msg { font-size: calc(var(--u)*4.2); }

/* ========== SOCIAL: Upcoming batches schedule ========== */
.t-schedule { padding: calc(var(--u)*6); display: flex; flex-direction: column; }
.t-schedule .top { display: flex; justify-content: space-between; align-items: center; }
.t-schedule h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*11); line-height: .9; margin-top: calc(var(--u)*5); }
.t-schedule .period { font-family: var(--hf), sans-serif; font-weight: 600; font-size: calc(var(--u)*4.4); color: var(--hl); margin-top: calc(var(--u)*1); }
.t-schedule table { width: 100%; border-collapse: collapse; margin: calc(var(--u)*4) 0 auto; font-size: calc(var(--u)*var(--rs, 3)); }
.t-schedule td { padding: calc(var(--u)*var(--rp, 1.8)) 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.t-schedule td.d { font-family: var(--hf), sans-serif; font-weight: 700; white-space: nowrap; width: 1%; padding-right: calc(var(--u)*3); color: var(--hl); font-size: 1.15em; }
.t-schedule td.c b { display: block; font-weight: 700; }
.t-schedule td.c span { color: var(--mut); font-size: .82em; }
.t-schedule td.m { text-align: right; white-space: nowrap; font-size: .85em; font-weight: 600; padding-left: calc(var(--u)*2); }
.t-schedule .bottom { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); margin-top: calc(var(--u)*4); }
.t-schedule .ruler-y { left: 0; top: 0; bottom: 0; }
.is-wide .t-schedule h1 { font-size: calc(var(--u)*8); margin-top: calc(var(--u)*2); }
.is-wide .t-schedule table { margin-top: calc(var(--u)*2); }
.is-wide .t-schedule .bottom { margin-top: calc(var(--u)*2); }
.is-tall .t-schedule h1 { font-size: calc(var(--u)*15); margin-top: calc(var(--u)*10); }
.is-tall .t-schedule .period { font-size: calc(var(--u)*6); }
.is-tall .t-schedule .bottom { flex-direction: column; align-items: flex-start; }
.is-tall .t-schedule .contact { font-size: calc(var(--u)*3.4); }

/* ========== STATUS: Countdown ========== */
.t-countdown { padding: calc(var(--u)*8) calc(var(--u)*7); display: flex; flex-direction: column; }
.t-countdown .top { display: flex; justify-content: space-between; align-items: center; }
.t-countdown .big { margin: auto 0; }
.t-countdown .num { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*72); line-height: .78; letter-spacing: -.03em; color: var(--hl); }
.t-countdown .unit { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*11); line-height: .95; margin-top: calc(var(--u)*3); }
.t-countdown .course { font-size: calc(var(--u)*4.6); font-weight: 600; margin-top: calc(var(--u)*5); }
.t-countdown .date { font-size: calc(var(--u)*3.8); color: var(--mut); margin-top: calc(var(--u)*1.4); }
.t-countdown .bottom { display: grid; gap: calc(var(--u)*3); }
.t-countdown .cta { font-size: calc(var(--u)*4); justify-self: start; }
.t-countdown .contact { font-size: calc(var(--u)*3.6); }
.t-countdown .ruler-x { left: 0; right: 0; top: 46%; opacity: .5; }
.is-sq .t-countdown .ruler-x, .is-wide .t-countdown .ruler-x { top: auto; bottom: 0; }
.is-sq .t-countdown, .is-wide .t-countdown { padding: calc(var(--u)*6); }
.is-sq .t-countdown .num, .is-wide .t-countdown .num { font-size: calc(var(--u)*44); }
.is-sq .t-countdown .unit, .is-wide .t-countdown .unit { font-size: calc(var(--u)*8); }

/* ========== STATUS: Did you know ========== */
.t-tip { padding: calc(var(--u)*8) calc(var(--u)*7); display: flex; flex-direction: column; }
.t-tip .top { display: flex; justify-content: space-between; align-items: center; }
.t-tip .lbl { margin-top: auto; font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*8); color: var(--hl); }
.t-tip .fact { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*11.5); line-height: 1.04; margin-top: calc(var(--u)*3); }
.t-tip .more { font-size: calc(var(--u)*4.6); margin-top: calc(var(--u)*4); color: var(--mut); }
.t-tip .art { height: calc(var(--u)*46); margin: calc(var(--u)*6) calc(var(--u)*-7) 0; }
.t-tip .bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: calc(var(--u)*5); }
.t-tip .contact { font-size: calc(var(--u)*3.4); }
.is-sq .t-tip .fact, .is-wide .t-tip .fact { font-size: calc(var(--u)*7.6); }
.is-sq .t-tip .lbl, .is-wide .t-tip .lbl { font-size: calc(var(--u)*5); }
.is-sq .t-tip .more, .is-wide .t-tip .more { font-size: calc(var(--u)*3.4); }
.is-sq .t-tip .art, .is-wide .t-tip .art { display: none; }

/* ==========================================================
   PRINT: course brochure (A4 pages)
   ========================================================== */
.b-page { padding: calc(var(--bl) + var(--u)*9) calc(var(--bl) + var(--u)*9); display: flex; flex-direction: column; font-size: calc(var(--u)*1.95); line-height: 1.45; }
.b-page .pghead { display: flex; justify-content: space-between; align-items: center; padding-bottom: calc(var(--u)*2.4); border-bottom: 1px solid var(--line); margin-bottom: calc(var(--u)*6); font-size: calc(var(--u)*1.7); color: var(--mut); --logo-h: 4.5; }
.b-page .pgfoot { margin-top: auto; padding-top: calc(var(--u)*2.4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: calc(var(--u)*1.6); color: var(--mut); }
.b-page h2 { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*6.4); line-height: 1; margin-bottom: calc(var(--u)*3.5); }
.b-page h3 { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*3); line-height: 1.1; margin: calc(var(--u)*4.5) 0 calc(var(--u)*1.6); color: var(--hl-ink); }
.b-page p { margin-bottom: .8em; max-width: 70ch; }
.b-page .lede { font-size: calc(var(--u)*2.7); line-height: 1.35; font-weight: 500; margin-bottom: calc(var(--u)*3); }
.b-page .cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*6); }

.b-cover { padding: 0; }
.b-cover > .photo { position: absolute; left: 0; right: 0; top: 0; height: 58%; }
.b-cover .band { position: absolute; left: 0; right: 0; bottom: 0; top: 54%; background: var(--bg); padding: calc(var(--u)*7) calc(var(--bl) + var(--u)*9) calc(var(--bl) + var(--u)*8); display: flex; flex-direction: column; }
.b-cover .band .tag { position: absolute; top: calc(var(--u)*-3.2); left: calc(var(--bl) + var(--u)*9); background: var(--bg); font-size: calc(var(--u)*3.2); }
.b-cover h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*11); line-height: .92; margin-top: calc(var(--u)*3); }
.b-cover .tl { font-size: calc(var(--u)*3); margin-top: calc(var(--u)*3); max-width: 38ch; color: var(--mut); }
.b-cover .bot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--u)*4); --logo-h: 8; }
.b-cover .ruler-x { left: 0; right: 0; top: calc(54% - var(--u)*3.2); }
.b-cover .logo-top { position: absolute; top: calc(var(--bl) + var(--u)*7); left: calc(var(--bl) + var(--u)*9); background: #fff; padding: calc(var(--u)*1.6) calc(var(--u)*2.4); border-radius: calc(var(--u)*.8); --logo-h: 6; color: var(--p); }

.b-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: calc(var(--u)*.3) solid var(--hl); margin: calc(var(--u)*2) 0 calc(var(--u)*4); }
.b-facts > div { padding: calc(var(--u)*1.8) calc(var(--u)*1.5) 0 0; }
.b-facts .k { font-size: calc(var(--u)*1.6); color: var(--mut); }
.b-facts .v { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*2.8); line-height: 1.1; margin-top: .2em; }

.b-mods { counter-reset: m; display: grid; gap: 0; }
.b-mods li { counter-increment: m; display: grid; grid-template-columns: calc(var(--u)*8) 1fr; padding: calc(var(--u)*1.9) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u)*2.3); font-weight: 500; }
.b-mods li::before { content: counter(m, decimal-leading-zero); font-family: var(--hf), sans-serif; font-weight: 700; color: var(--hl-ink); font-size: 1.2em; }
.b-mods.two { grid-template-columns: 1fr 1fr; column-gap: calc(var(--u)*5); }

.b-back { background: var(--pan); color: var(--pfg); }
.b-back .pghead, .b-back .pgfoot { border-color: var(--pline); color: var(--pmut); }
.b-back h2 { color: var(--pfg); }
.b-back table { width: 100%; border-collapse: collapse; font-size: calc(var(--u)*2.2); }
.b-back th { text-align: left; font-weight: 500; font-size: .8em; color: var(--pmut); padding-bottom: calc(var(--u)*1); border-bottom: 1px solid var(--pline); }
.b-back td { padding: calc(var(--u)*1.6) calc(var(--u)*1) calc(var(--u)*1.6) 0; border-bottom: 1px solid var(--pline); font-weight: 600; }
.b-back .contactblock { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u)*5); align-items: end; }
.b-back .contactblock .contact { flex-direction: column; align-items: flex-start; font-size: calc(var(--u)*2.4); gap: calc(var(--u)*1.4); }
.b-back .addr { font-size: calc(var(--u)*2.1); margin-top: calc(var(--u)*2.2); color: var(--pmut); max-width: 40ch; }
.b-back .big { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*8); line-height: .92; margin: calc(var(--u)*4) 0 calc(var(--u)*5); }
.b-back .acc { margin-top: calc(var(--u)*5); align-self: flex-start; }

/* ---------- Leaflet (single A4) ---------- */
.t-leaflet { display: grid; grid-template-rows: 32% 1fr auto; font-size: calc(var(--u)*1.85); line-height: 1.4; }
.t-leaflet > .photo { grid-row: 1; }
.t-leaflet .logo-top { position: absolute; top: calc(var(--bl) + var(--u)*6); left: calc(var(--bl) + var(--u)*7); background: #fff; padding: calc(var(--u)*1.4) calc(var(--u)*2); border-radius: calc(var(--u)*.8); --logo-h: 5.5; color: var(--p); }
.t-leaflet .cmain { padding: calc(var(--u)*5) calc(var(--bl) + var(--u)*7) calc(var(--u)*3); display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--u)*5); align-content: start; position: relative; }
.t-leaflet .cmain .tag { position: absolute; top: calc(var(--u)*-3.1); left: calc(var(--bl) + var(--u)*7); background: var(--bg); }
.t-leaflet h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*8); line-height: .92; grid-column: 1 / -1; margin-top: calc(var(--u)*2); }
.t-leaflet .tl { grid-column: 1 / -1; font-size: calc(var(--u)*2.8); color: var(--mut); margin-top: calc(var(--u)*-2.5); max-width: 50ch; }
.t-leaflet h3 { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*2.8); margin: 0 0 calc(var(--u)*1.4); color: var(--hl-ink); }
.t-leaflet .blk + .blk { margin-top: calc(var(--u)*3.4); }
.t-leaflet .b-facts { grid-template-columns: 1fr 1fr; margin: 0 0 calc(var(--u)*3); row-gap: calc(var(--u)*2.4); }
.t-leaflet .foot { background: var(--pan); color: var(--pfg); padding: calc(var(--u)*3.4) calc(var(--bl) + var(--u)*7) calc(var(--bl) + var(--u)*3.4); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*4); }
.t-leaflet .foot .contact { font-size: calc(var(--u)*2.2); }
.t-leaflet .foot .batch { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*3.4); line-height: 1.05; }
.t-leaflet .foot .batch small { display: block; font-family: var(--bf), sans-serif; font-weight: 500; font-size: .55em; color: var(--pmut); }
.t-leaflet .ruler-x { left: 0; right: 0; top: calc(32% - var(--u)*3.2); }

/* ==========================================================
   PRINT: magazine ads (any size)
   ========================================================== */
.t-mag-course { display: flex; flex-direction: column; }
.t-mag-course > .photo { flex: 0 0 42%; }
.t-mag-course .body { flex: 1; padding: calc(var(--u)*5) calc(var(--bl) + var(--u)*6) calc(var(--u)*3); display: flex; flex-direction: column; position: relative; }
.t-mag-course .body .tag { position: absolute; top: calc(var(--u)*-3.1); left: calc(var(--bl) + var(--u)*6); background: var(--bg); }
.t-mag-course .lead { font-family: var(--hf), sans-serif; font-weight: 700; color: var(--hl-ink); font-size: calc(var(--u)*3.6); margin-top: calc(var(--u)*1.5); }
.t-mag-course h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*9.4); line-height: .9; margin-top: calc(var(--u)*1); }
.t-mag-course .tl { font-size: calc(var(--u)*2.8); margin-top: calc(var(--u)*2); color: var(--mut); max-width: 44ch; }
.t-mag-course .checks { font-size: calc(var(--u)*2.6); margin-top: calc(var(--u)*3); columns: 2; column-gap: calc(var(--u)*4); }
.t-mag-course .checks li { break-inside: avoid; }
.t-mag-course .foot { background: var(--pan); color: var(--pfg); padding: calc(var(--u)*3) calc(var(--bl) + var(--u)*6) calc(var(--bl) + var(--u)*3); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); }
.t-mag-course .foot .contact { font-size: calc(var(--u)*2.5); }
.t-mag-course .ruler-x { left: 0; right: 0; top: calc(42% - var(--u)*3.2); }
.is-wide .t-mag-course { flex-direction: row; flex-wrap: wrap; }
.is-wide .t-mag-course > .photo { flex: 0 0 40%; order: 2; }
.is-wide .t-mag-course .body { flex: 0 0 60%; padding-top: calc(var(--bl) + var(--u)*6); }
.is-wide .t-mag-course .body .tag { position: static; align-self: flex-start; }
.is-wide .t-mag-course .foot { flex: 0 0 100%; order: 3; }
.is-wide .t-mag-course .ruler-x { display: none; }
.is-wide .t-mag-course .checks { columns: 1; }

.t-mag-institute { padding: calc(var(--bl) + var(--u)*6); display: flex; flex-direction: column; }
.t-mag-institute .top { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--u)*4); --logo-h: 9; }
.t-mag-institute .top .tl { text-align: right; font-size: calc(var(--u)*2.6); color: var(--mut); max-width: 28ch; }
.t-mag-institute h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*10); line-height: .9; margin-top: calc(var(--u)*6); }
.t-mag-institute .intro { font-size: calc(var(--u)*2.8); margin-top: calc(var(--u)*2.4); max-width: 52ch; }
.t-mag-institute .courses { margin-top: calc(var(--u)*4); display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u)*5); }
.t-mag-institute .courses li { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--u)*2.4); align-items: baseline; padding: calc(var(--u)*1.7) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u)*2.5); break-inside: avoid; }
.t-mag-institute .courses li b { font-family: var(--hf), sans-serif; font-weight: 700; color: var(--hl-ink); font-size: 1.05em; min-width: calc(var(--u)*14); }
.t-mag-institute .courses li span { font-weight: 500; }
.t-mag-institute .bottom { margin-top: auto; padding-top: calc(var(--u)*4); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*4); }
.t-mag-institute .contact { font-size: calc(var(--u)*2.6); }
.t-mag-institute .ruler-x { left: 0; right: 0; bottom: var(--bl); }
.is-tall .t-mag-institute .courses, .is-port .t-mag-institute .courses { grid-template-columns: 1fr; }
.is-wide .t-mag-institute h1 { font-size: calc(var(--u)*8.5); margin-top: calc(var(--u)*3); }

.t-mag-admissions { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.t-mag-admissions > .photo { position: absolute; inset: 0; }
.t-mag-admissions .shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--dk) 30%, color-mix(in srgb, var(--dk) 50%, transparent) 65%, transparent); }
.t-mag-admissions .inner { position: relative; padding: calc(var(--bl) + var(--u)*6); display: flex; flex-direction: column; color: #fff; }
.t-mag-admissions .inner .logo-top { align-self: flex-start; background: #fff; padding: calc(var(--u)*1.4) calc(var(--u)*2); border-radius: calc(var(--u)*.8); --logo-h: 6; color: var(--p); }
.t-mag-admissions h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*14); line-height: .86; margin-top: auto; }
.t-mag-admissions .sub { font-family: var(--hf), sans-serif; font-weight: 600; font-size: calc(var(--u)*4.6); color: var(--a); margin-top: calc(var(--u)*2); }
.t-mag-admissions .list { display: flex; flex-wrap: wrap; gap: calc(var(--u)*1.2); margin-top: calc(var(--u)*3.5); }
.t-mag-admissions .list span { font-weight: 600; font-size: calc(var(--u)*2.4); border: 1px solid rgba(255,255,255,.55); border-radius: calc(var(--u)*.6); padding: .35em .7em; }
.t-mag-admissions .foot { position: relative; background: var(--hl); color: var(--on-hl); padding: calc(var(--u)*3) calc(var(--bl) + var(--u)*6) calc(var(--bl) + var(--u)*3); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u)*3); }
.t-mag-admissions .foot .contact { font-size: calc(var(--u)*2.6); }
.t-mag-admissions .foot .when { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*3.6); }

/* ==========================================================
   PRINT: academic document covers (A4)
   ========================================================== */
.c-classic { padding: calc(var(--bl) + var(--u)*7); font-family: var(--af), serif; background: #fff; color: #1b2430; }
.c-classic .frame { position: absolute; inset: calc(var(--bl) + var(--u)*4); border: calc(var(--u)*.5) solid var(--p); }
.c-classic .frame::after { content: ''; position: absolute; inset: calc(var(--u)*1); border: 1px solid var(--p); opacity: .6; }
.c-classic .cin { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--u)*6) calc(var(--u)*5); }
.c-classic .crest { --logo-h: 12; color: var(--p); }
.c-classic .crest .wordmark { font-size: calc(var(--u)*4.6); text-align: center; }
.c-classic .inst { font-family: var(--af), serif; font-weight: 600; font-size: calc(var(--u)*3); margin-top: calc(var(--u)*2.6); color: var(--p); }
.c-classic .rule { width: calc(var(--u)*26); height: calc(var(--u)*.4); background: var(--a); margin: calc(var(--u)*7) auto calc(var(--u)*5); }
.c-classic .dtype { font-size: calc(var(--u)*2.8); font-style: italic; color: #4a5563; }
.c-classic h1 { font-family: var(--af), serif; font-weight: 700; font-size: calc(var(--u)*7.4); line-height: 1.08; margin-top: calc(var(--u)*2.4); color: var(--p); max-width: 18ch; }
.c-classic .subt { font-size: calc(var(--u)*3.2); margin-top: calc(var(--u)*2.4); max-width: 34ch; }
.c-classic .course { font-size: calc(var(--u)*2.8); font-weight: 600; margin-top: calc(var(--u)*4); }
.c-classic .meta { margin-top: auto; width: 100%; max-width: calc(var(--u)*70); border-top: 1px solid #c9d1db; text-align: left; font-family: var(--bf), sans-serif; }
.c-classic .meta div { display: grid; grid-template-columns: 40% 1fr; padding: calc(var(--u)*1.4) 0; border-bottom: 1px solid #c9d1db; font-size: calc(var(--u)*2.2); }
.c-classic .meta dt { color: #5b6573; }
.c-classic .meta dd { margin: 0; font-weight: 600; min-height: 1.2em; }

.c-technical { padding: 0; background: #fff; color: #111c28; font-family: var(--bf), sans-serif; }
.c-technical .sideband { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--p); color: #fff; padding: calc(var(--bl) + var(--u)*7) calc(var(--u)*5) calc(var(--bl) + var(--u)*7) calc(var(--bl) + var(--u)*6); display: flex; flex-direction: column; }
.c-technical .sideband .logo-top { background: #fff; padding: calc(var(--u)*1.6); border-radius: calc(var(--u)*.6); --logo-h: 7; align-self: flex-start; color: var(--p); }
.c-technical .sideband .code { margin-top: auto; font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*7.6); line-height: .9; writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start; color: var(--a); }
.c-technical .sideband .ver { font-size: calc(var(--u)*2); margin-top: calc(var(--u)*4); opacity: .8; }
.c-technical .sideband .ruler-y { right: 0; top: 0; bottom: 0; --mk: rgba(255,255,255,.5); }
.c-technical .cmain { position: absolute; left: 30%; right: 0; top: 0; bottom: 0; padding: calc(var(--bl) + var(--u)*9) calc(var(--bl) + var(--u)*8) calc(var(--bl) + var(--u)*8) calc(var(--u)*8); display: flex; flex-direction: column; }
.c-technical .dtype { font-family: var(--hf), sans-serif; font-weight: 600; font-size: calc(var(--u)*3.4); color: var(--s); }
.c-technical h1 { font-family: var(--hf), sans-serif; font-weight: 800; font-size: calc(var(--u)*9.6); line-height: .92; margin-top: calc(var(--u)*2.4); }
.c-technical .subt { font-size: calc(var(--u)*3); margin-top: calc(var(--u)*3); color: #44505e; max-width: 34ch; }
.c-technical .course { margin-top: calc(var(--u)*6); padding-top: calc(var(--u)*3); border-top: calc(var(--u)*.4) solid var(--a); font-weight: 600; font-size: calc(var(--u)*2.8); }
.c-technical .meta { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*3) calc(var(--u)*4); }
.c-technical .meta dt { font-size: calc(var(--u)*1.9); color: #5b6573; }
.c-technical .meta dd { margin: calc(var(--u)*.8) 0 0; font-weight: 700; font-size: calc(var(--u)*2.5); border-bottom: 1px solid #c4ccd6; padding-bottom: calc(var(--u)*1); min-height: calc(var(--u)*4.4); }
.c-technical .inst { margin-top: calc(var(--u)*6); font-size: calc(var(--u)*2.1); color: #5b6573; }

.c-minimal { padding: calc(var(--bl) + var(--u)*9); background: #fff; color: #141c26; display: flex; flex-direction: column; }
.c-minimal .top { display: flex; justify-content: space-between; align-items: center; --logo-h: 6.5; color: var(--p); }
.c-minimal .top .dtype { font-size: calc(var(--u)*2.4); font-weight: 600; color: var(--s); }
.c-minimal .mid { margin-top: 32%; }
.c-minimal .num { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*3); color: var(--a); }
.c-minimal h1 { font-family: var(--hf), sans-serif; font-weight: 700; font-size: calc(var(--u)*8.6); line-height: .98; margin-top: calc(var(--u)*2); max-width: 16ch; }
.c-minimal .subt { font-size: calc(var(--u)*3); margin-top: calc(var(--u)*3); color: #4b5563; max-width: 38ch; }
.c-minimal .meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: calc(var(--u)*2) calc(var(--u)*7); font-size: calc(var(--u)*2.2); padding-top: calc(var(--u)*3); border-top: 1px solid #d3d9e0; }
.c-minimal .meta dt { color: #6b7280; font-size: .85em; }
.c-minimal .meta dd { margin: .2em 0 0; font-weight: 600; }
.c-minimal .ruler-x { left: 0; right: 0; bottom: var(--bl); --mk: var(--p); opacity: .7; }
.c-minimal .meta dd.blank { border-bottom: 1px solid #9aa3ad; min-width: calc(var(--u)*26); }
.c-technical .sideband .logo-top { max-width: 100%; position: relative; z-index: 1; }
.c-technical .sideband .logo-top img { max-width: 100%; height: auto; max-height: calc(var(--u)*7); }
.c-technical .sideband .logo-top .wordmark { font-size: calc(var(--u)*2.6); }
.c-technical .sideband .ruler-y { z-index: 0; }