/* ===================================================================
   THE FULL MENU
   -------------------------------------------------------------------
   This file styles ONE thing: the sheet that opens when the Full Menu
   control in the masthead is pressed. The masthead itself and the site
   footer are not touched by anything in here, and neither is a single
   line of the navigation's markup.

   THAT LAST POINT IS THE WHOLE ARCHITECTURE, and it was learned the
   expensive way. `.navlinks` is not only the drawer. Above 1440px it IS
   the masthead's inline navigation row, and between 861px and 1440px
   js/mega.js clones `.nav-drop-panel` out of it to build the panels that
   open under the ribbon. An earlier attempt rewrote that markup into
   something prettier and silently took both of those away. So:

     · every rule below is scoped inside `@media (max-width:1440px)`,
       which is exactly the range in which a Full Menu control exists at
       all — above it there is no such button, and `.navlinks` must stay
       the nav row it has always been;
     · every rule below is scoped under `.navlinks`, so the clones
       mega.js lifts out of it are untouched;
     · nothing is deleted. The panels that were behind a chevron are
       simply all open at once, which is what a contents page is.

   Three earlier attempts were rejected, each teaching the same lesson
   from a different direction. A 500px column is a filing cabinet. Three
   columns of one type size is a sitemap. Forty pill-shaped buttons is
   forty decisions. What none of them had was AIR.

   So the design is a spacing decision:

     · the sheet is a third margin — the index never exceeds 1140px, and
       it is centred, so the eye has somewhere to rest;
     · the divisions are set in real columns, balanced, so it reads as a
       printed contents page rather than a scroll;
     · the gap BETWEEN divisions is more than twice the gap INSIDE one,
       which is what tells a reader that ten things are ten and not
       forty;
     · the type has three sizes and only three, so every line announces
       which level it is on before it is read.

   Ornament is a hairline and a Roman numeral, and the numerals are
   counted by CSS rather than written into the markup — which is how
   they stay correct in four languages without a word being added.

   The animation is the arrival: the divisions rise in order, fifty
   milliseconds apart, and stop. Nothing loops, nothing drifts, nothing
   moves once it has settled.
   =================================================================== */

/* The angle the plate's rim light travels on. Registered, because an
   unregistered custom property cannot be interpolated, and interpolating
   the ANGLE is the whole point: rotating the element instead — which is
   what the first attempt did — swings a rectangular ring bodily around
   and prints a tilted box floating above the plate. It was plainly
   visible in the screenshot, which is why the screenshot is taken. */
@property --fm-ang{syntax:'<angle>';initial-value:0deg;inherits:false;}

