/* =========================================================================
   INDOFIL — one stylesheet for the public site and the admin area.

   The visual language is lifted from the brand guideline's own pages rather
   than invented: a white-dominant canvas, a blue headline over a gold rule
   that ends in a dot, small gold uppercase eyebrow labels with wide tracking,
   a subtle sun motif, and the red-gold-blue signature closing a composition.
   Page 07 sets the proportions — white 55%, blue 25%, gold 10%, red 7%,
   yellow 3% — and this file tries to hold them.

   Values that also exist in inc/brand.php are duplicated here because CSS
   cannot read PHP. inc/brand.php remains the source of truth; if a colour
   changes there it must change here too, and tests/brand.php will notice the
   images disagreeing before anybody notices the pages do.
   ====================================================================== */

@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/Montserrat-Regular.woff') format('woff'),
      url('fonts/Montserrat-Regular.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/Montserrat-Medium.woff') format('woff'),
      url('fonts/Montserrat-Medium.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/Montserrat-SemiBold.woff') format('woff'),
      url('fonts/Montserrat-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/Montserrat-Bold.woff') format('woff'),
      url('fonts/Montserrat-Bold.ttf') format('truetype')}
/* The accent serif ships as a variable font, so one file covers 400 to 700. */
@font-face{font-family:'Libre Baskerville';font-weight:400 700;font-style:normal;font-display:swap;
  src:url('fonts/LibreBaskerville-Variable.woff') format('woff'),
      url('fonts/LibreBaskerville-Variable.ttf') format('truetype')}

:root{
  --blue:#1660C2;   --blue-dark:#104A96;  --blue-tint:#EEF4FC;
  --red:#EE101C;    --gold:#EAA618;       --gold-tint:#FDF6E8;
  --yellow:#FED704; --white:#FFFFFF;      --charcoal:#30353A;
  --grey:#6B7280;   --line:#E3E7ED;       --wash:#F6F8FB;

  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Libre Baskerville',Georgia,serif;

  --shell:1180px;
  --radius:12px;
  --shadow:0 1px 2px rgba(48,53,58,.06),0 8px 28px rgba(48,53,58,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--charcoal);
  font:400 16px/1.65 var(--font);
  /* Page 07: keep white dominant for a warm, diplomatic and uncluttered feel. */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.18;color:var(--blue);font-weight:700;
  letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.2vw,3rem)}
h2{font-size:clamp(1.45rem,3vw,2.1rem)}
h3{font-size:1.16rem}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 clamp(18px,5vw,34px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px}

/* -- the three-colour signature, page 09 item 5 ------------------------- */
.signature{display:flex;height:6px}
.signature i{flex:1}
.signature i:nth-child(1){background:var(--red)}
.signature i:nth-child(2){background:var(--gold)}
.signature i:nth-child(3){background:var(--blue)}

/* -- the eyebrow label: gold, uppercase, widely tracked ----------------- */
.eyebrow{
  display:block;margin:0 0 .7rem;color:var(--gold);
  font-size:.74rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
}

/* -- the gold rule that ends in a dot, as on every guideline page ------- */
.rule{position:relative;height:3px;background:var(--gold);border:0;margin:0 0 1.6rem;
  max-width:150px;border-radius:2px}
.rule::after{content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--gold)}
.rule.wide{max-width:none}

/* =======================================================================
   Header
   ==================================================================== */
.topline{display:flex;height:5px}
.topline i{flex:1}
.topline i:nth-child(1){background:var(--red)}
.topline i:nth-child(2){background:var(--gold)}
.topline i:nth-child(3){background:var(--blue)}

.masthead{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.masthead .bar{display:flex;align-items:center;gap:18px;padding:14px 0}
.brandmark{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brandmark img{height:44px;width:auto}
.brandmark .tag{font-size:.66rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);line-height:1.35;max-width:130px}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{padding:9px 13px;border-radius:8px;color:var(--charcoal);font-weight:500;font-size:.95rem}
.nav a:hover{background:var(--blue-tint);text-decoration:none}
.nav a[aria-current]{color:var(--blue);background:var(--blue-tint);font-weight:600}

/* -- language dropdown --------------------------------------------------
   A <details> element, so it opens without JavaScript. */
.langsw{position:relative;margin-left:10px}
.langsw summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:6px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:.82rem;font-weight:600;color:var(--charcoal);white-space:nowrap;
  list-style:none;user-select:none}
