/* =========================================================================
   ODEL — Open, Distance and E-Learning
   =========================================================================
   Loaded after mru.css, so it inherits every token, button and card the rest
   of the site uses. What it replaces is the chrome: the header, the menu, the
   footer, and the rhythm of a page.

   The section has to read as MRU — navy stays, the crest stays — so its
   distinctiveness is structural rather than chromatic. Where the main site is
   a prospectus, this is a service: a compact bar instead of a mega menu, a
   flatter surface, tighter vertical rhythm, and one extra accent used nowhere
   else on the site so a reader can feel the boundary without being told.

   --od: a teal drawn to sit beside the navy rather than compete with it.
   Measured on white at 4.9:1, so it carries body text, not just decoration.
   -------------------------------------------------------------------- */
:root{
  --od:#0E6E77;
  --od-d:#095059;
  --od-l:#12909C;
  --od-soft:#E8F4F5;
  --od-soft-2:#D3E9EB;
}

body.odel{background:var(--bg);}

/* Skip link. The rest of the site has none — a gap rather than a standard to
   copy — and this section's header carries seven destinations before the
   content starts, which is exactly the case it exists for. Off-screen until
   focused, then a real target. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;}
.skip:focus{left:8px;top:8px;padding:11px 16px;background:var(--pri);color:#fff;
  border-radius:var(--r-sm);font-weight:600;font-size:14px;box-shadow:var(--sh-3);
  outline:3px solid var(--gold);outline-offset:2px;}

/* --- the line back to the University ---------------------------------- */
.od-tie{background:var(--pri-dd);color:rgba(255,255,255,.72);font-size:12.5px;}
.od-tie .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:36px;flex-wrap:wrap;}
.od-tie a{color:rgba(255,255,255,.78);font-weight:500;}
.od-tie a:hover{color:#fff;}
.od-tie-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;}
.od-tie-links{display:flex;gap:18px;flex-wrap:wrap;}
@media(max-width:620px){ .od-tie-links{display:none;} }

/* --- header ----------------------------------------------------------- */
.od-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);}
.od-head-in{display:flex;align-items:center;gap:22px;min-height:64px;}
.od-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.od-brand img{display:block;}
.od-brand b{display:block;font-family:var(--font-display);font-size:20px;font-weight:700;
  color:var(--pri);line-height:1.05;letter-spacing:.01em;}
.od-brand em{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--od);
  letter-spacing:.05em;text-transform:uppercase;margin-top:2px;}

.od-nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:nowrap;min-width:0;}
.od-nav a{position:relative;padding:9px 12px;border-radius:var(--r-sm);font-size:14px;
  font-weight:600;color:var(--tx2);white-space:nowrap;}
.od-nav a:hover{color:var(--od-d);background:var(--od-soft);}
.od-nav a.on{color:var(--od-d);}
.od-nav a.on::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:2.5px;
  border-radius:3px;background:var(--od);}
.od-cta{flex-shrink:0;}
.od-burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--pri);
  font-size:17px;cursor:pointer;margin-left:auto;}

.od-sheet{display:none;flex-direction:column;gap:2px;padding:10px 16px 16px;
  border-top:1px solid var(--line);background:#fff;}
.od-sheet a{padding:12px 10px;border-radius:var(--r-sm);font-size:15px;font-weight:600;color:var(--tx);}
.od-sheet a.on{color:var(--od-d);background:var(--od-soft);}
.od-sheet .btn{margin-top:8px;justify-content:center;}

/* Seven destinations plus a brand lockup plus a call to action is a lot for
   one bar. Measured across the range: at 1200px the last nav item was already
   15px over the "Start here" button, and by 981px it was 165px over it — the
   nav simply did not shrink, and nothing stopped it running underneath.
   Tighten first, then hand over to the burger while there is still room,
   rather than letting the two collide for 200px of viewport. */
@media(max-width:1280px){ .od-nav a{padding:9px 8px;font-size:13.5px;} }
@media(max-width:1150px){
  .od-nav,.od-cta{display:none;}
  .od-burger{display:flex;}
  .od-sheet:not([hidden]){display:flex;}
}

/* --- page furniture --------------------------------------------------- */
.od-hero{padding:var(--s-7) 0 var(--s-6);background:
  radial-gradient(1100px 380px at 12% -10%, var(--od-soft) 0%, transparent 62%), var(--bg);
  border-bottom:1px solid var(--line);}
.od-hero .eyebrow{color:var(--od);}
.od-hero h1{max-width:15ch;}
.od-hero p.lead{max-width:62ch;}
.od-crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--tx3);
  margin-bottom:var(--s-4);flex-wrap:wrap;}
