/* InTRIZ UI system: the final, authoritative layer for shared components.
   Loaded last. One definition per component so pages stop drifting; earlier stylesheets
   still hold page-specific layout. Findings it fixes are tracked on /backlog (Visual QA). */

:root{
 --ui-ink:#22241f;--ui-muted:#60655e;--ui-faint:#80857c;--ui-line:#d4d7cf;--ui-field:#ffffff;--ui-paper:#f8f8f5;--ui-soft:#eeefe9;
 --ui-focus:#48594b;--ui-error:#b3261e;--ui-accent-text:#b8431c;
 --ui-radius:10px;--ui-field-h:52px;--ui-btn-h:44px;
 --ui-gap-heading:16px;--ui-gap-field:18px;--ui-section:64px;
}
@media(max-width:640px){:root{--ui-section:48px}}

/* Typography: balanced wrapping made headings break early and stranded single words. */
h1,h2,h3{text-wrap:pretty;letter-spacing:-.028em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Focus: one ring everywhere, rounded, never touching neighbours. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px;border-radius:8px}
:where(input,textarea,.select-trigger):focus-visible{outline:none}

/* Secondary buttons: one size for every outline button (rows, cards, footer, CTAs). */
.btn:not(.primary):not(.small),.row-button,.footer-updates{min-height:var(--ui-btn-h);padding:10px 18px;font-size:14px;font-weight:650;line-height:1.3;border-radius:var(--ui-radius)}
.btn.primary{min-height:var(--ui-btn-h);border-radius:var(--ui-radius);font-size:14px}

/* ---------- Form fields (contact page, contact dialogs, training form) ---------- */
:is(.contact-form-panel,.capture-form,.lp-final form) label{display:block;font-size:15px;font-weight:600;line-height:1.4;color:var(--ui-ink);margin:0 0 var(--ui-gap-field)}
:is(.contact-form-panel,.capture-form,.lp-final form) :is(input:not([type=checkbox]):not([type=radio]),textarea){display:block;width:100%;height:var(--ui-field-h);min-height:var(--ui-field-h);margin:8px 0 0;padding:0 16px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-field);color:var(--ui-ink);font:400 16px/1.4 Manrope,Arial,sans-serif;box-shadow:none;transition:border-color .2s,box-shadow .2s}
:is(.contact-form-panel,.capture-form,.lp-final form) textarea:not([type]):not([readonly]){height:auto;min-height:136px;padding:14px 16px;resize:vertical}
:is(.contact-form-panel,.capture-form,.lp-final form) :is(input,textarea)::placeholder{color:var(--ui-faint);font-weight:400;opacity:1}
:is(.contact-form-panel,.capture-form,.lp-final form) :is(input,textarea):focus{outline:none;border-color:var(--ui-focus);box-shadow:0 0 0 3px rgba(72,89,75,.16)}
:is(.contact-form-panel,.capture-form,.lp-final form) [aria-invalid="true"]{border-color:var(--ui-error)!important;box-shadow:0 0 0 3px rgba(179,38,30,.10)!important}
.field-error{margin:6px 0 0;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ui-error)}
.optional{font-weight:400;color:var(--ui-muted)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
@media(max-width:640px){.field-row{grid-template-columns:minmax(0,1fr)}}
.form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:8px}
.form-actions .btn{margin:0}
.form-actions #form-status:empty{display:none}

/* Phone: one visible label, country code and number side by side at equal height. */
.phone-group{border:0;padding:0;margin:0 0 var(--ui-gap-field);min-width:0}
.phone-group legend{padding:0;margin:0 0 8px;font-size:15px;font-weight:600;line-height:1.4;color:var(--ui-ink)}
.phone-inputs{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:stretch}
.phone-inputs .custom-select{margin:0;min-width:0}
.phone-inputs .select-trigger{height:var(--ui-field-h);min-height:var(--ui-field-h);margin:0;padding:0 12px 0 14px;gap:6px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:var(--ui-field);font:500 16px/1 Manrope,Arial,sans-serif;color:var(--ui-ink)}
.phone-inputs .select-options{width:min(300px,calc(100vw - 64px));max-height:260px}
.phone-group .phone-inputs input[name=phone]{margin:0!important;height:var(--ui-field-h)}
.phone-group .field-error{grid-column:1/-1}