.langsw summary::-webkit-details-marker{display:none}
.langsw summary:hover{border-color:var(--blue)}
.langsw[open] summary{border-color:var(--blue);background:var(--blue-tint)}
.langsw .caret{font-size:.7rem;color:var(--grey);transition:transform .15s}
.langsw[open] .caret{transform:rotate(180deg)}
.flag{border-radius:2px;flex-shrink:0;display:block}

.langsw ul{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:60;
  margin:0;padding:6px;list-style:none;min-width:180px;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.langsw li{margin:0}
.langsw ul a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:7px;
  font-size:.9rem;font-weight:500;color:var(--charcoal)}
.langsw ul a:hover{background:var(--blue-tint);text-decoration:none}
.langsw ul a[aria-current]{background:var(--blue);color:#fff;font-weight:600}

/* On the blue admin top bar the trigger needs its own treatment. */
.work .topbar .langsw summary{background:#fff}

@media(max-width:900px){
  .langsw summary .nm{display:none}
}

.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;font-size:1.25rem;padding:6px 12px;cursor:pointer;color:var(--blue)}

@media(max-width:900px){
  /* The bar has to be allowed to wrap. Without this the flex line is nowrap,
     so order:3 and width:100% below cannot move the open menu onto its own
     row — it stays beside the logo, gets squeezed to the width of its longest
     word, and pushes the page wider than the screen. On a 375px phone that
     showed as a sideways-scrolled page with the logo sliced in half. */
  .masthead .bar{flex-wrap:wrap}
  .burger{display:block}
  .nav{display:none;width:100%;order:3;flex-direction:column;margin:8px 0 4px}
  .nav.open{display:flex}
  .langsw{order:2}
}

/* =======================================================================
   The welcoming banner

   Slides are shown and hidden by radio buttons rather than by script, so the
   front page works before JavaScript arrives, keeps working if a script
   fails, and prints. The radios sit off-screen; the dots are their labels.
   ==================================================================== */
.banner{position:relative}
.bslide-radio{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.bslide{display:none;position:relative;overflow:hidden;
  padding:clamp(48px,8vw,96px) 0 clamp(52px,6vw,84px)}
.banner:not(.multi) .bslide{display:block}
.banner:not(.multi) .bslide--image{display:flex}
.bslide-inner{position:relative;display:grid;gap:clamp(26px,4vw,48px);align-items:center;width:100%}
.bslide-copy{max-width:64ch}
.bslide h1{margin-bottom:.4em}
.bslide .lede{font-size:clamp(1.02rem,2vw,1.19rem);max-width:58ch}

/* The banner band gets its own ground.
   ------------------------------------------------------------------------
   It used to sit on plain white, directly above a white section — two
   different things reading as one flat slab, which is what made the page
   look unfinished. A soft wash tinted with the brand's own gold and blue
   separates them without introducing a colour the guideline doesn't have,
   and keeps white dominant as page 07 asks. */
.bslide--text, .bslide--split, .bslide--news{
  background:
    radial-gradient(1100px 620px at 88% -15%, rgba(234,166,24,.16), transparent 62%),
    radial-gradient(900px 520px at -8% 115%, rgba(22,96,194,.11), transparent 60%),
    linear-gradient(178deg,#FCFDFE 0%,#EFF4FB 100%);
}
.bslide--text::before,.bslide--news::before{content:'';position:absolute;
  top:-16%;right:-8%;width:min(560px,58vw);aspect-ratio:1;
  background:url('brand/motif-sun.png') center/contain no-repeat;
  opacity:.10;pointer-events:none}

/* Split and news: copy on the left, photograph on the right. */
@media(min-width:900px){
  .bslide--split .bslide-inner,
  .bslide--news  .bslide-inner{grid-template-columns:1.05fr .95fr}
}

/* The photograph sits on a gold offset block — the logo's gold framework,
   borrowed as a layout device so the picture reads as framed rather than
   pasted on. */
.bslide-shot{margin:0;position:relative}
.bslide-shot::before{content:'';position:absolute;inset:14px -14px -14px 14px;
  border-radius:16px;background:linear-gradient(135deg,var(--gold),var(--red));
  opacity:.16;z-index:0}
.bslide-shot img{position:relative;z-index:1;border-radius:14px;width:100%;
  box-shadow:0 18px 46px rgba(16,42,80,.16)}
.bslide-shot a{display:block}
.bslide-shot figcaption{position:relative;z-index:1;font-size:.75rem;color:var(--grey);
  margin-top:10px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:899px){.bslide-shot::before{inset:10px -10px -10px 10px}}

/* News slide: the date under the headline. */
.bslide-date{margin:-.4rem 0 .9rem;font-size:.83rem;color:var(--grey);
  letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* Full-bleed: the photograph is the whole slide, nothing laid over it. */
.bslide--full{padding:0;background:var(--charcoal)}
.bslide-full{display:block;width:100%}
.bslide-full img{width:100%;height:clamp(300px,46vw,560px);object-fit:cover;display:block}
a.bslide-full:hover img{opacity:.94}

/* Image: the photograph fills the band behind a scrim, so words stay legible. */
.bslide--image{background-image:linear-gradient(90deg,rgba(13,38,74,.90) 0%,rgba(13,38,74,.74) 46%,rgba(13,38,74,.34) 100%),var(--shot);
  background-size:cover;background-position:center;min-height:clamp(380px,52vw,540px);
  align-items:center}
.bslide--image h1,.bslide--image .lede{color:#fff}
.bslide--image .eyebrow{color:var(--yellow)}
.bslide--image .btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.bslide--image .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

.banner.multi .bslide-radio:nth-of-type(1):checked ~ .bslide:nth-of-type(1),
.banner.multi .bslide-radio:nth-of-type(2):checked ~ .bslide:nth-of-type(2),
.banner.multi .bslide-radio:nth-of-type(3):checked ~ .bslide:nth-of-type(3),
.banner.multi .bslide-radio:nth-of-type(4):checked ~ .bslide:nth-of-type(4),
.banner.multi .bslide-radio:nth-of-type(5):checked ~ .bslide:nth-of-type(5),
.banner.multi .bslide-radio:nth-of-type(6):checked ~ .bslide:nth-of-type(6){display:block}
.banner.multi .bslide-radio:nth-of-type(1):checked ~ .bslide--image:nth-of-type(1),
.banner.multi .bslide-radio:nth-of-type(2):checked ~ .bslide--image:nth-of-type(2),
.banner.multi .bslide-radio:nth-of-type(3):checked ~ .bslide--image:nth-of-type(3),
.banner.multi .bslide-radio:nth-of-type(4):checked ~ .bslide--image:nth-of-type(4),
.banner.multi .bslide-radio:nth-of-type(5):checked ~ .bslide--image:nth-of-type(5),
.banner.multi .bslide-radio:nth-of-type(6):checked ~ .bslide--image:nth-of-type(6){display:flex}

.bdots{position:absolute;bottom:20px;left:0;right:0;display:flex;gap:9px;
  justify-content:center;z-index:3}
.bdots label{width:34px;height:5px;border-radius:99px;background:var(--line);cursor:pointer;
  transition:background .18s,width .18s}
.bdots label:hover{background:var(--gold)}
.bslide--image ~ .bdots label{background:rgba(255,255,255,.45)}
.banner.multi .bslide-radio:nth-of-type(1):checked ~ .bdots label:nth-child(1),
.banner.multi .bslide-radio:nth-of-type(2):checked ~ .bdots label:nth-child(2),
.banner.multi .bslide-radio:nth-of-type(3):checked ~ .bdots label:nth-child(3),
.banner.multi .bslide-radio:nth-of-type(4):checked ~ .bdots label:nth-child(4),
.banner.multi .bslide-radio:nth-of-type(5):checked ~ .bdots label:nth-child(5),
.banner.multi .bslide-radio:nth-of-type(6):checked ~ .bdots label:nth-child(6){background:var(--blue);width:52px}

/* =======================================================================
   The front-page news block

   One lead story with a stacked column of the three next-newest beside it —
   the shape a newspaper front page has used for a century, because it says
   at a glance which story matters most without anybody having to read first.
   ==================================================================== */
.newsblock{display:grid;gap:22px}
@media(min-width:940px){
  /* stretch, not start: the two columns are one block, and a short right
     column leaving a pale gap beside a tall lead card is the thing that made
     this section look unfinished. */
  .newsblock{grid-template-columns:1.32fr 1fr;align-items:stretch}
}

.lead{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:box-shadow .18s}
.lead:hover{box-shadow:var(--shadow)}
.lead .thumb{overflow:hidden;background:var(--wash);aspect-ratio:16/9}
.lead .thumb img{width:100%;height:100%;object-fit:cover}
.lead .body{padding:24px clamp(20px,3vw,30px) 26px;display:flex;flex-direction:column;flex:1}
.lead h3{font-size:clamp(1.28rem,2.3vw,1.7rem);line-height:1.24;margin-bottom:.5rem}
.lead p{font-size:1rem;color:#4A5058;margin-bottom:1rem}
.lead .rule{margin-top:auto;margin-bottom:0}

/* The right column divides its height between the three stories and the
   button, so the two columns finish level whatever the lead card's height
   turns out to be. */
.sidelist{display:flex;flex-direction:column;gap:12px}
.side-item{display:grid;grid-template-columns:112px 1fr;gap:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:box-shadow .18s;flex:1;min-height:104px}
.side-item:hover{box-shadow:var(--shadow)}
.side-item .thumb{overflow:hidden;background:var(--wash);height:100%}
.side-item .thumb img{width:100%;height:100%;object-fit:cover}
.side-item .body{padding:14px 16px;min-width:0;display:flex;flex-direction:column;
  justify-content:center}
.side-item h3{font-size:.97rem;line-height:1.33;margin-bottom:.2rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.side-item .meta{font-size:.72rem;margin-bottom:.28rem}
.side-item.nophoto{grid-template-columns:1fr}
.sidelist .btn{flex:0 0 auto}

@media(max-width:939px){
  .side-item{min-height:0}
  .side-item .thumb{aspect-ratio:1;height:auto}
}

/* =======================================================================
   Hero (inner pages)
   ==================================================================== */
.hero{position:relative;overflow:hidden;background:var(--white);
  padding:clamp(48px,8vw,92px) 0 clamp(40px,6vw,72px)}
/* The cultural motif, page 09 item 4: national motifs at no more than 10%. */
.hero::before{content:'';position:absolute;top:-14%;right:-8%;width:min(560px,58vw);
  aspect-ratio:1;background:url('brand/motif-sun.png') center/contain no-repeat;
  opacity:.08;pointer-events:none}
.hero .inner{position:relative;max-width:760px}
.hero h1{margin-bottom:.35em}
.hero .lede{font-size:clamp(1.02rem,2vw,1.2rem);color:var(--charcoal);max-width:60ch}
/* Page 08: the serif is for quotes and ceremonial moments, used sparingly. */
.hero .tagline{font-family:var(--serif);font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--blue);margin:0 0 1.1rem}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:9px;
  font:600 .95rem var(--font);cursor:pointer;border:1.5px solid transparent;
  text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-ghost{border-color:var(--line);color:var(--blue);background:#fff}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-tint)}
.btn-gold{background:var(--gold);color:#3a2905}
.btn-gold:hover{filter:brightness(.95)}
.btn-danger{background:#fff;border-color:#F3C0C3;color:#B21520}
.btn-danger:hover{background:#FDF2F3}
.btn-sm{padding:7px 13px;font-size:.84rem}

/* =======================================================================
   Sections and cards
   ==================================================================== */
.section{padding:clamp(46px,7vw,80px) 0}
.section.wash{background:var(--wash);border-block:1px solid var(--line)}
.section-head{margin-bottom:2.2rem;max-width:70ch}

.grid{display:grid;gap:24px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card .thumb{aspect-ratio:16/10;background:var(--wash);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.card h3{margin-bottom:.4rem;font-size:1.06rem;line-height:1.34}
.card h3 a{color:var(--blue)}
.card .meta{font-size:.78rem;color:var(--grey);margin-bottom:.55rem;
  display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.card p{font-size:.92rem;color:#4A5058;margin-bottom:.9rem}
.card .foot{margin-top:auto}

/* The four brand-value cards carry a coloured cap that cycles through the
   signature palette, so the row reads as one composition instead of four
   identical white boxes. Scoped to .values so ordinary content cards keep
   their plain treatment. */
.values .card{position:relative;overflow:hidden}
.values .card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px}
.values .card:nth-child(1)::before{background:var(--red)}
.values .card:nth-child(2)::before{background:var(--gold)}
.values .card:nth-child(3)::before{background:var(--blue)}
.values .card:nth-child(4)::before{background:var(--yellow)}
.values .card .body{padding-top:22px}
.values .card h3{font-size:1.02rem;margin-bottom:.35rem}

.chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.7rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--gold-tint);color:#8A6108}
.chip.blue{background:var(--blue-tint);color:var(--blue)}
.chip.grey{background:var(--wash);color:var(--grey)}
.chip.red{background:#FDEEEF;color:#B21520}
.chip.green{background:#EAF6EE;color:#1C6B37}

/* -- committee ---------------------------------------------------------- */
.person{text-align:center;padding:26px 18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius)}
.person .avatar{width:104px;height:104px;margin:0 auto 14px;border-radius:50%;
  overflow:hidden;background:var(--blue-tint);display:grid;place-items:center;
  color:var(--blue);font-weight:700;font-size:1.9rem;border:3px solid var(--gold)}
.person .avatar img{width:100%;height:100%;object-fit:cover}
.person .nm{font-weight:700;color:var(--charcoal);margin-bottom:2px}
.person .rl{font-size:.82rem;color:var(--gold);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:.6rem}
.person .contact{font-size:.83rem;color:var(--grey);line-height:1.75}
.person .contact a{color:var(--grey)}

/* -- the coming-soon panel --------------------------------------------- */
.soon{position:relative;overflow:hidden;background:var(--blue);color:#fff;
  border-radius:16px;padding:clamp(30px,5vw,52px);text-align:center}
.soon::before{content:'';position:absolute;top:-30%;right:-12%;width:340px;aspect-ratio:1;
  background:url('brand/motif-sun.png') center/contain no-repeat;opacity:.10}
.soon .inner{position:relative}
.soon h2{color:#fff}
.soon p{color:#DCE8F7;max-width:56ch;margin-inline:auto}
.soon .badge{display:inline-block;background:var(--gold);color:#3a2905;font-weight:700;
  font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  padding:7px 16px;border-radius:99px;margin-bottom:1.1rem}

/* -- article ------------------------------------------------------------ */
.article{max-width:760px;margin:0 auto}
.article .hero-img{border-radius:var(--radius);overflow:hidden;margin:0 0 2rem}
.article-body{font-size:1.045rem;line-height:1.78}
.article-body h2{font-size:1.5rem;margin-top:2.1rem}
.article-body h3{font-size:1.2rem;margin-top:1.7rem}
.article-body img{border-radius:10px;margin:1.6rem 0}
.article-body blockquote{margin:1.9rem 0;padding:4px 0 4px 22px;
  border-inline-start:3px solid var(--gold);font-family:var(--serif);
  font-size:1.1rem;color:var(--blue);line-height:1.6}
.article-body ul,.article-body ol{padding-inline-start:1.3em}
.article-body li{margin-bottom:.4em}

.gallery-strip{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  margin:2rem 0}
.gallery-strip img{border-radius:9px;aspect-ratio:1;object-fit:cover;width:100%}

/* -- tables ------------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{padding:11px 14px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--wash);font-weight:600;font-size:.76rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grey);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFCFF}

/* -- forms -------------------------------------------------------------- */
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.35rem;color:var(--charcoal)}
.field .help{font-size:.8rem;color:var(--grey);margin-top:.3rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],
input[type=number],input[type=search],input[type=url],select,textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:9px;
  font:400 .96rem var(--font);color:var(--charcoal);background:#fff}
textarea{min-height:150px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(22,96,194,.13)}
.req{color:var(--red)}

.note{display:flex;gap:11px;padding:13px 16px;border-radius:10px;margin-bottom:1.4rem;
  background:var(--blue-tint);border:1px solid #CBDDF5;font-size:.92rem}
.note .ic{font-weight:700;color:var(--blue)}
.note.ok{background:#EAF6EE;border-color:#BFE3CB}
.note.ok .ic{color:#1C6B37}
.note.warn{background:var(--gold-tint);border-color:#F0DBAE}
.note.warn .ic{color:#8A6108}
.note.stop{background:#FDEEEF;border-color:#F3C0C3}
.note.stop .ic{color:#B21520}

/* =======================================================================
   Footer
   ==================================================================== */
.foot{background:var(--blue);color:#D9E6F8;padding:52px 0 0;margin-top:0}
.foot h4{color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:1rem;font-weight:600}
.foot a{color:#D9E6F8}
.foot a:hover{color:#fff}
.foot .cols{display:grid;gap:34px;grid-template-columns:1.5fr 1fr 1fr;padding-bottom:38px}
.foot ul{list-style:none;padding:0;margin:0;font-size:.92rem;line-height:2}
.foot .about{font-size:.93rem;max-width:38ch;color:#C6D8F0}
.foot .fmark{background:#fff;display:inline-block;padding:9px 13px;border-radius:10px;margin-bottom:16px}
.foot .fmark img{height:38px}
.foot .legal{border-top:1px solid rgba(255,255,255,.18);padding:16px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.79rem;color:#B9CEEA}
@media(max-width:820px){.foot .cols{grid-template-columns:1fr}}

/* =======================================================================
   Admin
   ==================================================================== */
.admin{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--blue);color:#D9E6F8;padding:0 0 20px;position:sticky;top:0;
  height:100vh;overflow-y:auto}
.side .brand{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:12px}
.side .brand .box{background:#fff;border-radius:9px;padding:9px 11px;display:inline-block}
.side .brand img{height:34px}
.side .brand .sys{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  margin-top:11px;color:#A9C4E8}
.side .grp{padding:16px 20px 6px;font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:#8FB0DC}
.side nav a{display:flex;align-items:center;gap:11px;padding:9px 20px;color:#D9E6F8;
  font-size:.93rem;font-weight:500}
.side nav a:hover{background:rgba(255,255,255,.1);text-decoration:none;color:#fff}
.side nav a[aria-current]{background:rgba(255,255,255,.17);color:#fff;font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold)}
.side .ic{width:19px;text-align:center;opacity:.9}
.side .who{margin-top:22px;padding:16px 18px;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem}
.side .whoami{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.side .whoami .av{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;
  place-items:center;background:rgba(255,255,255,.16);color:#fff;font-weight:700;font-size:1rem}
.side .whotext{min-width:0;display:flex;flex-direction:column}
.side .who .nm{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .who .rl{font-size:.7rem;color:#A9C4E8;letter-spacing:.09em;text-transform:uppercase}
.side .whoacts{display:flex;gap:7px;flex-wrap:wrap}
.side .whoacts .btn-ghost{background:transparent;border-color:rgba(255,255,255,.32);color:#D9E6F8}
.side .whoacts .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* Sign out is a real button, in red, in both the sidebar and the top bar.
   It was a plain text link at the very bottom of the sidebar and people
   could not find it. */
.btn-signout{background:var(--red);color:#fff;border-color:var(--red);gap:6px}
.btn-signout:hover{background:#C40E18;border-color:#C40E18;color:#fff}
.topbar-signout{margin-left:10px}
@media(max-width:640px){.topbar-signout .lbl{display:none}}

.work{background:var(--wash);min-width:0}
.work .topbar{background:#fff;border-bottom:1px solid var(--line);padding:15px 28px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.work .topbar .ttl{font-weight:700;color:var(--blue);font-size:1.12rem}
.work .topbar .sub{font-size:.83rem;color:var(--grey)}
.work .sp{margin-left:auto}
.work .content{padding:28px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:22px}
.panel > h3:first-child{margin-top:0}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}

.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.stat .n{font-size:1.9rem;font-weight:700;color:var(--blue);line-height:1.1}
.stat .l{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:4px}

/* -- the language tabs on the three-language editors -------------------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;
  padding:9px 16px;font:600 .9rem var(--font);color:var(--grey);cursor:pointer}
.tabs button[aria-selected=true]{color:var(--blue);border-bottom-color:var(--gold)}
.tabpane[hidden]{display:none}
.tabs .missing::after{content:'•';color:var(--gold);margin-inline-start:6px;font-size:1.2em;
  line-height:0;vertical-align:middle}

/* -- the rich text editor (Quill 2, snow theme) -------------------------- */
.wysiwyg{background:#fff;border-radius:0 0 9px 9px}
.ql-toolbar.ql-snow{border-color:var(--line);border-radius:9px 9px 0 0;background:var(--wash)}
.ql-container.ql-snow{border-color:var(--line);border-radius:0 0 9px 9px;
  font:400 .97rem/1.7 var(--font);color:var(--charcoal)}
.ql-editor{min-height:300px}
.ql-editor h2{font-size:1.35rem;color:var(--blue)}
.ql-editor h3{font-size:1.1rem;color:var(--blue)}
.ql-editor blockquote{border-left:3px solid var(--gold);padding-left:16px;
  font-family:var(--serif);color:var(--blue)}
.ql-snow .ql-stroke{stroke:var(--charcoal)}
.ql-snow .ql-picker{color:var(--charcoal)}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke{stroke:var(--blue)}
.ql-snow.ql-toolbar button.ql-active .ql-fill{fill:var(--blue)}

/* The alignment classes Quill writes have to mean something on the public
   page too, or a centred paragraph in the editor arrives left-aligned. */
.article-body .ql-align-center,.ql-editor .ql-align-center{text-align:center}
.article-body .ql-align-right,.ql-editor .ql-align-right{text-align:right}
.article-body .ql-align-justify,.ql-editor .ql-align-justify{text-align:justify}

/* -- the brand check panel ---------------------------------------------- */
.bcheck{list-style:none;padding:0;margin:0}
.bcheck li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.bcheck li:last-child{border-bottom:0}
.bcheck .mark{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;font-size:.82rem;font-weight:700;color:#fff;background:#1C6B37}
.bcheck .fail .mark{background:#B21520}
.bcheck .warn .mark{background:var(--gold);color:#3a2905}
.bcheck .no{font-size:.7rem;color:var(--grey);letter-spacing:.1em;font-weight:600}
.bcheck .ttl{font-weight:600;font-size:.93rem}
.bcheck .dt{font-size:.83rem;color:var(--grey);line-height:1.55}

.medialist{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.medialist figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.medialist img{aspect-ratio:4/3;object-fit:cover;width:100%}
.medialist figcaption{padding:8px 10px;font-size:.75rem;color:var(--grey)}

@media(max-width:860px){
  .admin{grid-template-columns:1fr}
  .side{position:static;height:auto}
  .side nav{display:flex;flex-wrap:wrap}
  .side nav a{padding:8px 14px}
  .side .grp{width:100%;padding-block:10px 2px}
  .work .content{padding:18px}
}

/* -- login -------------------------------------------------------------- */
.loginwrap{min-height:100vh;display:grid;place-items:center;background:var(--wash);padding:24px}
.loginbox{width:100%;max-width:410px;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.loginbox .top{padding:30px 30px 22px;text-align:center;border-bottom:1px solid var(--line)}
.loginbox .top img{height:76px;margin:0 auto 14px}
.loginbox .top .tag{font-family:var(--serif);color:var(--blue);font-size:.95rem}
.loginbox form{padding:26px 30px 30px}

@media print{
  .masthead,.foot,.side,.topbar,.actions,.burger{display:none!important}
  body{font-size:11pt}
  .admin{grid-template-columns:1fr}
}