/* Civilszy site styles: the homepage design (header, menu, footer, widgets) plus article, list and page styles. */
  /* ---------- Design tokens ---------- */
  :root{
    --paper:      #FFFFFF;
    --paper-2:    #F5F4F0;
    --navy:       #14213D;
    --navy-2:     #1E3157;
    --navy-3:     #0D1729;
    --gold:       #A9781F;
    --gold-light: #C99A3E;
    --maroon:     #7A2331;
    --ink:        #211D16;
    --ink-soft:   #5B5544;
    --line:       #E8E6DC;
    --tint-cream: #FFFFFF;
    --tint-blue:  #FFFFFF;
    --tint-mint:  #FFFFFF;
    --line-dark:  rgba(246,241,227,0.18);

    --serif: "Inter", sans-serif;
    --sans:  "Inter", sans-serif;

    --max: 1180px;
  }

  html{ background:#fff; }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{
    font-family:var(--serif);
    color:var(--navy);
    margin:0;
    font-weight:600;
    letter-spacing:-0.01em;
  }

  p{ margin:0; }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  button{ font-family:inherit; cursor:pointer; }

  .wrap{ max-width:var(--max); margin:0 auto; padding:0 32px; }

  .skip-link{
    position:absolute; left:-999px; top:auto;
    background:var(--navy); color:var(--paper); padding:12px 20px; z-index:200;
    border-radius:0 0 6px 0;
  }
  .skip-link:focus{ left:0; top:0; }

  :focus-visible{ outline:2.5px solid var(--maroon); outline-offset:3px; }

  /* ---------- Announcement bar (scrolling) ---------- */
  .announce{ background:var(--navy-3); color:var(--paper); font-size:14px; overflow:hidden; }
  .marquee{ overflow:hidden; white-space:nowrap; padding:10px 0; }
  .marquee-track{ display:inline-flex; width:max-content; animation:marquee 55s linear infinite; will-change:transform; }
  .announce:hover .marquee-track, .marquee:focus-within .marquee-track{ animation-play-state:paused; }
  .marquee-group{ display:inline-flex; flex:none; }
  .marquee-item{ display:inline-flex; align-items:center; gap:12px; padding:0 34px; color:inherit; }
  .marquee-item:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; border-radius:3px; }
  .marquee-item .mq{ color:#fff; font-weight:600; font-size:inherit; line-height:inherit; }
  .marquee-item:hover .mq{ text-decoration:underline; text-underline-offset:3px; }
  .yt-ico{ width:24px; height:17px; flex:none; }
  .quiz-ico{ width:22px; height:22px; flex:none; }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none !important; transform:none; }
    .marquee-group + .marquee-group{ display:none; }
    .marquee{ overflow-x:auto; }
  }

  /* ---------- Header ---------- */
  html{ scroll-padding-top:128px; }
  html.lock{ overflow:hidden; }

  .site-header{ position:sticky; top:0; z-index:100; background:var(--paper); transition:box-shadow .2s ease; }
  .site-header.scrolled{ box-shadow:0 12px 26px -18px rgba(20,33,61,0.45); }
  .header-top{ border-bottom:1px solid var(--line); }
  .header-top-inner{ display:flex; align-items:center; gap:24px; padding-top:12px; padding-bottom:12px; }

  .brand{ display:flex; align-items:center; gap:11px; flex:none; }
  .brand-name{
    font-family:var(--serif); font-weight:700; font-size:22px;
    color:var(--navy); letter-spacing:-0.01em;
  }
  .brand-name em{ font-style:normal; color:#B07900; }


  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:600; font-size:15px;
    padding:12px 22px;
    border-radius:3px;
    border:1.5px solid transparent;
    transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
    white-space:nowrap;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--navy); color:var(--paper); }
  .btn-primary:hover{ background:var(--navy-2); }
  .btn-gold{ background:var(--gold); color:var(--navy-3); }
  .btn-gold:hover{ background:var(--gold-light); }
  .btn-outline{ background:transparent; color:var(--paper); border-color:var(--line-dark); }
  .btn-outline:hover{ border-color:var(--gold-light); color:var(--gold-light); }
  .btn-outline-dark{ background:transparent; color:var(--navy); border-color:var(--navy); }
  .btn-outline-dark:hover{ background:var(--navy); color:var(--paper); }
  .btn-small{ padding:9px 16px; font-size:14px; }

  .icon-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; background:none; border:none;
    border-radius:10px; color:var(--navy);
  }
  .icon-btn:hover{ background:var(--paper-2); }
  .icon-btn svg{ width:24px; height:24px; }
  .header-icons{ display:none; align-items:center; gap:2px; margin-left:auto; margin-right:-8px; }

  /* ---------- Search (shared by header + drawer) ---------- */
  .search{ position:relative; }
  .header-top .search{ flex:1; max-width:460px; margin-left:auto; }
  .search .s-ico{
    position:absolute; left:15px; top:50%; transform:translateY(-50%);
    width:17px; height:17px; color:var(--ink-soft); pointer-events:none;
  }
  .search input{
    width:100%; font:inherit; font-size:14.5px; color:var(--ink);
    padding:11px 16px 11px 42px;
    background:#fff; border:1px solid var(--line); border-radius:999px;
    -webkit-appearance:none; appearance:none;
  }
  .search input::placeholder{ color:#8A826C; }
  .search input:focus{ outline:none; border-color:var(--navy); background:#fff; box-shadow:0 0 0 3px rgba(20,33,61,0.12); }
  .search input::-webkit-search-cancel-button{ -webkit-appearance:none; }

  .search-results{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
    background:var(--paper); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 26px 48px -18px rgba(13,23,41,0.35);
    max-height:380px; overflow:auto; padding:6px; display:none;
  }
  .search-results.show{ display:block; }
  .res{ display:block; padding:10px 12px; border-radius:8px; }
  .res:hover, .res:focus-visible{ background:var(--paper-2); }
  .res strong{ display:block; font-weight:500; font-size:15px; color:var(--ink); }
  .res span{ font-size:12.5px; color:var(--ink-soft); }
  .res-empty{ padding:14px 12px; font-size:14px; color:var(--ink-soft); }

  /* ---------- Desktop menu bar ---------- */
  .nav-bar{ background:var(--navy); position:relative; z-index:2; }
  .nav-bar .wrap{ padding:0 22px; }
  .menubar{ list-style:none; margin:0; padding:0; display:flex; justify-content:space-between; }
  .menubar > li{ position:relative; }
  .menubar > li > a{
    display:flex; align-items:center; gap:5px;
    padding:14px 9px 11px; border-bottom:3px solid transparent;
    font-size:13.5px; font-weight:500; color:var(--paper); white-space:nowrap;
    transition:background .15s ease, border-color .15s ease;
  }
  .menubar > li:hover > a,
  .menubar > li.open > a{ background:var(--navy-2); border-bottom-color:var(--gold-light); }
  .menubar > li.accent > a{ color:#E8CF86; }
  .nav-bar :focus-visible{ outline:2px solid var(--gold-light); outline-offset:-3px; }

  .chev{ width:9px; height:9px; flex:none; transition:transform .18s ease; }
  .menubar > li.open > a .chev{ transform:rotate(180deg); }

  .sub{
    list-style:none; margin:0; padding:6px 0;
    position:absolute; top:100%; left:0; min-width:268px; z-index:50;
    background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--gold);
    border-radius:0 0 10px 10px;
    box-shadow:0 26px 48px -18px rgba(13,23,41,0.38);
    display:none;
  }
  li.open > .sub{ display:block; animation:subIn .16s ease both; }
  @keyframes subIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

  .sub .sub{ top:-7px; left:100%; margin-left:-2px; border-top:1px solid var(--line); border-radius:10px; }
  .sub li.left > .sub{ left:auto; right:100%; margin-left:0; margin-right:-2px; }

  .sub a, .sub .soon{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:10px 18px; font-size:14.5px; color:var(--ink); white-space:nowrap;
  }
  .sub li:hover > a, .sub li.open > a{ background:var(--paper-2); color:var(--maroon); }
  .sub .chev{ transform:rotate(-90deg); color:var(--ink-soft); }
  .sub li.left > a .chev{ transform:rotate(90deg); }
  .sub .soon{ color:var(--ink-soft); cursor:default; }
  .soon em{
    font-style:normal; font-size:11.5px; background:var(--paper-2);
    border:1px solid var(--line); padding:2px 9px; border-radius:10px;
  }

  /* ---------- Mobile drawer (same menu data, drill-down) ---------- */
  .drawer-backdrop{
    position:fixed; inset:0; z-index:300; background:rgba(13,23,41,0.55);
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s .25s;
  }
  .drawer-backdrop.show{ opacity:1; visibility:visible; transition-delay:0s; }

  .drawer{
    position:fixed; top:0; left:0; bottom:0; z-index:310;
    width:min(92vw, 420px); height:100vh; height:100dvh;
    background:var(--paper); display:flex; flex-direction:column;
    transform:translateX(-102%); visibility:hidden;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s;
    box-shadow:20px 0 50px -20px rgba(13,23,41,0.5);
  }
  .drawer.open{ transform:none; visibility:visible; transition-delay:0s; }

  .drawer-head{
    flex:none; display:flex; align-items:center; justify-content:space-between;
    background:var(--navy); padding:10px 8px 10px 18px;
  }
  .drawer-head .brand-name{ color:var(--paper); }
  .drawer-head .brand-name em{ color:var(--gold-light); }
  .drawer-close{ color:var(--paper); }
  .drawer-close:hover{ background:rgba(255,255,255,0.1); }

  .drawer-search{ flex:none; padding:12px 16px; border-bottom:1px solid var(--line); }
  .drawer-search .search input{ font-size:16px; padding:13px 16px 13px 44px; border-radius:12px; }

  .drawer-body{ position:relative; flex:1; overflow:hidden; }
  .panel{
    position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
    background:var(--paper); -webkit-overflow-scrolling:touch;
    transform:translateX(100%); visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s;
  }
  .panel.active{ transform:none; visibility:visible; transition-delay:0s; }
  .panel.behind{ transform:translateX(-28%); }

  .panel-head{
    position:sticky; top:0; z-index:2; background:var(--paper);
    display:flex; align-items:center; gap:4px; padding:8px 16px 8px 6px;
    border-bottom:1px solid var(--line);
  }
  .panel-title small{ display:block; font-size:12px; color:var(--ink-soft); line-height:1.3; }
  .panel-title strong{ display:block; font-family:var(--serif); font-size:19px; color:var(--navy); line-height:1.25; }

  .m-list{ list-style:none; margin:0; padding:0 0 32px; }
  .m-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; min-height:54px; padding:14px 20px;
    font:inherit; font-size:16px; color:var(--ink); text-align:left;
    background:none; border:none; border-bottom:1px solid rgba(232,230,220,0.9);
  }
  .m-row:active{ background:var(--paper-2); }
  .m-row .chev{ width:11px; height:11px; transform:rotate(-90deg); color:var(--ink-soft); }
  .m-row.viewall{ color:var(--maroon); font-weight:600; background:rgba(245,244,240,0.9); }
  .m-row.accent{ color:var(--gold); font-weight:600; }
  .m-row.soon-row{ color:var(--ink-soft); }
  .drawer :focus-visible{ outline:2px solid var(--maroon); outline-offset:-3px; }
  .drawer-head :focus-visible{ outline-color:var(--gold-light); }

  .drawer-results{
    position:absolute; inset:0; z-index:5; overflow-y:auto; overscroll-behavior:contain;
    background:var(--paper); display:none; padding-bottom:28px;
  }
  .drawer-results.show{ display:block; }
  .drawer-results .res{ padding:14px 20px; border-radius:0; border-bottom:1px solid rgba(232,230,220,0.9); }
  .drawer-results .res strong{ font-size:16px; }
  .drawer-results .res-empty{ padding:20px; }


  .toast{
    position:fixed; left:50%; bottom:24px; z-index:400;
    transform:translate(-50%, 16px); opacity:0; pointer-events:none;
    max-width:calc(100vw - 32px);
    background:var(--navy-3); color:var(--paper); font-size:14px;
    padding:12px 18px; border-radius:8px; box-shadow:0 18px 40px -16px rgba(0,0,0,0.5);
    transition:opacity .25s ease, transform .25s ease;
  }
  .toast.show{ opacity:1; transform:translate(-50%, 0); }


  /* ---------- Subject strip ---------- */
  .subject-strip{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--paper);
    padding:28px 0;
    overflow:hidden;
  }
  a.chip:hover{ border-color:var(--navy); color:var(--navy); background:#fff; }
  .subject-strip .wrap{
    display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  }
  .chip{
    border:1px solid var(--line); background:var(--paper-2);
    padding:8px 16px; border-radius:20px; font-size:14px; color:var(--ink-soft); font-weight:500;
  }

  /* ---------- Section shell ---------- */
  section{ padding:88px 0; }
  .section-head{ max-width:640px; margin-bottom:52px; }
  .section-head h2{ font-size:34px; margin-bottom:14px; line-height:1.18; }
  .section-head p{ color:var(--ink-soft); font-size:17px; }

  /* ---------- Notes library ---------- */
  .library-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .note-card{
    background:var(--paper); padding:26px; display:flex; flex-direction:column; gap:14px;
    transition:background .18s ease;
  }
  .note-card:hover{ background:var(--paper-2); }
  .note-tag{
    align-self:flex-start; font-size:12.5px; font-weight:600; color:var(--maroon);
    border:1px solid var(--maroon); padding:3px 10px; border-radius:14px;
  }
  .note-card h3{ font-size:19px; line-height:1.32; }
  .note-meta{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:14px; }
  .note-card a{
    margin-top:auto; font-weight:600; font-size:14.5px; color:var(--navy);
    border-bottom:1.5px solid var(--gold);
    align-self:flex-start; padding-bottom:2px;
  }
  .note-card a:hover{ color:var(--maroon); border-color:var(--maroon); }

  /* ---------- Current affairs ---------- */
  .ca-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
  .ca-list{ border-top:1px solid var(--line); }
  .ca-item{
    display:flex; gap:22px; padding:22px 0; border-bottom:1px solid var(--line);
  }
  .ca-date{
    font-family:var(--serif); font-size:14px; color:#8F5F00; font-weight:600;
    white-space:nowrap; width:64px; flex:none; padding-top:2px;
  }
  .ca-item h3{ font-size:16.5px; margin-bottom:6px; color:var(--ink); font-weight:600; font-family:var(--sans); }
  .ca-item p{ font-size:14.5px; color:var(--ink-soft); }

  /* ---------- Footer ---------- */
  footer{ background:var(--navy-3); color:#B9C0CE; padding-top:72px; }
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:56px; border-bottom:1px solid var(--line-dark);
  }
  .footer-brand .brand-name{ color:var(--paper); }
  .footer-brand p{ margin-top:16px; font-size:14.5px; line-height:1.7; max-width:32ch; color:#9AA3B4; }
  .footer-col h3{ color:var(--paper); font-size:14.5px; font-weight:600; margin-bottom:18px; font-family:var(--sans); }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .footer-col a{ font-size:14.5px; color:#9AA3B4; }
  .footer-col a:hover{ color:var(--gold-light); }
  .footer-legal{ display:flex; flex-wrap:wrap; gap:8px 24px; }
  .footer-legal a{ color:#9AA3B4; }
  .footer-legal a:hover{ color:var(--gold-light); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:24px 0; font-size:13.5px; color:#7C8598; flex-wrap:wrap;
  }

  /* ---------- Responsive ---------- */
  .use-drawer{ scroll-padding-top:80px; }
  .use-drawer .nav-bar, .use-drawer .header-top .search{ display:none; }
  .use-drawer .header-icons{ display:flex; }
  .use-drawer .header-top-inner{ padding-top:8px; padding-bottom:8px; }

  @media (max-width: 980px){
    .library-grid{ grid-template-columns:1fr 1fr; }
    .ca-layout{ grid-template-columns:1fr; gap:32px; }
    .footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
  }

  @media (max-width: 620px){
    .wrap{ padding:0 18px; }
    section{ padding:56px 0; }
    .section-head{ margin-bottom:32px; }
    .section-head h2{ font-size:26px; }
    .section-head p{ font-size:16px; }

    .announce{ font-size:13px; }
    .marquee{ padding:9px 0; }
    .marquee-item{ padding:0 24px; }

    .brand-name{ font-size:20px; }


    .subject-strip{ padding:14px 0; }
    .subject-strip .wrap{
      flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
      scrollbar-width:none; -webkit-overflow-scrolling:touch;
    }
    .subject-strip .wrap::-webkit-scrollbar{ display:none; }
    .chip{ flex:none; white-space:nowrap; }

    .library-grid{ grid-template-columns:1fr; }
    .note-card{ padding:22px 20px; }
    .tl-step{ grid-template-columns:1fr; gap:6px; padding:24px 0; }
    .ca-item{ gap:14px; }
    .ca-date{ width:48px; }

    footer{ padding-top:52px; }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 20px; padding-bottom:40px; }
    .footer-brand{ grid-column:1 / -1; }
    .footer-brand p{ max-width:none; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
    .footer-legal{ gap:8px 16px; font-size:13px; }
    .toast{ bottom:16px; }
  }

  /* ---------- Blog layout: main column + right sidebar ---------- */
  .content-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:start; padding-top:8px; padding-bottom:24px; }
  .content-main section{ padding:56px 0; }
  .content-main section + section{ border-top:1px solid var(--line); }
  .content-main .library-grid{ grid-template-columns:repeat(2, 1fr); }
  .content-main .ca-layout{ grid-template-columns:1fr; gap:28px; }
  .section-head h1{ font-size:40px; line-height:1.14; margin-bottom:14px; }

  .sidebar{ display:flex; flex-direction:column; gap:26px; padding-top:56px; }
  .widget{ border:1px solid var(--line); background:var(--paper); padding:24px; }
  .widget h3{ font-size:19px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
  .widget p{ color:var(--ink-soft); font-size:15px; }
  .widget-yt{ background:var(--paper-2); border-top:3px solid #E02D2D; }
  .widget-yt .yt-big{ width:54px; height:38px; margin-bottom:14px; }
  .widget-yt h3{ border:none; padding:0; margin-bottom:8px; }
  .widget-yt .btn{ margin-top:18px; width:100%; }
  .btn-yt{ background:#D9261C; color:#fff; }
  .btn-yt:hover{ background:#B81E15; }

  .side-list{ list-style:none; margin:0; padding:0; }
  .side-list li{ border-bottom:1px solid var(--line); }
  .side-list li:last-child{ border-bottom:none; }
  .side-list a{ display:block; padding:11px 0; font-size:15px; color:var(--ink); line-height:1.4; }
  .side-list a:hover{ color:var(--maroon); }
  .side-list .meta{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

  @media (max-width: 1100px){
    .content-layout{ grid-template-columns:1fr; gap:0; }
    .sidebar{ padding-top:8px; padding-bottom:56px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
    .widget-yt{ grid-column:1 / -1; }
  }
  @media (max-width: 760px){
    .content-main .library-grid{ grid-template-columns:1fr; }
    .sidebar{ grid-template-columns:1fr; padding-bottom:40px; }
  }
  @media (max-width: 620px){
    .section-head h1{ font-size:29px; }
    .content-main section{ padding:40px 0; }
    .widget{ padding:20px; }
  }

  /* ---------- Exam at a glance ---------- */
  .glance{ border-top:1px solid var(--line); background:var(--paper); }
  .stages{ display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stage{ display:flex; flex-direction:column; padding:30px 30px 28px; border-right:1px solid var(--line); }
  .stage:first-child{ padding-left:0; }
  .stage:last-child{ border-right:none; padding-right:0; }
  .stage h3{ font-size:25px; }
  .stage-kind{ color:var(--maroon); font-weight:600; font-size:14px; margin:4px 0 20px; }
  .stage dl{ margin:0 0 24px; display:grid; gap:15px; }
  .stage dt{ font-size:13px; font-weight:600; color:var(--ink-soft); }
  .stage dd{ margin:2px 0 0; font-size:15.5px; line-height:1.55; }
  .glance .text-link{ margin-top:auto; align-self:flex-start; font-weight:600; font-size:15px; color:var(--navy); border-bottom:1.5px solid var(--gold); padding-bottom:2px; }
  .glance .text-link:hover{ color:var(--maroon); border-color:var(--maroon); }

  .marks{ margin-top:44px; background:var(--paper-2); border:1px solid var(--line); padding:30px 32px 26px; }
  .marks h3{ font-size:22px; margin-bottom:6px; }
  .marks-sub{ color:var(--ink-soft); font-size:15px; margin-bottom:22px; }
  .marks-bar{ display:flex; height:22px; border-radius:3px; overflow:hidden; gap:2px; }
  .marks-bar span{ display:block; height:100%; }
  .m-gs{ background:#14213D; } .m-opt{ background:#A9781F; } .m-essay{ background:#7A2331; } .m-int{ background:#5E7C99; }
  .marks-legend{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:14px 24px; }
  .marks-legend li{ font-size:14.5px; line-height:1.45; }
  .marks-legend i{ display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:8px; vertical-align:-1px; }
  .marks-legend b{ display:block; font-size:15.5px; color:var(--navy); }
  .marks-legend span{ color:var(--ink-soft); }
  .marks .note{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft); }

  @media (max-width: 900px){
    .stages{ grid-template-columns:1fr; }
    .stage, .stage:first-child, .stage:last-child{ padding:26px 0; border-right:none; border-bottom:1px solid var(--line); }
    .stage:last-child{ border-bottom:none; }
    .marks-legend{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 620px){
    .marks{ padding:24px 20px 22px; margin-top:32px; }
    .marks-legend{ grid-template-columns:1fr 1fr; gap:16px 14px; }
  }

  /* ---------- Back to top button ---------- */
  .to-top{
    position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:250;
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    background:#C99A3E; color:#14213D; border:2px solid #14213D; border-radius:6px; padding:0;
    box-shadow:0 10px 24px -8px rgba(13,23,41,0.55);
    opacity:0; visibility:hidden; transform:translateY(12px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s .2s, background .15s ease, color .15s ease;
    cursor:pointer;
  }
  .to-top svg{ width:20px; height:20px; }
  .to-top.show{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .to-top:hover{ background:#14213D; color:#C99A3E; border-color:#C99A3E; }
  .to-top:focus-visible{ outline:3px solid var(--maroon); outline-offset:3px; }
  @media (max-width: 620px){ .to-top{ right:14px; width:36px; height:36px; } .to-top svg{ width:19px; height:19px; } }

  /* ---------- WordPress-fed sections ---------- */
  .skeleton{ pointer-events:none; }
  .sk{ display:block; border-radius:4px; background:#ECEAE3; animation:skpulse 1.4s ease-in-out infinite; }
  @keyframes skpulse{ 50%{ opacity:.55; } }
  @media (prefers-reduced-motion: reduce){ .sk{ animation:none; } }
  .sk-tag{ width:96px; height:22px; border-radius:14px; }
  .sk-line{ height:16px; margin-top:10px; width:92%; } .sk-line.short{ width:62%; }
  .sk-meta{ height:12px; width:110px; margin-top:12px; } .sk-date{ height:14px; width:44px; }
  .note-card.skeleton{ min-height:220px; }
  .ca-item.skeleton{ min-height:101px; }
  .side-list li.skeleton{ min-height:84px; padding:12px 0; }
  @media (max-width: 760px){ .note-card.skeleton{ min-height:212px; } .ca-item.skeleton{ min-height:112px; } }
  .wp-note{ padding:26px 22px; border:1px dashed #CFCBBE; border-radius:8px; color:var(--ink-soft); font-size:15.5px; grid-column:1 / -1; }
  .wp-note a{ color:var(--maroon); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
  li.wp-note{ list-style:none; padding:14px 0; border:none; }
  .note-card h3 a.note-title-link{ font:inherit; color:inherit; margin:0; padding:0; border:0; align-self:auto; }
  .note-card h3 a.note-title-link:hover{ color:var(--maroon); }
  .ca-link:hover{ color:var(--maroon); }
  .res-group{ padding:10px 12px 2px; font-size:12px; font-weight:600; color:var(--ink-soft); }
  .drawer-results .res-group{ padding:14px 20px 4px; }


  /* ---------- Mobile-only requested layout adjustments ---------- */
  .mobile-youtube-section{ display:none; }
  @media (max-width: 760px){
    .widget-yt-sidebar{ display:none !important; }
    .widget-browse-sections{ display:none !important; }
    .mobile-youtube-section{
      display:block;
      padding:24px 0 32px;
      border-top:1px solid var(--line);
      background:var(--paper);
    }
    .mobile-youtube-section .widget-yt{
      margin:0;
      padding:24px;
      border:1px solid var(--line);
      border-top:3px solid #E02D2D;
      background:var(--paper-2);
    }
    .mobile-youtube-section .widget-yt .btn{ width:100%; }
    .subject-strip .wrap{
      flex-wrap:wrap !important;
      justify-content:flex-start !important;
      overflow:visible !important;
      gap:8px;
    }
    .subject-strip .chip{
      white-space:normal !important;
      flex:0 1 auto !important;
      max-width:100%;
      text-align:center;
    }
  }

  /* ---------- Free PYQ Quizzes box ---------- */
  .widget-quiz{ background:var(--paper-2); border-top:3px solid #C99A3E; }
  .widget-quiz .quiz-big{ width:44px; height:44px; margin-bottom:14px; display:block; }
  .widget-quiz h3{ border:none; padding:0; margin-bottom:8px; }
  .widget-quiz > p{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin:0; }
  .widget-quiz .quiz-list{ margin:12px 0 0; }
  .widget-quiz .quiz-list li.skeleton{ min-height:64px; padding:12px 0; }
  .widget-quiz .btn{ margin-top:16px; width:100%; }
  .mobile-quiz-section{ display:none; }
  @media (max-width: 760px){
    .widget-quiz-sidebar{ display:none !important; }
    .mobile-quiz-section{ display:block; padding:0 0 32px; background:var(--paper); }
    .mobile-quiz-section .widget-quiz{ margin:0; padding:24px; border:1px solid var(--line); border-top:3px solid #C99A3E; background:var(--paper-2); }
  }

/* =====================================================
   WordPress templates: breadcrumbs, article, lists, pages
   ===================================================== */
.screen-reader-text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.page-head{ padding:38px 0 28px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size:40px; line-height:1.15; margin-bottom:12px; }
.page-head .lead{ color:var(--ink-soft); font-size:17px; max-width:62ch; margin:0; }
.crumbs{ display:flex; flex-wrap:wrap; gap:6px 8px; font-size:13.5px; color:var(--ink-soft); margin-bottom:16px; }
.crumbs a:hover{ color:var(--maroon); text-decoration:underline; }
.crumbs .sep{ opacity:.45; }
.crumbs [aria-current]{ color:var(--ink); font-weight:500; }
.single .page-head{ padding:22px 0 0; border-bottom:none; }
.single .page-head .crumbs{ margin-bottom:0; }
.single .crumbs [aria-current]{ display:inline-block; max-width:48ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.sub-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.sub-chips a.chip:hover{ border-color:var(--navy); color:var(--navy); background:#fff; }

/* ---------- Article ---------- */
.post-layout{ padding-top:8px; padding-bottom:48px; }
.post-main{ min-width:0; padding-top:20px; }
.post-header .note-tag{ display:inline-block; margin-bottom:16px; }
.post-title{ font-size:42px; line-height:1.14; margin-bottom:16px; letter-spacing:-0.015em; }
.post-lead{ font-size:19px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px; }
.post-meta{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 26px; padding-bottom:22px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:14px; }
.post-cover{ margin:0 0 28px; }
.post-cover img{ display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--line); }
.post-cover figcaption{ font-size:13.5px; color:var(--ink-soft); margin-top:8px; }

.toc{ border:1px solid var(--line); background:var(--paper-2); border-radius:8px; padding:2px 20px; margin:0 0 30px; }
.toc summary{ cursor:pointer; list-style:none; padding:14px 0; font-weight:600; color:var(--navy); }
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::after{ content:"\2013"; float:right; color:var(--gold); font-size:20px; line-height:1; }
.toc details:not([open]) summary::after{ content:"+"; }
.toc summary:focus-visible{ outline:2px solid var(--maroon); outline-offset:2px; }
.toc ol{ margin:0 0 14px; padding:0; list-style:none; }
.toc li{ margin:0; }
.toc a{ display:block; padding:6px 0; font-size:15.5px; color:var(--ink); line-height:1.4; }
.toc a:hover{ color:var(--maroon); }
.toc a.active{ color:var(--maroon); font-weight:600; }
.toc .toc-l3 a{ padding-left:18px; font-size:14.5px; color:var(--ink-soft); }
.toc .toc-l3 a.active{ color:var(--maroon); }

.prose{ font-size:18px; line-height:1.78; color:var(--ink); overflow-wrap:break-word; }
.prose > *:first-child{ margin-top:0; }
.prose p{ margin:0 0 1.15em; }
.prose h2{ font-size:28px; line-height:1.25; margin:1.8em 0 .5em; scroll-margin-top:96px; }
.prose h3{ font-size:22px; margin:1.6em 0 .4em; scroll-margin-top:96px; }
.prose h4{ font-size:18px; margin:1.4em 0 .3em; font-family:var(--sans); }
.prose ul, .prose ol{ margin:0 0 1.2em; padding-left:1.5em; }
.prose li{ margin-bottom:.4em; }
.prose a{ color:var(--maroon); text-decoration:underline; text-underline-offset:3px; }
.prose blockquote{ margin:1.4em 0; padding:.2em 0 .2em 1.2em; border-left:3px solid var(--gold); color:var(--ink-soft); font-size:1.05em; }
.prose blockquote p:last-child{ margin-bottom:0; }
.prose img, .prose video{ max-width:100%; height:auto; border-radius:6px; }
.prose figure{ margin:1.4em 0; }
.prose figcaption, .prose .wp-caption-text{ font-size:14px; color:var(--ink-soft); margin-top:6px; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:2em 0; }
.prose code{ background:var(--paper-2); padding:2px 6px; border-radius:4px; font-size:.9em; }
.prose pre{ background:var(--paper-2); padding:14px 16px; border-radius:6px; overflow-x:auto; }
.prose .table-wrap{ overflow-x:auto; margin:0 0 1.3em; }
.prose table{ border-collapse:collapse; width:100%; font-size:16px; }
.prose th, .prose td{ border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; }
.prose th{ background:var(--paper-2); }
.prose .alignleft{ float:left; margin:0 1.2em 1em 0; }
.prose .alignright{ float:right; margin:0 0 1em 1.2em; }
.prose .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.prose .wp-caption{ max-width:100%; }
.prose iframe{ max-width:100%; }
.prose .wp-block-embed__wrapper{ position:relative; }
.prose .wp-block-embed.is-type-video .wp-block-embed__wrapper{ aspect-ratio:16/9; }
.prose .wp-block-embed.is-type-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.prose::after{ content:""; display:block; clear:both; }
.page-links{ margin:1.5em 0; font-weight:600; }
.page-main{ max-width:760px; padding:36px 0 72px; }

.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.tag-row a{ font-size:13px; border:1px solid var(--line); border-radius:14px; padding:4px 12px; color:var(--ink-soft); }
.tag-row a:hover{ border-color:var(--navy); color:var(--navy); }

.share{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:32px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.share-label{ font-weight:600; font-size:14.5px; color:var(--navy); margin-right:4px; }
.share-btn{ font:inherit; font-size:14px; font-weight:500; color:var(--navy); background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:8px 14px; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.share-btn:hover{ border-color:var(--navy); background:var(--paper-2); }
.share-btn.copied{ background:var(--navy); color:#fff; border-color:var(--navy); }

.author-box{ margin-top:28px; padding:20px 22px; background:var(--paper-2); border:1px solid var(--line); border-radius:8px; }
.author-box p{ margin:6px 0 0; font-size:15px; color:var(--ink-soft); }

.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
.post-nav-link{ display:block; padding:16px 18px; border:1px solid var(--line); border-radius:8px; font-weight:600; color:var(--navy); line-height:1.4; transition:border-color .18s ease, color .18s ease; }
.post-nav-link span{ display:block; font-size:12.5px; font-weight:500; color:var(--ink-soft); margin-bottom:4px; }
.post-nav-link.next{ text-align:right; grid-column:2; }
.post-nav-link:hover{ border-color:var(--gold); color:var(--maroon); }

.related{ border-top:1px solid var(--line); padding:48px 0 72px; }
.related h2{ font-size:26px; margin-bottom:24px; }

/* ---------- Lists (category pages, search) ---------- */
.listing{ padding:40px 0 88px; }
.post-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.post-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease; }
.post-card:hover{ border-color:var(--gold); box-shadow:0 20px 36px -26px rgba(20,33,61,0.45); }
.post-card-img img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--line); }
.post-card-body{ display:flex; flex-direction:column; gap:12px; padding:22px; flex:1; }
.post-card .note-tag{ align-self:flex-start; }
.post-card h3{ font-size:19px; line-height:1.32; }
.post-card h3 a:hover{ color:var(--maroon); }
.post-excerpt{ margin:0; color:var(--ink-soft); font-size:15px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-card .note-meta{ margin:auto 0 0; padding-top:4px; flex-wrap:wrap; }
.empty{ padding:56px 24px; border:1px dashed #CFCBBE; border-radius:8px; text-align:center; color:var(--ink-soft); }
.empty p{ margin:0; }
.pagination .nav-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:36px; }
.pagination .page-numbers{ min-width:42px; padding:9px 14px; border:1px solid var(--line); border-radius:4px; text-align:center; font-weight:600; color:var(--navy); }
.pagination a.page-numbers:hover{ border-color:var(--navy); }
.pagination .page-numbers.current{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---------- Sidebar boxes in the article sidebar ---------- */
.widget .widget-title{ font-size:19px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.widget-yt .widget-title, .widget-quiz .widget-title{ border:none; padding:0; margin-bottom:8px; }
.widget-quiz{ background:var(--paper-2); border-top:3px solid #C99A3E; }
.widget-quiz .quiz-big{ display:block; width:44px; height:44px; margin-bottom:14px; }
.widget-quiz > p{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin:0; }
.widget-quiz .quiz-list{ margin:12px 0 0; }
.widget-quiz .btn{ margin-top:16px; width:100%; }
.post-layout .sidebar{ padding-top:20px; }

@media (max-width: 1100px){
  .post-layout .sidebar{ padding-top:8px; }
}
@media (max-width: 980px){
  .post-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 760px){
  .widget-browse-sections{ display:none; }
  .post-nav{ grid-template-columns:1fr; }
  .post-nav-link.next{ grid-column:auto; text-align:left; }
}
@media (max-width: 620px){
  .post-grid{ grid-template-columns:1fr; gap:16px; }
  .page-head{ padding:26px 0 22px; }
  .page-head h1{ font-size:30px; }
  .single .page-head{ padding:16px 0 0; }
  .single .crumbs [aria-current]{ max-width:24ch; }
  .post-title{ font-size:30px; }
  .post-lead{ font-size:17px; }
  .prose{ font-size:17px; }
  .prose h2{ font-size:24px; }
  .page-main{ padding:26px 0 48px; }
  .listing{ padding:28px 0 60px; }
  .related{ padding:36px 0 56px; }
}

/* Narrow screens: show the phone-style header from the very first paint (the script only has to confirm it),
   so the page does not jump when the script loads. */
@media (max-width: 1180px){
  .nav-bar, .header-top .search, .header-actions{ display:none; }
  .header-icons{ display:flex; }
  .header-top-inner{ padding-top:8px; padding-bottom:8px; }
  html{ scroll-padding-top:80px; }
}