/* Topic choice on the contact form. */
.topic-group{border:0;padding:0;margin:0 0 22px;min-width:0}
.topic-group legend{padding:0;margin:0 0 10px;font-size:15px;font-weight:600;color:var(--ui-ink)}
.topic-options{display:flex;flex-wrap:wrap;gap:8px}
.topic-option{position:relative;margin:0!important}
.topic-option input{position:absolute;opacity:0;width:1px;height:1px}
.topic-option span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--ui-line);border-radius:999px;background:var(--ui-field);font-size:14px;font-weight:600;color:var(--ui-ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.topic-option input:checked+span{background:var(--ui-ink);border-color:var(--ui-ink);color:#fff}
.topic-option input:focus-visible+span{outline:2px solid var(--ui-focus);outline-offset:3px}

/* ---------- Contact page ---------- */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:32px;align-items:start;margin:8px 0 var(--ui-section)}
.contact-form-panel,.contact-direct{background:#fff;border:1px solid var(--ui-line);border-radius:16px;padding:32px}
.contact-form-panel>h2,.contact-direct>h2{font-size:24px;line-height:1.25;margin:0 0 8px}
.contact-form-panel>p,.contact-direct>p{margin:0 0 24px;font-size:15px;line-height:1.6;color:var(--ui-muted)}
.contact-channels{display:grid;gap:10px}
.contact-channel{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 14px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-paper);text-align:left;color:var(--ui-ink);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.contact-channel:hover{border-color:#b9bdb2;background:#fff;transform:translateY(-1px)}
.channel-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--ui-line)}
.channel-icon svg{width:22px;height:22px}
.channel-whatsapp{color:#1f8a4c}
.channel-text{display:grid;gap:2px;min-width:0}
.channel-text strong{font-size:16px;font-weight:700;line-height:1.3}
.channel-text span{font-size:13.5px;color:var(--ui-muted);line-height:1.4}
.channel-arrow{width:18px;height:18px;color:var(--ui-muted);transition:transform .2s}
.contact-channel:hover .channel-arrow{transform:translateX(3px)}
.contact-person{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--ui-line)}
.contact-person img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}
.contact-person div{display:grid;gap:1px;line-height:1.35}
.contact-person span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted)}
.contact-person strong{font-size:16px}
.contact-person small{font-size:13.5px;color:var(--ui-muted)}
@media(max-width:900px){.contact-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.contact-form-panel,.contact-direct{padding:22px 18px;border-radius:14px}.contact-layout{gap:20px}.form-actions .btn{width:100%}}

/* ---------- Contact dialogs ---------- */
.capture-dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.capture-dialog .capture-close{display:grid;place-items:center;width:40px;height:40px;top:14px;right:14px;border-radius:50%;border:1px solid transparent;background:transparent;font-size:24px;line-height:1;color:var(--ui-muted);transition:background .2s,color .2s}
.capture-dialog .capture-close:hover{background:var(--ui-soft);color:var(--ui-ink)}
.capture-dialog .capture-close:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-radius:50%}
.capture-dialog h2{padding-right:44px}
.capture-dialog .capture-form>.btn.primary{width:100%;margin-top:6px}
.capture-reveal{display:grid;gap:14px;margin-top:6px}
.reveal-item{padding:18px;border:1px solid var(--ui-line);border-radius:12px;background:#fff}
.reveal-label{display:block;font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted)}
.reveal-value{display:block;margin:6px 0 14px;font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ui-ink);overflow-wrap:anywhere}
.reveal-actions{display:flex;flex-wrap:wrap;gap:8px}
.reveal-actions .btn{margin:0;flex:1 1 auto}
@media(max-width:480px){.reveal-actions .btn{flex:1 1 100%}}

/* ---------- Page rhythm ---------- */
/* The closing CTA band carries the section gap; whatever sits right before it gives up its own bottom padding.
   Before: 64px section + 64px layout + 32px CTA margin stacked into 160–220px of empty space. */
main .cta{margin-top:var(--ui-section)}
main .wrap:has(+ .wrap .cta) :is(.reading-layout,.detail-layout,.timeline-layout,.section,.page-sections,.collection-section,.program-grid,.founder-history,ol,.related-activities):last-child{padding-bottom:0;margin-bottom:0}
main .wrap:has(+ .wrap .cta) > :last-child{padding-bottom:0;margin-bottom:0}
.timeline-event:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
/* Headings sitting directly on their text. */
.founder-history>h2+p{margin-top:12px}
.lp-final h2+p{margin-top:16px}
.lp-hero h1{margin-bottom:20px}

/* ---------- Content width ---------- */
/* Long-form rows used to stop at 910px while photos and grids ran to 1220px; rows and dividers now span the
   container and only the text keeps a readable measure. */
.page-sections{max-width:none}
.prose-section .prose{max-width:68ch}

/* Detail pages: header and article share one column edge. */
@media(min-width:1100px){
 .wrap:has(> .reading-layout > .contents-nav) > .page-head{padding-left:284px}
 .reading-layout:has(> .contents-nav) .contents-nav{position:sticky;top:104px;align-self:start}
 .reading-layout:not(:has(> .contents-nav)){grid-template-columns:minmax(0,1fr);max-width:840px;margin-left:0;margin-right:auto}
 .reading-layout:not(:has(> .contents-nav)) > .detail-main{grid-column:1/-1;max-width:none}
 .reading-layout .detail-main{max-width:760px}
}

