/* Shared layout for the two single-column profile templates — the international school
   page and the programme page. Both previously rendered a stack of equal-weight cards
   with no landmark, no chapter index and no numbering, while the US dossier next door
   carried all three. This sheet gives them the dossier's structure at their own width.

   The tokens are the theme's (绛红纸金); they are declared with fallbacks so the sheet
   is correct even where a route has stripped every registered asset group, which both
   of these routes do. */
:root{--ox:#7C2230;--oxd:#5A1420;--brass:#A67F33;--brass-ink:#7E5E1F;--paper:#F7F3EC;
	--card:#FFFDF9;--ink:#26201C;--ink2:#6B5F58;--ink3:#9C8F85;--line:#E9E0D3;
	--red:#7C2230;--red2:#5A1420;--red-soft:#F6ECEA;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Two columns on desktop: the spine, then the reading column. The reading measure is
   unchanged from what each template already used — this adds a rail beside it rather
   than narrowing the text. */
.plyt{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;
	max-width:920px;margin:0 auto;padding:36px 20px 80px;align-items:start}
.plyt > main{min-width:0}

.spine{position:sticky;top:76px;align-self:start}
.spine .cap{font-size:11.5px;color:var(--ink2);letter-spacing:.14em;margin:0 0 8px 18px}
.spine a{display:flex;align-items:baseline;gap:9px;padding:6px 12px 6px 15px;
	border-left:3px solid transparent;color:var(--ink2);font-size:13.5px;text-decoration:none;
	border-radius:0 8px 8px 0;transition:background .15s,color .15s}
.spine a .no{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.spine a:hover{color:var(--red2)}
.spine a.active{border-left-color:var(--red);background:var(--red-soft);color:var(--red2);font-weight:600}
.spine a.active .no{color:var(--red)}
.spine .dl{margin:14px 0 0 18px;font-size:12px;color:var(--ink2)}

/* A chapter's head: the number is the hierarchy signal these pages lacked, because every
   card heading was the same 15px as the body text around it. */
.chapter{scroll-margin-top:90px}
.chapter + .chapter{margin-top:30px}
.ch-head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;
	padding-bottom:8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ch-head .no{font-family:var(--mono);font-size:12px;color:var(--brass-ink);letter-spacing:.06em}
.ch-head h2{font-size:19px;color:var(--oxd);margin:0;line-height:1.4;font-weight:600}
.ch-head .en{font-size:12px;color:var(--ink2);letter-spacing:.06em}

/* The action a chapter implies, carried at its foot — the dossier's `ch-actions`
   contract, so a reader leaves a chapter by the door it opens rather than by scrolling. */
.ch-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding-top:11px;
	border-top:1px dashed var(--line)}
.ch-actions a{font-size:13.5px;color:var(--ox);text-decoration:none}
.ch-actions a:hover{text-decoration:underline}

/* Save control. Same storage and same contract as the dossier's and the rankings rows'. */
.p-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 22px}
.p-btn{display:inline-flex;align-items:center;gap:2px;font-size:14px;line-height:1;
	padding:9px 15px;border-radius:99px;border:1px solid var(--line);background:var(--card);
	color:var(--ox);cursor:pointer;text-decoration:none;font-family:inherit}
.p-btn:hover{border-color:var(--brass)}
.p-btn[aria-pressed="true"]{background:var(--red-soft);border-color:var(--red);color:var(--red2)}
.p-scope{flex-basis:100%;font-size:12.5px;color:var(--ink2);margin:0;line-height:1.7}

@media (max-width:980px){
	.plyt{display:block;max-width:680px;padding:28px 16px 64px}
	/* On a phone the rail becomes a scrolling row of pills, pinned under the header —
	   the same treatment the dossier uses, so the two pages do not teach a reader two
	   different navigations. */
	.spine{position:sticky;top:56px;display:flex;gap:6px;overflow-x:auto;background:var(--paper);
		padding:10px 0;margin:0 0 14px;z-index:40;-webkit-overflow-scrolling:touch}
	.spine .cap,.spine .dl{display:none}
	.spine a{border-left:none;border:1px solid var(--line);border-radius:99px;padding:5px 13px;
		white-space:nowrap;background:var(--card);flex:0 0 auto}
	.spine a.active{background:var(--red);color:#fff;border-color:var(--red)}
	.spine a.active .no{color:#E9D8C6}
	.ch-head h2{font-size:17px}
}