/* index.php */
:root{
      --bg0:#fbfaf7; --bg1:#f7f5ef;
      --ink:#101114; --muted:rgba(16,17,20,.68); --muted2:rgba(16,17,20,.54);
      --line:rgba(16,17,20,.10);
      --shadow:0 10px 30px rgba(16,17,20,.08);
      --shadow2:0 1px 0 rgba(16,17,20,.06);
      --r:18px; --r2:24px;
      --serif:"Fraunces", ui-serif, Georgia, serif;
      --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      --focus:0 0 0 3px rgba(0,110,255,.22), 0 0 0 1px rgba(0,110,255,.22) inset;
      --lift:translateY(-2px);
    }

    body{
      margin:0;
      color:var(--ink);
      font-family:var(--sans);
      line-height:1.45;
      background:
        radial-gradient(1100px 500px at 50% 0%, rgba(255,220,170,.22), transparent 55%),
        radial-gradient(900px 420px at 85% 20%, rgba(186,220,255,.24), transparent 60%),
        radial-gradient(800px 360px at 12% 28%, rgba(206,255,220,.18), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    body::before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      opacity:.06;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

    .skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip:focus{
      left:14px; top:14px; width:auto; height:auto; padding:10px 12px;
      border-radius:12px; background:#fff; box-shadow:var(--shadow);
      z-index:9999; outline:none;
    }

    .container{ width:min(1120px, calc(100% - 40px)); margin-inline:auto; }

    /* Shared header base (used by all pages with includes/header.php) */
    header{
      position:absolute; top:0; left:0; right:0;
      padding:18px 0;
      z-index:100;
      transition:background .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    header.is-sticky{
      position:fixed;
      background:rgba(255,255,255,.62);
      border-bottom:1px solid rgba(16,17,20,.10);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      box-shadow:0 8px 22px rgba(16,17,20,.06);
    }

    .nav{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      align-items:start;
    }

    .navAction{
      display:flex;
      justify-content:flex-start;
      gap:10px;
      flex-wrap:wrap;
    }

    .brand{
      display:flex; align-items:center; gap:10px;
      font-family:var(--serif);
      font-weight:600;
      font-size:18px;
      letter-spacing:-0.2px;
      white-space:nowrap;
    }
    .mark{
      width:26px; height:26px; border-radius:10px;
      background:
        radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.9), transparent 60%),
        linear-gradient(145deg, rgba(255,210,160,.95), rgba(170,210,255,.95));
      box-shadow:0 6px 18px rgba(16,17,20,.10);
    }

    .menu{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .menu a{
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.45);
      font-size:13px;
      color:rgba(16,17,20,.78);
    }
    .menu a:focus{ outline:none; box-shadow:var(--focus); }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.72);
      padding:10px 12px;
      border-radius:999px;
      font-size:13px;
      font-weight:600;
      cursor:pointer;
      box-shadow:var(--shadow2);
      transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
      white-space:nowrap;
    }
    .btn:hover{ transform:var(--lift); box-shadow:var(--shadow); border-color:rgba(16,17,20,.16); text-decoration:none; }
    .btn:focus{ outline:none; box-shadow:var(--focus); }
    .btn.primary{
      border-color:rgba(16,17,20,.14);
      background:
        radial-gradient(80px 24px at 30% 30%, rgba(255,255,255,.75), transparent 60%),
        linear-gradient(145deg, rgba(255,210,160,.70), rgba(170,210,255,.70));
    }

    .hero{ padding:132px 0 14px; }
    .heroGrid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:18px; }
    .heroMain{
      grid-column: 3 / span 8;
      text-align:center;
      position:relative;
    }
    .heroMain::before{
      content:"";
      position:absolute;
      inset:-22px -12px -10px -12px;
      background:
        radial-gradient(380px 160px at 50% 15%, rgba(255,210,160,.35), transparent 60%),
        radial-gradient(420px 180px at 50% 60%, rgba(186,220,255,.28), transparent 62%);
      filter:blur(10px);
      z-index:-1;
      opacity:.9;
    }
    h1{
      font-family:var(--serif);
      font-weight:600;
      letter-spacing:-0.6px;
      line-height:1.05;
      font-size:clamp(34px, 4.6vw, 56px);
      margin:0 0 14px;
    }
    .lead{
      margin:0 auto 16px;
      max-width:70ch;
      color:var(--muted);
      font-size:16px;
    }

    .searchbar{
      margin: 14px auto 0;
      max-width: 720px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:center;
    }
    .searchwrap{
      flex: 1 1 420px;
      display:flex;
      align-items:center;
      border:1px solid rgba(16,17,20,.10);
      border-radius:999px;
      background:rgba(255,255,255,.62);
      box-shadow:var(--shadow2);
      overflow:hidden;
    }
    .searchwrap:focus-within{
      box-shadow:var(--focus);
      border-color:rgba(0,110,255,.28);
    }
    .searchicon{
      width:44px; height:44px;
      display:grid; place-items:center;
      color:rgba(16,17,20,.55);
      flex:0 0 auto;
    }
    .searchwrap input{
      width:100%;
      border:0;
      background:transparent;
      padding:12px 14px 12px 0;
      font-size:14px;
      outline:none;
    }
    .ctaRow{
      display:flex;
      gap:10px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .pillRow{
      display:flex;
      gap:10px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .pill{
      font-size:12px;
      color:rgba(16,17,20,.72);
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.55);
      padding:8px 10px;
      border-radius:999px;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }

    main{ padding:18px 0 72px; }
    section{ padding:34px 0; }
    .sectionTitle{
      font-family:var(--serif);
      font-size:24px;
      letter-spacing:-0.2px;
      margin:0 0 10px;
      text-align:center;
    }
    .sectionSub{
      margin:0 auto 18px;
      max-width:75ch;
      color:var(--muted);
      text-align:center;
    }

    .bento{ display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; }
    .card{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:18px;
      position:relative;
      overflow:hidden;
      transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    }
    .card:hover{ transform:var(--lift); box-shadow:var(--shadow); border-color:rgba(16,17,20,.16); }
    .card:focus-within{ box-shadow:var(--focus); border-color:rgba(0,110,255,.28); }

    .cardGlow::before{
      content:"";
      position:absolute;
      inset:-30px -30px auto -30px;
      height:180px;
      background:
        radial-gradient(260px 120px at 25% 40%, rgba(206,255,220,.35), transparent 62%),
        radial-gradient(240px 120px at 75% 30%, rgba(186,220,255,.30), transparent 60%);
      filter:blur(10px);
      opacity:.9;
      pointer-events:none;
    }

    .kicker{
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(16,17,20,.60);
      margin:0 0 8px;
    }
    .cardTitle{
      margin:0 0 8px;
      font-weight:700;
      letter-spacing:-0.2px;
      font-size:16px;
    }
    .meta{
      margin:0 0 12px;
      color:var(--muted2);
      font-size:13px;
      max-width:72ch;
    }
    .bullets{
      margin:0 0 14px;
      padding-left:18px;
      color:rgba(16,17,20,.68);
      font-size:13px;
      max-width:75ch;
    }
    .bullets li{ margin:6px 0; }
    .miniRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

    .span6{ grid-column:span 6; }
    .span12{ grid-column:span 12; }

    .callout{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }
    .callout strong{ font-family:var(--serif); font-size:18px; letter-spacing:-0.2px; }
    .callout p{ margin:6px 0 0; color:var(--muted2); max-width:70ch; font-size:13px; }

    /* FAQ */
    .faq{
      width:min(920px, 100%);
      margin:0 auto;
      display:grid;
      gap:10px;
    }
    details.faqItem{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:10px 14px;
      transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    }
    details.faqItem:hover{ transform:var(--lift); box-shadow:var(--shadow); border-color:rgba(16,17,20,.16); }
    details.faqItem[open]{ border-color:rgba(0,110,255,.28); }
    details.faqItem summary{
      cursor:pointer;
      list-style:none;
      font-weight:700;
      letter-spacing:-0.1px;
      padding:10px 6px;
      outline:none;
    }
    details.faqItem summary::-webkit-details-marker{ display:none; }
    details.faqItem summary:focus{ box-shadow:var(--focus); border-radius:14px; }
    .faqA{
      padding:0 6px 12px;
      color:var(--muted2);
      font-size:13px;
      max-width:80ch;
    }
    .faqA p{ margin:0; }

    footer{
      padding:24px 0 40px;
      border-top:1px solid rgba(16,17,20,.08);
      color:var(--muted2);
      font-size:12px;
    }

    @media (min-width: 768px){
      .nav{
        grid-template-columns:minmax(180px, 220px) 1fr auto;
        gap:16px;
        align-items:center;
      }
      .menu{ justify-content:center; }
      .navAction{ justify-content:flex-end; }
      .hero{ padding-top:128px; }
      .heroMain{ grid-column:1 / -1; }
      .span6{ grid-column:span 12; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
      .card:hover{ transform:none; }
      .btn:hover{ transform:none; }
      details.faqItem:hover{ transform:none; }
    }


/* signup.php */
:root{
      --bg0:#fbfaf7; --bg1:#f7f5ef;
      --ink:#101114; --muted:rgba(16,17,20,.68); --muted2:rgba(16,17,20,.54);
      --line:rgba(16,17,20,.10);
      --shadow:0 10px 30px rgba(16,17,20,.08);
      --shadow2:0 1px 0 rgba(16,17,20,.06);
      --r:18px; --r2:24px;
      --serif:"Fraunces", ui-serif, Georgia, serif;
      --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      --focus:0 0 0 3px rgba(0,110,255,.22), 0 0 0 1px rgba(0,110,255,.22) inset;
      --lift:translateY(-2px);
    }

    body{
      margin:0;
      color:var(--ink);
      font-family:var(--sans);
      line-height:1.55;
      background:
        radial-gradient(1100px 500px at 50% 0%, rgba(255,220,170,.22), transparent 55%),
        radial-gradient(900px 420px at 85% 20%, rgba(186,220,255,.24), transparent 60%),
        radial-gradient(800px 360px at 12% 28%, rgba(206,255,220,.18), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    body::before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      opacity:.06;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

    .skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip:focus{
      left:14px; top:14px; width:auto; height:auto; padding:10px 12px;
      border-radius:12px; background:#fff; box-shadow:var(--shadow);
      z-index:9999; outline:none;
    }

    .container{ width:min(1120px, calc(100% - 40px)); margin-inline:auto; }

    main{ padding:156px 0 72px; }
    .wrap{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:16px;
      align-items:start;
    }
    .card{
      grid-column: 3 / span 8;
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:20px;
      position:relative;
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute;
      inset:-30px -30px auto -30px;
      height:180px;
      background:
        radial-gradient(260px 120px at 25% 40%, rgba(206,255,220,.35), transparent 62%),
        radial-gradient(240px 120px at 75% 30%, rgba(186,220,255,.30), transparent 60%);
      filter:blur(10px);
      opacity:.9;
      pointer-events:none;
    }

    h1{
      margin:0 0 8px;
      font-family:var(--serif);
      letter-spacing:-0.4px;
      font-size:32px;
      line-height:1.1;
      position:relative;
      z-index:1;
    }
    .sub{
      margin:0 0 18px;
      color:var(--muted);
      max-width:70ch;
      position:relative;
      z-index:1;
    }

    label{
      display:block;
      font-size:13px;
      font-weight:600;
      margin: 12px 0 6px;
      position:relative;
      z-index:1;
    }
    input,
    select{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(16,17,20,.12);
      background:rgba(255,255,255,.70);
      padding:12px 12px;
      font-size:14px;
      outline:none;
      box-shadow:var(--shadow2);
      position:relative;
      z-index:1;
    }
    input:focus,
    select:focus{ box-shadow:var(--focus); border-color:rgba(0,110,255,.28); }

    .row{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-start;
      flex-wrap:wrap;
      margin-top: 14px;
      position:relative;
      z-index:1;
    }

    .flash{
      margin-top:12px;
      border-radius:16px;
      padding:12px 12px;
      border:1px solid rgba(16,17,20,.10);
      box-shadow:var(--shadow2);
      background:rgba(255,255,255,.72);
      position:relative;
      z-index:1;
    }
    .flash.error{
      border-color: rgba(200, 60, 60, .25);
      background: rgba(255, 243, 243, .70);
    }

    .fine{
      margin: 12px 0 0;
      font-size:12px;
      color:var(--muted2);
      max-width:75ch;
      position:relative;
      z-index:1;
    }

    footer{
      padding:24px 0 40px;
      border-top:1px solid rgba(16,17,20,.08);
      color:var(--muted2);
      font-size:12px;
    }

    @media (min-width: 768px){
      .card{ grid-column:1 / -1; }
      main{ padding-top:128px; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
      .btn:hover{ transform:none; }
    }


/* clubs.php */
:root{
      --bg0:#fbfaf7; --bg1:#f7f5ef;
      --ink:#101114; --muted:rgba(16,17,20,.68); --muted2:rgba(16,17,20,.54);
      --line:rgba(16,17,20,.10);
      --shadow:0 10px 30px rgba(16,17,20,.08);
      --shadow2:0 1px 0 rgba(16,17,20,.06);
      --r:18px; --r2:24px;
      --serif:"Fraunces", ui-serif, Georgia, serif;
      --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      --focus:0 0 0 3px rgba(0,110,255,.22), 0 0 0 1px rgba(0,110,255,.22) inset;
      --lift:translateY(-2px);
    }

    body{
      margin:0;
      color:var(--ink);
      font-family:var(--sans);
      line-height:1.55;
      background:
        radial-gradient(1100px 500px at 50% 0%, rgba(255,220,170,.22), transparent 55%),
        radial-gradient(900px 420px at 85% 20%, rgba(186,220,255,.24), transparent 60%),
        radial-gradient(800px 360px at 12% 28%, rgba(206,255,220,.18), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    body::before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      opacity:.06;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

    .skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip:focus{
      left:14px; top:14px; width:auto; height:auto; padding:10px 12px;
      border-radius:12px; background:#fff; box-shadow:var(--shadow);
      z-index:9999; outline:none;
    }

    .container{ width:min(1120px, calc(100% - 40px)); margin-inline:auto; }

    .hero{
      padding:132px 0 10px;
    }
    .heroGrid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:18px;
    }
    .heroMain{
      grid-column: 3 / span 8;
      text-align:center;
      position:relative;
    }
    .heroMain::before{
      content:"";
      position:absolute;
      inset:-22px -12px -10px -12px;
      background:
        radial-gradient(420px 180px at 50% 20%, rgba(186,220,255,.28), transparent 62%),
        radial-gradient(420px 180px at 50% 65%, rgba(255,210,160,.32), transparent 62%);
      filter:blur(10px);
      z-index:-1;
      opacity:.9;
    }

    h1{
      font-family:var(--serif);
      font-weight:600;
      letter-spacing:-0.6px;
      line-height:1.05;
      font-size:clamp(34px, 4.2vw, 52px);
      margin:0 0 12px;
    }
    .lead{
      margin:0 auto 16px;
      max-width:72ch;
      color:var(--muted);
      font-size:16px;
    }
    .ctaRow{
      display:flex;
      gap:10px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:12px;
    }
    .pillRow{
      display:flex;
      gap:10px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .pill{
      font-size:12px;
      color:rgba(16,17,20,.72);
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.55);
      padding:8px 10px;
      border-radius:999px;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }

    main{ padding:18px 0 72px; }
    section{ padding:34px 0; }
    .sectionTitle{
      font-family:var(--serif);
      font-size:24px;
      letter-spacing:-0.2px;
      margin:0 0 10px;
      text-align:left;
    }
    .sectionSub{
      margin:0 0 18px;
      max-width:75ch;
      color:var(--muted);
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:16px;
      align-items:start;
    }
    .card{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:18px;
      position:relative;
      overflow:hidden;
      transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    }
    .card:hover{ transform:var(--lift); box-shadow:var(--shadow); border-color:rgba(16,17,20,.16); }
    .card:focus-within{ box-shadow:var(--focus); border-color:rgba(0,110,255,.28); }

    .cardGlow::before{
      content:"";
      position:absolute;
      inset:-30px -30px auto -30px;
      height:180px;
      background:
        radial-gradient(260px 120px at 25% 40%, rgba(206,255,220,.35), transparent 62%),
        radial-gradient(240px 120px at 75% 30%, rgba(186,220,255,.30), transparent 60%);
      filter:blur(10px);
      opacity:.9;
      pointer-events:none;
    }

    .kicker{
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(16,17,20,.60);
      margin:0 0 8px;
    }
    .cardTitle{
      margin:0 0 8px;
      font-weight:700;
      letter-spacing:-0.2px;
      font-size:16px;
    }
    .meta{
      margin:0 0 0;
      color:var(--muted2);
      font-size:13px;
      max-width:75ch;
    }

    .span7{ grid-column:span 7; }
    .span5{ grid-column:span 5; }
    .span6{ grid-column:span 6; }
    .span12{ grid-column:span 12; }

    .list{
      margin:12px 0 0;
      padding-left:18px;
      color:rgba(16,17,20,.70);
      font-size:13px;
      max-width:75ch;
    }
    .list li{ margin:7px 0; }

    .callout{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }
    .callout strong{ font-family:var(--serif); font-size:18px; letter-spacing:-0.2px; }
    .callout p{ margin:6px 0 0; color:var(--muted2); max-width:70ch; font-size:13px; }

    /* FAQ */
    .faq{
      border-top:1px solid rgba(16,17,20,.08);
      padding-top:22px;
    }
    details{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.68);
      border-radius:18px;
      box-shadow:var(--shadow2);
      padding:14px 14px;
      margin:10px 0;
    }
    summary{
      cursor:pointer;
      font-weight:700;
      letter-spacing:-0.1px;
      outline:none;
    }
    summary:focus{ box-shadow:var(--focus); border-radius:14px; }
    .faq p{ margin:10px 0 0; color:rgba(16,17,20,.70); }

    footer{
      padding:24px 0 40px;
      border-top:1px solid rgba(16,17,20,.08);
      color:var(--muted2);
      font-size:12px;
    }

    @media (min-width: 768px){
      .hero{ padding-top:128px; }
      .heroMain{ grid-column:1 / -1; }
      .span7, .span6, .span5{ grid-column:span 12; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
      .card:hover{ transform:none; }
      .btn:hover{ transform:none; }
    }


/* community.php */
:root{
      --bg0:#fbfaf7; --bg1:#f7f5ef;
      --ink:#101114; --muted:rgba(16,17,20,.68); --muted2:rgba(16,17,20,.54);
      --line:rgba(16,17,20,.10);
      --shadow:0 10px 30px rgba(16,17,20,.08);
      --shadow2:0 1px 0 rgba(16,17,20,.06);
      --r:18px; --r2:24px;
      --serif:"Fraunces", ui-serif, Georgia, serif;
      --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      --focus:0 0 0 3px rgba(0,110,255,.22), 0 0 0 1px rgba(0,110,255,.22) inset;
      --lift:translateY(-2px);
    }

    body{
      margin:0;
      color:var(--ink);
      font-family:var(--sans);
      line-height:1.55;
      background:
        radial-gradient(1100px 500px at 50% 0%, rgba(255,220,170,.22), transparent 55%),
        radial-gradient(900px 420px at 85% 20%, rgba(186,220,255,.24), transparent 60%),
        radial-gradient(800px 360px at 12% 28%, rgba(206,255,220,.18), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    body::before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      opacity:.06;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

    .skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip:focus{
      left:14px; top:14px; width:auto; height:auto; padding:10px 12px;
      border-radius:12px; background:#fff; box-shadow:var(--shadow);
      z-index:9999; outline:none;
    }

    .container{ width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
    .hero{ padding:132px 0 10px; }
    .heroGrid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:18px; }
    .heroMain{
      grid-column: 3 / span 8;
      text-align:center;
      position:relative;
    }
    .heroMain::before{
      content:"";
      position:absolute;
      inset:-22px -12px -10px -12px;
      background:
        radial-gradient(380px 160px at 50% 15%, rgba(255,210,160,.35), transparent 60%),
        radial-gradient(420px 180px at 50% 60%, rgba(186,220,255,.28), transparent 62%);
      filter:blur(10px);
      z-index:-1;
      opacity:.9;
    }
    h1{
      font-family:var(--serif);
      font-weight:600;
      letter-spacing:-0.6px;
      line-height:1.05;
      font-size:clamp(32px, 4.2vw, 52px);
      margin:0 0 14px;
    }
    .lead{
      margin:0 auto 16px;
      max-width:72ch;
      color:var(--muted);
      font-size:16px;
    }
    .pillRow{
      display:flex;
      gap:10px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .pill{
      font-size:12px;
      color:rgba(16,17,20,.72);
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.55);
      padding:8px 10px;
      border-radius:999px;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }

    main{ padding:18px 0 72px; }
    section{ padding:34px 0; }

    .reading{
      width:min(860px, 100%);
      margin-inline:auto;
    }

    .sectionTitle{
      font-family:var(--serif);
      font-size:24px;
      letter-spacing:-0.2px;
      margin:0 0 10px;
    }
    .sectionSub{
      margin:0 0 18px;
      max-width:75ch;
      color:var(--muted);
    }

    .bento{ display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; }
    .card{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:18px;
      position:relative;
      overflow:hidden;
      transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    }
    .card:hover{ transform:var(--lift); box-shadow:var(--shadow); border-color:rgba(16,17,20,.16); }

    .cardGlow::before{
      content:"";
      position:absolute;
      inset:-30px -30px auto -30px;
      height:180px;
      background:
        radial-gradient(260px 120px at 25% 40%, rgba(206,255,220,.35), transparent 62%),
        radial-gradient(240px 120px at 75% 30%, rgba(186,220,255,.30), transparent 60%);
      filter:blur(10px);
      opacity:.9;
      pointer-events:none;
    }

    .kicker{
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(16,17,20,.60);
      margin:0 0 8px;
    }
    .cardTitle{
      margin:0 0 8px;
      font-weight:700;
      letter-spacing:-0.2px;
      font-size:16px;
    }
    .meta{
      margin:0;
      color:var(--muted2);
      font-size:13px;
      max-width:75ch;
    }
    .bullets{
      margin:12px 0 0;
      padding-left:18px;
      color:rgba(16,17,20,.70);
      font-size:13px;
      max-width:75ch;
    }
    .bullets li{ margin:6px 0; }

    .span6{ grid-column:span 6; }
    .span12{ grid-column:span 12; }

    .quote{
      margin:0;
      padding:16px 16px;
      border-left:3px solid rgba(16,17,20,.14);
      background:rgba(255,255,255,.55);
      border-radius: 14px;
      color:rgba(16,17,20,.78);
    }
    .quote strong{ font-family:var(--serif); font-weight:600; }

    .callout{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }
    .callout strong{ font-family:var(--serif); font-size:18px; letter-spacing:-0.2px; }
    .callout p{ margin:6px 0 0; color:var(--muted2); max-width:72ch; font-size:13px; }

    /* FAQ */
    .faq{
      border-top:1px solid rgba(16,17,20,.08);
      padding-top:22px;
      margin-top: 8px;
    }
    details{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:18px;
      box-shadow:var(--shadow2);
      padding:14px 14px;
      margin:10px 0;
    }
    summary{
      cursor:pointer;
      font-weight:700;
      letter-spacing:-0.2px;
      outline:none;
    }
    summary:focus{ box-shadow:var(--focus); border-radius:14px; }
    details p{
      margin:10px 0 0;
      color:rgba(16,17,20,.72);
      max-width:75ch;
      font-size:13px;
    }

    footer{
      padding:24px 0 40px;
      border-top:1px solid rgba(16,17,20,.08);
      color:var(--muted2);
      font-size:12px;
    }

    @media (min-width: 768px){
      .hero{ padding-top:128px; }
      .heroMain{ grid-column:1 / -1; }
      .reading{ width:100%; }
      .span6{ grid-column:span 12; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
      .card:hover{ transform:none; }
      .btn:hover{ transform:none; }
    }


/* recommendations.php */
:root{
      --bg0:#fbfaf7; --bg1:#f7f5ef;
      --ink:#101114; --muted:rgba(16,17,20,.68); --muted2:rgba(16,17,20,.54);
      --line:rgba(16,17,20,.10);
      --shadow:0 10px 30px rgba(16,17,20,.08);
      --shadow2:0 1px 0 rgba(16,17,20,.06);
      --r:18px; --r2:24px;
      --serif:"Fraunces", ui-serif, Georgia, serif;
      --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      --focus:0 0 0 3px rgba(0,110,255,.22), 0 0 0 1px rgba(0,110,255,.22) inset;
      --lift:translateY(-2px);
    }

    body{
      margin:0;
      color:var(--ink);
      font-family:var(--sans);
      line-height:1.55;
      background:
        radial-gradient(1100px 500px at 50% 0%, rgba(255,220,170,.22), transparent 55%),
        radial-gradient(900px 420px at 85% 20%, rgba(186,220,255,.24), transparent 60%),
        radial-gradient(800px 360px at 12% 28%, rgba(206,255,220,.18), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    body::before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      opacity:.06;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

    .skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip:focus{
      left:14px; top:14px; width:auto; height:auto;
      padding:10px 12px; border-radius:12px;
      background:#fff; box-shadow:var(--shadow);
      z-index:9999; outline:none;
    }

    .container{ width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
    .reading{ width:min(820px, 100%); margin-inline:auto; }
    .hero{
      padding: 46px 0 8px;
    }
    .heroInner{
      position:relative;
      padding: 18px 0 4px;
    }
    .heroInner::before{
      content:"";
      position:absolute;
      inset:-14px -10px auto -10px;
      height: 190px;
      background:
        radial-gradient(420px 180px at 35% 40%, rgba(255,210,160,.30), transparent 62%),
        radial-gradient(420px 190px at 70% 55%, rgba(186,220,255,.26), transparent 64%);
      filter: blur(10px);
      z-index:-1;
      opacity:.95;
    }
    h1{
      font-family:var(--serif);
      font-weight:600;
      letter-spacing:-0.6px;
      line-height:1.08;
      font-size: clamp(32px, 3.8vw, 46px);
      margin:0 0 10px;
    }
    .lead{
      margin:0;
      max-width: 75ch;
      color:var(--muted);
      font-size: 16px;
    }
    .heroCtas{
      margin-top: 14px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .pillRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 14px;
    }
    .pill{
      font-size:12px;
      color:rgba(16,17,20,.72);
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.55);
      padding:8px 10px;
      border-radius:999px;
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }

    main{ padding: 18px 0 70px; }
    section{ padding: 26px 0; }
    .h2{
      font-family:var(--serif);
      font-size: 22px;
      letter-spacing:-0.2px;
      margin:0 0 10px;
    }
    .p{
      margin: 0 0 12px;
      color: rgba(16,17,20,.82);
      max-width: 75ch;
    }
    .muted{ color: var(--muted2); }

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
    }
    .card{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding: 18px;
    }
    .cardGlow{ position:relative; overflow:hidden; }
    .cardGlow::before{
      content:"";
      position:absolute;
      inset:-30px -30px auto -30px;
      height:160px;
      background:
        radial-gradient(260px 120px at 25% 40%, rgba(206,255,220,.32), transparent 62%),
        radial-gradient(240px 120px at 75% 30%, rgba(186,220,255,.28), transparent 60%);
      filter:blur(10px);
      opacity:.9;
      pointer-events:none;
    }
    .span6{ grid-column: span 6; }
    .span12{ grid-column: span 12; }

    .kicker{
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(16,17,20,.60);
      margin:0 0 8px;
    }
    .cardTitle{
      margin:0 0 8px;
      font-weight:700;
      letter-spacing:-0.2px;
      font-size:16px;
    }
    .list{
      margin:0;
      padding-left:18px;
      color: rgba(16,17,20,.78);
      font-size: 13px;
      max-width: 75ch;
    }
    .list li{ margin:6px 0; }

    .mini{
      font-size: 13px;
      color: var(--muted2);
      margin-top: 10px;
    }

    .callout{
      margin-top: 10px;
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.72);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding: 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
    }
    .callout strong{
      font-family:var(--serif);
      font-size: 18px;
      letter-spacing:-0.2px;
    }
    .callout p{ margin:6px 0 0; font-size: 13px; color: var(--muted2); max-width: 75ch; }

    /* FAQ */
    .faq{
      border-top:1px solid rgba(16,17,20,.08);
      padding-top: 18px;
    }
    details{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius: 16px;
      box-shadow: var(--shadow2);
      padding: 12px 14px;
      margin: 10px 0;
    }
    summary{
      cursor:pointer;
      font-weight:700;
      letter-spacing:-0.1px;
      outline:none;
    }
    summary:focus{ box-shadow: var(--focus); border-radius: 12px; padding: 6px 8px; margin: -6px -8px; }
    details p{ margin: 10px 0 0; color: rgba(16,17,20,.80); font-size: 13px; max-width: 75ch; }

    footer{
      padding:24px 0 40px;
      border-top:1px solid rgba(16,17,20,.08);
      color:var(--muted2);
      font-size:12px;
    }

    @media (min-width: 768px){
      .span6{ grid-column: span 12; }
      .reading{ width:100%; }
    }
    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
    }


/* diary.php */
:root{
      --bg0:#fbfaf7; --bg1:#f7f5ef;
      --ink:#101114; --muted:rgba(16,17,20,.68); --muted2:rgba(16,17,20,.54);
      --line:rgba(16,17,20,.10);
      --shadow:0 10px 30px rgba(16,17,20,.08);
      --shadow2:0 1px 0 rgba(16,17,20,.06);
      --r:18px; --r2:24px;
      --serif:"Fraunces", ui-serif, Georgia, serif;
      --sans:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      --focus:0 0 0 3px rgba(0,110,255,.22), 0 0 0 1px rgba(0,110,255,.22) inset;
      --lift:translateY(-2px);
    }

    body{
      margin:0;
      color:var(--ink);
      font-family:var(--sans);
      line-height:1.55;
      background:
        radial-gradient(1100px 500px at 50% 0%, rgba(255,220,170,.22), transparent 55%),
        radial-gradient(900px 420px at 85% 20%, rgba(186,220,255,.24), transparent 60%),
        radial-gradient(800px 360px at 12% 28%, rgba(206,255,220,.18), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    body::before{
      content:"";
      position:fixed; inset:0;
      pointer-events:none;
      opacity:.06;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
      mix-blend-mode:multiply;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

    .skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip:focus{
      left:14px; top:14px; width:auto; height:auto; padding:10px 12px;
      border-radius:12px; background:#fff; box-shadow:var(--shadow);
      z-index:9999; outline:none;
    }

    .container{ width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
    /* Page layout */
    .hero{ padding:132px 0 12px; }
    .heroGrid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:18px; }
    .heroMain{
      grid-column: 3 / span 8;
      text-align:left;
      position:relative;
    }
    .heroMain::before{
      content:"";
      position:absolute;
      inset:-22px -12px -10px -12px;
      background:
        radial-gradient(420px 170px at 18% 30%, rgba(206,255,220,.24), transparent 62%),
        radial-gradient(520px 220px at 65% 20%, rgba(186,220,255,.22), transparent 62%),
        radial-gradient(420px 180px at 40% 80%, rgba(255,210,160,.18), transparent 62%);
      filter:blur(12px);
      z-index:-1;
      opacity:.95;
    }

    h1{
      font-family:var(--serif);
      font-weight:600;
      letter-spacing:-0.6px;
      line-height:1.05;
      font-size:clamp(34px, 4.6vw, 54px);
      margin:0 0 12px;
    }
    .lead{
      margin:0 0 16px;
      max-width:72ch;
      color:var(--muted);
      font-size:16px;
    }
    .heroRow{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
      margin-top:14px;
    }
    .micro{
      font-size:12px;
      color:rgba(16,17,20,.58);
      max-width:75ch;
      margin:8px 0 0;
    }

    main{ padding:18px 0 76px; }
    section{ padding:28px 0; }

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
      align-items:start;
    }
    .readcol{ grid-column: 3 / span 8; } /* 60–75ch feel */
    .sidecol{ grid-column: 11 / span 2; }

    .card{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:18px;
      position:relative;
      overflow:hidden;
    }
    .cardGlow::before{
      content:"";
      position:absolute;
      inset:-30px -30px auto -30px;
      height:180px;
      background:
        radial-gradient(260px 120px at 25% 40%, rgba(206,255,220,.30), transparent 62%),
        radial-gradient(240px 120px at 75% 30%, rgba(186,220,255,.26), transparent 60%);
      filter:blur(10px);
      opacity:.9;
      pointer-events:none;
    }

    h2{
      font-family:var(--serif);
      letter-spacing:-0.2px;
      font-size:24px;
      margin:0 0 10px;
    }
    h3{
      margin:0 0 8px;
      font-size:16px;
      letter-spacing:-0.2px;
    }
    p{ margin:0 0 12px; color:rgba(16,17,20,.78); }
    .muted{ color:var(--muted2); }

    .kicker{
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(16,17,20,.60);
      margin:0 0 8px;
    }

    .list{
      margin:0;
      padding-left:18px;
      color:rgba(16,17,20,.76);
    }
    .list li{ margin:7px 0; }
    .divider{
      height:1px;
      background:rgba(16,17,20,.08);
      margin:16px 0;
    }

    .bento{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
    }
    .span6{ grid-column: span 6; }
    .span12{ grid-column: span 12; }

    .callout{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.70);
      border-radius:var(--r2);
      box-shadow:var(--shadow2);
      padding:18px;
    }
    .callout strong{
      font-family:var(--serif);
      font-size:18px;
      letter-spacing:-0.2px;
    }
    .callout p{ margin:6px 0 0; color:var(--muted2); font-size:13px; max-width:75ch; }

    .toc{
      position:sticky;
      top:88px;
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.62);
      border-radius:18px;
      padding:14px;
      box-shadow:var(--shadow2);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }
    .toc a{
      display:block;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(16,17,20,.08);
      background:rgba(255,255,255,.52);
      font-size:12px;
      color:rgba(16,17,20,.78);
      margin-top:8px;
    }
    .toc a:focus{ outline:none; box-shadow:var(--focus); }

    /* FAQ */
    .faq{
      display:grid;
      gap:10px;
      margin-top:12px;
    }
    .faq details{
      border:1px solid rgba(16,17,20,.10);
      background:rgba(255,255,255,.62);
      border-radius:18px;
      padding:12px 14px;
      box-shadow:var(--shadow2);
    }
    .faq summary{
      cursor:pointer;
      font-weight:700;
      letter-spacing:-0.1px;
      list-style:none;
      outline:none;
    }
    .faq summary::-webkit-details-marker{ display:none; }
    .faq summary:focus{ box-shadow:var(--focus); border-radius:12px; }
    .faq .answer{
      margin-top:10px;
      color:var(--muted2);
      font-size:14px;
      max-width:80ch;
    }

    footer{
      padding:24px 0 40px;
      border-top:1px solid rgba(16,17,20,.08);
      color:var(--muted2);
      font-size:12px;
    }

    @media (max-width: 767.98px){
      .hero{ padding-top:128px; }
      .heroMain{ grid-column:1 / -1; }
      .readcol{ grid-column:1 / -1; }
      .sidecol{ grid-column:1 / -1; }
      .toc{ position:relative; top:auto; }
      .span6{ grid-column: span 12; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; scroll-behavior:auto !important; }
      .btn:hover{ transform:none; }
    }


/* Mobile navigation toggle */
.menuToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 14px;
  border:1px solid rgba(16,17,20,.16);
  border-radius:12px;
  background:rgba(255,255,255,.88);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.menuToggle:focus{ outline:none; box-shadow:var(--focus); }

@media (max-width: 767.98px){
  .nav{
    grid-template-columns:1fr auto;
    align-items:center;
    gap:10px;
  }

  .menuToggle{
    justify-self:end;
  }

  .menu{
    grid-column:1 / -1;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    padding:8px;
    border:1px solid rgba(16,17,20,.10);
    border-radius:14px;
    background:rgba(255,255,255,.92);
    box-shadow:var(--shadow2);
    gap:6px;
  }

  .menu[hidden]{
    display:none;
  }

  .menu a{
    min-height:44px;
    display:flex;
    align-items:center;
    border-radius:10px;
    border:1px solid rgba(16,17,20,.08);
    background:transparent;
    padding:10px 12px;
    font-size:15px;
  }

  .navAction{
    grid-column:1 / -1;
    width:100%;
  }

  .navAction .btn{
    width:100%;
    min-height:44px;
  }
}

@media (min-width: 768px){
  .menuToggle{
    display:none;
  }

  .menu{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  .menu a{
    min-height:0;
    border-radius:999px;
    border:1px solid rgba(16,17,20,.10);
    background:rgba(255,255,255,.45);
    font-size:13px;
    padding:8px 10px;
  }

  .navAction{
    justify-content:flex-end;
  }

  .navAction .btn{
    width:auto;
  }
}


/* Cross-page layout and mobile navigation overrides */
.hero{
  padding-top:152px !important;
}

header + main{
  padding-top:152px !important;
}

@media (max-width: 767.98px){
  .menu{
    background:rgba(251,250,247,.98);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }

  .menu a{
    background:rgba(255,255,255,.92);
  }

  .readcol,
  .sidecol{
    grid-column:1 / -1 !important;
  }

  .span5,
  .span6,
  .span7{
    grid-column:span 12 !important;
  }
}