@media (max-width:2000px){

  /* ---------- THE TONE ----------
     Every colour the sheet uses is declared here and nowhere else, so
     the whole thing can be re-toned by editing one block rather than
     forty declarations. That is not tidiness for its own sake: the ink,
     the rules, the metal and the relief have to move TOGETHER or the
     sheet stops looking struck and starts looking recoloured.

     Stated as values, never as livery tokens. A livery token is a
     colour that FOLLOWS the reader's edition; this sheet does not
     follow it, because a reader with the menu open is not looking at
     the page. Writing them as tokens is how two earlier versions put
     Midnight's pale ink on their own ivory — 1.85:1 and 1.98:1.

     PARCHMENT AND ESPRESSO. The first ivory was near-white (#FBF7EF),
     and near-white photographs as grey: it read correct and thin. This
     is a warmer, deeper stock with real yellow in it, the ink is
     espresso rather than near-black, the gold is antique rather than
     brass — and the letterhead is a deep espresso band, because the
     sheet had no dark note anywhere and nothing on it could therefore
     read as rich. */
  .navlinks{
    /* the stock */
    --fm-paper:#F6EFDF;
    --fm-wash-top:255,251,240;
    --fm-wash-foot:222,202,163;
    --fm-grain:rgba(92,66,26,.026);
    /* the ink */
    --fm-ink:#241809;
    --fm-ink-2:#5A4630;
    /* the metal that carries words */
    --fm-gold:#8E6A26;
    --fm-gold-deep:#5C4116;
    /* the metal that carries none — a rim, a sheen, a struck edge, and
       so allowed to be brighter than the ink rules permit */
    --fm-gilt:#C9A961;
    --fm-gilt-lt:#F6E8C4;
    /* the rules, in three weights */
    --fm-rule:rgba(142,106,38,.34);
    --fm-rule-strong:rgba(142,106,38,.5);
    --fm-rule-soft:rgba(142,106,38,.10);
    --fm-taper-a:rgba(142,106,38,.55);
    --fm-taper-b:rgba(142,106,38,.06);
    /* relief and shadow — the lit top edge and the weight beneath it */
    --fm-relief:rgba(255,255,255,.92);
    --fm-shadow:92,65,22;
    /* the letterhead */
    --fm-bar-bg:linear-gradient(178deg,#31200C 0%,#201406 100%);
    --fm-bar-ink:#EBD9AE;
    --fm-bar-rule:rgba(201,169,97,.42);
    /* the one door */
    --fm-plate-bg:linear-gradient(158deg,#FFFCF2 0%,#EFDFBE 100%);
    --fm-plate-ink:#4E360F;
    --fm-plate-edge:rgba(142,106,38,.55);
    --fm-seal-op:.20;
    /* The house lozenge, struck once and reused everywhere: under each
       division, at the centre of the foot's rule, and in the margin of
       every page in the index. Drawn rather than typed, so it is the
       same mark at 5px and at 9px and owes nothing to a font. */
    --fm-lozenge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%238E6A26'/%3E%3C/svg%3E");
    --fm-lozenge-deep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%235C4116'/%3E%3C/svg%3E");
    --fm-ease:cubic-bezier(.16,.8,.24,1);
    --fm-bar:86px;
    /* One gutter expression, used by the sheet and by the fixed bar
       alike, so the crest sits on the same line as the first numeral at
       every width. */
    --fm-gutter:max(clamp(20px,6vw,44px),(100% - 1140px)/2);
  }

  /* Pearl's crimson on "the one door" — the founder's brief asked
     specifically for the primary call-to-action in the accent colour;
     Login to Portal is the single most consequential action in the
     Full Menu, so it takes the same crimson as .nav-cta elsewhere
     (css/brand.css) instead of the antique-gold plate every other
     livery uses. More specific selector than .navlinks alone, so it
     wins without needing !important on top of the rule already here. */
  [data-pc-livery="pearl"] .navlinks{
    --fm-plate-bg:linear-gradient(158deg,#8C2A3C 0%,#6E2622 100%);
    --fm-plate-ink:#FFFFFF;
    --fm-plate-edge:rgba(110,38,34,.55);
  }

  /* ---------- The sheet ----------
     THE ONE RULE THAT IS NOT ABOUT THE MENU. `.navlinks` sits inside
     `nav.wrap`, and `nav.wrap` carries `z-index:1`. A stacking context
     confines its children, so the drawer's own `z-index:250` only ever
     ranked it against its siblings INSIDE that context — it was never
     ranked against the masthead's reading-progress bar (6), its glint
     (2), or the header's own gradient. All three printed across the
     paper as faint bands, and no amount of raising `.navlinks` could
     have moved them, because the number was being read in the wrong
     room. The wrap itself has to be lifted, and only while the sheet is
     open, which is the one moment the masthead is not being looked at.
     `body.nav-lock` is set by js/site.js for exactly that moment. */
  body.nav-lock header.nav > .wrap{z-index:60;}
  /* And one storey up. The Personalisation Centre's drawer is parked
     off-screen to the right at z-index 401, which is above the header's
     260 — and although the drawer itself is out of view, its box-shadow
     is not: it printed a 140px bruise down the right edge of the paper.
     Measured, not guessed: the paper reads 251,247,239 and that band
     fell to 157,142,118. Lifting the header above it while the sheet is
     open costs nothing, because the drawer is shut whenever it is. */
  body.nav-lock header.nav{z-index:500;}

  .navlinks{
    position:fixed!important;inset:0!important;z-index:250;
    display:block!important;
    width:auto!important;height:auto!important;max-width:none!important;
    /* THE PAPER, not a fill.
       Flat ivory is what made the last version read as dry: correct
       colour, no depth, nothing for light to happen on. Three washes
       fix that without a single new element — a broad warm light
       falling from above the sheet, a deeper warmth pooling at the
       foot, and a laid-paper grain at 1.6% so the ground has a surface
       rather than a value. Default background-attachment means all
       three stay still while the index scrolls over them, which is how
       paper behaves and how a scrim does not. */
    background-color:var(--fm-paper)!important;
    background-image:
      radial-gradient(1200px 560px at 50% -12%, rgba(var(--fm-wash-top),.95), rgba(var(--fm-wash-top),0) 70%),
      radial-gradient(1000px 460px at 50% 114%, rgba(var(--fm-wash-foot),.55), rgba(var(--fm-wash-foot),0) 72%),
      repeating-linear-gradient(0deg, var(--fm-grain) 0 1px, transparent 1px 4px)!important;
    color:var(--fm-ink);
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:calc(var(--fm-bar) + clamp(30px,5vh,58px)) var(--fm-gutter) clamp(60px,10vh,120px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .42s cubic-bezier(.16,.8,.24,1),visibility 0s linear .46s;
    scrollbar-width:thin;scrollbar-color:var(--fm-rule) transparent;
  }
  .navlinks.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
  .navlinks::-webkit-scrollbar{width:9px;}
  .navlinks::-webkit-scrollbar-thumb{background:var(--fm-rule);border-radius:99px;}
  .navlinks::-webkit-scrollbar-track{background:transparent;}

  /* THE FRAME.
     A hairline inset from the window's edge, struck only at the corners
     — the house's own device, lifted from `.pr-card`. It is the
     difference between a page and a mounted plate, and it costs no
     space at all because it lives where nothing is written. It begins
     below the bar, so the letterhead is not cut across by it. */
  .navlinks::before{
    content:"";position:fixed;z-index:8;pointer-events:none;
    top:calc(var(--fm-bar) + 14px);bottom:14px;inset-inline:14px;
    border:1px solid var(--fm-rule-strong);
    -webkit-mask:
      linear-gradient(#000 0 0) top left    /21% 21% no-repeat,
      linear-gradient(#000 0 0) top right   /21% 21% no-repeat,
      linear-gradient(#000 0 0) bottom left /21% 21% no-repeat,
      linear-gradient(#000 0 0) bottom right/21% 21% no-repeat;
            mask:
      linear-gradient(#000 0 0) top left    /21% 21% no-repeat,
      linear-gradient(#000 0 0) top right   /21% 21% no-repeat,
      linear-gradient(#000 0 0) bottom left /21% 21% no-repeat,
      linear-gradient(#000 0 0) bottom right/21% 21% no-repeat;
    opacity:0;transition:opacity .7s var(--fm-ease) .25s;
  }
  .navlinks.open::before{opacity:1;}

  /* THE SEAL.
     A watermark washed behind forty links was the wrong instinct twice
     over: at an opacity low enough to be safe it is invisible, and at
     one high enough to be seen it prints the school's own name as ghost
     text through the Governance column. Measured, both were true.

     So the crest is not a watermark here. It is struck once, at the
     foot, in the empty space the colophon already leaves — where it can
     be properly visible because nothing is written over it, and where
     it closes the sheet the way a seal closes a letter. `column-span`
     lifts it clear of the index's columns. */
  .navlinks::after{
    content:"";display:block;
    column-span:all;-webkit-column-span:all;
    height:82px;margin:clamp(30px,5vh,52px) auto 0;
    background:url("/assets/images/crest-watermark.png") no-repeat center/auto 100%;
    opacity:var(--fm-seal-op);pointer-events:none;
  }
  html[data-pc-ornament="none"] .navlinks::before,
  html[data-pc-ornament="none"] .navlinks::after{display:none;}

  /* THE COLUMNS. Real columns, balanced by the browser, so a division of
     nine pages and a division of one sit in a page rather than in a
     ragged grid. `break-inside:avoid` keeps a division whole, and a
     hairline between them is what a printed index has and a web page
     usually forgets. */
  @media (min-width:720px){ .navlinks{column-count:2;} }
  @media (min-width:1080px){ .navlinks{column-count:3;} }
  .navlinks{
    column-gap:clamp(38px,5vw,86px);
    column-rule:1px solid var(--fm-rule-soft);
  }

  /* ---------- The bar ----------
     Fixed rather than sticky, because the sheet is itself the scrolling
     box and a fixed bar cannot be caught out by a sub-pixel. It carries
     the crest, the words FULL MENU, and the way out. Nothing else. */
  .navlinks .nav-drawer-head{
    position:fixed;top:0;inset-inline:0;z-index:6;
    display:flex!important;align-items:center;justify-content:space-between;gap:18px;
    height:var(--fm-bar);
    padding:0 var(--fm-gutter)!important;margin:0!important;
    /* Not flat: the bar sits a shade above the paper, the way a
       letterhead's head does, and it is closed by a rule rather than by
       a border alone. */
    background:var(--fm-bar-bg)!important;
    border:0!important;border-bottom:1px solid var(--fm-bar-rule)!important;
    box-shadow:0 18px 34px -26px rgba(var(--fm-shadow),.55)!important;
  }
  /* THE TRAVELLING LIGHT.
     One slow pass of gilt along the bar's own rule — nine seconds, an
     organic ease rather than a constant speed, and nothing else on the
     sheet moves with it. This is the house's own device, the same one
     that runs the masthead's Menu control; it belongs here because the
     bar is the one edge a reader's eye returns to. */
  .navlinks .nav-drawer-head::after{
    content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(201,169,97,0) 34%, rgba(201,169,97,.55) 44%,
      var(--fm-gilt-lt) 50%, rgba(201,169,97,.55) 56%, rgba(201,169,97,0) 66%);
    background-size:260% 100%;background-repeat:no-repeat;
    animation:fm-sheen 9s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes fm-sheen{0%{background-position:-70% 0;}62%,100%{background-position:172% 0;}}

  /* The crest, struck on the bar. A ring of gilt behind it turns a flat
     PNG into a mounted mark; the ring is drawn on the container so the
     glyph itself is never repainted. */
  .navlinks .nav-drawer-head::before{
    content:"";flex:0 0 auto;width:42px;height:42px;
    margin-inline-end:17px;
    background:url("/assets/images/brand-mark.png") no-repeat center/contain;
    border-radius:50%;
    box-shadow:0 0 0 1px rgba(201,169,97,.45), 0 0 0 5px rgba(201,169,97,.13);
  }
  html[data-pc-ornament="none"] .navlinks .nav-drawer-head::before{display:none;}
  html[data-pc-ornament="none"] .navlinks .nav-drawer-head::after{display:none;}
  /* THE KICKER, TYPED.
     The two words on the letterhead are set by a plate that travels
     across them, one step at a time, and a caret that blinks four times
     and goes out. It is done with clip-path rather than by animating a
     width in `ch`, because a width in `ch` needs to know how many
     characters there are — and this string is written by the
     dictionary, so in Arabic it is not two words and not nine letters.
     Clipping is blind to the language, which is the only way a
     typewriter can be honest on a site that speaks four. */
  .navlinks .ndh-title{
    flex:0 1 auto;margin-inline-end:auto;
    font-family:var(--font-label,'Cinzel',serif);
    font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;
    color:var(--fm-bar-ink)!important;
    white-space:nowrap;
  }
  .navlinks.open .ndh-title{animation:fm-type .95s steps(18,end) .2s both;}
  @keyframes fm-type{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
  [dir="rtl"] .navlinks.open .ndh-title{animation-name:fm-type-rtl;}
  @keyframes fm-type-rtl{from{clip-path:inset(0 0 0 100%);}to{clip-path:inset(0 0 0 0);}}
  .navlinks .ndh-title::after{
    content:"";display:inline-block;width:1px;height:.95em;
    margin-inline-start:.3em;vertical-align:-.08em;
    background:var(--fm-gilt);opacity:0;
  }
  .navlinks.open .ndh-title::after{animation:fm-caret .42s steps(1,end) 1.1s 5 both;}
  @keyframes fm-caret{0%,49%{opacity:.9;}50%,100%{opacity:0;}}
  /* The close control, chased: a struck ring with a lit top edge and a
     shadow beneath it, rather than a circle with a border. */
  .navlinks .nav-drawer-close{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:50%;cursor:pointer;padding:0;
    border:1px solid rgba(201,169,97,.40)!important;
    background:linear-gradient(158deg,rgba(255,246,223,.14),rgba(255,246,223,.03))!important;
    color:var(--fm-bar-ink)!important;
    box-shadow:inset 0 1px 0 rgba(255,246,223,.14)!important;
    transition:transform .42s var(--fm-ease),box-shadow .35s ease,border-color .35s ease;
  }
  .navlinks .nav-drawer-close:hover,
  .navlinks .nav-drawer-close:focus-visible{
    transform:rotate(90deg);
    border-color:var(--fm-gilt)!important;
    box-shadow:inset 0 1px 0 rgba(255,246,223,.22),
               0 0 0 4px rgba(201,169,97,.18)!important;
  }

  /* ---------- A division ----------
     The numerals are counted, not written. Ten divisions in four
     languages, and not one of them carries a hard-coded "VII". */
  .navlinks{counter-reset:fm-div;}
  .navlinks .nav-drop{
    counter-increment:fm-div;
    break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
    display:block!important;position:static!important;
    margin:0 0 clamp(44px,6.2vh,72px)!important;padding:0!important;
    border:0!important;background:none!important;
    /* THE RESTING STATE IS VISIBLE, DELIBERATELY.
       This used to read `opacity:0` here, with the arrival animation as
       the only thing that ever brought a division back. That makes the
       flourish load-bearing: any browser that declines the animation —
       an unsupported unit in the delay, a multicol quirk, an engine
       that skips the keyframes — opens the sheet to a letterhead and
       nothing else. A menu must never be blank because an ornament
       failed. `fm-rise` carries its own `from{opacity:0}` and runs with
       fill-mode `both`, so the entrance looks exactly the same; what
       changed is what happens when it does not run at all. */
  }

  /* THE HEADING. The largest of the three sizes, in the display face,
     with the numeral struck small beside it and a hairline drawn under
     the whole division. This is the line that has to carry the room. */
  .navlinks .nav-drop-trigger{
    display:block!important;text-decoration:none;white-space:normal!important;
    flex:0 0 auto!important;min-height:0!important;
    font-family:var(--font-display,'Cormorant Garamond',serif)!important;
    /* brand.css sets 0.86rem !important and uppercase on this element for
       the old drawer's row treatment. Both have to be answered here, or
       the division heading arrives as a small tracked label and the
       three type sizes collapse into two. */
    font-size:clamp(1.45rem,2.6vw,1.95rem)!important;
    line-height:1.18!important;font-weight:600!important;
    letter-spacing:-.004em;text-transform:none!important;
    color:var(--fm-ink)!important;
    padding:0 0 .52em!important;margin:0 0 .5em!important;
    border:0!important;
    background:none!important;
    transition:color .3s ease;
  }
  /* The numeral, struck rather than printed: a hairline of white beneath
     the letter is what makes small type on paper look pressed into it
     instead of laid on top. */
  .navlinks .nav-drop-trigger::before{
    content:counter(fm-div,upper-roman);
    display:inline-block;min-width:3.8em;
    font-family:var(--font-label,'Cinzel',serif);
    font-size:.34em;letter-spacing:.16em;line-height:1;font-weight:600;
    color:var(--fm-gold-deep)!important;
    text-shadow:0 1px 0 var(--fm-relief);
    vertical-align:.28em;
  }
  /* THE RULE UNDER A DIVISION — an engraving, not a table border.
     brand.css uses this pseudo for a growing underline, which is taken
     over here rather than merely switched off. Two layers: the house
     lozenge struck at the leading edge, and a hairline running away
     from it and fading out before it reaches the column's far side. A
     rule that ends in nothing reads as engraved; a rule that ends in a
     hard stop reads as a spreadsheet. */
  .navlinks .nav-drop-trigger::after{
    content:""!important;display:block!important;
    position:absolute;inset-inline-start:0;bottom:0;
    width:100%;height:9px;pointer-events:none;
    background:
      var(--fm-lozenge) left center/7px 7px no-repeat,
      linear-gradient(to right, var(--fm-taper-a), var(--fm-taper-b) 74%, transparent);
    background-position:left center, left 13px center;
    background-size:7px 7px, calc(100% - 13px) 1px;
    background-repeat:no-repeat,no-repeat;
    transition:background-size .5s var(--fm-ease);
  }
  [dir="rtl"] .navlinks .nav-drop-trigger::after{
    background-image:
      var(--fm-lozenge),
      linear-gradient(to left, var(--fm-taper-a), var(--fm-taper-b) 74%, transparent);
    background-position:right center, right 13px center;
  }
  /* The Foundation stands alone — it has no pages beneath it, so its
     rule would engrave off an empty space. A division with nothing
     under it ends at its own name, and keeps only the lozenge. */
  .navlinks .nav-drop--foundation .nav-drop-trigger::after{
    background-size:7px 7px, 84px 1px;
  }
  .navlinks .nav-drop-trigger:hover,
  .navlinks .nav-drop-trigger:focus-visible{color:var(--fm-gold-deep)!important;}
  .navlinks .nav-drop-trigger:hover::after,
  .navlinks .nav-drop-trigger:focus-visible::after{
    background-image:
      var(--fm-lozenge-deep),
      linear-gradient(to right, var(--fm-gold-deep), var(--fm-taper-b) 82%, transparent);
  }

  /* The chevron has nothing left to do: nothing is folded away. */
  .navlinks .nav-drop-toggle{display:none!important;}

  /* ---------- The pages under it ----------
     Every panel open, every panel bare. The middle type size on a wide
     leading, so the list breathes; the gap between two of these is
     deliberately far smaller than the gap between two divisions. */
  .navlinks .nav-drop-panel{
    display:block!important;position:static!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    inset:auto!important;
    margin:0!important;padding:0!important;
    background:none!important;border:0!important;box-shadow:none!important;
    opacity:1!important;visibility:visible!important;transform:none!important;
  }
  .navlinks .nav-mega-col,
  .navlinks .nav-mega-panel,
  .navlinks .portal-gateway-grid,
  .navlinks .pgx,
  .navlinks .pgx-body{
    display:block!important;width:auto!important;min-width:0!important;
    gap:0!important;padding:0!important;margin:0!important;
    background:none!important;border:0!important;box-shadow:none!important;
  }

  /* The intro block is a duplicate of the heading wherever a division has
     a column of pages of its own, and IS the list of pages wherever it
     does not (Admissions, Governance, Contact). So the wrapper stays and
     only the duplicated words go. */
  .navlinks .nav-mega-intro{
    display:block!important;width:auto!important;
    padding:0!important;margin:0!important;
    border:0!important;background:none!important;
  }
  .navlinks .nav-mega-intro > h4,
  .navlinks .nav-mega-intro > p,
  .navlinks .nav-mega-featured,
  .navlinks .nav-mega-item .d,
  .navlinks .pgc-icon,
  .navlinks .pgc-desc,
  .navlinks .pgc-enter,
  .navlinks .pgx-head,
  .navlinks .pgx-nav,
  .navlinks .pgx-panes,
  .navlinks .pgx-foot,
  .navlinks .pgx-radio{display:none!important;}

  /* The index is set in from the numeral column, so the whole division
     hangs on two axes rather than one — numerals at the margin, titles
     and pages on the same line inside it. */
  .navlinks .nav-drop-panel{padding-inline-start:26px!important;}
  @media (max-width:520px){ .navlinks .nav-drop-panel{padding-inline-start:20px!important;} }

  /* Every kind of sub-link the markup contains, set as one kind of line.
     A link is a word: no plate, no border, no chevron, no chip. */
  .navlinks .nav-mega-item,
  .navlinks .nmi-cta,
  .navlinks .nmi-secondary,
  .navlinks .portal-gateway-card{
    position:relative;
    display:block!important;text-decoration:none;white-space:normal!important;
    min-height:0!important;
    padding:.36em 0!important;margin:0!important;
    border:0!important;border-radius:0!important;
    background:none!important;box-shadow:none!important;
    font-family:var(--font-body,'Inter',sans-serif)!important;
    font-size:.93rem!important;line-height:1.6!important;
    letter-spacing:.005em!important;font-weight:400!important;
    text-transform:none!important;
    color:var(--fm-ink-2)!important;
    /* brand.css dims `.nmi-secondary` to 0.75 for the dark panel it was
       written against. On paper that reads as two grades of ink in one
       list, which is what made Governance look faded beside Academics. */
    opacity:1!important;
    transition:color .28s ease;
  }
  /* The three compact divisions write their trailing arrow into the link
     itself, and the ones with a column of pages do not. One list cannot
     have two kinds of line, so the glyph is set aside here — it is still
     in the markup, still drawn in the masthead's own panels, and it is
     marked aria-hidden, so nothing is lost by leaving it out of a
     contents page. */
  .navlinks .nmi-cta .arrow,
  .navlinks .nmi-secondary .arrow{display:none!important;}

  /* THE SPINE.
     A 3px lozenge in the margin of every page in the index — the same
     mark as the one under each division, struck small. Forty of them
     aligned down three columns is what turns a list of links into a
     set, and it is the cheapest ornament on the sheet: no element, no
     request, no layout. On address it takes the deeper gold and opens
     slightly, so the row answers before the underline has finished
     drawing. */
  .navlinks .nav-mega-item::before,
  .navlinks .nmi-cta::before,
  .navlinks .nmi-secondary::before,
  .navlinks .portal-gateway-card::before{
    content:""!important;display:block!important;position:absolute;
    inset-inline-start:-15px;top:.92em;width:5px;height:5px;
    background:var(--fm-lozenge) center/contain no-repeat;
    opacity:.55;
    transition:opacity .3s ease,transform .42s var(--fm-ease);
  }
  .navlinks .nav-mega-item:hover::before,.navlinks .nav-mega-item:focus-visible::before,
  .navlinks .nmi-cta:hover::before,.navlinks .nmi-cta:focus-visible::before,
  .navlinks .nmi-secondary:hover::before,.navlinks .nmi-secondary:focus-visible::before,
  .navlinks .portal-gateway-card:hover::before,.navlinks .portal-gateway-card:focus-visible::before{
    opacity:1;transform:scale(1.5);
  }
  html[data-pc-ornament="none"] .navlinks .nav-mega-item::before,
  html[data-pc-ornament="none"] .navlinks .nmi-cta::before,
  html[data-pc-ornament="none"] .navlinks .nmi-secondary::before,
  html[data-pc-ornament="none"] .navlinks .portal-gateway-card::before{display:none!important;}
  .navlinks .nav-mega-text,
  .navlinks .nav-mega-item .t,
  .navlinks .pgc-name{
    display:inline!important;
    font-family:inherit!important;
    font-size:inherit!important;font-weight:inherit!important;text-transform:none!important;
    letter-spacing:inherit!important;line-height:inherit!important;
    color:inherit!important;margin:0!important;padding:0!important;
  }
  /* The rule draws itself under the word — the one thing on the sheet
     that moves after the sheet has settled. It is drawn on the row, not
     on the text, so a two-line entry does not strike through itself. */
  .navlinks .nav-mega-item::after,
  .navlinks .nmi-cta::after,
  .navlinks .nmi-secondary::after,
  .navlinks .portal-gateway-card::after{
    content:""!important;display:block!important;
    position:absolute;inset-inline-start:0;bottom:.16em;
    width:100%;height:1px;
    background:var(--fm-gold);
    transform:scaleX(0);transform-origin:inline-start;
    transition:transform .4s cubic-bezier(.16,.8,.24,1);
  }
  .navlinks .nav-mega-item:hover,.navlinks .nav-mega-item:focus-visible,
  .navlinks .nmi-cta:hover,.navlinks .nmi-cta:focus-visible,
  .navlinks .nmi-secondary:hover,.navlinks .nmi-secondary:focus-visible,
  .navlinks .portal-gateway-card:hover,.navlinks .portal-gateway-card:focus-visible{
    color:var(--fm-gold-deep)!important;transform:none!important;
  }
  .navlinks .nav-mega-item:hover::after,.navlinks .nav-mega-item:focus-visible::after,
  .navlinks .nmi-cta:hover::after,.navlinks .nmi-cta:focus-visible::after,
  .navlinks .nmi-secondary:hover::after,.navlinks .nmi-secondary:focus-visible::after,
  .navlinks .portal-gateway-card:hover::after,.navlinks .portal-gateway-card:focus-visible::after{
    transform:scaleX(1);
  }

  /* ---------- The two ways in ----------
     The gateway chooser is a whole interactive apparatus — eight radio
     buttons and eight panes. It belongs to the Portal page, and putting
     it inside a contents page is what made the last version read as
     jammed. Its door stays; its machinery does not. */
  .navlinks .nav-drop--portal .nav-drop-panel{display:none!important;}
  .navlinks .nav-drop--portal,
  .navlinks .nav-drawer-actions{
    column-span:all;-webkit-column-span:all;
    display:block!important;
    margin:0!important;padding:0!important;
    background:none!important;border:0!important;
  }
  /* THE COLOPHON RULE — the house's `.arm-rule`, drawn without an
     element: two rules tapering away from a struck lozenge at the
     centre. It closes the sheet the way a title page is closed. */
  .navlinks .nav-drop--portal{
    counter-increment:none;
    position:relative!important;
    padding-top:clamp(40px,6vh,66px)!important;
    margin-top:clamp(14px,2.6vh,28px)!important;
    border-top:0!important;
    text-align:center!important;
  }
  .navlinks .nav-drop--portal::before{
    content:""!important;display:block!important;
    position:absolute;top:0;inset-inline:0;height:11px;pointer-events:none;
    background:
      linear-gradient(to right, transparent, var(--fm-rule-strong)),
      linear-gradient(to left,  transparent, var(--fm-rule-strong)),
      var(--fm-lozenge);
    background-position:left center, right center, center;
    background-size:calc(50% - 15px) 1px, calc(50% - 15px) 1px, 9px 9px;
    background-repeat:no-repeat,no-repeat,no-repeat;
  }
  html[data-pc-ornament="none"] .navlinks .nav-drop--portal::before{
    background:linear-gradient(to right,var(--fm-rule),var(--fm-rule)) center/100% 1px no-repeat;
  }
  .navlinks .nav-drawer-actions{margin-top:16px!important;text-align:center!important;}

  /* THE ONE DOOR, STRUCK.
     A prestige menu is allowed exactly one call to action, and this is
     it — so it is the one thing on the sheet that is an object rather
     than a word: a chased plate with a lit top edge, a shadow beneath,
     and the house's slow halo travelling its rim. Start Admission
     stays a word, beneath it, so the two are never confused for a pair
     of buttons. */
  .navlinks .nav-drop--portal .nav-drop-trigger{
    display:inline-flex!important;align-items:center;gap:.55em;
    position:relative;width:auto!important;
    text-decoration:none;white-space:normal!important;min-height:0!important;
    font-family:var(--font-label,'Cinzel',serif)!important;
    font-size:.74rem!important;letter-spacing:.2em!important;
    text-transform:uppercase!important;font-weight:600!important;
    color:var(--fm-plate-ink)!important;
    padding:16px 34px!important;margin:0!important;border-radius:2px!important;
    border:1px solid var(--fm-plate-edge)!important;
    background:var(--fm-plate-bg)!important;
    box-shadow:inset 0 1px 0 var(--fm-relief),
               0 18px 34px -26px rgba(var(--fm-shadow),.95)!important;
    transition:box-shadow .4s ease,border-color .4s ease,transform .4s var(--fm-ease);
  }
  .navlinks .nav-drop--portal .nav-drop-trigger:hover,
  .navlinks .nav-drop--portal .nav-drop-trigger:focus-visible{
    transform:translateY(-2px)!important;border-color:var(--fm-gilt)!important;
    box-shadow:inset 0 1px 0 var(--fm-relief),
               0 22px 38px -24px rgba(var(--fm-shadow),.95)!important;
  }
  .navlinks .nav-drop--portal .nav-drop-trigger::before{content:none;}
  /* The travelling rim light — a masked conic gradient turning around
     the plate's own rectangle, hairline-thin and unhurried. The same
     device the masthead's Menu control carries, so the two ends of the
     journey are lit by one hand. */
  .navlinks .nav-drop--portal .nav-drop-trigger::after{
    content:""!important;display:block!important;
    position:absolute;inset:-2px;pointer-events:none;border-radius:inherit;
    background:none;width:auto;height:auto;transform:none;
    background-image:conic-gradient(from var(--fm-ang), transparent 0 66%,
      rgba(201,169,97,.30) 76%, var(--fm-gilt-lt) 84%, rgba(201,169,97,.30) 92%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;padding:1.2px;
    opacity:.9;animation:fm-halo 15s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes fm-halo{to{--fm-ang:360deg;}}
  html[data-pc-ornament="none"] .navlinks .nav-drop--portal .nav-drop-trigger::after{display:none!important;}
  .navlinks .nav-drop--portal .nav-drop-trigger .arrow{
    font-family:inherit;color:inherit;margin-inline-start:.1em;
  }

  /* Start Admission — a word, quietly ruled. */
  .navlinks > .nav-drawer-actions .nav-mark{
    display:inline-block!important;position:relative;
    width:auto!important;text-align:center!important;
    text-decoration:none;white-space:normal!important;min-height:0!important;
    font-family:var(--font-label,'Cinzel',serif)!important;
    font-size:.66rem!important;letter-spacing:.22em!important;
    text-transform:uppercase!important;font-weight:600!important;
    color:var(--fm-gold-deep)!important;
    padding:12px 2px!important;margin:0!important;
    border:0!important;border-radius:0!important;
    background:none!important;box-shadow:none!important;transform:none!important;
  }
  .navlinks > .nav-drawer-actions .nav-mark::after{
    content:""!important;display:block!important;
    position:absolute;inset-inline-start:0;bottom:6px;
    width:100%;height:1px;background:var(--fm-rule-strong);
    transform:scaleX(1);transform-origin:center;
    transition:transform .4s var(--fm-ease);
  }
  .navlinks > .nav-drawer-actions .nav-mark:hover::after,
  .navlinks > .nav-drawer-actions .nav-mark:focus-visible::after{transform:scaleX(0);}

  /* ---------- The arrival ----------
     Each division rises in its turn and stops. Ten steps at fifty
     milliseconds is half a second from first to last — long enough to
     read as deliberate, short enough that nobody waits for it. */
  /* Each division carries its own place in the queue, once, and the
     three things that arrive with it — the block, the heading's
     tracking, the engraved rule — all time themselves off that one
     number instead of repeating a table of delays three times. */
  .navlinks .nav-drop:nth-child(2){--i:0;}
  .navlinks .nav-drop:nth-child(3){--i:1;}
  .navlinks .nav-drop:nth-child(4){--i:2;}
  .navlinks .nav-drop:nth-child(5){--i:3;}
  .navlinks .nav-drop:nth-child(6){--i:4;}
  .navlinks .nav-drop:nth-child(7){--i:5;}
  .navlinks .nav-drop:nth-child(8){--i:6;}
  .navlinks .nav-drop:nth-child(9){--i:7;}
  .navlinks .nav-drop:nth-child(10){--i:8;}
  .navlinks .nav-drop:nth-child(11){--i:9;}

  .navlinks.open .nav-drop{
    animation:fm-rise .6s var(--fm-ease) both;
    animation-delay:calc(.10s + var(--i,0) * .05s);
  }
  .navlinks.open .nav-drawer-actions{animation:fm-rise .6s var(--fm-ease) .62s both;}
  @keyframes fm-rise{from{opacity:0;transform:translateY(15px);}to{opacity:1;transform:none;}}

  /* THE TYPE SETTLES. A heading arrives very slightly wide and closes
     to its set tracking — the way metal type looks as it is pressed
     home. A quarter of a second, once, and never again. */
  .navlinks.open .nav-drop-trigger{
    animation:fm-settle .85s var(--fm-ease) both;
    animation-delay:calc(.12s + var(--i,0) * .05s);
  }
  @keyframes fm-settle{from{letter-spacing:.075em;}to{letter-spacing:-.004em;}}

  /* THE RULE ENGRAVES ITSELF, from the lozenge outward, a beat after
     the words it belongs to. Clipped rather than sized, so the short
     rule under Foundation and the long ones under the rest can share
     one keyframe. */
  .navlinks.open .nav-drop-trigger::after{
    animation:fm-engrave .8s var(--fm-ease) both;
    animation-delay:calc(.26s + var(--i,0) * .05s);
  }
  @keyframes fm-engrave{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
  [dir="rtl"] .navlinks.open .nav-drop-trigger::after{animation-name:fm-engrave-rtl;}
  @keyframes fm-engrave-rtl{from{clip-path:inset(0 0 0 100%);}to{clip-path:inset(0 0 0 0);}}

  /* ---------- Midnight, answered ----------
     THE EDITION-BLIND PATTERN, for the tenth time on this site, and this
     time in reverse. liveries.css holds the masthead's ink LIGHT in the
     Midnight edition, because in Midnight the band around it went dark:

       html[data-pc-theme="dark"] .nav-drop-trigger{
         color:var(--mn-ink)!important; -webkit-text-fill-color:...!important; }

     That is right for the masthead and wrong for this sheet, which is
     ivory in every edition. At (0,2,1) with !important it outranked
     `.navlinks .nav-drop-trigger`, and the measurement said so plainly:
     every division heading in Midnight came back at 1.09:1 — pale ink on
     pale paper, invisible rather than merely faint. `.pgc-name`, which
     carries the three Verify links, failed the same way.

     Answered at the same shape and one class higher, so the ivory sheet
     states its own ink no matter what the page around it is wearing. The
     value is the same literal in all three editions; this block does not
     follow the edition, it refuses to. */
  html[data-pc-theme="dark"] .navlinks .nav-drop-trigger,
  html[data-pc-theme="dark"] .navlinks .nav-drop-trigger span{
    color:var(--fm-ink)!important;-webkit-text-fill-color:var(--fm-ink)!important;
  }
  html[data-pc-theme="dark"] .navlinks .portal-gateway-card,
  html[data-pc-theme="dark"] .navlinks .pgc-name{
    color:var(--fm-ink-2)!important;-webkit-text-fill-color:var(--fm-ink-2)!important;
  }
  html[data-pc-theme="dark"] .navlinks .nav-drop--portal .nav-drop-trigger,
  html[data-pc-theme="dark"] .navlinks .nav-drop--portal .nav-drop-trigger span{
    color:var(--fm-gold-deep)!important;-webkit-text-fill-color:var(--fm-gold-deep)!important;
  }

  /* A reader who has asked for less motion is given none of it, and the
     sheet simply is there. */
  @media (prefers-reduced-motion:reduce){
    .navlinks{transition:opacity .2s linear,visibility 0s linear .2s;}
    .navlinks .nav-drop,.navlinks .nav-drawer-actions{opacity:1;transform:none;animation:none!important;}
    .navlinks .ndh-title,.navlinks .ndh-title::after,
    .navlinks .nav-drop-trigger,.navlinks .nav-drop-trigger::after{animation:none!important;}
    .navlinks .ndh-title::after{opacity:0;}
    .navlinks .nav-mega-item::after,.navlinks .nmi-cta::after,
    .navlinks .nmi-secondary::after,.navlinks .portal-gateway-card::after,
    .navlinks .nav-drawer-close{transition:none;}
    .navlinks .nav-drawer-close:hover{transform:none;}
    /* The two lights stop; the metal they were lighting stays. */
    .navlinks .nav-drawer-head::after{animation:none;background-position:50% 0;opacity:.5;}
    .navlinks .nav-drop--portal .nav-drop-trigger::after{animation:none;opacity:.5;}
    .navlinks .nav-drop--portal .nav-drop-trigger:hover{transform:none!important;}
  }
  html[data-pc-motion="reduced"] .navlinks .nav-drawer-head::after,
  html[data-pc-motion="reduced"] .navlinks .nav-drop--portal .nav-drop-trigger::after{
    animation:none;opacity:.5;
  }
  html[data-pc-motion="reduced"] .navlinks .nav-drop,
  html[data-pc-motion="reduced"] .navlinks .nav-drawer-actions,
  html[data-pc-motion="reduced"] .navlinks .ndh-title,
  html[data-pc-motion="reduced"] .navlinks .ndh-title::after,
  html[data-pc-motion="reduced"] .navlinks .nav-drop-trigger,
  html[data-pc-motion="reduced"] .navlinks .nav-drop-trigger::after{
    opacity:1;transform:none;animation:none!important;
  }
  html[data-pc-motion="reduced"] .navlinks .ndh-title::after{opacity:0;}
}