.od-crumbs a{color:var(--tx2);font-weight:500;}
.od-crumbs a:hover{color:var(--od-d);}

/* --- the status chip -------------------------------------------------- */
/* The section's whole argument in one component: a reader can see, on every
   claim, whether it is something running today or something the Council has
   committed the University to. */
.od-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);
  white-space:nowrap;}
.od-status.is-place{background:var(--ok-soft);color:var(--ok);}
/* Built but unused sits between the other two, and must not read as either:
   not the green of something in daily use, not the gold of a paper promise. */
.od-status.is-built{background:var(--od-soft);color:var(--od-d);}
.od-status.is-committed{background:var(--gold-soft);color:var(--gold-d);}
.od-clause{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--tx3);white-space:nowrap;}

/* --- mode cards ------------------------------------------------------- */
.od-modes{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:900px){ .od-modes{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:600px){ .od-modes{grid-template-columns:minmax(0,1fr);} }

.od-mode{display:flex;flex-direction:column;gap:10px;padding:22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  transition:border-color .18s,box-shadow .18s,transform .18s;}
a.od-mode:hover{border-color:var(--od);box-shadow:var(--sh-3);transform:translateY(-2px);}
.od-mode-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.od-mode .ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:var(--od-soft);color:var(--od-d);font-size:17px;flex-shrink:0;}
.od-mode h3{font-size:17px;margin:0;color:var(--pri);}
.od-mode .od-suits{font-size:13px;color:var(--od-d);font-weight:600;line-height:1.5;}
.od-mode p{font-size:14px;color:var(--tx2);margin:0;line-height:1.6;}
.od-mode .link{margin-top:auto;padding-top:4px;}

/* --- entitlement / criteria lists ------------------------------------- */
.od-list{display:grid;gap:2px;counter-reset:od;}
.od-item{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:start;
  padding:15px 4px;border-bottom:1px solid var(--line);}
.od-item:last-child{border-bottom:0;}
.od-item::before{counter-increment:od;content:counter(od,decimal-leading-zero);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;
  color:var(--od);padding-top:2px;}
.od-item p{margin:0;font-size:14.5px;color:var(--tx);line-height:1.65;}
@media(max-width:620px){
  .od-item{grid-template-columns:26px 1fr;}
  .od-item .od-clause{grid-column:2;}
}

/* --- the note that keeps the section honest --------------------------- */
.od-note{display:flex;gap:13px;padding:16px 18px;border-radius:var(--r);
  background:var(--gold-soft);border:1px solid #F2DFBE;}
.od-note i{color:var(--gold-d);font-size:15px;margin-top:2px;}
.od-note p{margin:0;font-size:13.5px;color:#6B4A0C;line-height:1.65;}
.od-note strong{color:#4E360A;}

.od-band{background:var(--od);color:#fff;}
.od-band h2,.od-band h3{color:#fff;}
.od-band p{color:rgba(255,255,255,.86);}
.od-band .eyebrow{color:var(--od-soft-2);}

/* --- footer ----------------------------------------------------------- */
.od-foot{background:var(--pri-dd);color:rgba(255,255,255,.72);padding:var(--s-6) 0 var(--s-4);
  margin-top:var(--s-7);font-size:14px;}
.od-foot-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:40px;}
.od-foot-h{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-l);margin:0 0 12px;}
.od-foot p{color:rgba(255,255,255,.66);line-height:1.7;font-size:13.5px;max-width:56ch;}
.od-foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;}
.od-foot-cols a{display:block;color:rgba(255,255,255,.76);padding:5px 0;font-size:13.5px;}
.od-foot-cols a:hover{color:#fff;}
.od-foot-docs{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.od-foot-docs a{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.86);
  font-size:13px;font-weight:600;}
.od-foot-docs a span{color:rgba(255,255,255,.5);font-weight:500;}
.od-foot-docs a:hover{color:var(--gold-l);}
.od-foot-bar{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:var(--s-5);padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;color:rgba(255,255,255,.5);}
.od-foot-legal{display:flex;gap:18px;flex-wrap:wrap;}
.od-foot-legal a{color:rgba(255,255,255,.66);}
.od-foot-legal a:hover{color:#fff;}
@media(max-width:860px){
  .od-foot-top{grid-template-columns:minmax(0,1fr);gap:30px;}
  .od-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:520px){ .od-foot-cols{grid-template-columns:minmax(0,1fr);} }