/* The diploma uses the club's paper, ink and monogram on both faces. */
.diploma-view {width:min(100%,1050px);margin-inline:auto}
.diploma-view > header {padding-bottom:4px}
.diploma-toolbar,.diploma-view-foot {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.diploma-toolbar .diploma-turn {min-height:44px}
.diploma-state {font-size:.75rem;color:var(--quiet)}
.diploma-stage {
  --diploma-ink:#102b45;
  --diploma-paper:#fbfcfa;
  --diploma-rule:#a6bdca;
  position:relative;
  isolation:isolate;
  background:#19354b;
  padding:clamp(8px,2.2vw,23px);
  border:1px solid #2f5067;
  border-radius:10px;
  perspective:1600px;
}
.diploma-face {color:var(--diploma-ink);background:var(--diploma-paper);min-width:0;box-shadow:0 8px 22px #081d3266}
.diploma-stage[data-face="back"] .diploma-face {animation:diploma-turn .31s cubic-bezier(.22,.8,.26,1) both}
.diploma-stage[data-face="front"] .diploma-face {animation:diploma-front-turn .28s ease-out both}
@keyframes diploma-turn {from {transform:rotateY(-27deg);opacity:.76} to {transform:rotateY(0);opacity:1}}
@keyframes diploma-front-turn {from {transform:rotateY(12deg);opacity:.88} to {transform:rotateY(0);opacity:1}}
.diploma-front {
  position:relative;
  padding:clamp(9px,2vw,22px);
  background:radial-gradient(ellipse at 76% 67%,#e5edf0 0%,transparent 42%),linear-gradient(130deg,#fff 9%,#f8f8f4 100%);
}
.diploma-frame {position:relative;z-index:1;border:1px solid var(--diploma-rule);outline:1px solid #cedbe0;outline-offset:4px;padding:clamp(16px,3vw,30px)}
.diploma-brand-row,.diploma-front-foot,.diploma-back-head {display:flex;align-items:center;justify-content:space-between;gap:12px}
.diploma-brand {display:flex;align-items:center;gap:10px;min-width:0}
.diploma-brand > img {flex:none}
.diploma-wordmark {display:block;width:clamp(96px,14vw,128px);height:auto}
.diploma-brand strong {display:block;font:500 clamp(1.05rem,2.4vw,1.55rem)/1.1 var(--title);letter-spacing:-.04em}
.diploma-brand span,.diploma-label,.diploma-series span,.diploma-holder span,.diploma-back-score span {
  display:block;font:760 .62rem/1.35 var(--font);letter-spacing:.13em;text-transform:uppercase;color:var(--blue)
}
.diploma-brand span {margin-top:3px}
.diploma-series {text-align:right;flex:none}
.diploma-series strong {display:block;font:500 1.15rem/1.2 var(--title);margin-top:3px}
.diploma-front-body {display:grid;grid-template-columns:minmax(0,1fr) minmax(126px,.31fr);gap:clamp(10px,2.2vw,29px);align-items:center;padding:clamp(27px,4vw,56px) 0}
.diploma-title-area h2 {
  font:500 clamp(2.3rem,5.65vw,5.12rem)/.96 var(--title);
  margin:8px 0 0;
  letter-spacing:-.052em;
  max-width:13.5ch;
  overflow-wrap:anywhere;
}
.diploma-programme {font-size:.82rem;color:var(--quiet);margin-top:14px}
.diploma-programme > span {margin-inline:3px}
.diploma-holder {margin-top:clamp(20px,4vw,38px);border-top:1px solid var(--diploma-rule);padding-top:11px;width:min(100%,390px)}
.diploma-holder strong {display:block;font:500 clamp(1.25rem,3vw,2.05rem)/1.18 var(--title);margin-top:4px}
.diploma-detail {margin-top:5px;color:var(--quiet);font-size:.83rem;max-width:46ch}
.diploma-commendation {display:grid;justify-items:center;align-content:center;min-width:0;text-align:center;gap:5px}
.diploma-medallion {
  display:grid;place-items:center;width:clamp(76px,10vw,132px);aspect-ratio:1;border-radius:50%;margin:0 0 10px;
  background:repeating-conic-gradient(from 15deg,#9bb7c82e 0deg 1deg,transparent 1deg 3deg),linear-gradient(136deg,#fcffff 0%,#d9e7ee 48%,#f3f9fa 100%);
  border:1px solid #9eb7c7;outline:1px solid #d4e1e6;outline-offset:5px;
  box-shadow:inset 0 0 0 6px #eaf2f5,inset 0 0 0 7px #a9c2d0,0 4px 10px #55768d20;
}
.diploma-medallion img {width:46%;height:auto;border-radius:12%}
.diploma-grade {font:500 clamp(1.7rem,3.5vw,3.3rem)/1 var(--title);font-variant-numeric:tabular-nums;letter-spacing:-.06em;white-space:nowrap}
.diploma-grade small,.diploma-back-score small {font:650 .72rem var(--font);color:var(--quiet);letter-spacing:0}
.diploma-distinction {color:var(--blue);font-size:.71rem;font-weight:750}
.diploma-front-foot {border-top:1px solid var(--diploma-rule);padding-top:10px;color:var(--quiet);font-size:.69rem}
.diploma-front-foot > span:last-child {text-align:right}
.diploma-back {padding:clamp(16px,3vw,31px);background:#f8fbfb}
.diploma-back-head {border-bottom:1px solid var(--diploma-rule);padding-bottom:13px}
.diploma-back-head .diploma-brand span {margin:0 0 2px}
.diploma-back-score {text-align:right;flex:none}
.diploma-back-score > strong {font:500 clamp(1.4rem,3vw,2.1rem)/1.1 var(--title);font-variant-numeric:tabular-nums}
.diploma-back-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,3.6vw,34px);padding-top:19px}
.diploma-back-grid > section {min-width:0}
.diploma-back-grid h2 {font:500 clamp(1.22rem,2.55vw,1.68rem)/1.12 var(--title);letter-spacing:-.02em;margin:5px 0 12px}
.diploma-table {width:100%;border-collapse:collapse;font-size:.81rem;font-variant-numeric:tabular-nums}
.diploma-table thead th {text-align:left;font-size:.68rem;color:var(--quiet);background:#edf4f7}
.diploma-table th,.diploma-table td {border-bottom:1px solid var(--line);padding:7px 6px;vertical-align:middle}
.diploma-table tbody th {text-align:left;font-weight:650}
.diploma-table td:last-child,.diploma-table thead th:last-child {text-align:right}
.diploma-table td:last-child {white-space:nowrap}
.diploma-table th > small {display:block;color:var(--quiet);font-size:.72rem;font-weight:500}
.diploma-weight {display:inline-block;margin-left:3px;font-size:.66rem;color:var(--blue)}
.diploma-totals {display:flex;flex-wrap:wrap;gap:5px 13px;font-size:.74rem;margin-bottom:8px;color:var(--quiet)}
.diploma-totals strong,.diploma-day-time {color:var(--diploma-ink);font-weight:750;white-space:nowrap}
.diploma-day-dot {display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:#c3d5de;vertical-align:middle}
.diploma-day-dot.credited {background:#326080}
.diploma-note {color:var(--quiet);font-size:.72rem;margin-top:9px}
.diploma-details {font-size:.76rem;color:var(--quiet);margin-top:10px}
.diploma-details summary {min-height:38px;display:list-item;padding:8px 0;cursor:pointer;color:var(--diploma-ink);font-weight:750}
.diploma-details p + p {margin-top:5px}
.diploma-back-foot {color:var(--quiet);font-size:.72rem;border-top:1px solid var(--diploma-rule);margin-top:18px;padding-top:8px}
.diploma-view-foot > p {max-width:62ch}

@media(max-width:700px) {
  .diploma-back-grid {grid-template-columns:minmax(0,1fr)}
  .diploma-front-body {grid-template-columns:minmax(0,1fr);gap:18px;padding:24px 0}
  .diploma-title-area h2 {font-size:clamp(2rem,7.8vw,3.6rem)}
  .diploma-commendation {grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;column-gap:13px}
  .diploma-medallion {grid-row:span 3;width:60px;margin:0 0 0 5px}
}
@media(max-width:425px) {
  .diploma-brand-row {align-items:start}
  .diploma-brand > img {width:34px;height:34px}
  .diploma-brand span,.diploma-label,.diploma-series span {font-size:.53rem}
  .diploma-series span {display:none}
  .diploma-series strong {font-size:.9rem}
  .diploma-frame {padding:13px}
  .diploma-front-foot {align-items:start;font-size:.62rem}
  .diploma-back-head .diploma-brand span {display:none}
  .diploma-back-head .diploma-brand > img {width:28px;height:28px}
}
@media(prefers-reduced-motion:reduce) {
  .diploma-stage[data-face] .diploma-face {animation:none}
}

.diploma-term-line {font-size:.79rem;color:var(--quiet);margin-top:12px}
.diploma-term-line strong {color:var(--diploma-ink)}
.term-shortcut {border-top:3px solid var(--ocean)}
.term-status .row {justify-content:space-between;gap:6px 20px;font-size:.91rem}
.term-status .row strong {margin-right:4px}
.term-stages {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.term-stage {min-width:0}
.term-stage .term-weeks {padding:0;margin:13px 0 0;list-style:none}
.term-weeks li {border-top:1px solid var(--line);padding:11px 0;display:grid;justify-items:start;gap:3px}
.term-weeks li:last-child {padding-bottom:0}
.term-weeks .eyebrow {font-size:.61rem}
.term-weeks li > strong {overflow-wrap:anywhere;font-size:.92rem;line-height:1.25}
.term-weeks .button {margin-top:4px}
.term-final {background:var(--ice);border-top:3px solid var(--ocean)}
@media(max-width:920px) { .term-stages {grid-template-columns:minmax(0,1fr)} }