/* =====================================================================
   RESULTS: Academic Results Archive (#record), 25 Sep 2026.
   Third pass, to the owner's second reference ("still not premium, do better"):
   real archival photographs in navy-and-gold duotone behind the header (the 1960 gate)
   and down the left (the creeper-covered 1980s office), an open year list on a gold rule,
   gold year numerals, a scalloped certificate frame and trophy medallion, figure tiles,
   classic ruled tables. Page-only; loaded by Results.html after oa-system.css.
   Without JS every session shows, stacked; oa-results.js adds .ra-on.
   ===================================================================== */
.ra-band{ --ra-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); --ra-grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  --ra-ink:#16243F; --ra-brown:#8A6414; --ra-line:#E4D3A8; --ra-gold:#C9A84C;
  position:relative; padding-top:clamp(70px,7.5vw,116px); padding-bottom:clamp(64px,7vw,108px);
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(201,168,76,.10), rgba(201,168,76,0) 60%),
    linear-gradient(180deg,#0F1B31 0%,#0B1426 100%); }
/* clip, not hidden: overflow:hidden would stop the year list from staying pinned */
.ra-band{ overflow:clip; }
@supports not (overflow:clip){ .ra-band{ overflow:hidden; } }
.ra-band::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background-image:var(--ra-grain); background-size:220px 220px; opacity:.6; }
.ra-band .wrap.ra-wrap{ max-width:1420px; position:relative; z-index:1; }

