/* Goen — forest, gold and translucent glass */
:root{--ink:#f3efdf;--paper:#081510;--gold:#e3c574;--lime:#f2d45d;--border:rgba(215,186,110,.25);--muted:#bdc9bd}
body{background:#081510;color:var(--ink)}
.site-header,.site-footer{background:rgba(5,16,12,.94);border-color:var(--border);color:var(--ink)}
.hero,.message-hero{background:radial-gradient(ellipse at 85% 25%,rgba(215,181,68,.12),transparent 52%),linear-gradient(120deg,rgba(3,14,10,.96),rgba(14,51,35,.90)),url('gold-washi.png') center/cover}
.hero-bottom{background:rgba(0,0,0,.16);border-color:var(--border)}
.about,.message-layout{background:linear-gradient(145deg,#0d251b,#091a13);color:var(--ink)}
.join-section,.message-join{background:radial-gradient(ellipse at 80% 30%,rgba(211,180,68,.08),transparent 60%),#06110d;color:var(--ink)}
.lime-text,.tag,.section-label,.topic-no,.topic-english,.message-side,.message-body strong{color:var(--gold)}
.hero-note,.hero-bottom,.payment-note,.payment-intro p,.site-footer small,.topic p,.year-help,#cohort-summary,.cohort-footnote{color:#c1cdbf}
.topic,.topics,.message-teaser,.section-label,.cohort-eligibility{border-color:var(--border)}
.join-card,.cohort-result,.payment-card,.payment-summary{background:linear-gradient(135deg,rgba(53,90,66,.22),rgba(9,25,17,.7));border:1px solid var(--border);border-radius:18px;box-shadow:0 20px 60px #0003,inset 0 1px 0 #ffffff08}
.price,.cohort-result #selected-year,.year-suffix{color:#f1d889}
:is(.button,.header-link,.message-back,.message-details,.profile-social a,.payment-card button,.completion-button,.site-footer>a:not(.brand),.site-header>a:not(.brand)){
background:linear-gradient(130deg,rgba(218,188,96,.16),rgba(73,115,81,.10));color:#f5e9ba;border:1px solid rgba(232,201,115,.45);border-radius:12px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #ffffff12,0 8px 24px #0002;text-decoration:none;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
:is(.header-link,.message-back,.message-details,.profile-social a,.site-footer>a:not(.brand),.site-header>a:not(.brand)){display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;min-height:44px;box-sizing:border-box}
:is(.button-lime,.button-line,.payment-card button[type=submit]){background:linear-gradient(120deg,rgba(246,214,89,.25),rgba(188,154,48,.10));border-color:rgba(245,215,102,.7);color:#ffe9a0;box-shadow:inset 0 1px 0 #fff2,0 8px 30px #e2bd3d0c}
:is(.button,.header-link,.message-back,.message-details,.profile-social a,.payment-card button,.completion-button):hover{background:rgba(231,200,108,.24);border-color:#f1d477;color:#fff3c9;transform:translateY(-2px);box-shadow:0 12px 30px #0003}
.message-teaser{color:#ecd48c;border-radius:12px;padding:24px;background:linear-gradient(110deg,#e5c7720e,#12332155)}
.message-body p{color:#e2e9df}:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a{color:#f5e9ba;background:rgba(211,185,105,.12);border-color:#d4b96670}
.method{border-radius:12px;background:#ffffff03}.method:has(input:checked){background:#dac06513;border-color:#e3c574}.payment-card select,#graduation-year{background:#0a1c13;color:#f3efdf;border:1px solid #c4aa7366;border-radius:10px;padding:14px;font:inherit;max-width:100%}
a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #f5da70;outline-offset:5px}
@media(max-width:640px){.site-header>a:not(.brand){padding:8px 11px;font-size:11px}.join-card,.cohort-result,.payment-card,.payment-summary{border-radius:14px}.message-teaser{padding:20px}.button{min-height:56px}.hero-inner{gap:38px}}
@media(prefers-reduced-motion:reduce){a,button{transition:none!important;transform:none!important}}

.community-motto{margin:0 0 28px;text-align:center;color:#e3c574;font-size:clamp(25px,3vw,39px);font-weight:500;letter-spacing:.12em;line-height:1.5}.community-caption{display:flex;justify-content:space-between;gap:20px;width:100%;max-width:390px;margin:28px auto 0;color:#e3c574;font-size:14px;letter-spacing:.1em;line-height:1.8}@media(max-width:640px){.community-motto{font-size:27px;margin-bottom:24px}.community-caption{max-width:300px;font-size:12px;gap:12px;margin-top:24px}}

/* Equal typography for the three phrases around the community icon. */
.community-motto,.community-caption{font-size:clamp(16px,1.7vw,22px);font-weight:500;letter-spacing:.1em;line-height:1.8}
@media(max-width:640px){.community-motto,.community-caption{font-size:16px}}

.join-invitation-heading{font-family:inherit;font-size:clamp(28px,3.2vw,40px);font-weight:500;line-height:1.7;letter-spacing:.06em;margin:16px 0 0}

/* Highlight the opening graduation cohort with warm gold glass. */
#cohort-heading{box-sizing:border-box;width:100%;margin:24px 0 16px;padding:16px 18px;border:1px solid rgba(239,206,112,.42);border-left:4px solid #f2d45d;border-radius:12px;background:linear-gradient(115deg,rgba(227,197,116,.20),rgba(227,197,116,.06));color:#ffe6a0;font-size:clamp(26px,2.9vw,38px);font-weight:600;line-height:1.5;letter-spacing:.02em;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,245,207,.12),0 8px 24px rgba(0,0,0,.12);overflow-wrap:anywhere}
@media(max-width:640px){#cohort-heading{padding:14px 12px;font-size:clamp(23px,6.1vw,30px);letter-spacing:0}}

/* Size labels to the card width, keeping both on one line. */
.cohort-result{container-type:inline-size;min-width:0}
#cohort-heading{font-size:clamp(14px,6cqw,28px);letter-spacing:0;white-space:nowrap;overflow-wrap:normal;padding:16px 12px}
#cohort-payment{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;padding:18px 12px;font-size:clamp(12px,4.5cqw,18px);line-height:1.5;letter-spacing:0;white-space:nowrap;text-align:center}

/* Balanced invitation panel and centered cohort label. */
#cohort-heading{text-align:center}
.cohort-picker{container-type:inline-size;min-width:0}
.join-invitation-heading{box-sizing:border-box;width:100%;margin:0;padding:24px 14px;white-space:nowrap;font-size:clamp(14px,5.5cqw,29px);font-weight:500;letter-spacing:0;line-height:1.6;text-align:center;color:#f5e8bb;border:1px solid rgba(227,197,116,.24);border-radius:16px;background:linear-gradient(115deg,rgba(227,197,116,.14),rgba(32,79,54,.22) 55%,rgba(7,24,16,.12));box-shadow:inset 0 1px 0 rgba(255,241,197,.08),0 12px 36px rgba(0,0,0,.10);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* Open typography, with a deliberate two-line invitation. */
.join-invitation-heading{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:18px 0;margin:0;text-align:left;white-space:normal;font-size:clamp(24px,8cqw,42px);line-height:1.8;letter-spacing:.04em;color:#f3efdf;text-shadow:0 3px 8px rgba(0,0,0,.5),0 10px 24px rgba(0,0,0,.3)}
.join-invitation-heading span{color:#e3c574;text-shadow:0 3px 8px rgba(0,0,0,.5),0 0 22px rgba(227,197,116,.16)}

/* Recognizable social icons and brighter glass links. */
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social{gap:14px}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a{display:flex;justify-content:flex-start;gap:9px;min-height:68px;padding:12px 10px;border-radius:14px;box-shadow:inset 0 1px 0 #ffffff24,0 8px 22px #0003;color:#fff;letter-spacing:0}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a.social-instagram{background:linear-gradient(120deg,rgba(182,54,147,.34),rgba(238,130,58,.23));border-color:rgba(244,153,180,.65)}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a.social-line{background:linear-gradient(120deg,rgba(6,199,85,.30),rgba(25,106,65,.24));border-color:rgba(87,224,140,.65)}
.social-icon{width:32px;height:32px;flex:0 0 32px;border-radius:9px;color:white}
.instagram-icon{background:linear-gradient(140deg,#7046c5,#d73779 55%,#efa748)}
.line-icon{background:#06b950}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a .social-label{font-size:13px;font-weight:700;letter-spacing:0;white-space:nowrap}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a .social-arrow{margin-left:auto;font-size:18px}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a:hover{filter:brightness(1.18);box-shadow:0 10px 26px #0005}
@media(max-width:760px){:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a{flex:1 1 200px;max-width:290px}}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social{container-type:inline-size}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a{gap:7px}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social .social-icon{width:28px;height:28px;flex-basis:28px}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a .social-label{font-size:clamp(11px,6cqw,14px)}
:is(.message-side,.cohort-picker,.message-mobile-social) .profile-social a .social-arrow{font-size:14px}

.cohort-picker .profile-social{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:24px;width:100%;max-width:280px}
.cohort-picker .profile-social a{width:100%;text-decoration:none;box-sizing:border-box}

/* Compact, centered social links on phones. */
@media(max-width:640px){
.cohort-picker .profile-social{width:min(100%,230px);max-width:230px;margin:20px auto 0;gap:10px}
.cohort-picker .profile-social a{flex:initial;min-height:54px;padding:9px 12px;border-radius:12px;gap:8px}
.cohort-picker .profile-social .social-icon{width:25px;height:25px;flex-basis:25px}
.cohort-picker .profile-social a .social-label{font-size:12px}
.cohort-picker .profile-social a .social-arrow{font-size:14px}
}

.site-header.home-header{justify-content:center}
.site-header.home-header .brand{margin-inline:auto}

/* Strong founder signature. */
.portrait-signature p{font-weight:800;color:#f3efdf}
.portrait-signature>p:first-child{font-size:16px;letter-spacing:.12em}
.portrait-signature .message-author{font-weight:800;text-shadow:0 2px 8px #0005}
.portrait-signature .message-author span{font-weight:700}

.message-mobile-social{display:none}
@media(max-width:760px){
.message-side .profile-social,.message-join .message-actions{display:none}
.message-mobile-social{display:block;width:100%;margin:24px auto}
.message-mobile-social .profile-social{display:flex;flex-direction:column;align-items:stretch;width:min(100%,230px);margin:0 auto;gap:10px}
.message-mobile-social .profile-social a{flex:initial;box-sizing:border-box;width:100%;min-height:54px;padding:9px 12px;gap:8px;text-decoration:none}
.message-mobile-social .profile-social .social-icon{width:25px;height:25px;flex-basis:25px}
.message-mobile-social .profile-social a .social-label{font-size:12px}
}

/* Share the hero background with the founder-page navigation. */
.message-hero .message-header{background:transparent;border:0;box-shadow:none;justify-content:flex-end;position:relative;z-index:2}

.cohort-year-label{display:block;font-size:14px;margin:0 0 10px;color:#f3efdf}
#cohort-year{box-sizing:border-box;width:100%;min-height:56px;padding:14px 12px;border:1px solid #e3c57499;border-radius:12px;background:#14271e;color:#ffe6a0;font-family:inherit;font-size:clamp(14px,4.5cqw,18px);cursor:pointer}
#cohort-year:focus-visible{outline:3px solid #f2d45d;outline-offset:3px}
#cohort-payment{font-family:inherit;cursor:pointer}

/* Prominent application action. */
#payment-form button[type="submit"]{box-sizing:border-box;width:100%;min-height:70px;padding:20px 14px;background:linear-gradient(115deg,rgba(255,225,132,.96),rgba(224,182,66,.88));color:#102017;border:1px solid #ffe8a1;font-family:inherit;font-size:clamp(17px,2vw,22px);font-weight:800;line-height:1.5;box-shadow:0 8px 28px rgba(225,188,65,.24),inset 0 1px 0 rgba(255,255,255,.5)}
#payment-form button[type="submit"]:hover{background:linear-gradient(115deg,#fff0b7,#edcb6c);color:#102017;box-shadow:0 10px 32px rgba(225,188,65,.34)}
#payment-form button[type="submit"]:disabled{opacity:.65;cursor:wait;transform:none}

/* Compact copy action, centered beneath the participation code. */
.completion #copy-code{width:auto;max-width:100%;min-height:44px;padding:9px 18px;font-size:14px;flex:none}

.completion #openchat-link{gap:12px}
.completion #openchat-link .line-icon{width:32px;height:32px;flex:0 0 32px}
@media(max-width:600px){.completion #openchat-link{gap:8px;padding-inline:12px}.completion #openchat-link .line-icon{width:28px;height:28px;flex-basis:28px}}

/* Match the founder page's LINE link. */
.completion #openchat-link{max-width:360px;min-height:68px;padding:12px 14px;justify-content:flex-start;gap:10px;border:1px solid rgba(87,224,140,.65);border-radius:14px;background:linear-gradient(120deg,rgba(6,199,85,.30),rgba(25,106,65,.24))!important;color:#fff!important;box-shadow:inset 0 1px 0 #ffffff24,0 8px 22px #0003;font-size:16px;letter-spacing:0}
.completion #openchat-link .line-icon{width:28px;height:28px;flex-basis:28px}
.completion #openchat-link .social-arrow{margin-left:auto;font-size:18px}
.completion #openchat-link:hover{background:linear-gradient(120deg,rgba(6,199,85,.30),rgba(25,106,65,.24))!important;border-color:rgba(87,224,140,.65);filter:brightness(1.18);box-shadow:0 10px 26px #0005}
@media(max-width:600px){.completion #openchat-link{min-height:54px;padding:9px 12px;gap:8px;font-size:14px}.completion #openchat-link .line-icon{width:25px;height:25px;flex-basis:25px}}

/* Related social actions beside the LINE invitation. */
.completion .completion-social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:680px}
.completion .completion-social #openchat-link,.completion #completion-instagram{box-sizing:border-box;width:100%;max-width:none;margin:0;min-height:68px;padding:12px 14px;justify-content:flex-start;gap:10px;font-size:16px;font-weight:700;letter-spacing:0;border-radius:14px}
.completion #completion-instagram{background:linear-gradient(120deg,rgba(182,54,147,.34),rgba(238,130,58,.23))!important;border:1px solid rgba(244,153,180,.65);color:#fff!important;box-shadow:inset 0 1px 0 #ffffff24,0 8px 22px #0003}
.completion #completion-instagram .social-icon{width:28px;height:28px;flex-basis:28px}
.completion #completion-instagram .social-arrow{margin-left:auto;font-size:18px}
.completion #completion-instagram:hover{filter:brightness(1.18);border-color:rgba(244,153,180,.85);box-shadow:0 10px 26px #0005}
@media(max-width:600px){.completion .completion-social{grid-template-columns:1fr;max-width:360px;gap:10px}.completion .completion-social #openchat-link,.completion #completion-instagram{min-height:54px;padding:9px 12px;gap:8px;font-size:14px}.completion #completion-instagram .social-icon{width:25px;height:25px;flex-basis:25px}}