/* ---------- Card grids ---------- */
/* No lone card on the last row: three items share a row on tablet, and an odd last card spans the row. */
@media(min-width:700px) and (max-width:1023px){
 :is(.cards,.program-grid):has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
 
}

/* Button labels stay on one line (an old 130px cap wrapped "Semua program" into a taller button). */
.btn{max-width:none;white-space:nowrap}
.section-head .btn{flex:none}

/* ---------- Media ---------- */
/* Year tile instead of a reused stand-in photo. */
.gradient-placeholder.year-tile{background:linear-gradient(135deg,#ecebe4,#dfe3da)!important;box-shadow:none!important}
.gradient-placeholder.year-tile .monogram{color:#7c8577;font-size:clamp(34px,5vw,52px);letter-spacing:-.03em}
.record-thumbnail.record-year{display:grid;place-items:center;aspect-ratio:3/2;border-radius:10px;background:linear-gradient(135deg,#ecebe4,#dfe3da);color:#7c8577;font-size:26px;font-weight:700;letter-spacing:-.02em;text-decoration:none}
/* Every image fills its slot the same way; logos are boxed and never cropped. */
.collaborator-card .media-slot img,.collaborator-card .gradient-placeholder{width:100%;aspect-ratio:4/5;object-fit:cover;max-width:none}
.collaborator-card .media-slot.placeholder{max-width:none}
.collaborator-card{display:flex;flex-direction:column}
.collaborator-card>.btn{margin-top:auto;align-self:flex-start}
.logo-symbol{object-fit:contain;mix-blend-mode:multiply}
.record-meta .logo-symbol,.profile-logo .logo-symbol{width:72px;height:72px;padding:4px}
.profile-logo{display:flex;justify-content:flex-start;margin:0 0 24px}

/* Activity photos: a grid instead of one 40-photo column. */
.activity-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.activity-photos .media-slot{margin:0}
.activity-photos .media-slot img{aspect-ratio:4/3;border-radius:10px}
.activity-photos figcaption{font-size:12.5px}
@media(min-width:1024px){.activity-photos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.activity-photos{grid-template-columns:minmax(0,1fr)}}

/* Gallery: one card per event. */
.gallery-events{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
.gallery-event h2{font-size:20px;line-height:1.3;margin:6px 0 0}
.gallery-event h2 a{color:inherit;text-decoration:none}
.gallery-event .card-date{margin:12px 0 0}
.gallery-cover{position:relative;display:block;border-radius:12px;overflow:hidden}
.gallery-cover .media-slot{margin:0}
.photo-count{position:absolute;left:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(34,36,31,.78);color:#fff;font-size:12.5px;font-weight:650}
@media(max-width:1023px){.gallery-events{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gallery-events{grid-template-columns:minmax(0,1fr)}}

/* ---------- Lists and related records ---------- */
.record-row h3{font-size:clamp(20px,1.8vw,24px);line-height:1.3}
.timeline-more{margin-top:16px}
.timeline-more .btn{margin:0}
/* "See all related" disclosure looks like a button, not a browser default. */
details.more-activities>summary{display:inline-flex;align-items:center;gap:10px;min-height:var(--ui-btn-h);padding:10px 18px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);font-size:14px;font-weight:650;cursor:pointer;list-style:none}
details.more-activities>summary::-webkit-details-marker{display:none}
details.more-activities>summary::after{content:"";width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
details.more-activities[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details.more-activities[open]>summary{margin-bottom:16px}

/* ---------- Home ---------- */
@media(max-width:640px){.hero.home-intro .buttons{margin-bottom:32px}}
@media(max-width:899px){.history-summary{grid-template-columns:minmax(0,1fr);gap:0}.history-summary p{margin-top:16px}}
/* Tablet: hero art and founder card side by side instead of a stretched phone stack. */
@media(min-width:700px) and (max-width:1023px){
 .hero.home-intro{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:24px}
 .home-hero-art:has(.hero-linework){aspect-ratio:1;max-width:340px;margin:0}
 .founder-panel{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important}
 .founder-panel .founder-cover img{height:100%;aspect-ratio:auto;min-height:420px}
}

/* ---------- Navigation ---------- */
/* Breadcrumb separators stay with the item that follows them. */
.page-breadcrumbs{row-gap:0}
.page-breadcrumbs [aria-current]{overflow-wrap:anywhere}
/* Mobile menu: the last items fade under the pinned contact button instead of being cut in half. */
.mobile-nav{padding-bottom:96px}
.mobile-nav::after{content:"";position:sticky;display:block;bottom:72px;height:32px;margin-top:-32px;background:linear-gradient(to bottom,rgba(248,248,245,0),var(--ui-paper));pointer-events:none}
.explore-menu{display:inline-flex;align-items:center;gap:8px}
.explore-menu svg{display:block}

/* ---------- Footer ---------- */
@media(min-width:700px) and (max-width:1023px){
 .footer-grid{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr))!important;gap:28px}
 .footer-intro .brand-tagline{font-size:20px}
}
@media(max-width:699px){
 .footer-grid{grid-template-columns:minmax(0,1fr)!important;gap:28px}
 .footer-col{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
 .footer-col strong{margin-bottom:6px}
}
.footer-grid{align-items:start}
.footer-intro .brand{margin-top:0}

/* ---------- Newsletter invite ---------- */
@media(max-width:699px){
 .updates-invitation{left:12px;right:12px;bottom:12px;width:auto;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;border-radius:14px}
 .updates-invitation p{display:none}
 .updates-invitation strong{font-size:15px;padding-right:28px}
 .updates-invitation .btn{grid-column:2;grid-row:1;width:auto;margin:0;min-height:40px;padding:8px 14px}
 .updates-invitation .invite-close{top:50%;transform:translateY(-50%);right:auto;left:auto;position:static;grid-column:3;grid-row:1}
}

/* ---------- Training landing page ---------- */
.lp details>summary{text-align:left}
.lp-complement{border-radius:12px}
@media(min-width:768px){.lp-global-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:none!important}}
@media(min-width:1200px){.lp-global-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* The newest event leads the gallery at double width (also keeps 13 events from leaving one alone). */
@media(min-width:561px){.gallery-events>.gallery-event:first-child{grid-column:span 2}.gallery-events>.gallery-event:first-child .media-slot img{aspect-ratio:16/9}}
/* An older ":has(figure:only-child)" rule matched every photo (each sits alone inside its link) and forced one
   column; the grid now depends on how many photos there really are. */
.activity-photos.activity-photos:has(> :nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1024px){.activity-photos.activity-photos:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.activity-photos.activity-photos:has(> :nth-child(2)){grid-template-columns:minmax(0,1fr)}}
/* Story cards on tablet: titles sized for three-across cards. */
.story-card h3{font-size:clamp(20px,2.4vw,26px);line-height:1.25}
.story-card .card-date{margin:6px 0 10px}
/* Logo strip fades at both edges instead of cutting a logo in half. */
.emblem-frame{-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}

/* ===== Round 2 fixes (verified against the second by-eye review) ===== */
/* Text wrapping: pretty wrapping stays on headings only. */
p,li{text-wrap:wrap}

/* A lone last card in a program grid becomes one wide horizontal card instead of an orphan or an oversized tile. */
@media(min-width:700px) and (max-width:1023px){
 .program-grid:not(:has(> :nth-child(3):last-child))>.program-card:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:24px;align-content:center}
 .program-grid:not(:has(> :nth-child(3):last-child))>.program-card:last-child:nth-child(odd)>.media-slot{grid-row:1/span 6;margin:0}
 .program-grid:not(:has(> :nth-child(3):last-child))>.program-card:last-child:nth-child(odd)>.media-slot img{height:100%;aspect-ratio:auto;max-height:260px}
}
/* Card links sit on the card's text edge (the shared button padding had indented them 18px). */
.program-card>.btn,.audience>.btn,.story-card>a.btn:last-child{padding:0!important;border:0!important;min-height:40px}

/* Founder card: the photo fills the card height on tablet; the intro and perspective share one measure. */
.founder-panel{align-items:stretch}
@media(min-width:700px) and (max-width:1023px){.founder-panel .founder-cover{height:100%;margin:0}.founder-panel .founder-cover img{height:100%;min-height:0;aspect-ratio:auto;object-fit:cover}}
.founder-intro{max-width:none}
.founder-perspective .btn{margin-top:24px}

/* Gallery: the newest event is a full-width banner (image beside text), then a regular grid. */
@media(min-width:561px){
 .gallery-events>.gallery-event:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 32px;align-items:center}
 .gallery-events>.gallery-event:first-child>.gallery-cover{grid-row:1/span 2}
 .gallery-events>.gallery-event:first-child h2{font-size:clamp(24px,2.4vw,32px);align-self:start}
 .gallery-events>.gallery-event:first-child .card-date{align-self:end}
}
.gallery-event{position:relative}
.gallery-event h2 a::after{content:"";position:absolute;inset:0}
.gallery-event .gallery-cover img{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.gallery-event:hover .gallery-cover img{transform:scale(1.03)}
.gallery-event .card-date,.timeline-event .date{font-size:14px;font-weight:600;color:var(--ui-accent-text)}

/* Year tiles stay compact so they don't read as empty boxes. */
:is(.story-card,.program-card) .gradient-placeholder.year-tile{aspect-ratio:16/7}
@media(max-width:699px){.record-thumbnail.record-year{width:64px;height:64px;aspect-ratio:1;font-size:17px;border-radius:10px}}

/* Footer: on tablet the brand takes the first row and the three link columns share the full width. */
@media(min-width:700px) and (max-width:1023px){
 .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:32px 24px}
 .footer-intro{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 24px}
 .footer-intro .brand-tagline,.footer-intro p{margin:0}
}
.site-footer .btn:not(.primary){font-size:14px;min-height:var(--ui-btn-h)}

/* Mobile menu: room under the list for the pinned contact button, no overlay on top of it. */
.mobile-nav::after{content:none}
.mobile-nav{padding-bottom:120px}

/* Newsletter invite is a slim bar on tablet too, so it never sits on body text. */
@media(min-width:700px) and (max-width:1023px){
 .updates-invitation{left:24px;right:24px;bottom:16px;width:auto;max-width:none;padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;border-radius:14px}
 .updates-invitation p{display:none}
 .updates-invitation .btn{margin:0;width:auto;min-height:40px}
 .updates-invitation .invite-close{position:static}
}

/* Breadcrumbs: each separator travels with its item, so no "/" is left dangling at a line end. */
.page-breadcrumbs .crumb,.page-breadcrumbs .crumb>span{display:inline-flex;align-items:center;gap:10px;min-width:0;margin:0}
.page-breadcrumbs .crumb>[aria-current]{overflow-wrap:anywhere}

/* Filters on tablet: search on its own row, the two selects side by side. */
@media(min-width:600px) and (max-width:1023px){.filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.filters>input{grid-column:1/-1}}

/* Journey: the year list stays visible while scrolling; text, lede and dividers share one width. */
@media(min-width:1024px){.year-index{position:sticky!important;top:104px;align-self:start}}
.timeline-event{max-width:760px}
.timeline-event p{max-width:none}

/* Small rhythm fixes. */
.section-kicker{font-size:12px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ui-muted);display:flex;align-items:center;gap:8px}
.section-kicker::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent,#e85526)}
.story-card .card-number{margin-bottom:2px}
.story-card h3{margin-bottom:12px}
.founder-history li h3+p{margin-top:8px}
.founder-history li .btn{margin-top:16px}
.detail-main>.media-slot.placeholder{max-width:240px}
.detail-main>.media-slot.placeholder .gradient-placeholder{aspect-ratio:4/5}
.story-dateline{font-size:13px;color:var(--ui-muted)}
@media(min-width:901px){.contact-direct{position:sticky;top:104px}}
@media(max-width:640px){.topic-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.topic-option span{width:100%;justify-content:center}}
/* 404: actions stack full width on phone and the page keeps some height. */
.not-found-actions{margin-bottom:var(--ui-section)}
@media(max-width:640px){.not-found-actions{display:grid}.not-found-actions .btn{width:100%}}

/* Training page leftovers. */
.lp-hero h1+p{margin-top:20px}
.lp-global-card{align-items:flex-start!important;text-align:left!important}
@media(min-width:700px){.lp-founder{text-align:left}.lp-founder *{text-align:inherit}}
.lp-complement{max-width:none!important}
/* Wide card photo bleeds to the card's left, top and bottom edges and stops at its own column. */
@media(min-width:700px) and (max-width:1023px){
 .program-grid:not(:has(> :nth-child(3):last-child))>.program-card:last-child:nth-child(odd)>.media-slot{width:calc(100% + 28px);margin:-28px 0 -28px -28px;align-self:stretch}
 .program-grid:not(:has(> :nth-child(3):last-child))>.program-card:last-child:nth-child(odd)>.media-slot img{border-radius:11px 0 0 11px;height:100%;max-height:none}
}
/* Slim invite bar: title, then action, then close (the close button comes first in the markup). */
@media(max-width:1023px){
 .updates-invitation strong{order:1;text-align:left}
 .updates-invitation .btn{order:2}
 .updates-invitation .invite-close{order:3}
}
/* Older generic span/nav rules shrank nested crumb text to 10–11px; crumbs inherit the breadcrumb size. */
.page-breadcrumbs .crumb,.page-breadcrumbs .crumb *{font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none}

/* Wide last card only on desktop; phones keep the normal stacked card. */
@media(min-width:1024px){
 .program-grid>.program-card:last-child:nth-child(3n+1):not(:first-child){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:28px;align-content:center}
 .program-grid>.program-card:last-child:nth-child(3n+1):not(:first-child)>.media-slot{grid-row:1/span 6;margin:0}
 .program-grid>.program-card:last-child:nth-child(3n+1):not(:first-child)>.media-slot img{height:100%;aspect-ratio:auto;min-height:220px;max-height:300px}
 .program-grid>.program-card:last-child:nth-child(3n+1):not(:first-child)>.media-slot{width:calc(100% + 28px);margin:-28px 0 -28px -28px;align-self:stretch}
 .program-grid>.program-card:last-child:nth-child(3n+1):not(:first-child)>.media-slot img{border-radius:11px 0 0 11px;height:100%;max-height:none}
 .program-grid>.program-card:last-child:nth-child(3n+1):not(:first-child){overflow:hidden}
 .program-grid>.program-card:last-child:nth-child(3n+1):not(:first-child)>:not(.media-slot){align-self:center}
}
@media(min-width:700px) and (max-width:1023px){.program-grid:not(:has(> :nth-child(3):last-child))>.program-card:last-child:nth-child(odd){overflow:hidden}}

/* ===== Round 3 fixes ===== */
/* Tablet footer: brand block stacks simply; the updates button sizes to its label. */
@media(min-width:700px) and (max-width:1023px){.footer-intro{display:block}.footer-intro>*+*{margin-top:10px}}
.footer-updates,.site-footer .footer-updates{width:auto!important;display:inline-flex}
/* Phone filters: each control on its own row so labels are never cut. */
@media(max-width:599px){.filters{display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px}}
/* Story cards: links line up at the bottom of each card in a row. */
.story-card{display:flex;flex-direction:column}
.story-card>a.btn:last-child{margin-top:auto}
/* Newsletter invite: a slim bar on every width, centred on desktop, never over body text. */
@media(min-width:1024px){
 .updates-invitation{left:50%;right:auto;transform:translateX(-50%);bottom:16px;width:min(720px,calc(100% - 48px));max-width:none;padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;border-radius:14px}
 .updates-invitation p{display:none}
 .updates-invitation strong{order:1;text-align:left}
 .updates-invitation .btn{order:2;margin:0;width:auto;min-height:40px}
 .updates-invitation .invite-close{order:3;position:static}
}
/* While the invite bar is open, the page can scroll its last lines clear of it. */
body:has(.updates-invitation){padding-bottom:88px}
/* Rows without a logo keep the same slot, so the label below never jumps to the top. */
.logo-placeholder{display:grid;place-items:center;width:72px;height:72px;border-radius:12px;background:var(--ui-soft);color:var(--ui-muted);font-size:20px;font-weight:700;letter-spacing:-.02em;flex:none}
/* Training hero: the heading gets the same space above its paragraph as other sections. */
.lp-intro h1{margin-bottom:20px}
.lp-intro h1+p{margin-top:0}
/* Logo strip: a wider edge fade so a passing logo never looks cut. */
.emblem-frame{-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.lp-focused .lp-intro h1{margin-bottom:22px}

/* ===== Backlog batch 4: remaining open QA items ===== */
/* Headings: slightly looser tracking so words don't run together (Q047). */
h1,h2,h3{letter-spacing:-.02em}
.page-head .lead,.lead{text-wrap:pretty}
/* Section headings on detail pages share one size (Q038) and related cards stay H3-sized. */
.detail-main .section>.section-head h2,.detail-main h2{font-size:clamp(24px,2.2vw,30px)}
/* Program detail: the next-steps row sits a normal gap below related cards (Q036) and its buttons match on phone (Q037). */
.reading-next{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.reading-next .btn{margin:0}
@media(max-width:640px){.reading-next .btn{flex:1 1 100%}}
.detail-main>.section:has(+ .reading-next){padding-bottom:0}
/* Tablet table of contents reads as links (Q040). */
@media(max-width:1099px){.contents-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;border-top:0;padding-top:0}.contents-nav strong{flex-basis:100%;margin:0 0 2px}.contents-nav a{padding:6px 12px;border:1px solid var(--ui-line);border-radius:999px;background:#fff;color:var(--ui-ink);font-size:13px;line-height:1.3}}
/* Story cards: tighter meta (Q011). */
.story-card .card-number{margin:14px 0 0}
.story-card .card-date{margin:4px 0 8px}
.story-card h3{margin:0 0 10px}
/* "Dari ruang kelas ke praktik": no forced title break, body uses the card width (Q015). */
.audience h3{max-width:none;white-space:normal}
.audience p{max-width:52ch}
/* Program cards: titles reserve two lines so descriptions start level across a row (Q107). */
@media(min-width:700px){.program-card h3{min-height:2.5em}}
/* Wide last card: text centred against the photo (N004); photo fills to the card's bottom edge (N003). */
@media(min-width:700px){.program-card:last-child[style],.program-grid>.program-card:last-child{align-items:stretch}}
/* Founder card intro shares the perspective paragraph's measure (N001); people page description (Q063). */
.founder-identity p,.founder-body p{max-width:60ch}
/* People page: normal gap before the first person card (Q064). */
.collaborator-grid{margin-top:32px}
.page-sections:has(+ .collaborator-grid){margin-bottom:0}
/* Founder timeline: title, text and button spacing (Q100) and first-baseline dates (Q101). */
.founder-history li{align-items:baseline}
.founder-history li .history-year{padding-top:.35em;white-space:normal}
.founder-history li h3{margin:0}
/* Universities topic blocks: equal space around dividers (Q110, N011). */
.prose-section{padding:32px 0}
.prose-section h2{margin-bottom:12px}
/* Network rows: narrower logo column so titles don't float far from their logos (Q070). */
@media(min-width:700px){.record-row{grid-template-columns:140px minmax(0,1fr)!important;gap:28px!important}}
/* Network detail: tighter space around the institution logo (N014). */
.profile-logo{margin:-8px 0 16px}
/* Detail cover photos on phone: taller crop so group photos keep the outer people (Q042, N015). */
@media(max-width:640px){.detail-main>.media-slot.cover img{aspect-ratio:4/3}}
/* Story meta line: readable and close to the photo (Q043). */
.story-dateline{font-size:14px;color:var(--ui-muted);margin:-8px 0 24px}
/* Activity documentation heading and grid (N012, N013). */
.activity-documentation{margin-top:40px;padding-top:32px;border-top:1px solid var(--ui-line)}
.activity-documentation>h2{margin:0 0 16px}
details.more-photos{margin-top:16px}
details.more-photos[open]>.activity-photos{margin-top:12px}
/* Gallery cards: visible "view activity" cue (N017). */
.gallery-event .card-link{display:inline-flex;margin-top:8px;font-size:14px;font-weight:650;color:var(--ui-ink)}
/* Contact: side card matches the form's height, main contact pinned to its bottom (N008). */
@media(min-width:901px){.contact-layout{align-items:stretch}.contact-direct{position:static;display:flex;flex-direction:column}.contact-person{margin-top:auto}}
/* Contact chips on phone fit one line each (N006); channel subtitles avoid orphans (N007). */
@media(max-width:640px){.topic-option span{font-size:13px;padding:8px 10px;white-space:nowrap}}
.channel-text span{text-wrap:pretty}
/* Footer: the updates button sits a full gap above the link columns (Q116, Q019). */
.footer-updates{margin-bottom:8px}
@media(min-width:700px) and (max-width:1023px){.footer-intro{margin-bottom:12px}}
/* Mobile menu group headings match tablet/desktop (Q146). */
.mobile-nav h2,.mobile-nav .nav-group-title,.navigation-panel strong{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted)}
/* Card hover is visible even without motion: accent border (Q150). */
.program-card:hover,.audience:hover,.collaborator-card:hover{border-color:#b9bdb2;box-shadow:0 10px 30px rgba(34,36,31,.10)}
/* Journey: first timeline dot looks the same on every width (N018). */
.timeline-event:first-of-type::before{background:var(--ui-accent-text)}
/* Photo collections flow in columns, so no count ever leaves a lone photo on the last row. */
.activity-photos.activity-photos.activity-photos{display:block;columns:2 220px;column-gap:12px}
@media(min-width:1024px){.activity-photos.activity-photos.activity-photos{columns:3 220px}}
@media(max-width:480px){.activity-photos.activity-photos.activity-photos{columns:1}}
.activity-photos>*{display:block;break-inside:avoid;margin:0 0 12px}
@media(min-width:901px){.contact-layout>.contact-direct{align-self:stretch}}
.contact-channels{margin-bottom:22px}
.contact-person{margin-top:auto}

/* ===== Training landing page batch ===== */
.lp-global-card small,.lp-quote-card small,.lp-founder-credentials h3,.lp-method-flow strong{text-wrap:balance;hyphens:none}
.lp-global-card{display:flex;flex-direction:column}
.lp-case-method{margin-top:auto}
@media(min-width:700px){.lp-founder-story,.lp-founder-story p,.lp-founder-story h2,.lp-founder-story h3{text-align:left}}
@media(min-width:700px){.lp-founder-milestones h3{min-height:2.6em}}
.lp-final .lp-split p{max-width:56ch}
.lp-audience-panel{margin-inline:0}
@media(max-width:640px){.lp-audience .lp-audience-panel{padding:0;background:none;border:0;box-shadow:none}}
.lp-footer .brand{font-size:20px;display:inline-flex;align-items:center;gap:8px}
.lp-footer .brand svg{width:24px;height:24px}
.nowrap{white-space:nowrap}

/* ===== Round 4 follow-ups ===== */
/* Placeholder tiles show the InTRIZ mark, not a year. */
.gradient-placeholder.year-tile .monogram svg,.record-thumbnail.record-year svg{width:36px;height:36px;color:#a7aea1}
.record-thumbnail.record-year{color:#a7aea1}
/* Founder card text uses the card's width (N001, Q063). */
.founder-panel p,.founder-identity p,.founder-body p{max-width:none!important}
/* People page: normal break before the first person card (Q064). */
.wrap>.page-sections:has(+ .collaborator-grid)>.prose-section:last-child{padding-bottom:0}
.collaborator-grid{margin-top:24px!important}
/* Network rows: compact logo column (Q070). */
#archive-results .record-row,.record-row.record-row{grid-template-columns:140px minmax(0,1fr)!important;gap:28px!important}
@media(max-width:699px){#archive-results .record-row,.record-row.record-row{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}}
/* Network detail: the institution logo sits close to the text (N014). */
.detail-main>.profile-logo{margin:0 0 16px!important;padding:0!important;min-height:0}
/* Phone hero photos are shown whole, so group photos keep the people at the edges (Q042, N015). */
@media(max-width:640px){.reading-layout .detail-main>.media-slot img{aspect-ratio:auto!important;height:auto!important;object-fit:contain}}
/* Universities topic blocks: equal space either side of each divider (N011). */
.prose-section .prose>:last-child{margin-bottom:0}
/* Card hover readable even without motion (Q150). */
.program-card:hover{border-color:var(--ui-accent-text)}
.program-card:hover>.btn{text-decoration:underline;text-underline-offset:4px}
/* Contact: chips keep inner padding; main contact sits under the channels (regressions). */
@media(max-width:640px){.topic-option span{font-size:12.5px;padding:8px}}
@media(min-width:901px){.contact-person{margin-top:0}}
/* Training: labels align with their text; tab panel spans the container (regressions, N026). */
@media(min-width:700px){.lp-founder-story *{text-align:left!important}}
.lp-audience-panel{width:100%;margin-inline:0!important}
/* Contrast (WCAG AA 4.5:1): inactive language label and hero concept chips. */
.language-option:not(.selected){color:#585d54}
.hero-concept.concept-0 span:last-child{color:#9c3b1b}
.hero-concept.concept-1 span:last-child{color:#5a4a8c}
.hero-concept.concept-2 span:last-child{color:#2f6b58}
.year-index a.active,.year-index .active{color:var(--ui-accent-text)}
@media(max-width:640px){.reading-layout .detail-main>.media-slot,.reading-layout .detail-main>.media-slot picture{aspect-ratio:auto!important;height:auto!important;min-height:0!important}}

/* ===== Final QA polish ===== */
/* Contents list: the section being read is marked (Q039). */
.contents-nav a[aria-current="location"]{color:var(--ui-ink);font-weight:650;box-shadow:inset 2px 0 0 var(--ui-accent-text);padding-left:10px}
@media(max-width:1099px){.contents-nav a[aria-current="location"]{box-shadow:none;border-color:var(--ui-ink);padding-left:12px}}
/* Closing CTA: one layout per breakpoint — text with the button beside it from 700px, stacked below (Q078). */
@media(min-width:700px){main .cta{flex-direction:row!important;align-items:center!important;justify-content:space-between}main .cta .btn{width:auto;flex:none;margin:0}}
/* Menu: the current page looks the same at every width (Q146). */
.mobile-nav a[aria-current="page"]{background:none;color:var(--ui-accent-text);font-weight:650}
/* Phones: plain heading wrapping, no early breaks (Q046, N019). */
@media(max-width:640px){h1,h2,h3{text-wrap:wrap}}
/* Stories as a card grid, distinct from the activity archive rows (Q035). */
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
@media(max-width:1023px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.story-grid{grid-template-columns:minmax(0,1fr)}}
/* Training logo strips: one neutral tone so a white logo (UMS) stays visible (Q154, Q160). */
.lp-logo-cell img,.lp-company-logo img,.lp-global-card img{filter:grayscale(1) brightness(.45) contrast(1.15);mix-blend-mode:multiply;object-fit:contain}
.lp-global-card img{max-height:40px;width:auto;max-width:160px}
/* Training phone details (N022–N024). */
@media(max-width:640px){.lp-benefit-chips{text-align:center;justify-content:center}.lp-faq summary{padding-inline:0}.lp-faq summary::after{margin-right:0}}
.lp-final .lp-micro,.lp-final .lp-split p{max-width:52ch;margin-inline:auto}

/* ===== Story footer, privacy note, program path ===== */
.story-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:40px 0 0;padding:20px 0;border-top:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line)}
.story-footer .byline{margin:0;font-size:15px;color:var(--ui-muted)}
.story-footer .byline strong{color:var(--ui-ink)}
.story-footer .share{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.story-footer .share>span{font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-muted);margin-right:4px}
.story-footer .share .btn{margin:0;min-height:40px;padding:8px 14px}
.related-stories{margin-top:24px}
.form-privacy{margin:4px 0 14px;font-size:13.5px;color:var(--ui-muted)}
.form-privacy a,.capture-notice a,.footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.program-path .section-head p{margin-top:6px}
/* Stories page: the newest story leads across the row. */
@media(min-width:601px){#archive-results .story-grid>.story-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:32px;align-items:center}
 #archive-results .story-grid>.story-card:first-child>.story-image{grid-row:1/span 5}
 #archive-results .story-grid>.story-card:first-child h3{font-size:clamp(24px,2.6vw,32px)}}
.story-footer:has(+ .related-stories){border-bottom:0}
.story-footer+.related-stories{border-top:1px solid var(--ui-line)}