/* real archival photographs, duotoned navy to old gold, melting into the band */
.ra-deco{ position:absolute; top:0; right:0; width:min(62%,1000px); height:620px; pointer-events:none; z-index:0; }
.ra-deco img{ width:100%; height:100%; object-fit:cover; object-position:40% 18%; opacity:.62;
  -webkit-mask-image:radial-gradient(115% 105% at 88% 0%, #000 30%, rgba(0,0,0,.55) 52%, transparent 76%);
          mask-image:radial-gradient(115% 105% at 88% 0%, #000 30%, rgba(0,0,0,.55) 52%, transparent 76%); }
.ra-deco::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0F1B31 0%,rgba(15,27,49,.55) 32%,rgba(15,27,49,0) 60%); }
.ra-deco-l{ position:absolute; left:0; top:300px; width:min(26%,420px); height:900px; pointer-events:none; z-index:0; }
.ra-deco-l img{ width:100%; height:100%; object-fit:cover; object-position:30% 40%; opacity:.26;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%), linear-gradient(180deg,transparent 0,#000 18%,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%), linear-gradient(180deg,transparent 0,#000 18%,#000 70%,transparent 100%); mask-composite:intersect; }
.ra-motto{ position:absolute; top:clamp(34px,4vw,60px); right:28px; padding-left:16px; border-left:1px solid rgba(201,168,76,.55); }
.ra-motto-t{ display:block; font:600 13px/1.75 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:#E3C77E; }
.ra-motto::after{ content:""; display:block; width:34px; height:1px; margin-top:12px; background:var(--ra-gold); }

/* ---- header ---- */
.ra-head{ max-width:960px; }
.ra-kicker{ display:flex; align-items:center; gap:16px; font:600 13px/1.2 var(--font-ui); letter-spacing:.34em; text-transform:uppercase; color:#E3C77E; }
.ra-kicker::after{ content:""; width:72px; height:1px; background:linear-gradient(90deg,var(--ra-gold),rgba(201,168,76,0)); }
.ra-title{ margin:16px 0 0; font:600 clamp(42px,4.6vw,70px)/1.02 var(--font-display); letter-spacing:-.015em; color:#FFFDF7; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.ra-gold{ color:#E3C06A; background:linear-gradient(180deg,#F4DC92 0%,#D9B45A 50%,#AE8633 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ra-lede{ margin:16px 0 0; font:400 clamp(17px,1.4vw,20px)/1.5 var(--font-display); color:#E8E1D1; max-width:52ch; }
/* the rule under the header, running into the View-by filter */
.ra-bar{ display:flex; align-items:center; gap:0; margin-top:clamp(22px,2.4vw,30px); }
.ra-bar-line{ flex:1; height:1px; background:linear-gradient(90deg,rgba(201,168,76,.55),rgba(201,168,76,.28)); }
.ra-view{ flex:none; display:flex; align-items:center; gap:10px; padding-left:24px; }
.ra-view[hidden]{ display:none; }
.ra-view-l{ font:500 14px/1 var(--font-ui); color:#E8E1D1; padding-right:8px; white-space:nowrap; }
.ra-vb{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 24px;
  border:1px solid rgba(232,225,209,.42); border-radius:5px; font:500 14px/1 var(--font-ui); color:#F3EFE6; white-space:nowrap; background:rgba(11,20,38,.55);
  transition:background .2s,border-color .2s,color .2s; }
.ra-vb:hover{ border-color:rgba(227,199,126,.8); }
.ra-vb.is-on{ background:linear-gradient(180deg,#EDD187,#D4B15B 55%,#B8913B); border-color:#E6C878; color:var(--ra-ink); font-weight:600; box-shadow:0 6px 18px -8px rgba(201,168,76,.6); }
.ra-vb:focus-visible{ outline:2px solid #E3C77E; outline-offset:3px; }

/* ---- layout ---- */
.ra-grid{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(28px,3vw,44px); align-items:stretch; }

/* ---- the year list: open, on a gold rule ---- */
.ra-side{ position:relative; padding-right:clamp(18px,2vw,30px); border-right:1px solid rgba(201,168,76,.4); }
.ra-side[hidden]{ display:none; }
.ra-side-in{ position:sticky; top:calc(var(--header-h,84px) + 20px); padding-top:30px; }
.ra-side-h{ display:flex; align-items:center; gap:14px; margin:0 0 22px 2px; font:600 12.5px/1 var(--font-ui); letter-spacing:.3em; text-transform:uppercase; color:#E3C77E; }
.ra-side-h::after{ content:""; width:16px; height:1px; background:var(--ra-gold); }
.ra-dec{ position:relative; }
.ra-dec-h{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:16px; width:100%; padding:10px 6px 10px 0;
  font:500 22px/1.2 var(--font-display); color:#EFD68E; }
.ra-dec-h:focus-visible{ outline:2px solid #E3C77E; outline-offset:2px; border-radius:4px; }
.ra-dot{ position:relative; flex:none; width:17px; height:17px; border:2px solid #D9B65C; border-radius:50%; background:#0F1B31; z-index:1; }
.ra-dot::after{ content:""; position:absolute; inset:3.5px; border-radius:50%; background:#E3C77E; }
.ra-chev{ width:12px; height:8px; margin-left:auto; color:#E3C77E; transform:rotate(180deg); transition:transform .25s ease; }
.ra-dec.is-collapsed .ra-chev{ transform:none; }
.ra-dec.is-collapsed .ra-years{ display:none; }
.ra-years{ position:relative; list-style:none; margin:4px 0 12px; padding:0; }
.ra-years::before, .ra-dec + .ra-dec::before{ content:""; position:absolute; left:8px; width:1px; background:rgba(201,168,76,.42); }
.ra-years::before{ top:-10px; bottom:-12px; }
.ra-dec + .ra-dec::before{ top:-12px; height:24px; }
.ra-years li{ position:relative; padding-left:32px; }
.ra-years li + li{ margin-top:1px; }
.ra-years li::before{ content:""; position:absolute; left:6px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:#D9B65C; z-index:1; }
.ra-years li.is-cur::before{ left:-1px; width:19px; height:19px; margin-top:-9.5px; background:radial-gradient(circle,#FFE9A8 0 3px,#E3C06A 3.5px 6px,rgba(227,192,106,.25) 6.5px); box-shadow:0 0 14px rgba(227,192,106,.6); }
.ra-y{ display:block; padding:8px 16px; border-radius:3px; font:400 17px/1.2 var(--font-display); color:#E9E3D6; text-decoration:none; letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums; transition:background .2s,color .2s; }
.ra-y:hover{ background:rgba(255,255,255,.06); color:#fff; }
.ra-y[aria-current="true"]{ background:linear-gradient(90deg,#E9CB7A 0%,#CFA94F 70%,#C29C45 100%); color:var(--ra-ink); font-weight:600; box-shadow:0 8px 22px -12px rgba(201,168,76,.8); }
.ra-y.is-off{ opacity:.3; pointer-events:none; }
.ra-y:focus-visible{ outline:2px solid #E3C77E; outline-offset:2px; }

/* ---- the results card: an ivory certificate with a fine inner frame ---- */
.ra-card{ position:relative; min-width:0; margin-top:30px; color:var(--ra-ink); border-radius:6px; padding:clamp(28px,3.2vw,48px) clamp(24px,3.4vw,52px) clamp(20px,2.4vw,32px);
  background:var(--ra-grain-soft), linear-gradient(180deg,#FCF8EE 0%,#F7F0DF 100%); background-size:220px 220px, auto;
  border:1px solid rgba(201,168,76,.6); box-shadow:0 44px 90px -40px rgba(0,0,0,.8); }
.ra-card::before{ content:""; position:absolute; inset:9px; border:1px solid rgba(201,168,76,.34); border-radius:4px; pointer-events:none; }
.ra-band .ra-card h3, .ra-band .ra-card h4{ color:var(--ra-ink); }
.ra-panel[hidden], .ra-class[hidden]{ display:none; }
.ra-panel + .ra-panel{ margin-top:44px; padding-top:40px; border-top:1px solid rgba(201,168,76,.5); }
.ra-on .ra-panel + .ra-panel{ margin-top:0; padding-top:0; border-top:0; }
.ra-on .ra-panel:not([hidden]){ animation:ra-in .4s ease both; }
@keyframes ra-in{ from{ opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion:reduce){ .ra-on .ra-panel:not([hidden]){ animation:none; } }

.ra-ph{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px 36px; align-items:center; padding-bottom:clamp(20px,2.2vw,28px); border-bottom:1px solid rgba(201,168,76,.45); }
.ra-ph-k{ display:flex; align-items:center; gap:14px; margin:0; font:600 12.5px/1 var(--font-ui); letter-spacing:.32em; text-transform:uppercase; color:var(--ra-brown); }
.ra-ph-k::before{ content:""; width:24px; height:1px; background:var(--ra-gold); }
.ra-yr{ margin:10px 0 6px; font:600 clamp(56px,5.4vw,86px)/1 var(--font-display); letter-spacing:-.015em; font-variant-numeric:lining-nums;
  color:#8A5E16; background:linear-gradient(180deg,#B98A2C 0%,#94661A 55%,#6E4A0E 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-bottom:4px; }
.ra-band .ra-card h3.ra-yr{ color:#8A5E16; }
.ra-ph-sub{ margin:0; font:400 clamp(18px,1.5vw,21px)/1.4 var(--font-display); color:#243152; }
.ra-ph-x{ margin:6px 0 0; font-size:14px; color:var(--text-soft); }

/* the highlight: a scalloped certificate frame with a trophy medallion */
.ra-hl{ display:flex; align-items:center; gap:clamp(16px,1.8vw,24px); justify-self:end; width:100%; max-width:580px; min-width:0; box-sizing:border-box;
  border:22px solid transparent; border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M11 1.5H49A9.5 9.5 0 0 0 58.5 11V49A9.5 9.5 0 0 0 49 58.5H11A9.5 9.5 0 0 0 1.5 49V11A9.5 9.5 0 0 0 11 1.5Z' fill='%23FBF4E2' stroke='%23C9A84C' stroke-width='1.3'/%3E%3Cpath d='M14 6H46A8 8 0 0 0 54 14V46A8 8 0 0 0 46 54H14A8 8 0 0 0 6 46V14A8 8 0 0 0 14 6Z' fill='none' stroke='%23C9A84C' stroke-opacity='.5' stroke-width='.9'/%3E%3C/svg%3E") 22 fill / 22px stretch; padding:4px clamp(4px,1vw,12px); }
.ra-medal{ flex:none; display:grid; place-items:center; width:clamp(64px,5.4vw,86px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#FFF9EA 0%,#F6E9C6 70%,#EFDDB0 100%); border:1px solid #D9BE7C;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.55), inset 0 0 0 6px rgba(201,168,76,.35), 0 8px 18px -10px rgba(138,100,20,.5); }
.ra-trophy{ width:52%; height:auto; }
.ra-hl-n{ flex:none; font:600 clamp(60px,5.8vw,98px)/.9 var(--font-display); letter-spacing:-.02em; font-variant-numeric:lining-nums;
  color:#8A5E16; background:linear-gradient(180deg,#B98A2C 0%,#94661A 55%,#6E4A0E 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-bottom:6px; }
.ra-hl-t{ display:flex; flex-direction:column; min-width:0; }
.ra-hl-s{ font:400 clamp(17px,1.45vw,21px)/1.25 var(--font-display); color:#8A6414; }
.ra-hl-b{ font:500 clamp(20px,1.85vw,27px)/1.2 var(--font-display); color:#7C5610; }
.ra-hl-c{ margin-top:10px; font:600 11.5px/1.4 var(--font-ui); letter-spacing:.3em; text-transform:uppercase; color:#3A4561; text-wrap:balance; }

/* ---- a class ---- */
.ra-class{ padding:clamp(20px,2.2vw,28px) 0 clamp(8px,1vw,12px); }
.ra-class + .ra-class{ border-top:1px solid rgba(201,168,76,.3); }
.ra-ch{ display:block; }
.ra-cls{ display:flex; align-items:center; gap:16px; margin:0; font:600 15.5px/1.2 var(--font-display); letter-spacing:.3em; text-transform:uppercase; color:var(--ra-ink); }
.ra-cls::before{ content:""; flex:none; width:24px; height:1px; background:var(--ra-gold); }
.ra-cnote{ margin:8px 0 0 40px; font:400 16px/1.45 var(--font-display); color:#3A4561; }
/* figures as tiles */
/* one row for up to six figures; seven or more split into two even rows (--cols is set per class) */
.ra-stats{ display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:12px; margin:16px 0 0 40px; }
.ra-st{ min-width:0; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding:14px 16px 14px 14px; min-height:74px;
  background:rgba(255,252,244,.85); border:1px solid var(--ra-line); border-radius:4px; }
.ra-ic{ grid-row:1 / 3; width:32px; height:32px; color:#B08A33; }
.ra-ic *{ stroke-width:1.25; }
.ra-st dd{ grid-column:2; grid-row:1; margin:0; font:600 24px/1 var(--font-display); color:var(--ra-ink); font-variant-numeric:lining-nums; }
.ra-st dt{ grid-column:2; grid-row:2; margin-top:5px; font:400 13.5px/1.25 var(--font-ui); color:#4E5670; }
.ra-subj{ margin:14px 0 0 40px; font:400 15px/1.55 var(--font-ui); color:#3A4561; }

/* names, four or fewer: position cards */
.ra-pcs{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px 18px; margin:16px 0 0 40px; padding:0; }
.ra-pc{ display:flex; align-items:center; gap:clamp(16px,1.8vw,26px); min-height:70px; padding:12px clamp(16px,2vw,28px); background:rgba(255,252,244,.9); border:1px solid var(--ra-line); border-radius:4px; }
.ra-pc-p{ flex:none; display:flex; flex-direction:column; align-items:center; min-width:70px; padding-right:clamp(16px,1.8vw,24px); border-right:1px solid #D9C38E; }
.ra-pc-p b{ font:600 26px/1 var(--font-display); color:#94661A; font-variant-numeric:lining-nums; }
.ra-pc-p span{ margin-top:5px; font:600 10.5px/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:#3A4561; }
.ra-pc-n{ flex:1; min-width:0; }
.ra-pc-n .ra-nm{ display:block; font:400 20px/1.25 var(--font-display); color:var(--ra-ink); }
.ra-pc-n .ra-s{ display:block; margin-top:4px; font:600 10px/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase; color:#8C7A4A; }
.ra-pc-pct{ flex:none; font:500 21px/1 var(--font-display); color:var(--ra-ink); font-variant-numeric:lining-nums; }

/* names, five or more: two ruled tables */
.ra-th{ display:flex; align-items:center; gap:16px; margin:24px 0 12px; font:600 12.5px/1 var(--font-ui); letter-spacing:.3em; text-transform:uppercase; color:var(--ra-ink); }
.ra-th::before{ content:""; width:24px; height:1px; background:var(--ra-gold); }
.ra-orn{ display:none; }
.ra-tables{ position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; margin-left:40px; align-items:start; }
.ra-tables::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(201,168,76,.4); }
.ra-t{ width:100%; table-layout:fixed; border-collapse:collapse; border:1px solid var(--ra-line); background:rgba(255,252,244,.9); font-variant-numeric:lining-nums tabular-nums; }
.ra-t th{ padding:10px 16px; background:#F3E7C8; font:500 12.5px/1.2 var(--font-ui); color:#3A4561; text-align:left; border-bottom:1px solid var(--ra-line); }
.ra-t th.ra-tpct{ text-align:left; }
.ra-t .ra-tp-h{ width:22%; }
.ra-t td{ padding:8px 16px; border-top:1px solid #EFE3C4; font:400 16.5px/1.35 var(--font-display); color:var(--ra-ink); vertical-align:middle; }
.ra-t tr:first-child td{ border-top:0; }
.ra-t .ra-tp{ width:22%; background:#F8EDD3; font:600 17px/1 var(--font-display); color:#94661A; white-space:nowrap; }
.ra-t .ra-tpct{ width:28%; white-space:nowrap; }
.ra-t .ra-s{ margin-left:8px; font:600 9.5px/1 var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:#8C7A4A; white-space:nowrap; }

/* newer / older, joined by a rule */
.ra-step{ display:flex; align-items:center; gap:22px; margin-top:clamp(18px,2vw,26px); padding-top:16px; border-top:1px solid rgba(201,168,76,.4); }
.ra-step[hidden]{ display:none; }
.ra-step-line{ flex:1; height:1px; background:linear-gradient(90deg,rgba(201,168,76,.15),rgba(201,168,76,.6),rgba(201,168,76,.15)); }
.ra-go{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:12px; min-height:44px; font:400 17px/1.2 var(--font-display); color:var(--ra-ink); white-space:nowrap; }
.ra-go b{ font:400 17px/1.2 var(--font-display); color:#3A4561; margin-right:2px; }
.ra-go:hover .ra-go-l{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--ra-gold); }
.ra-go:focus-visible{ outline:2px solid #B08A33; outline-offset:3px; border-radius:2px; }
.ra-go[disabled]{ opacity:.35; cursor:default; }

/* ---- narrower desktops and tablets ---- */
@media (max-width:1280px){
  .ra-stats{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .ra-ph{ grid-template-columns:minmax(0,1fr); }
  .ra-hl{ justify-self:start; max-width:600px; }
}
@media (max-width:1100px){
  .ra-grid{ grid-template-columns:210px minmax(0,1fr); gap:24px; }
  .ra-motto{ display:none; }
}
@media (max-width:900px){
  .ra-deco{ width:100%; height:420px; }
  .ra-deco img{ opacity:.34; }
  .ra-deco-l{ display:none; }
  .ra-bar{ display:block; }
  .ra-bar-line{ display:block; margin-bottom:18px; }
  .ra-view{ padding-left:0; overflow-x:auto; scrollbar-width:none; }
  .ra-view::-webkit-scrollbar{ display:none; }
  .ra-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  /* the year list becomes a swipeable row */
  .ra-side{ padding:0; border:0; margin:18px -28px 0; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 30px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 30px),transparent 100%); }
  .ra-side::-webkit-scrollbar{ display:none; }
  .ra-side-in{ position:static; display:flex; gap:8px; width:max-content; padding:2px 28px 6px; }
  .ra-side-h, .ra-dec-h{ display:none; }
  .ra-dec, .ra-years, .ra-dec.is-collapsed .ra-years{ display:contents; }
  .ra-years::before, .ra-dec + .ra-dec::before, .ra-years li::before{ display:none; }
  .ra-years li{ padding:0; flex:none; scroll-snap-align:center; }
  .ra-years li + li{ margin:0; }
  .ra-y{ padding:10px 16px; border:1px solid rgba(201,168,76,.38); border-radius:999px; font-size:16px; white-space:nowrap; }
  .ra-card{ margin-top:16px; }
  .ra-cnote, .ra-subj, .ra-stats, .ra-pcs, .ra-tables{ margin-left:0; }
}
@media (max-width:640px){
  .ra-view{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; overflow:visible; }
  .ra-view-l{ display:none; }
  .ra-vb{ min-height:42px; padding:0 4px; font-size:13px; text-align:center; }
  .ra-card{ padding:26px 18px 16px; }
  .ra-card::before{ inset:6px; }
  .ra-yr{ font-size:52px; }
  .ra-hl{ max-width:none; gap:12px; border-width:16px; border-image-width:16px; padding:2px; }
  .ra-medal{ width:54px; }
  .ra-hl-n{ font-size:52px; }
  .ra-hl-b{ font-size:18.5px; }
  .ra-hl-s{ font-size:15.5px; }
  .ra-hl-c{ letter-spacing:.2em; }
  .ra-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ra-st{ padding:12px; min-height:0; column-gap:10px; }
  .ra-ic{ width:28px; height:28px; }
  .ra-st dd{ font-size:21px; }
  .ra-pcs{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .ra-pc{ padding:12px 14px; gap:14px; }
  .ra-pc-p{ min-width:58px; padding-right:14px; }
  .ra-pc-p b{ font-size:22px; }
  .ra-pc-n .ra-nm{ font-size:18px; }
  .ra-pc-pct{ font-size:18px; }
  .ra-tables{ grid-template-columns:minmax(0,1fr); gap:0; }
  .ra-tables::before{ display:none; }
  .ra-tables .ra-t + .ra-t{ border-top:0; }
  .ra-tables .ra-t + .ra-t thead{ display:none; }
  .ra-t th, .ra-t td{ padding:9px 10px; }
  .ra-t td{ font-size:16px; }
  .ra-step{ gap:10px; }
  .ra-go, .ra-go b{ font-size:15px; }
}
@media (max-width:400px){ .ra-medal{ display:none; } .ra-step{ justify-content:space-between; } .ra-step-line{ display:none; } .ra-go{ white-space:normal; font-size:14px; } .ra-go b{ font-size:14px; } }

/* =====================================================================
   RESULT DAY (.result-films), 25 Sep 2026. The owner: "too much navy after the hero; the reel
   section should have beautiful cream cards". Warm parchment ground, each film in an ivory
   card with a fine gold inner frame; a gold hairline keeps it apart from the ivory Class XII
   section below, so the two light sections never merge into one.
   ===================================================================== */
.rf-cream{ position:relative; overflow:clip;
  background:radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%), linear-gradient(180deg,#F4ECDB 0%,#EFE5D0 100%);
  border-bottom:1px solid rgba(201,168,76,.45); }
.rf-cream .section-head h2{ color:var(--navy-deep); }
.rf-cream .section-head .lede{ color:#4A5470; }
.rf-cream .rf-grid{ gap:clamp(22px,3vw,40px); }
.rf-cream .rf-item{ position:relative; flex:0 1 clamp(300px,36vw,460px); padding:14px 14px 20px; background:linear-gradient(180deg,#FFFDF7,#FBF5E8);
  border:1px solid rgba(201,168,76,.55); border-radius:8px; box-shadow:0 34px 60px -36px rgba(22,36,63,.45), 0 1px 0 #fff inset; }
.rf-cream .rf-item::before{ content:""; position:absolute; inset:6px; border:1px solid rgba(201,168,76,.28); border-radius:5px; pointer-events:none; }
.rf-cream .vf-btn.vf-rf, .rf-cream .rf-video{ position:relative; z-index:1; border-radius:4px; box-shadow:0 10px 26px -12px rgba(22,36,63,.45); }
.rf-cream .rf-video{ height:auto; width:100%; }
.rf-cream .rf-cap{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-top:16px; letter-spacing:0; text-transform:none; }
.rf-cream .rf-cap-k{ display:flex; align-items:center; gap:10px; font:600 11.5px/1 var(--font-ui); letter-spacing:.28em; text-transform:uppercase; color:var(--gold-dark); }
.rf-cream .rf-cap-k::before, .rf-cream .rf-cap-k::after{ content:""; width:18px; height:1px; background:var(--gold); }
.rf-cream .rf-cap-t{ font:500 20px/1.25 var(--font-display); color:var(--navy-deep); }
/* Phones and small tablets (owner, 25 Sep 2026: "on mobile the reels should be horizontal,
   scrollable"): one swipeable row instead of two cards stacked. The next card peeks in from the
   right so the swipe is obvious; oa-results.js marks the row .is-scroll when it overflows, which
   shows two gold dots under it. Auto margins centre the pair whenever both fit. */
@media (max-width:760px){
  .result-films.rf-cream .rf-grid{ flex-wrap:nowrap; justify-content:flex-start; align-items:stretch; gap:16px;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    margin:0 -28px; padding:6px 28px 34px; scroll-padding-inline:28px; scrollbar-width:none; }
  .result-films.rf-cream .rf-grid::-webkit-scrollbar{ display:none; }
  .result-films.rf-cream .rf-item{ flex:0 0 min(78%,320px); max-width:none; padding:10px 10px 16px; scroll-snap-align:start; }
  .result-films.rf-cream .rf-item:first-child{ margin-left:auto; }
  .result-films.rf-cream .rf-item:last-child{ margin-right:auto; }
  .rf-cream .rf-cap{ margin-top:14px; }
  .rf-cream .rf-cap-t{ font-size:18px; }
}
.rf-dots{ display:none; justify-content:center; gap:8px; margin:-14px 0 0; }
.rf-grid.is-scroll + .rf-dots{ display:flex; }
.rf-dots i{ width:22px; height:3px; border-radius:2px; background:rgba(22,36,63,.16); transition:background-color .25s ease; }
.rf-dots i.on{ background:var(--gold); }
@media (prefers-reduced-motion:reduce){ .rf-dots i{ transition:none; } }

/* =====================================================================
   FACES FROM THE SCHOOL'S OWN RESULT POSTERS (owner, 26 Sep 2026: "add the photo of other toppers").
   Each face was cut from the poster the school printed that year, straight above the printed name.
   Position cards get a small portrait; tables a thumbnail; the rest of that year's poster toppers
   sit in a face wall (.ra-fw) that folds after two rows.
   ===================================================================== */
.ra-pc-ph{ flex:none; width:54px; aspect-ratio:4/5; border-radius:3px; overflow:hidden; background:#EFE4C9; border:1px solid #D9C38E; box-shadow:0 8px 16px -10px rgba(22,36,63,.5); }
.ra-pc-ph, .ra-av, .ra-fw-ph{ position:relative; }
.ra-pc-ph img, .ra-av img, .ra-fw-ph img{ position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.ra-pc-ph--none, .ra-av--none{ background:linear-gradient(160deg,#F4EBD6,#E9DCBC); box-shadow:none; }
.ra-who{ display:flex; align-items:center; gap:12px; min-width:0; }
.ra-av{ flex:none; width:40px; aspect-ratio:4/5; border-radius:2px; overflow:hidden; background:#EFE4C9; border:1px solid #E0CD9C; }
.ra-t td .ra-who .ra-s{ margin-left:8px; }
.ra-fw{ list-style:none; margin:0 0 0 40px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:18px 12px; }
.ra-fw-i{ text-align:center; min-width:0; }
.ra-fw-ph{ display:block; width:100%; max-width:80px; margin:0 auto; aspect-ratio:4/5; border-radius:3px; overflow:hidden; background:#EFE4C9; border:1px solid #D9C38E; box-shadow:0 10px 18px -12px rgba(22,36,63,.5); }
.ra-fw-n{ display:block; margin-top:8px; font:500 14.5px/1.2 var(--font-display); color:var(--ra-ink); overflow-wrap:break-word; }
.ra-fw-p{ display:block; margin-top:3px; font:600 12px/1 var(--font-ui); color:#94661A; font-variant-numeric:lining-nums tabular-nums; }
.ra-fw-more{ margin:16px 0 0 40px; }
.ra-fw-more > .ra-fw{ margin:18px 0 0; }
.ra-fw-more summary{ list-style:none; display:inline-flex; align-items:center; min-height:42px; padding:0 18px; border:1px solid var(--ra-line); border-radius:999px;
  background:rgba(255,252,244,.9); font:600 13px/1 var(--font-ui); letter-spacing:.04em; color:var(--ra-ink); cursor:pointer; }
.ra-fw-more summary::-webkit-details-marker{ display:none; }
.ra-fw-more summary:focus-visible{ outline:2px solid var(--gold-dark,#886715); outline-offset:3px; }
.ra-fw-more .ra-fw-c, .ra-fw-more[open] .ra-fw-o{ display:none; }
.ra-fw-more[open] .ra-fw-c{ display:inline; }
@media (max-width:900px){ .ra-fw, .ra-fw-more{ margin-left:0; } }
@media (max-width:640px){
  .ra-fw{ grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:14px 10px; }
  .ra-fw-n{ font-size:13.5px; }
  .ra-pc-ph{ width:46px; }
  .ra-av{ width:34px; }
  .ra-who{ gap:10px; }
}

/* =====================================================================
   THE PAINTED BOARD OF HONOUR YEARS (owner, 26 Sep 2026: the school's result boards, back to 1974).
   Those years list marks as painted and "Distinction" beside merit positions, so the result
   column is wider there, and the 2017-18 Class XII top distinctions sit in a fold.
   ===================================================================== */
.ra-t.ra-t--w .ra-tp-h, .ra-t.ra-t--w .ra-tp{ width:31%; }
.ra-td{ margin-top:22px; }
.ra-td > .ra-tables{ margin-top:18px; }
.ra-t th.ra-tm{ white-space:normal; line-height:1.15; }
/* with fifty years in the list, a short year would otherwise stretch into an empty card */
@media (min-width:761px){ .ra-grid > .ra-card{ align-self:start; } }
@media (max-width:760px){
  .ra-t.ra-t--w .ra-tp-h, .ra-t.ra-t--w .ra-tp{ width:34%; padding-left:8px; padding-right:6px; }
  .ra-t.ra-t--w .ra-tp{ font-size:14.5px; }
  .ra-t .ra-tm{ width:22%; padding-left:6px; padding-right:8px; }
  .ra-td > .ra-tables{ margin-top:14px; }
}

/* Score cards: never let the name spill out of the card */
.ra-pcs{ container:pcs / inline-size; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.ra-pcs--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.ra-pc{ gap:14px; padding:12px 16px; }
.ra-pc-p{ min-width:60px; padding-right:14px; }
.ra-pc-p b{ font-size:24px; }
.ra-pc-n .ra-nm{ font-size:19px; overflow-wrap:break-word; }
@container pcs (max-width:760px){
  .ra-pc:has(.ra-pc-pct){ display:grid; grid-template-columns:auto auto minmax(0,1fr); grid-template-areas:"p ph n" "p ph pct"; column-gap:14px; row-gap:0; }
  .ra-pc:has(.ra-pc-pct):not(:has(.ra-pc-ph)){ grid-template-columns:auto minmax(0,1fr); grid-template-areas:"p n" "p pct"; }
  .ra-pc:has(.ra-pc-pct) .ra-pc-p{ grid-area:p; }
  .ra-pc:has(.ra-pc-pct) .ra-pc-ph{ grid-area:ph; }
  .ra-pc:has(.ra-pc-pct) .ra-pc-n{ grid-area:n; align-self:end; }
  .ra-pc-pct{ grid-area:pct; align-self:start; margin-top:5px; font-size:17px; color:#94661A; }
}
@container pcs (max-width:400px){
  .ra-pc{ gap:12px; padding:12px; }
  .ra-pc:has(.ra-pc-pct){ column-gap:12px; }
  .ra-pc-p{ min-width:0; padding-right:12px; }
  .ra-pc-p b{ font-size:21px; }
  .ra-pc-p span{ letter-spacing:.14em; }
  .ra-pc-n .ra-nm{ font-size:17.5px; }
  .ra-pc-ph{ width:44px; }
}
@container pcs (max-width:280px){
  .ra-pc:has(.ra-pc-ph){ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ph n" "ph p" "ph pct"; column-gap:12px; row-gap:0; align-items:center; }
  .ra-pc:has(.ra-pc-ph) .ra-pc-ph{ grid-area:ph; }
  .ra-pc:has(.ra-pc-ph) .ra-pc-n{ grid-area:n; align-self:end; }
  .ra-pc:has(.ra-pc-ph) .ra-pc-p{ grid-area:p; flex-direction:row; align-items:baseline; gap:6px; border-right:0; padding-right:0; margin-top:4px; justify-self:start; }
  .ra-pc:has(.ra-pc-ph) .ra-pc-p span{ margin-top:0; }
  .ra-pc:has(.ra-pc-ph) .ra-pc-p b{ font-size:18px; }
  .ra-pc:has(.ra-pc-ph) .ra-pc-pct{ margin-top:3px; font-size:15px; }
}
@media (max-width:400px){
  .ra-st{ grid-template-columns:minmax(0,1fr); column-gap:0; }
  .ra-ic{ display:none; }
  .ra-st dd, .ra-st dt{ grid-column:1; }
}