:root{
    --paper: #FBF6EE;
    --paper-warm: #F4EDE0;
    --ink: #1C1A17;
    --ink-soft: #4A453E;
    --clay: #C4502E;
    --pine: #2F6F5E;
    --ochre: #E8A33D;
    --violet: #7A6FA6;
    --line: rgba(28,26,23,0.14);
    --line-strong: rgba(28,26,23,0.28);
    --radius: 4px;
    --shadow-soft: 0 1px 2px rgba(28,26,23,0.06);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

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

  h1,h2,h3,h4{
    font-family:'Fraunces', serif;
    font-weight:560;
    letter-spacing:-0.01em;
    margin:0 0 0.4em 0;
    color:var(--ink);
  }

  a{color:inherit;}
  button{font-family:inherit;}

  .label{
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  /* Visible focus for keyboard nav */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:3px solid var(--clay);
    outline-offset:2px;
    border-radius:2px;
  }

  .skip-link{
    position:absolute;
    left:-999px;
    top:0;
    background:var(--ink);
    color:var(--paper);
    padding:12px 20px;
    z-index:1000;
    font-family:'Space Mono',monospace;
    font-size:0.85rem;
  }
  .skip-link:focus{ left:12px; top:12px; }

  /* ====== NAV ====== */
  .site-header{
    position:sticky; top:0; z-index:100;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .nav-wrap{
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center;
    padding:0 24px; height:60px; gap:0;
  }
  .brand{
    display:flex; align-items:center; gap:9px;
    font-family:'Fraunces', serif; font-weight:600; font-size:1.1rem;
    color:var(--ink); background:none; border:none; cursor:pointer;
    padding:0; white-space:nowrap; flex:none;
    border-radius:4px; transition:opacity 0.15s;
  }
  .brand:hover{ opacity:0.78; }
  .brand-mark{ width:28px; height:28px; flex:none; }

  /* Centre nav — grows to fill space, centred */
  nav.main-nav{
    display:flex; align-items:center; gap:0;
    flex:1; justify-content:center;
  }
  nav.main-nav button{
    background:none; border:none; cursor:pointer;
    font-size:0.875rem; padding:8px 11px;
    color:var(--ink-soft); font-weight:600;
    font-family:'Karla',sans-serif; letter-spacing:0.01em;
    position:relative; white-space:nowrap;
    transition:color 0.15s;
  }
  nav.main-nav button::after{
    content:""; position:absolute; bottom:0; left:11px; right:11px;
    height:2px; border-radius:2px; background:var(--clay);
    transform:scaleX(0); transition:transform 0.18s ease;
  }
  nav.main-nav button:hover{ color:var(--ink); }
  nav.main-nav button:hover::after{ transform:scaleX(0.5); }
  nav.main-nav button[aria-current="page"]{ color:var(--ink); }
  nav.main-nav button[aria-current="page"]::after{ transform:scaleX(1); }

  /* Right side — tight group of utility items */
  .nav-right{
    display:flex; align-items:center; gap:6px; flex:none;
  }
  .nav-actions{ display:flex; align-items:center; gap:6px; }

  /* Contact Us button */
  .btn-contact-nav{
    background:none; border:none; cursor:pointer;
    font-size:0.875rem; padding:8px 11px;
    color:var(--ink-soft); font-weight:600;
    font-family:'Karla',sans-serif; white-space:nowrap;
    position:relative; transition:color 0.15s;
  }
  .btn-contact-nav::after{
    content:""; position:absolute; bottom:0; left:11px; right:11px;
    height:2px; border-radius:2px; background:var(--clay);
    transform:scaleX(0); transition:transform 0.18s ease;
  }
  .btn-contact-nav:hover{ color:var(--ink); }
  .btn-contact-nav:hover::after{ transform:scaleX(0.5); }
  .btn-contact-nav[aria-current="page"]{ color:var(--ink); }
  .btn-contact-nav[aria-current="page"]::after{ transform:scaleX(1); }

  /* Divider between nav and right actions */
  .nav-divider{
    width:1px; height:20px; background:var(--line-strong); margin:0 8px; flex:none;
  }

  /* ====== GLOBAL SEARCH ====== */
  .search-trigger-btn{
    display:flex; align-items:center; gap:5px;
    border:1.5px solid var(--line-strong); border-radius:5px;
    background:var(--paper-warm); padding:6px 10px;
    cursor:pointer; font-family:'Karla',sans-serif;
    font-size:0.8rem; color:var(--ink-soft); font-weight:600;
    transition:border-color 0.12s, color 0.12s; white-space:nowrap;
  }
  .search-trigger-btn:hover{ border-color:var(--clay); color:var(--ink); }
  .search-trigger-btn svg{ width:13px; height:13px; flex:none; }
  .search-trigger-btn kbd{
    font-family:'Space Mono',monospace; font-size:0.65rem;
    background:var(--line); border-radius:3px; padding:1px 4px;
    color:var(--ink-soft);
  }

  /* Search overlay */
  .search-overlay{
    position:fixed; inset:0; z-index:900;
    background:rgba(28,26,23,0.65);
    backdrop-filter:blur(4px);
    display:none; align-items:flex-start; justify-content:center;
    padding:80px 20px 40px;
  }
  .search-overlay.open{ display:flex; }

  .search-box{
    background:var(--paper); border-radius:10px;
    box-shadow:0 24px 60px rgba(28,26,23,0.45);
    width:100%; max-width:660px;
    overflow:hidden; display:flex; flex-direction:column;
    max-height:calc(100vh - 120px);
  }

  .search-input-row{
    display:flex; align-items:center; gap:12px;
    padding:16px 18px; border-bottom:1px solid var(--line);
  }
  .search-input-row svg{ width:20px; height:20px; color:var(--ink-soft); flex:none; }
  .search-input-row input{
    flex:1; border:none; outline:none; font-family:'Karla',sans-serif;
    font-size:1.1rem; background:transparent; color:var(--ink);
  }
  .search-input-row input::placeholder{ color:var(--ink-soft); }
  .search-clear-btn{
    background:none; border:none; cursor:pointer; color:var(--ink-soft);
    font-size:1.1rem; padding:2px 6px; border-radius:3px; display:none;
  }
  .search-clear-btn.show{ display:block; }
  .search-clear-btn:hover{ color:var(--ink); background:var(--paper-warm); }

  .search-results{
    overflow-y:auto; flex:1;
    padding:8px 0;
  }
  .search-section-label{
    font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--ink-soft); padding:10px 18px 4px;
    display:block;
  }
  .search-result-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 18px; cursor:pointer;
    border:none; background:none; width:100%; text-align:left;
    transition:background 0.08s;
  }
  .search-result-item:hover, .search-result-item.active{
    background:var(--paper-warm);
  }
  .search-result-icon{
    width:34px; height:34px; border-radius:6px; flex:none;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; background:var(--paper-warm); border:1px solid var(--line);
  }
  .search-result-img{
    width:34px; height:34px; border-radius:6px; object-fit:cover;
    flex:none; border:1px solid var(--line);
  }
  .search-result-body{ flex:1; min-width:0; }
  .search-result-title{
    font-size:0.9rem; font-weight:700; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  }
  .search-result-sub{
    font-size:0.76rem; color:var(--ink-soft); display:block; margin-top:1px;
  }
  .search-result-type{
    font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--ink-soft); flex:none;
  }

  .search-empty{
    padding:36px 18px; text-align:center; color:var(--ink-soft);
  }
  .search-empty p{ font-size:0.9rem; margin:0; }
  .search-empty span{ font-size:1.6rem; display:block; margin-bottom:8px; }

  .search-footer{
    padding:10px 18px; border-top:1px solid var(--line);
    display:flex; gap:16px; font-size:0.74rem; color:var(--ink-soft);
    font-family:'Space Mono',monospace;
  }
  .search-footer kbd{
    background:var(--paper-warm); border:1px solid var(--line);
    border-radius:3px; padding:1px 6px; font-size:0.7rem;
  }
  .btn{
    font-family:'Karla', sans-serif;
    font-weight:700;
    font-size:0.88rem;
    padding:10px 18px;
    border-radius:3px;
    border:1.5px solid var(--ink);
    background:none;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  .btn-primary{ background:var(--ink); color:var(--paper); }
  .btn-primary:hover{ background:#000; }
  .btn-ghost{ border-color:var(--line-strong); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--ink); }
  .btn-clay{ background:var(--clay); color:var(--paper); border-color:var(--clay); }
  .btn-clay:hover{ background:#a8431f; }
  .btn-sm{ padding:7px 13px; font-size:0.8rem; }
  .btn:disabled{ opacity:0.5; cursor:not-allowed; }

  .hamburger{ display:none; background:none; border:1.5px solid var(--line-strong); border-radius:3px; padding:8px 10px; cursor:pointer; }

  /* ====== LAYOUT ====== */
  main{ max-width:1180px; margin:0 auto; padding:0 24px; }
  .full-bleed{ max-width:none; padding:0; }
  section{ padding:64px 0; }
  .section-tight{ padding:40px 0; }

  footer{
    border-top:1px solid var(--line);
    margin-top:40px;
    background:var(--paper-warm);
  }
  .footer-wrap{
    max-width:1180px; margin:0 auto; padding:48px 24px 32px;
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
  }
  .footer-wrap h4{ font-size:0.95rem; margin-bottom:14px;}
  .footer-wrap ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
  .footer-wrap a{ text-decoration:none; color:var(--ink-soft); font-size:0.92rem;}
  .footer-wrap a:hover{ color:var(--clay); text-decoration:underline;}
  .footer-bottom{
    border-top:1px solid var(--line);
    padding:18px 24px;
    max-width:1180px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center;
    font-size:0.82rem; color:var(--ink-soft);
    flex-wrap:wrap; gap:8px;
  }

  /* ====== HOME / HERO ====== */
  .hero{
    background:linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
    border-bottom:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }
  .hero-inner{
    max-width:1180px; margin:0 auto; padding:72px 24px 56px;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
  }
  .hero h1{
    font-size:clamp(2.6rem, 5.2vw, 4.2rem);
    line-height:1.04;
    margin-bottom:0.22em;
  }
  .hero-subtitle{
    font-family:'Fraunces', serif;
    font-weight:520;
    font-size:clamp(1.3rem, 2.4vw, 1.7rem);
    line-height:1.25;
    color:var(--clay);
    max-width:30ch;
    margin:0 0 0.7em 0;
  }
  .hero p.lede{
    font-size:1.14rem;
    color:var(--ink-soft);
    max-width:46ch;
    margin-bottom:1.7em;
  }
  .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

  .placard-stage{
    position:relative;
    aspect-ratio:4/3.1;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow:0 18px 40px -22px rgba(28,26,23,0.35);
    overflow:hidden;
  }
  .placard-stage img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ====== PBV INTRO ANIMATION ====== */
  .pbv-intro{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--ink); overflow:hidden;
    font-family:'Fraunces',serif;
  }

  /* Floating background strokes */
  .pbv-intro-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
  .stroke{
    position:absolute; border-radius:50%;
    opacity:0; animation:strokeFloat 30s linear infinite;
  }
  .s1{ width:180px; height:180px; background:radial-gradient(circle, rgba(196,80,46,0.18) 0%, transparent 70%); top:10%; left:5%; animation-delay:0s; animation-duration:32s; }
  .s2{ width:240px; height:240px; background:radial-gradient(circle, rgba(47,111,94,0.14) 0%, transparent 70%); top:50%; right:8%; animation-delay:4s; animation-duration:28s; }
  .s3{ width:140px; height:140px; background:radial-gradient(circle, rgba(232,163,61,0.16) 0%, transparent 70%); bottom:15%; left:25%; animation-delay:8s; animation-duration:35s; }
  .s4{ width:200px; height:200px; background:radial-gradient(circle, rgba(196,80,46,0.1) 0%, transparent 70%); top:25%; right:30%; animation-delay:2s; animation-duration:30s; }
  .s5{ width:160px; height:160px; background:radial-gradient(circle, rgba(47,111,94,0.12) 0%, transparent 70%); bottom:30%; right:15%; animation-delay:6s; animation-duration:26s; }
  @keyframes strokeFloat{
    0%{ opacity:0; transform:scale(0.6) translateY(30px); }
    10%{ opacity:1; }
    80%{ opacity:0.6; }
    100%{ opacity:0; transform:scale(1.4) translateY(-40px); }
  }

  /* Scenes — each absolutely positioned, shown/hidden via animation */
  .pbv-scene{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:12px; padding:28px;
    opacity:0; pointer-events:none;
  }

  /* Scene 1: Logo (0–5s) */
  .sc1{ animation:sceneShow 5s ease forwards 0s; }
  .pbv-logo-mark{
    width:88px; height:88px;
    animation:logoAppear 4s ease forwards 0.3s;
    opacity:0;
  }
  .pbv-logo-mark.sm{ width:52px; height:52px; animation:logoAppear 1.5s ease forwards 0s; opacity:0; }
  @keyframes logoAppear{
    0%{ opacity:0; transform:scale(0.7); }
    30%{ opacity:1; transform:scale(1.05); }
    60%{ transform:scale(1); }
    100%{ opacity:1; transform:scale(1); }
  }

  /* Scene 2: Title (5–10s) */
  .sc2{ animation:sceneShow 5s ease forwards 5s; }
  .pbv-title-word{
    font-size:clamp(1.6rem, 5vw, 2.8rem); font-weight:700;
    color:var(--paper); margin:0; text-align:center; letter-spacing:0.01em;
    animation:wordSlideUp 4s ease forwards 5.4s; opacity:0;
  }
  @keyframes wordSlideUp{
    0%{ opacity:0; transform:translateY(28px); }
    25%{ opacity:1; transform:translateY(0); }
    80%{ opacity:1; }
    100%{ opacity:1; transform:translateY(0); }
  }

  /* Scene 3: Subtitle (10–15s) */
  .sc3{ animation:sceneShow 5s ease forwards 10s; gap:6px; }
  .pbv-subtitle-line{
    font-size:clamp(1rem, 3vw, 1.55rem); font-weight:400; font-style:italic;
    color:rgba(251,246,238,0.75); margin:0; text-align:center;
    animation:wordSlideUp 3.5s ease forwards 10.4s; opacity:0;
  }
  .pbv-subtitle-line.delay1{ animation-delay:11.2s; }

  /* Scene 4: Pillars (15–22s) */
  .sc4{ animation:sceneShow 7s ease forwards 15s; }
  .pbv-pillars{
    display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;
  }
  .pbv-pillar{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    opacity:0;
  }
  .pbv-pillar-icon{ font-size:1.8rem; line-height:1; }
  .pbv-pillar-label{
    font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.1em;
    text-transform:uppercase; color:rgba(251,246,238,0.8);
  }
  .pbv-pillar-divider{
    font-size:1.8rem; color:rgba(251,246,238,0.25); opacity:0;
    animation:fadeInSimple 0.5s ease forwards;
  }
  .p1{ animation:pillarPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards 15.5s; }
  .p2{ animation:fadeInSimple 0.4s ease forwards 16.2s; }
  .p3{ animation:pillarPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards 16.4s; }
  .p4{ animation:fadeInSimple 0.4s ease forwards 17.1s; }
  .p5{ animation:pillarPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards 17.3s; }
  @keyframes pillarPop{
    0%{ opacity:0; transform:scale(0.5) translateY(20px); }
    70%{ transform:scale(1.08) translateY(-3px); }
    100%{ opacity:1; transform:scale(1) translateY(0); }
  }
  @keyframes fadeInSimple{
    from{ opacity:0; } to{ opacity:1; }
  }

  /* Scene 5: Stats (22–28s) */
  .sc5{ animation:sceneShow 6s ease forwards 22s; }
  .pbv-stats{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
  .pbv-stat{
    display:flex; flex-direction:column; align-items:center; gap:4px; opacity:0;
  }
  .pbv-stat-num{
    font-size:clamp(1.5rem, 4vw, 2.4rem); font-weight:700;
    color:var(--clay); letter-spacing:-0.01em; line-height:1;
  }
  .pbv-stat-cap{
    font-family:'Space Mono',monospace; font-size:0.65rem; letter-spacing:0.08em;
    text-transform:uppercase; color:rgba(251,246,238,0.6);
  }
  .st1{ animation:statCountUp 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards 22.5s; }
  .st2{ animation:statCountUp 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards 23.4s; }
  .st3{ animation:statCountUp 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards 24.3s; }
  @keyframes statCountUp{
    0%{ opacity:0; transform:scale(0.5) translateY(16px); }
    65%{ transform:scale(1.12) translateY(-2px); }
    100%{ opacity:1; transform:scale(1) translateY(0); }
  }

  /* Scene 6: CTA (28–31s) */
  .sc6{ animation:sceneShow 4s ease forwards 28s; gap:14px; }
  .pbv-cta-text{
    font-family:'Space Mono',monospace; font-size:0.78rem; letter-spacing:0.1em;
    text-transform:uppercase; color:rgba(251,246,238,0.55); margin:0;
    animation:wordSlideUp 2s ease forwards 28.6s; opacity:0;
  }

  /* Generic scene show/hide */
  @keyframes sceneShow{
    0%{ opacity:0; }
    8%{ opacity:1; }
    85%{ opacity:1; }
    100%{ opacity:0; }
  }

  /* Replay button */
  .pbv-replay{
    position:absolute; bottom:16px; right:16px;
    display:none; align-items:center; gap:6px;
    background:rgba(251,246,238,0.12); color:rgba(251,246,238,0.7);
    border:1px solid rgba(251,246,238,0.2); border-radius:4px;
    padding:7px 12px; font-size:0.78rem; font-family:'Karla',sans-serif;
    font-weight:700; cursor:pointer; letter-spacing:0.04em;
    transition:background 0.15s, color 0.15s;
  }
  .pbv-replay:hover{ background:rgba(251,246,238,0.2); color:var(--paper); }
  .pbv-replay.visible{ display:flex; }
  .placard-tag{
    position:absolute; left:14px; bottom:14px; right:14px;
    background:rgba(251,246,238,0.96);
    border:1px solid var(--line);
    border-radius:4px;
    padding:11px 14px;
    backdrop-filter:blur(2px);
  }
  .placard-tag .label{ margin-bottom:3px; }
  .placard-tag p{ margin:0; font-size:0.86rem; color:var(--ink-soft); }

  .stat-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
  }
  .stat-cell{ background:var(--paper); padding:26px 22px; }
  .stat-cell .num{ font-family:'Fraunces',serif; font-size:2.1rem; font-weight:600; color:var(--pine); line-height:1; }
  .stat-cell .cap{ margin-top:8px; font-size:0.85rem; color:var(--ink-soft); }

  .why-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  }
  .why-cell{ background:var(--paper); padding:30px 28px; }
  .why-cell .icon{ width:34px; height:34px; margin-bottom:16px; color:var(--clay); }
  .why-cell h3{ font-size:1.18rem; margin-bottom:8px; }
  .why-cell p{ color:var(--ink-soft); font-size:0.95rem; margin:0; }

  .communities-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
  }
  .community-cell{
    background:var(--paper);
    padding:20px 22px;
    border-left:3px solid transparent;
    transition:border-color 0.12s, background 0.12s;
  }
  .community-cell:hover{ border-left-color:var(--clay); background:var(--paper-warm); }
  .community-cell h3{
    font-family:'Fraunces', serif;
    font-size:0.98rem;
    font-weight:560;
    margin:0 0 5px 0;
    color:var(--ink);
  }
  .community-cell p{
    font-size:0.84rem;
    color:var(--ink-soft);
    margin:0;
    line-height:1.5;
  }
  @media (max-width:860px){
    .communities-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:560px){
    .communities-grid{ grid-template-columns:1fr; }
    .community-cell{ padding:16px 18px; border-left:3px solid var(--clay); }
    .community-cell h3{ font-size:1rem; }
    .community-cell p{ font-size:0.88rem; }
  }

  .section-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:20px;
    margin-bottom:30px; flex-wrap:wrap;
  }
  .section-head h2{ font-size:1.9rem; }
  .section-head .label{ display:block; margin-bottom:8px; }

  .technique-strip{
    display:flex; gap:10px; flex-wrap:wrap;
  }
  .technique-pill{
    border:1px solid var(--line-strong);
    border-radius:30px;
    padding:7px 15px;
    font-size:0.83rem;
    color:var(--ink-soft);
    background:var(--paper);
  }

  /* ====== GALLERY CARDS ====== */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  }
  .art-card{
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    background:var(--paper);
    display:flex; flex-direction:column;
    transition:box-shadow 0.15s ease, transform 0.15s ease;
  }
  .art-card:hover{ box-shadow:0 14px 30px -18px rgba(28,26,23,0.3); transform:translateY(-2px); }
  .art-card .art-img-wrap{ position:relative; aspect-ratio:5/4; background:var(--paper-warm); overflow:hidden; }
  .art-card img{ width:100%; height:100%; object-fit:cover; display:block; }
  .art-card .art-body{ padding:16px 17px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
  .art-card h3{ font-size:1.08rem; margin:0; }
  .art-card .by{ font-size:0.83rem; color:var(--ink-soft); margin:0; }
  .technique-tag{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.04em;
    background:var(--paper-warm); border:1px solid var(--line);
    padding:5px 9px; border-radius:3px; color:var(--ink-soft);
    align-self:flex-start;
    text-transform:uppercase;
  }
  .technique-tag::before{ content:"✦"; color:var(--clay); }
  .category-tag{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.04em;
    background:rgba(122,111,166,0.12); border:1px solid rgba(122,111,166,0.4);
    padding:5px 9px; border-radius:3px; color:var(--violet);
    align-self:flex-start;
    text-transform:uppercase;
  }
  .tag-row{ display:flex; gap:6px; flex-wrap:wrap; }
  .art-story-excerpt{ font-size:0.87rem; color:var(--ink-soft); margin:0; flex:1; }
  .art-meta-row{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:4px; padding-top:11px; border-top:1px solid var(--line);
  }
  .meta-actions{ display:flex; gap:14px; align-items:center; }
  .icon-btn{
    background:none; border:none; cursor:pointer;
    display:flex; align-items:center; gap:5px;
    font-size:0.82rem; color:var(--ink-soft); font-weight:600;
    padding:4px 2px;
  }
  .icon-btn svg{ width:17px; height:17px; }
  .icon-btn.liked{ color:var(--clay); }
  .icon-btn.liked svg{ fill:var(--clay); }

  .filter-bar{
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;
    align-items:center;
  }
  .filter-chip{
    border:1px solid var(--line-strong); background:var(--paper);
    border-radius:30px; padding:8px 16px; font-size:0.85rem; cursor:pointer; font-weight:600;
    color:var(--ink-soft);
  }
  .filter-chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .search-input{
    flex:1; min-width:200px;
    border:1px solid var(--line-strong); border-radius:30px;
    padding:9px 16px; font-size:0.9rem; background:var(--paper); font-family:'Karla',sans-serif;
  }

  .empty-state{
    text-align:center; padding:70px 20px; border:1px dashed var(--line-strong); border-radius:8px; color:var(--ink-soft);
  }
  .empty-state h3{ color:var(--ink); }

  /* ====== GALLERY SUB-NAV (Art Gallery / Techniques) ====== */
  .subtab-row{
    display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:30px;
  }
  .subtab-btn{
    background:none; border:none; cursor:pointer; padding:11px 4px; margin-right:26px;
    font-family:'Karla',sans-serif; font-weight:700; font-size:0.98rem; color:var(--ink-soft);
    border-bottom:2px solid transparent; display:flex; align-items:center; gap:8px;
  }
  .subtab-btn[aria-selected="true"]{ color:var(--ink); border-color:var(--clay); }
  .subtab-count{
    font-family:'Space Mono',monospace; font-size:0.7rem; background:var(--paper-warm);
    border:1px solid var(--line); padding:2px 7px; border-radius:20px; color:var(--ink-soft);
  }

  /* ====== ARTIST IN THE SPOTLIGHT ====== */
  .spotlight-wrap{
    position:relative;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:40px;
    background:var(--ink);
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    min-height:360px;
    box-shadow:0 20px 50px -18px rgba(28,26,23,0.5);
  }
  .spotlight-img{
    position:relative;
    overflow:hidden;
  }
  .spotlight-img img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:brightness(0.88);
    transition:transform 0.4s ease;
  }
  .spotlight-wrap:hover .spotlight-img img{ transform:scale(1.025); }
  .spotlight-img-overlay{
    position:absolute; inset:0;
    background:linear-gradient(90deg, transparent 60%, rgba(28,26,23,0.65) 100%);
  }
  .spotlight-body{
    padding:34px 36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
    color:var(--paper);
    position:relative;
    z-index:1;
  }
  .spotlight-eyebrow{
    display:flex; align-items:center; gap:10px;
  }
  .spotlight-star{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Space Mono',monospace; font-size:0.7rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ochre); font-weight:700;
  }
  .spotlight-body h2{
    font-family:'Fraunces', serif;
    font-size:clamp(1.4rem, 2.4vw, 2rem);
    line-height:1.1;
    font-weight:600;
    color:var(--paper);
    margin:0;
  }
  .spotlight-artist{
    font-size:0.9rem; color:rgba(251,246,238,0.7); margin:0;
    font-weight:600;
  }
  .spotlight-quote{
    border-left:3px solid var(--ochre);
    padding:10px 14px;
    font-size:0.9rem;
    color:rgba(251,246,238,0.85);
    line-height:1.55;
    font-style:italic;
    margin:0;
    background:rgba(255,255,255,0.05);
    border-radius:0 4px 4px 0;
  }
  .spotlight-quote cite{
    display:block; font-style:normal; font-size:0.75rem;
    color:rgba(251,246,238,0.5); margin-top:6px;
    font-family:'Space Mono',monospace; letter-spacing:0.04em;
  }
  .spotlight-actions{
    display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;
  }
  .btn-spotlight{
    font-family:'Karla',sans-serif; font-weight:700; font-size:0.86rem;
    padding:10px 18px; border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  }
  .btn-spotlight-primary{
    background:var(--ochre); color:var(--ink); border:1.5px solid var(--ochre);
  }
  .btn-spotlight-primary:hover{ background:#d49028; border-color:#d49028; }
  .btn-spotlight-ghost{
    background:transparent; color:rgba(251,246,238,0.75); border:1.5px solid rgba(251,246,238,0.3);
  }
  .btn-spotlight-ghost:hover{ border-color:rgba(251,246,238,0.7); color:var(--paper); }

  .spotlight-change-modal{
    position:fixed; inset:0; background:rgba(28,26,23,0.6);
    display:flex; align-items:center; justify-content:center; z-index:600; padding:20px;
  }
  .spotlight-change-card{
    background:var(--paper); border-radius:8px; max-width:640px; width:100%;
    max-height:80vh; overflow-y:auto; box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);
  }
  .spotlight-change-header{
    padding:22px 24px 0; display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:0;
  }
  .spotlight-change-header h3{ font-size:1.1rem; margin:0; }
  .spotlight-pick-list{ padding:16px 24px 24px; display:flex; flex-direction:column; gap:2px; }
  .spotlight-pick-item{
    display:flex; align-items:center; gap:14px; padding:12px 10px; border-radius:5px; cursor:pointer;
    border:1.5px solid transparent; transition:border-color 0.1s, background 0.1s;
  }
  .spotlight-pick-item:hover{ background:var(--paper-warm); border-color:var(--line); }
  .spotlight-pick-item.selected{ border-color:var(--clay); background:rgba(196,80,46,0.05); }
  .spotlight-pick-thumb{
    width:56px; height:56px; border-radius:4px; object-fit:cover; flex:none;
  }
  .spotlight-pick-info h4{ font-size:0.92rem; margin:0 0 2px; }
  .spotlight-pick-info p{ font-size:0.78rem; color:var(--ink-soft); margin:0; }
  .spotlight-quote-input{
    width:100%; border:1px solid var(--line-strong); border-radius:4px; padding:10px 12px;
    font-family:'Karla',sans-serif; font-size:0.9rem; resize:vertical; min-height:80px;
    background:var(--paper); margin-top:12px;
  }

  @media (max-width:860px){
    .spotlight-wrap{ grid-template-columns:1fr; min-height:auto; }
    .spotlight-img{ aspect-ratio:16/9; }
    .spotlight-img-overlay{ background:linear-gradient(180deg, transparent 50%, rgba(28,26,23,0.7) 100%); }
    .spotlight-body{ padding:22px 24px 28px; }
  }

  /* ====== TECHNIQUE GUIDE CARDS ====== */
  .guide-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .guide-card{
    border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper);
    display:flex; flex-direction:column; transition:box-shadow 0.15s ease, transform 0.15s ease;
  }
  .guide-card:hover{ box-shadow:0 14px 30px -18px rgba(28,26,23,0.3); transform:translateY(-2px); }
  .guide-media{ position:relative; aspect-ratio:5/4; background:var(--paper-warm); overflow:hidden; }
  .guide-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .media-type-badge{
    position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:5px;
    background:rgba(28,26,23,0.78); color:var(--paper); font-size:0.72rem; font-weight:700;
    padding:5px 9px 5px 7px; border-radius:30px;
  }
  .media-type-badge svg{ width:13px; height:13px; }
  .guide-play{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(28,26,23,0.18);
  }
  .guide-play svg{ width:46px; height:46px; color:var(--paper); filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
  .guide-body{ padding:16px 17px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .guide-body h3{ font-size:1.05rem; margin:0; }
  .guide-by{ font-size:0.82rem; color:var(--ink-soft); margin:0; }
  .guide-summary{ font-size:0.87rem; color:var(--ink-soft); margin:0; flex:1; }
  .guide-foot{ display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--ink-soft); padding-top:9px; border-top:1px solid var(--line); margin-top:2px; }

  .guide-detail-steps{ display:flex; flex-direction:column; gap:0; counter-reset:step; }
  .guide-step{
    display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);
  }
  .guide-step:last-child{ border-bottom:none; }
  .guide-step-num{
    flex:none; width:26px; height:26px; border-radius:50%; background:var(--paper-warm);
    border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
    font-family:'Space Mono',monospace; font-size:0.78rem; font-weight:700; color:var(--ink-soft);
  }
  .guide-step p{ margin:0; font-size:0.92rem; color:var(--ink-soft); padding-top:2px; }


  /* ====== ARTWORK DETAIL MODAL ====== */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(28,26,23,0.55);
    display:flex; align-items:flex-start; justify-content:center;
    padding:40px 20px; z-index:500; overflow-y:auto;
  }
  .modal-card{
    background:var(--paper); border-radius:8px; max-width:920px; width:100%;
    display:grid; grid-template-columns:1.1fr 0.9fr; overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);
  }
  .modal-img{ background:var(--paper-warm); }
  .modal-img img{ width:100%; height:100%; object-fit:cover; display:block; min-height:340px; }
  .modal-body{ padding:30px 30px 26px; display:flex; flex-direction:column; max-height:88vh; overflow-y:auto; }
  .modal-close{
    position:absolute; top:14px; right:14px; background:var(--paper);
    border:1px solid var(--line-strong); border-radius:50%; width:34px; height:34px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .modal-card{ position:relative; }
  .story-block{
    background:var(--paper-warm); border-left:3px solid var(--ochre);
    padding:14px 16px; border-radius:0 4px 4px 0; margin:14px 0;
  }
  .story-block .label{ margin-bottom:6px; }
  .story-block p{ margin:0; font-size:0.93rem; color:var(--ink-soft); }
  .comment-item{ padding:10px 0; border-bottom:1px solid var(--line); }
  .comment-item:last-child{ border-bottom:none; }
  .comment-item .who{ font-weight:700; font-size:0.86rem; }
  .comment-item .what{ font-size:0.88rem; color:var(--ink-soft); margin:2px 0 0; }
  .comment-form{ display:flex; gap:8px; margin-top:14px; }
  .comment-form input{ flex:1; border:1px solid var(--line-strong); border-radius:30px; padding:9px 15px; font-family:'Karla',sans-serif; }

  /* ====== AUTH ====== */
  .auth-shell{ max-width:440px; margin:60px auto; }
  .auth-card{ border:1px solid var(--line); border-radius:8px; padding:36px 32px; background:var(--paper); }
  .auth-card h2{ font-size:1.6rem; }
  .auth-tabs{ display:flex; gap:4px; margin-bottom:22px; border-bottom:1px solid var(--line); }
  .auth-tab{ background:none; border:none; padding:10px 4px; margin-right:20px; font-weight:700; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; }
  .auth-tab[aria-selected="true"]{ color:var(--ink); border-color:var(--clay); }
  .field{ margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
  .field label{ font-size:0.85rem; font-weight:700; }
  .field input, .field select, .field textarea{
    border:1px solid var(--line-strong); border-radius:4px; padding:10px 12px; font-family:'Karla',sans-serif; font-size:0.95rem;
    background:var(--paper);
  }
  .field textarea{ resize:vertical; min-height:90px; }
  .field-hint{ font-size:0.78rem; color:var(--ink-soft); }
  .checkbox-row{ display:flex; align-items:flex-start; gap:8px; font-size:0.85rem; color:var(--ink-soft); }
  .checkbox-row input{ margin-top:3px; }

  /* ====== ABOUT ====== */
  .about-hero{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
  .value-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
  .value-cell{ background:var(--paper); padding:26px; }
  .team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .team-card{ text-align:left; }
  .team-photo{ aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:var(--paper-warm); margin-bottom:12px; }
  .team-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
  .team-card h4{ font-size:1rem; margin-bottom:2px; }
  .team-role{ font-size:0.82rem; color:var(--clay); font-weight:700; margin-bottom:6px; }
  .team-bio{ font-size:0.85rem; color:var(--ink-soft); margin:0; }

  .timeline{ border-left:2px solid var(--line-strong); padding-left:24px; display:flex; flex-direction:column; gap:26px; margin-left:6px; }
  .timeline-item{ position:relative; }
  .timeline-item::before{
    content:""; position:absolute; left:-29px; top:4px; width:10px; height:10px; border-radius:50%;
    background:var(--clay); border:2px solid var(--paper);
  }
  .timeline-item .label{ margin-bottom:4px; }
  .timeline-item p{ margin:4px 0 0; color:var(--ink-soft); font-size:0.92rem; }

  /* ====== COMMUNITY / FORUM ====== */
  .community-layout{ display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start; }
  .community-side{ position:sticky; top:90px; display:flex; flex-direction:column; gap:6px; }
  .side-link{
    text-align:left; background:none; border:none; padding:10px 12px; border-radius:5px;
    font-weight:600; color:var(--ink-soft); cursor:pointer; font-size:0.92rem;
  }
  .side-link[aria-current="true"]{ background:var(--paper-warm); color:var(--ink); }
  .thread{ border:1px solid var(--line); border-radius:6px; padding:18px 20px; margin-bottom:14px; background:var(--paper); }

  /* ====== TIPS & TECHNIQUES (upvote system) ====== */
  .tips-controls{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px;
  }
  .tips-sort-btn{
    padding:6px 14px; border-radius:30px; border:1.5px solid var(--line-strong);
    background:none; cursor:pointer; font-size:0.8rem; font-weight:700;
    font-family:'Karla',sans-serif; color:var(--ink-soft);
    transition:all 0.1s;
  }
  .tips-sort-btn.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

  .tip-card{
    display:flex; gap:0; border:1px solid var(--line); border-radius:8px;
    background:var(--paper); margin-bottom:12px; overflow:hidden;
    transition:border-color 0.12s, box-shadow 0.12s;
  }
  .tip-card:hover{ border-color:rgba(196,80,46,0.3); box-shadow:0 2px 12px rgba(196,80,46,0.06); }

  /* Vote column */
  .tip-vote-col{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:14px 10px; gap:4px; background:var(--paper-warm);
    border-right:1px solid var(--line); min-width:54px; flex:none;
  }
  .btn-upvote{
    background:none; border:none; cursor:pointer; padding:4px;
    color:var(--ink-soft); border-radius:4px; transition:color 0.1s, background 0.1s;
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .btn-upvote:hover{ color:var(--clay); background:rgba(196,80,46,0.08); }
  .btn-upvote.upvoted{ color:var(--clay); }
  .btn-upvote.upvoted svg path{ fill:var(--clay); stroke:var(--clay); }
  .btn-upvote svg{ width:18px; height:18px; }
  .tip-votes{
    font-family:'Space Mono',monospace; font-size:0.82rem; font-weight:700;
    color:var(--ink); line-height:1;
  }
  .tip-votes.hot{ color:var(--clay); }

  /* Tip body */
  .tip-body{ padding:14px 16px; flex:1; min-width:0; }
  .tip-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
  .tip-category-tag{
    font-family:'Space Mono',monospace; font-size:0.64rem; letter-spacing:0.06em;
    text-transform:uppercase; padding:2px 8px; border-radius:3px;
    background:rgba(196,80,46,0.1); color:var(--clay); border:1px solid rgba(196,80,46,0.25);
  }
  .tip-technique-tag{
    font-family:'Space Mono',monospace; font-size:0.64rem; letter-spacing:0.06em;
    text-transform:uppercase; padding:2px 8px; border-radius:3px;
    background:rgba(47,111,94,0.08); color:var(--pine); border:1px solid rgba(47,111,94,0.25);
  }
  .tip-title{ font-size:0.96rem; font-weight:700; margin:0 0 6px; line-height:1.3; }
  .tip-text{ font-size:0.86rem; color:var(--ink-soft); margin:0 0 10px; line-height:1.6; }
  .tip-footer{ display:flex; align-items:center; gap:12px; font-size:0.75rem; color:var(--ink-soft); }
  .tip-footer strong{ color:var(--ink); }

  /* Submit tip form */
  .submit-tip-panel{
    border:1px solid var(--line); border-radius:8px; padding:22px 24px;
    background:var(--paper-warm); margin-bottom:20px;
  }
  .submit-tip-panel h3{ font-size:1rem; margin:0 0 16px; }
  .thread h3{ font-size:1.02rem; margin-bottom:6px; }
  .thread-meta{ font-size:0.8rem; color:var(--ink-soft); display:flex; gap:14px; margin-top:10px; }
  .thread-tag{
    display:inline-block; background:var(--violet); color:var(--paper); font-size:0.68rem;
    font-family:'Space Mono',monospace; padding:3px 8px; border-radius:3px; text-transform:uppercase; margin-bottom:8px;
  }

  /* ====== HANDBOOKS ====== */
  .handbook-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px;
  }
  .handbook-card{
    border:1px solid var(--line); border-radius:8px; padding:22px 20px; background:var(--paper);
    cursor:pointer; display:flex; flex-direction:column; gap:8px;
    transition:box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  }
  .handbook-card:hover{ box-shadow:0 10px 28px -14px rgba(28,26,23,0.25); transform:translateY(-2px); border-color:var(--clay); }
  .handbook-card-icon{ font-size:1.6rem; line-height:1; margin-bottom:4px; }
  .handbook-card h3{ font-size:1rem; margin:0 0 4px; }
  .handbook-card p{ font-size:0.83rem; color:var(--ink-soft); margin:0; line-height:1.5; flex:1; }
  .handbook-card-footer{
    display:flex; align-items:center; gap:6px; margin-top:6px; padding-top:10px; border-top:1px solid var(--line);
    font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.04em; color:var(--ink-soft); text-transform:uppercase;
  }

  .handbook-detail{ max-width:820px; }
  .handbook-intro-box{
    background:var(--paper-warm); border-left:3px solid var(--pine); border-radius:0 6px 6px 0;
    padding:18px 20px; margin-bottom:30px;
  }
  .handbook-intro-box p{ margin:0; font-size:1.01rem; color:var(--ink-soft); line-height:1.65; }

  .handbook-section{ margin-bottom:34px; }
  .handbook-section h3{
    font-family:'Fraunces',serif; font-size:1.18rem; font-weight:560; margin:0 0 12px;
    padding-bottom:10px; border-bottom:1px solid var(--line);
  }
  .handbook-section p{ font-size:0.94rem; color:var(--ink-soft); line-height:1.7; margin:0 0 16px; }
  .handbook-examples{
    background:var(--paper-warm); border-radius:6px; padding:14px 18px; margin-bottom:12px;
  }
  .handbook-examples .label{ display:block; margin-bottom:8px; }
  .handbook-examples ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; }
  .handbook-examples li{ font-size:0.88rem; color:var(--ink-soft); line-height:1.6; }
  .handbook-sources{
    border:1px solid var(--line); border-radius:6px; padding:12px 16px;
    display:flex; flex-direction:column; gap:6px;
  }
  .handbook-sources .label{ margin-bottom:4px; }
  .handbook-sources a{ font-size:0.83rem; color:var(--pine); text-decoration:none; font-weight:600; }
  .handbook-sources a:hover{ text-decoration:underline; color:var(--clay); }
  .handbook-sources span{ font-size:0.83rem; color:var(--ink-soft); }

  @media (max-width:860px){ .handbook-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .handbook-grid{ grid-template-columns:1fr; } }

  /* ====== HANDBOOK CONTRIBUTIONS ====== */
  .contrib-badge{
    display:inline-flex; align-items:center; gap:5px;
    font-family:'Space Mono',monospace; font-size:0.66rem; letter-spacing:0.05em; text-transform:uppercase;
    padding:3px 9px; border-radius:3px;
  }
  .contrib-badge-community{ background:rgba(47,111,94,0.12); color:var(--pine); border:1px solid rgba(47,111,94,0.4); }
  .contrib-badge-pending{ background:rgba(232,163,61,0.15); color:#8a6000; border:1px solid rgba(232,163,61,0.45); }
  .contrib-badge-editorial{ background:rgba(28,26,23,0.07); color:var(--ink-soft); border:1px solid var(--line); }

  .contrib-section{
    border:1px solid rgba(47,111,94,0.35); border-radius:8px; padding:20px 22px; background:rgba(47,111,94,0.04);
    position:relative; margin-bottom:22px;
  }
  .contrib-section::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--pine); border-radius:3px 0 0 3px;
  }
  .contrib-meta{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }

  .submit-contrib-panel{
    background:var(--paper-warm); border:1px solid var(--line); border-radius:8px;
    padding:28px 26px; margin-top:32px;
  }
  .submit-contrib-panel h3{ font-size:1.1rem; margin:0 0 6px; }
  .submit-contrib-panel p{ font-size:0.88rem; color:var(--ink-soft); margin:0 0 20px; max-width:54ch; }

  /* ====== ADMIN PANEL ====== */
  .admin-bar{
    background:var(--ink); color:var(--paper); padding:10px 24px;
    display:flex; align-items:center; gap:16px; font-family:'Space Mono',monospace;
    font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  }
  .admin-bar span{ opacity:0.6; }
  .admin-bar strong{ color:var(--ochre); }

  .admin-contrib-card{
    border:1px solid var(--line); border-radius:6px; background:var(--paper); padding:18px 20px;
    margin-bottom:14px; display:flex; flex-direction:column; gap:10px;
  }
  .admin-contrib-card h4{ font-size:0.98rem; margin:0 0 4px; }
  .admin-contrib-card p{ font-size:0.86rem; color:var(--ink-soft); margin:0; }
  .admin-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
  .btn-approve{ background:var(--pine); color:var(--paper); border:none; padding:7px 14px; border-radius:4px; cursor:pointer; font-weight:700; font-size:0.82rem; font-family:'Karla',sans-serif; }
  .btn-decline{ background:none; color:#c0392b; border:1.5px solid #c0392b; padding:6px 13px; border-radius:4px; cursor:pointer; font-weight:700; font-size:0.82rem; font-family:'Karla',sans-serif; }
  .btn-request-change{ background:none; color:#8a6000; border:1.5px solid rgba(232,163,61,0.6); padding:6px 13px; border-radius:4px; cursor:pointer; font-weight:700; font-size:0.82rem; font-family:'Karla',sans-serif; }

  .contrib-stat-row{ display:flex; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
  .contrib-stat{ text-align:center; }
  .contrib-stat .num{ font-family:'Fraunces',serif; font-size:1.5rem; font-weight:600; color:var(--pine); display:block; line-height:1; }
  .contrib-stat .cap{ font-size:0.76rem; color:var(--ink-soft); }

  /* ====== COMMISSION BADGE ====== */
  .commission-badge{
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(47,111,94,0.1); border:1.5px solid rgba(47,111,94,0.35);
    color:var(--pine); border-radius:30px; padding:3px 10px;
    font-size:0.72rem; font-weight:700; font-family:'Space Mono',monospace;
    letter-spacing:0.04em; white-space:nowrap;
  }
  .shop-link-tag{
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(232,163,61,0.1); border:1.5px solid rgba(232,163,61,0.35);
    color:var(--ochre); border-radius:30px; padding:3px 10px;
    font-size:0.72rem; font-weight:700; font-family:'Space Mono',monospace;
    text-decoration:none;
  }
  .shop-link-tag:hover{ background:rgba(232,163,61,0.2); }

  /* ====== PERSONALISED DASHBOARD ====== */
  .dashboard-greeting{
    background:linear-gradient(135deg, rgba(196,80,46,0.06) 0%, rgba(47,111,94,0.06) 100%);
    border:1px solid var(--line); border-radius:10px; padding:24px 28px; margin-bottom:28px;
  }
  .dashboard-grid{
    display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:24px;
  }
  .dashboard-section h3{
    font-size:0.98rem; margin:0 0 12px; display:flex; align-items:center; gap:8px;
  }
  .dashboard-tip-card{
    border:1px solid var(--line); border-radius:6px; padding:14px 16px;
    background:var(--paper); margin-bottom:8px;
    cursor:pointer; transition:border-color 0.1s;
  }
  .dashboard-tip-card:hover{ border-color:var(--clay); }
  .dashboard-tip-card h4{ font-size:0.88rem; margin:0 0 4px; }
  .dashboard-tip-card p{ font-size:0.78rem; color:var(--ink-soft); margin:0; }

  /* ====== TECHNIQUE MATCHER ====== */
  .matcher-progress{
    display:flex; gap:4px; margin-bottom:28px;
  }
  .matcher-progress-step{
    height:4px; flex:1; border-radius:2px; background:var(--line);
    transition:background 0.3s;
  }
  .matcher-progress-step.done{ background:var(--clay); }
  .matcher-progress-step.active{ background:var(--ochre); }
  .matcher-question{
    font-size:1.2rem; font-weight:700; margin:0 0 8px; line-height:1.35;
  }
  .matcher-hint{
    font-size:0.86rem; color:var(--ink-soft); margin:0 0 22px; line-height:1.6;
  }
  .matcher-options{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
  }
  .matcher-option{
    border:2px solid var(--line); border-radius:8px; padding:16px 14px;
    background:var(--paper); cursor:pointer; text-align:left;
    transition:all 0.12s; font-family:'Karla',sans-serif;
  }
  .matcher-option:hover{ border-color:var(--clay); background:rgba(196,80,46,0.04); }
  .matcher-option.selected{ border-color:var(--clay); background:rgba(196,80,46,0.06); }
  .matcher-option-icon{ font-size:1.5rem; display:block; margin-bottom:6px; }
  .matcher-option-label{ font-size:0.92rem; font-weight:700; display:block; margin-bottom:3px; }
  .matcher-option-desc{ font-size:0.78rem; color:var(--ink-soft); line-height:1.4; display:block; }
  .matcher-result-card{
    border:2px solid var(--clay); border-radius:10px; padding:22px 24px;
    background:rgba(196,80,46,0.04); margin-bottom:14px;
  }
  .matcher-result-card h3{ font-size:1.1rem; margin:0 0 6px; color:var(--clay); }
  .matcher-result-card p{ font-size:0.9rem; color:var(--ink-soft); margin:0 0 12px; line-height:1.65; }
  .matcher-result-why{ font-size:0.8rem; font-style:italic; color:var(--ink-soft); }

  /* ====== MOBILE BOTTOM NAV ====== */
  .mobile-bottom-nav{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:400;
    background:var(--paper); border-top:1px solid var(--line);
    padding:0 0 env(safe-area-inset-bottom,0); box-shadow:0 -2px 10px rgba(28,26,23,0.08);
  }
  .mobile-bottom-nav-inner{
    display:flex; align-items:stretch;
  }
  .mobile-nav-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:8px 4px; background:none; border:none; cursor:pointer;
    color:var(--ink-soft); font-family:'Karla',sans-serif; font-size:0.65rem;
    font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
    transition:color 0.1s; min-height:56px;
  }
  .mobile-nav-btn.active{ color:var(--clay); }
  .mobile-nav-btn svg{ width:22px; height:22px; }
  .mobile-nav-btn .mob-badge{
    position:absolute; top:4px; right:calc(50% - 18px);
    background:var(--clay); color:var(--paper); font-size:0.58rem;
    width:14px; height:14px; border-radius:50%; display:flex;
    align-items:center; justify-content:center; font-weight:700;
  }
  @media (max-width:768px){
    .mobile-bottom-nav{ display:flex; }
    #main-content{ padding-bottom:72px; }
    .session-timer-widget{ bottom:80px; }
    .a11y-toggle-btn{ bottom:80px; }
    .a11y-panel{ bottom:136px; }
  }

  /* ====== RTL SUPPORT ====== */
  [dir="rtl"] .community-layout{ direction:rtl; }
  [dir="rtl"] .community-side{ text-align:right; }
  [dir="rtl"] .art-body{ text-align:right; }
  [dir="rtl"] .tip-vote-col{ order:1; }
  [dir="rtl"] .tip-body{ order:0; }
  [dir="rtl"] .member-card-top{ flex-direction:row; }
  [dir="rtl"] .section-head{ flex-direction:row-reverse; }
  [dir="rtl"] .nav-wrap{ flex-direction:row-reverse; }

  /* ====== VOICE INPUT ====== */
  .voice-input-wrap{ position:relative; }
  .voice-input-btn{
    position:absolute; bottom:8px; right:8px; z-index:5;
    width:32px; height:32px; border-radius:50%;
    background:var(--paper); border:1.5px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--ink-soft); transition:all 0.15s;
  }
  .voice-input-btn:hover{ border-color:var(--clay); color:var(--clay); }
  .voice-input-btn.listening{
    background:var(--clay); border-color:var(--clay); color:var(--paper);
    animation:voicePulse 1.2s ease-in-out infinite;
  }
  @keyframes voicePulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(196,80,46,0.4); }
    50%{ box-shadow:0 0 0 8px rgba(196,80,46,0); }
  }
  .voice-input-btn svg{ width:16px; height:16px; }

  /* ====== HELP BUTTON ====== */
  .help-fab-btn{
    position:fixed; bottom:20px; left:20px; z-index:500;
    width:52px; height:52px; border-radius:50%;
    background:var(--pine); color:var(--paper); border:none;
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; cursor:pointer; box-shadow:0 4px 20px rgba(47,111,94,0.35);
    transition:transform 0.15s;
  }
  .help-fab-btn:hover{ transform:scale(1.08); }
  @media (max-width:768px){ .help-fab-btn{ bottom:84px; left:16px; width:46px; height:46px; font-size:1.2rem; } }
  .help-panel{
    position:fixed; bottom:84px; left:20px; z-index:500;
    width:320px; max-width:calc(100vw - 40px);
    background:var(--paper); border:1px solid var(--line);
    border-radius:12px; box-shadow:0 12px 40px rgba(28,26,23,0.18);
    display:none; flex-direction:column; overflow:hidden;
  }
  .help-panel.open{ display:flex; }
  @media (max-width:768px){ .help-panel{ bottom:140px; left:16px; } }
  .help-panel-head{
    background:var(--pine); color:var(--paper); padding:16px 18px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .help-panel-head h3{ font-size:1rem; margin:0; color:var(--paper); }
  .help-panel-close{ background:none; border:none; color:rgba(251,246,238,0.8); cursor:pointer; font-size:1.1rem; padding:2px 6px; }
  .help-panel-body{ padding:14px; display:flex; flex-direction:column; gap:6px; }
  .help-panel-link{
    display:flex; align-items:center; gap:10px; padding:11px 12px;
    border-radius:6px; background:none; border:none; cursor:pointer;
    text-align:left; font-family:'Karla',sans-serif; font-size:0.88rem;
    color:var(--ink); transition:background 0.1s;
  }
  .help-panel-link:hover{ background:var(--paper-warm); }
  .help-panel-link .help-icon{ font-size:1.2rem; flex:none; }
  .help-panel-link .help-link-desc{ display:block; font-size:0.74rem; color:var(--ink-soft); margin-top:1px; font-weight:400; }
  .help-panel-link strong{ display:block; font-size:0.88rem; }
  .help-panel-footer{
    border-top:1px solid var(--line); padding:12px 14px;
    font-size:0.78rem; color:var(--ink-soft); text-align:center;
  }

  .btn-bookmark{
    background:none; border:none; cursor:pointer; padding:4px 6px;
    color:var(--ink-soft); font-size:1rem; line-height:1;
    border-radius:4px; transition:color 0.1s, background 0.1s;
  }
  .btn-bookmark:hover{ color:var(--ochre); background:rgba(232,163,61,0.1); }
  .btn-bookmark.bookmarked{ color:var(--ochre); }
  .bookmarks-grid{ display:flex; flex-direction:column; gap:10px; }
  .bookmark-item{
    display:flex; align-items:center; gap:12px;
    border:1px solid var(--line); border-radius:6px; padding:12px 14px;
    background:var(--paper); cursor:pointer; transition:border-color 0.1s;
  }
  .bookmark-item:hover{ border-color:var(--clay); }
  .bookmark-item-icon{ font-size:1.2rem; flex:none; }
  .bookmark-item-body{ flex:1; min-width:0; }
  .bookmark-item-title{ font-size:0.9rem; font-weight:700; margin:0 0 2px; }
  .bookmark-item-meta{ font-size:0.74rem; color:var(--ink-soft); font-family:'Space Mono',monospace; }
  .bookmark-remove{ background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:0.78rem; padding:4px 6px; border-radius:3px; }
  .bookmark-remove:hover{ color:var(--clay); background:rgba(196,80,46,0.08); }

  /* ====== SESSION TIMER ====== */
  .session-timer-widget{
    position:fixed; bottom:80px; right:20px; z-index:500;
    background:var(--paper); border:2px solid var(--clay); border-radius:10px;
    padding:14px 16px; box-shadow:0 4px 20px rgba(28,26,23,0.15);
    min-width:160px; display:none; flex-direction:column; gap:8px;
  }
  .session-timer-widget.active{ display:flex; }
  .session-timer-display{
    font-family:'Space Mono',monospace; font-size:1.6rem; font-weight:700;
    color:var(--clay); text-align:center; line-height:1;
  }
  .session-timer-display.warning{ color:var(--ochre); }
  .session-timer-display.done{ color:var(--pine); }
  .session-timer-label{
    font-size:0.7rem; color:var(--ink-soft); text-align:center;
    font-family:'Space Mono',monospace; letter-spacing:0.06em; text-transform:uppercase;
  }
  .session-timer-btns{ display:flex; gap:6px; }
  .session-timer-btn{
    flex:1; padding:5px; border:1px solid var(--line-strong); border-radius:4px;
    background:none; cursor:pointer; font-size:0.75rem; font-family:'Karla',sans-serif;
    color:var(--ink-soft); transition:all 0.1s;
  }
  .session-timer-btn:hover{ background:var(--paper-warm); color:var(--ink); }
  .session-timer-btn.stop{ border-color:var(--clay); color:var(--clay); }
  .session-timer-done-msg{
    font-size:0.8rem; color:var(--pine); font-weight:700;
    text-align:center; padding:6px 0;
  }

  /* ====== SILENT MODE ====== */
  body.a11y-silent *,
  body.a11y-silent *::before,
  body.a11y-silent *::after {
    animation:none !important;
    transition:none !important;
  }
  body.a11y-silent .art-card:hover,
  body.a11y-silent .group-card:hover,
  body.a11y-silent .video-card:hover,
  body.a11y-silent .setup-card:hover,
  body.a11y-silent .tip-card:hover,
  body.a11y-silent .member-card:hover {
    transform:none !important;
    box-shadow:none !important;
    border-color:var(--line) !important;
  }
  body.a11y-silent .msg-badge,
  body.a11y-silent .notif-badge,
  body.a11y-silent .friend-req-badge {
    animation:none !important;
  }
  body.a11y-silent .pbv-intro{ display:none !important; }
  body.a11y-silent .newsletter-band *{ transition:none !important; }
  body.a11y-silent [class*="fade"]{ animation:none !important; opacity:1 !important; }

  /* ====== AAC QUICK MESSAGES ====== */
  .aac-board{
    background:var(--paper-warm); border:1px solid var(--line);
    border-radius:6px; padding:12px; margin-bottom:12px;
  }
  .aac-board-label{
    font-family:'Space Mono',monospace; font-size:0.64rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; display:block;
  }
  .aac-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  }
  .aac-btn{
    padding:8px 6px; border:1.5px solid var(--line-strong); border-radius:6px;
    background:var(--paper); cursor:pointer; font-size:0.78rem;
    font-family:'Karla',sans-serif; color:var(--ink); text-align:center;
    line-height:1.3; transition:all 0.1s;
  }
  .aac-btn:hover{ border-color:var(--pine); background:rgba(47,111,94,0.06); color:var(--pine); }
  .aac-btn .aac-icon{ font-size:1.1rem; display:block; margin-bottom:3px; }
  .aac-toggle-btn{
    background:none; border:none; cursor:pointer; font-size:0.78rem;
    color:var(--ink-soft); font-family:'Karla',sans-serif; padding:0 0 8px;
    text-decoration:underline;
  }
  .aac-toggle-btn:hover{ color:var(--pine); }

  /* ====== AUDIO GALLERY ====== */
  .audio-gallery-bar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:var(--ink); color:var(--paper); padding:12px 20px;
    border-radius:8px; margin-bottom:20px;
  }
  .audio-gallery-bar p{ margin:0; font-size:0.86rem; color:rgba(251,246,238,0.8); flex:1; }
  .audio-gallery-card{
    border:2px solid var(--line); border-radius:8px; padding:18px 20px;
    background:var(--paper); margin-bottom:12px; cursor:pointer;
    transition:border-color 0.12s;
  }
  .audio-gallery-card:focus,
  .audio-gallery-card.speaking{ border-color:var(--clay); outline:3px solid rgba(196,80,46,0.3); }
  .audio-gallery-card:hover{ border-color:var(--clay); }
  .audio-gallery-card h3{ font-size:1rem; margin:0 0 4px; }
  .audio-gallery-card .ag-meta{ font-size:0.82rem; color:var(--ink-soft); margin:0 0 8px; }
  .audio-gallery-card .ag-desc{ font-size:0.86rem; color:var(--ink-soft); line-height:1.6; margin:0; }
  .ag-play-btn{
    display:inline-flex; align-items:center; gap:6px; margin-top:12px;
    padding:7px 14px; border:1.5px solid var(--clay); border-radius:4px;
    background:none; color:var(--clay); font-family:'Karla',sans-serif;
    font-weight:700; font-size:0.82rem; cursor:pointer; transition:all 0.1s;
  }
  .ag-play-btn:hover{ background:var(--clay); color:var(--paper); }
  .ag-play-btn.speaking{ background:var(--clay); color:var(--paper); }
  @font-face{
    font-family:'AtkinsonHyperlegible';
    src:url('https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45G8WbcNcy-OZFy-FA.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'AtkinsonHyperlegible';
    src:url('https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt73C1KxNDXMspQ1lPyU89-1h6ONRlW45G8Wbc9dy-OZFGiAl8sAxfoMQ.woff2') format('woff2');
    font-weight:700; font-style:normal; font-display:swap;
  }
  body.a11y-atkinson,
  body.a11y-atkinson *:not(.brand-mark):not(svg):not(path):not(circle){
    font-family:'AtkinsonHyperlegible',sans-serif !important;
  }

  /* ====== DARK THEME ====== */
  body.a11y-dark{
    --paper:#1e1e1e; --paper-warm:#252525; --ink:#ede9e1; --ink-soft:#9a9690;
    --line:rgba(237,233,225,0.12); --line-strong:rgba(237,233,225,0.22);
    background:#1e1e1e;
  }
  body.a11y-dark .site-header{ background:#1e1e1e; border-bottom-color:rgba(237,233,225,0.1); }
  body.a11y-dark footer{ background:#111; }
  body.a11y-dark .a11y-panel{ background:#1e1e1e; border-color:rgba(237,233,225,0.15); }
  body.a11y-dark .search-box{ background:#1e1e1e; }
  body.a11y-dark .search-result-item:hover{ background:#252525; }

  /* ====== EASY READ MODE ====== */
  body.a11y-easy-read{ font-size:1.12rem !important; }
  body.a11y-easy-read p,
  body.a11y-easy-read li{ font-size:1.1rem !important; line-height:2.1 !important; max-width:52ch !important; }
  body.a11y-easy-read h1{ font-size:2rem !important; }
  body.a11y-easy-read h2{ font-size:1.6rem !important; }
  body.a11y-easy-read h3{ font-size:1.25rem !important; }
  .easy-read-banner{
    background:var(--ochre); color:var(--ink); padding:9px 20px;
    font-size:0.86rem; font-weight:700; text-align:center;
    display:none; position:sticky; top:0; z-index:600;
  }
  body.a11y-easy-read .easy-read-banner{ display:block; }

  /* ====== ALT TEXT BADGE ====== */
  .artwork-alt-btn{
    position:absolute; bottom:8px; left:8px;
    background:rgba(28,26,23,0.82); color:rgba(251,246,238,0.9);
    border:none; border-radius:4px; padding:4px 8px;
    font-size:0.67rem; font-family:'Space Mono',monospace;
    letter-spacing:0.05em; cursor:pointer; text-transform:uppercase;
    transition:background 0.1s; line-height:1.3;
  }
  .artwork-alt-btn:hover{ background:var(--clay); }
  .artwork-alt-panel{
    background:var(--paper-warm); border-top:1px solid var(--line);
    padding:10px 14px; font-size:0.84rem; color:var(--ink-soft);
    line-height:1.6; display:none;
  }
  .artwork-alt-panel.open{ display:block; }

  /* ====== READING TIME & COMPLEXITY BADGES ====== */
  .handbook-meta-row{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
  }
  .reading-time-badge, .complexity-badge{
    font-family:'Space Mono',monospace; font-size:0.68rem;
    letter-spacing:0.06em; text-transform:uppercase; border-radius:4px; padding:3px 9px;
  }
  .reading-time-badge{ background:var(--paper-warm); border:1px solid var(--line); color:var(--ink-soft); }
  .complexity-badge{ background:rgba(47,111,94,0.08); border:1px solid rgba(47,111,94,0.3); color:var(--pine); }

  /* ====== COMMUNICATION STYLE IN PROFILE ====== */
  .comms-style-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .comms-style-btn{
    padding:6px 14px; border-radius:30px; border:1.5px solid var(--line-strong);
    background:none; cursor:pointer; font-size:0.82rem;
    font-family:'Karla',sans-serif; color:var(--ink-soft); transition:all 0.1s;
  }
  .comms-style-btn.selected{ background:var(--pine); color:var(--paper); border-color:var(--pine); }

  /* ====== TESTIMONIALS ====== */
  .testimonials-section{
    padding:52px 0; background:var(--paper);
  }
  .testimonials-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px;
  }
  .testimonial-card{
    background:var(--paper-warm); border:1px solid var(--line); border-radius:10px;
    padding:24px 22px; display:flex; flex-direction:column; gap:14px;
  }
  .testimonial-quote{
    font-size:0.95rem; line-height:1.7; color:var(--ink); font-style:italic;
    flex:1;
  }
  .testimonial-quote::before{ content:'\201C'; font-size:1.4rem; color:var(--clay); line-height:0; vertical-align:-0.3em; margin-right:2px; font-style:normal; }
  .testimonial-author{ display:flex; align-items:center; gap:10px; }
  .testimonial-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--line); }
  .testimonial-name{ font-size:0.84rem; font-weight:700; margin:0; }
  .testimonial-role{ font-size:0.74rem; color:var(--ink-soft); margin:0; }

  /* ====== WELCOME PAGE ====== */
  .welcome-step{
    display:flex; gap:18px; align-items:flex-start; padding:20px 22px;
    border:1px solid var(--line); border-radius:8px; background:var(--paper);
    cursor:pointer; transition:border-color 0.12s, box-shadow 0.12s;
  }
  .welcome-step:hover{ border-color:var(--clay); box-shadow:0 2px 12px rgba(196,80,46,0.08); }
  .welcome-step-num{
    width:36px; height:36px; border-radius:50%; background:var(--clay); color:var(--paper);
    display:flex; align-items:center; justify-content:center; font-weight:700;
    font-size:0.9rem; flex:none; font-family:'Space Mono',monospace;
  }
  .welcome-step-body h3{ font-size:1rem; margin:0 0 4px; }
  .welcome-step-body p{ font-size:0.86rem; color:var(--ink-soft); margin:0; line-height:1.55; }

  /* ====== FAQ ====== */
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-question{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:18px 0; display:flex; justify-content:space-between; align-items:center;
    gap:12px; font-family:'Karla',sans-serif; font-size:1rem; font-weight:700;
    color:var(--ink); line-height:1.3;
  }
  .faq-question svg{ flex:none; transition:transform 0.2s; }
  .faq-question[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .faq-answer{
    font-size:0.9rem; color:var(--ink-soft); line-height:1.7;
    padding:0 0 18px; display:none; max-width:64ch;
  }
  .faq-answer.open{ display:block; }
  .faq-answer a{ color:var(--clay); text-decoration:underline; }

  /* Buddy System */
  .buddy-card{
    border:1px solid var(--line); border-radius:8px; padding:18px; background:var(--paper);
    display:flex; flex-direction:column; gap:12px;
  }
  .buddy-card-top{ display:flex; gap:12px; align-items:flex-start; }
  .buddy-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--line); }
  .buddy-info h3{ font-size:0.96rem; margin:0 0 3px; }
  .buddy-info .buddy-exp{ font-size:0.76rem; color:var(--ink-soft); }
  .buddy-bio{ font-size:0.84rem; color:var(--ink-soft); line-height:1.55; margin:0; }
  .buddy-tags{ display:flex; flex-wrap:wrap; gap:6px; }

  /* Setup Showcase */
  .setup-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
  .setup-card{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper); cursor:pointer; transition:border-color 0.12s, box-shadow 0.12s; }
  .setup-card:hover{ border-color:var(--clay); box-shadow:0 2px 14px rgba(196,80,46,0.1); }
  .setup-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
  .setup-card-body{ padding:14px 16px; }
  .setup-card-body h3{ font-size:0.96rem; margin:0 0 5px; }
  .setup-card-body p{ font-size:0.82rem; color:var(--ink-soft); margin:0 0 10px; line-height:1.5; }
  .setup-tools{ display:flex; flex-wrap:wrap; gap:5px; }
  .setup-tool-tag{ font-size:0.7rem; background:var(--paper-warm); border:1px solid var(--line); border-radius:3px; padding:2px 7px; color:var(--ink-soft); font-family:'Space Mono',monospace; }

  /* Challenge */
  .challenge-header{
    background:linear-gradient(135deg, rgba(196,80,46,0.08) 0%, rgba(122,111,166,0.08) 100%);
    border:1px solid var(--line); border-radius:8px; padding:24px 26px; margin-bottom:22px;
  }
  .challenge-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
  .challenge-entry{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper); }
  .challenge-entry img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
  .challenge-entry-body{ padding:12px 14px; }
  .challenge-entry-body h4{ font-size:0.9rem; margin:0 0 3px; }
  .challenge-entry-body p{ font-size:0.78rem; color:var(--ink-soft); margin:0 0 10px; }
  .btn-challenge-vote{
    display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:4px;
    border:1.5px solid var(--line-strong); background:none; cursor:pointer;
    font-size:0.78rem; font-weight:700; font-family:'Karla',sans-serif; color:var(--ink-soft);
  }
  .btn-challenge-vote.voted{ background:var(--clay); color:var(--paper); border-color:var(--clay); }

  /* Video Library */
  .video-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
  .video-card{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper); cursor:pointer; transition:border-color 0.12s; }
  .video-card:hover{ border-color:var(--clay); }
  .video-thumb{ position:relative; }
  .video-thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
  .video-play-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(28,26,23,0.35);
  }
  .video-play-btn{
    width:44px; height:44px; border-radius:50%; background:rgba(251,246,238,0.9);
    display:flex; align-items:center; justify-content:center;
  }
  .video-play-btn svg{ width:18px; height:18px; margin-left:3px; }
  .video-duration{
    position:absolute; bottom:8px; right:8px; background:rgba(28,26,23,0.8);
    color:var(--paper); font-family:'Space Mono',monospace; font-size:0.7rem;
    padding:2px 6px; border-radius:3px;
  }
  .video-card-body{ padding:12px 14px; }
  .video-card-body h3{ font-size:0.9rem; margin:0 0 4px; line-height:1.3; }
  .video-card-body p{ font-size:0.78rem; color:var(--ink-soft); margin:0 0 8px; }
  .video-meta{ font-size:0.72rem; color:var(--ink-soft); display:flex; gap:8px; }

  /* Progress Journal */
  .journal-calendar{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:20px; }
  .journal-day{
    aspect-ratio:1; border-radius:4px; display:flex; align-items:center; justify-content:center;
    font-size:0.75rem; font-family:'Space Mono',monospace; cursor:pointer;
    border:1px solid var(--line); background:var(--paper-warm); color:var(--ink-soft);
    transition:all 0.1s;
  }
  .journal-day:hover{ border-color:var(--clay); color:var(--ink); }
  .journal-day.has-entry{ background:var(--pine); color:var(--paper); border-color:var(--pine); }
  .journal-day.today{ border-color:var(--clay); font-weight:700; color:var(--clay); }
  .journal-day.selected{ background:var(--clay); color:var(--paper); border-color:var(--clay); }
  .mood-selector{ display:flex; gap:10px; flex-wrap:wrap; }
  .mood-btn{
    width:44px; height:44px; border-radius:50%; border:2px solid var(--line); background:none;
    font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:border-color 0.1s, transform 0.1s;
  }
  .mood-btn:hover{ transform:scale(1.15); }
  .mood-btn.selected{ border-color:var(--clay); background:rgba(196,80,46,0.1); }

  /* Awards */
  .awards-category-section{ margin-bottom:28px; }
  .awards-category-section h3{ font-size:1.1rem; margin:0 0 14px; border-bottom:1px solid var(--line); padding-bottom:8px; }
  .award-nominee{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
  .award-nominee:last-child{ border-bottom:none; }
  .award-nominee-info{ flex:1; }
  .award-nominee-info strong{ font-size:0.92rem; display:block; }
  .award-nominee-info span{ font-size:0.8rem; color:var(--ink-soft); }
  .btn-award-vote{
    display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:30px;
    border:1.5px solid var(--line-strong); background:none; cursor:pointer;
    font-size:0.8rem; font-weight:700; font-family:'Karla',sans-serif; color:var(--ink-soft);
    white-space:nowrap;
  }
  .btn-award-vote.voted{ background:var(--ochre); color:var(--ink); border-color:var(--ochre); }
  .award-votes{ font-family:'Space Mono',monospace; font-size:0.78rem; color:var(--ink-soft); }
  .award-winner-badge{
    background:var(--ochre); color:var(--ink); font-size:0.7rem; font-weight:700;
    padding:2px 8px; border-radius:3px; font-family:'Space Mono',monospace;
  }

  /* Material Finder */
  .material-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
  .material-card{ border:1px solid var(--line); border-radius:8px; padding:16px 18px; background:var(--paper); }
  .material-card h3{ font-size:0.96rem; margin:0 0 5px; }
  .material-card p{ font-size:0.84rem; color:var(--ink-soft); margin:0 0 10px; line-height:1.55; }
  .material-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:0.78rem; }
  .material-price{ font-weight:700; color:var(--pine); }
  .material-supplier{ color:var(--ink-soft); }
  .material-rating{ color:var(--ochre); }
  .material-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
  .material-tag{ font-size:0.68rem; background:var(--paper-warm); border:1px solid var(--line); border-radius:3px; padding:2px 7px; color:var(--ink-soft); }

  /* AI Description */
  .ai-desc-result{
    background:var(--paper-warm); border:1px solid var(--line); border-radius:6px;
    padding:16px 18px; font-size:0.92rem; line-height:1.65; color:var(--ink);
    white-space:pre-wrap;
  }
  .btn-friend{
    display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
    border-radius:30px; border:1.5px solid var(--line-strong);
    background:var(--paper); cursor:pointer; font-size:0.8rem; font-weight:700;
    font-family:'Karla',sans-serif; color:var(--ink-soft); transition:all 0.12s;
  }
  .btn-friend:hover{ border-color:var(--pine); color:var(--pine); }
  .btn-friend.btn-friend-pending{
    border-color:var(--ochre); color:var(--ochre); background:rgba(232,163,61,0.07);
    cursor:default;
  }
  .btn-friend.btn-friend-active{
    background:var(--pine); color:var(--paper); border-color:var(--pine);
  }
  .btn-friend.btn-friend-active:hover{ background:#255c4d; border-color:#255c4d; }
  .btn-friend svg{ width:13px; height:13px; }

  /* Friend request notification badge */
  .friend-req-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%;
    background:var(--clay); color:var(--paper);
    font-size:0.62rem; font-weight:700; margin-left:4px;
  }

  /* Friend requests panel */
  .friend-requests-panel{
    border:1px solid var(--ochre); background:rgba(232,163,61,0.05);
    border-radius:8px; padding:16px 18px; margin-bottom:20px;
  }
  .friend-requests-panel h4{ font-size:0.92rem; margin:0 0 12px; }
  .friend-request-item{
    display:flex; align-items:center; gap:10px; padding:8px 0;
    border-bottom:1px solid var(--line);
  }
  .friend-request-item:last-child{ border-bottom:none; }
  .friend-request-item img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; }
  .friend-request-item .req-name{ font-size:0.88rem; font-weight:700; flex:1; }
  .friend-request-item .req-cat{ font-size:0.76rem; color:var(--ink-soft); display:block; }
  .btn-accept{ background:var(--pine); color:var(--paper); border:none; padding:5px 12px; border-radius:4px; cursor:pointer; font-weight:700; font-size:0.78rem; font-family:'Karla',sans-serif; }
  .btn-decline{ background:none; border:1px solid var(--line-strong); color:var(--ink-soft); padding:5px 12px; border-radius:4px; cursor:pointer; font-size:0.78rem; font-family:'Karla',sans-serif; margin-left:6px; }

  /* ====== GROUPS ====== */
  .groups-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; margin-top:4px;
  }
  .group-card{
    border:1px solid var(--line); border-radius:8px; padding:18px 18px 16px;
    background:var(--paper); display:flex; flex-direction:column; gap:10px;
    transition:border-color 0.12s, box-shadow 0.12s;
  }
  .group-card:hover{ border-color:var(--clay); box-shadow:0 2px 12px rgba(196,80,46,0.08); }
  .group-card-top{ display:flex; align-items:flex-start; gap:12px; }
  .group-icon{
    width:44px; height:44px; border-radius:8px; background:var(--paper-warm);
    display:flex; align-items:center; justify-content:center; font-size:1.4rem;
    flex:none; border:1px solid var(--line);
  }
  .group-card h3{ font-size:1rem; margin:0 0 2px; line-height:1.2; }
  .group-card .group-meta{ font-size:0.78rem; color:var(--ink-soft); display:flex; gap:8px; flex-wrap:wrap; }
  .group-card p{ font-size:0.84rem; color:var(--ink-soft); margin:0; line-height:1.55; }
  .group-card-actions{ display:flex; gap:8px; margin-top:2px; }

  /* Create group form */
  .create-group-panel{
    border:1px solid var(--line); border-radius:8px; padding:24px;
    background:var(--paper-warm); margin-bottom:24px;
  }
  .create-group-panel h3{ font-size:1.05rem; margin:0 0 18px; }

  /* Group detail */
  .group-detail-header{
    display:flex; align-items:flex-start; gap:16px; margin-bottom:20px; flex-wrap:wrap;
  }
  .group-detail-icon{
    width:64px; height:64px; border-radius:12px; background:var(--paper-warm);
    display:flex; align-items:center; justify-content:center; font-size:2rem;
    flex:none; border:1px solid var(--line);
  }
  .group-members-strip{
    display:flex; gap:-6px; margin-top:8px;
  }
  .group-member-avatar{
    width:28px; height:28px; border-radius:50%; object-fit:cover;
    border:2px solid var(--paper); margin-left:-6px;
  }
  .group-member-avatar:first-child{ margin-left:0; }
  .group-posts{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
  .group-post{
    border:1px solid var(--line); border-radius:6px; padding:14px 16px;
    background:var(--paper);
  }
  .group-post-who{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:4px; }
  .group-post-who strong{ color:var(--ink); }
  .group-post p{ margin:0; font-size:0.9rem; line-height:1.55; }
  .group-post-actions{ display:flex; gap:12px; margin-top:10px; }
  .group-post-action-btn{
    background:none; border:none; cursor:pointer; font-size:0.78rem;
    color:var(--ink-soft); font-family:'Karla',sans-serif; padding:0;
  }
  .group-post-action-btn:hover{ color:var(--clay); }

  /* Empty groups state */
  .groups-empty{
    text-align:center; padding:48px 24px; color:var(--ink-soft);
  }
  .groups-empty svg{ width:48px; height:48px; opacity:0.25; margin-bottom:16px; }
  .groups-empty h3{ font-size:1.1rem; color:var(--ink); margin:0 0 6px; }
  .groups-empty p{ font-size:0.9rem; margin:0 0 18px; }

  /* Profile edit panel */
  .profile-edit-panel{
    border:1px solid var(--line); border-radius:8px; padding:26px 24px;
    background:var(--paper-warm); margin-bottom:28px;
  }
  .profile-edit-panel h3{ font-size:1.05rem; margin:0 0 20px; }

  /* Multi-select chip group */
  .chip-group{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip-select{
    padding:6px 13px; border-radius:30px; border:1.5px solid var(--line-strong);
    background:var(--paper); cursor:pointer; font-size:0.82rem; font-weight:600;
    font-family:'Karla',sans-serif; color:var(--ink-soft);
    transition:border-color 0.1s, background 0.1s, color 0.1s;
    user-select:none;
  }
  .chip-select:hover{ border-color:var(--ink); color:var(--ink); }
  .chip-select.selected{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .chip-select.selected-cat{ background:rgba(196,80,46,0.12); color:var(--clay); border-color:rgba(196,80,46,0.5); }
  .chip-select.selected-tech{ background:rgba(47,111,94,0.12); color:var(--pine); border-color:rgba(47,111,94,0.5); }

  /* Bio textarea */
  .bio-textarea{
    width:100%; border:1px solid var(--line-strong); border-radius:4px;
    padding:10px 12px; font-family:'Karla',sans-serif; font-size:0.92rem;
    resize:vertical; min-height:90px; background:var(--paper); line-height:1.5;
  }
  .bio-textarea:focus{ border-color:var(--clay); outline:none; }
  .bio-counter{ font-size:0.75rem; color:var(--ink-soft); text-align:right; margin-top:3px; }
  .bio-counter.over{ color:#c0392b; }

  /* Profile tags on public profile / member cards */
  .profile-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
  .tag-cat{ font-size:0.72rem; font-weight:700; font-family:'Space Mono',monospace;
    letter-spacing:0.04em; text-transform:uppercase; padding:3px 9px; border-radius:3px;
    background:rgba(196,80,46,0.1); color:var(--clay); border:1px solid rgba(196,80,46,0.3); }
  .tag-tech{ font-size:0.72rem; font-weight:700; font-family:'Space Mono',monospace;
    letter-spacing:0.04em; text-transform:uppercase; padding:3px 9px; border-radius:3px;
    background:rgba(47,111,94,0.1); color:var(--pine); border:1px solid rgba(47,111,94,0.3); }

  /* Profile photo upload */
  .photo-upload-zone{
    width:90px; height:90px; border-radius:50%; border:2px dashed var(--line-strong);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:var(--paper-warm); overflow:hidden; position:relative; flex:none;
    transition:border-color 0.15s;
  }
  .photo-upload-zone:hover{ border-color:var(--clay); }
  .photo-upload-zone img{ width:100%; height:100%; object-fit:cover; display:block; }
  .photo-upload-zone .photo-placeholder{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    color:var(--ink-soft); font-size:0.68rem; text-align:center; padding:8px; line-height:1.3;
  }
  .photo-upload-zone .photo-placeholder svg{ width:22px; height:22px; opacity:0.45; margin-bottom:2px; }

  /* Profile header row (avatar + name + meta) */
  .profile-header-row{
    display:flex; align-items:flex-start; gap:20px; margin-bottom:20px; flex-wrap:wrap;
  }
  .profile-header-avatar{
    width:72px; height:72px; border-radius:50%; object-fit:cover;
    border:2px solid var(--line); flex:none;
  }
  .profile-header-avatar-placeholder{
    width:72px; height:72px; border-radius:50%; background:var(--paper-warm);
    border:2px solid var(--line); display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-size:1.6rem; color:var(--ink-soft); flex:none;
  }
  .profile-meta-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .meta-pill{
    display:inline-flex; align-items:center; gap:5px; font-size:0.78rem;
    color:var(--ink-soft); background:var(--paper-warm); border:1px solid var(--line);
    padding:3px 10px; border-radius:20px;
  }
  .meta-pill svg{ width:12px; height:12px; opacity:0.55; }
  .members-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .member-card{
    border:1px solid var(--line); border-radius:6px; background:var(--paper);
    padding:20px; display:flex; flex-direction:column; gap:12px;
    transition:box-shadow 0.15s, transform 0.15s;
  }
  .member-card:hover{ box-shadow:0 10px 28px -14px rgba(28,26,23,0.28); transform:translateY(-2px); }
  .member-card-top{ display:flex; gap:14px; align-items:flex-start; }
  .member-avatar{
    width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none;
    border:2px solid var(--line);
  }
  .member-info h3{ font-size:0.98rem; margin:0 0 3px; }
  .member-info .member-cat{ font-size:0.78rem; color:var(--clay); font-weight:700; margin:0 0 2px; }
  .member-info .member-counts{ font-size:0.76rem; color:var(--ink-soft); margin:0; font-family:'Space Mono',monospace; }
  .member-bio{ font-size:0.84rem; color:var(--ink-soft); margin:0; line-height:1.5; flex:1; }
  .member-foot{ display:flex; gap:8px; align-items:center; padding-top:10px; border-top:1px solid var(--line); }

  .btn-follow{
    font-family:'Karla',sans-serif; font-weight:700; font-size:0.8rem;
    padding:7px 14px; border-radius:30px; cursor:pointer; border:1.5px solid;
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .btn-follow-idle{ background:var(--paper); border-color:var(--ink); color:var(--ink); }
  .btn-follow-idle:hover{ background:var(--ink); color:var(--paper); }
  .btn-follow-active{ background:var(--pine); border-color:var(--pine); color:var(--paper); }
  .btn-follow-active:hover{ background:#c0392b; border-color:#c0392b; color:var(--paper); }
  .btn-view-profile{
    font-family:'Karla',sans-serif; font-weight:600; font-size:0.8rem;
    padding:7px 12px; border-radius:30px; cursor:pointer;
    border:1.5px solid var(--line-strong); background:none; color:var(--ink-soft);
  }
  .btn-view-profile:hover{ border-color:var(--ink); color:var(--ink); }

  .social-counts-row{
    display:flex; gap:20px; margin-bottom:6px;
  }
  .social-count-item{ text-align:center; }
  .social-count-item .num{ font-family:'Fraunces',serif; font-size:1.4rem; font-weight:600; color:var(--pine); line-height:1; display:block; }
  .social-count-item .cap{ font-size:0.78rem; color:var(--ink-soft); }

  .following-list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
  .following-item{
    display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line);
    border-radius:6px; background:var(--paper); cursor:pointer;
  }
  .following-item:hover{ background:var(--paper-warm); }
  .following-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; }
  .following-item h4{ font-size:0.9rem; margin:0 0 1px; }
  .following-item p{ font-size:0.76rem; color:var(--ink-soft); margin:0; }

  .public-profile-hero{
    display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;
    padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:28px;
  }
  .public-profile-avatar{
    width:82px; height:82px; border-radius:50%; object-fit:cover; border:3px solid var(--line);
  }
  .public-profile-info h2{ font-size:1.5rem; margin:0 0 4px; }
  .public-profile-info .cat{ font-size:0.85rem; color:var(--clay); font-weight:700; margin:0 0 6px; }
  .public-profile-info .bio{ font-size:0.9rem; color:var(--ink-soft); margin:0; max-width:52ch; }

  .notif-badge{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--clay); color:var(--paper);
    font-family:'Space Mono',monospace; font-size:0.62rem; font-weight:700;
    width:17px; height:17px; border-radius:50%; margin-left:4px; vertical-align:middle;
  }

  @media (max-width:860px){ .members-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .members-grid{ grid-template-columns:1fr; } }

  /* ====== MESSAGING ====== */
  .inbox-layout{
    display:grid; grid-template-columns:280px 1fr; gap:0;
    border:1px solid var(--line); border-radius:8px; overflow:hidden;
    min-height:520px; background:var(--paper);
  }
  .inbox-sidebar{
    border-right:1px solid var(--line); display:flex; flex-direction:column;
  }
  .inbox-sidebar-head{
    padding:16px 18px; border-bottom:1px solid var(--line); display:flex;
    align-items:center; justify-content:space-between;
  }
  .inbox-sidebar-head h3{ font-size:0.95rem; margin:0; }
  .conv-list{ overflow-y:auto; flex:1; }
  .conv-item{
    display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line);
    cursor:pointer; align-items:flex-start; transition:background 0.1s;
  }
  .conv-item:hover{ background:var(--paper-warm); }
  .conv-item.active{ background:rgba(196,80,46,0.07); border-left:3px solid var(--clay); }
  .conv-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; }
  .conv-avatar-placeholder{
    width:38px; height:38px; border-radius:50%; background:var(--paper-warm);
    border:1px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-size:1rem; color:var(--ink-soft);
  }
  .conv-meta{ flex:1; min-width:0; }
  .conv-meta h4{ font-size:0.88rem; margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .conv-preview{ font-size:0.78rem; color:var(--ink-soft); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .conv-unread-dot{
    width:8px; height:8px; border-radius:50%; background:var(--clay); flex:none; margin-top:5px;
  }
  .inbox-empty{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    height:100%; padding:40px; text-align:center; color:var(--ink-soft);
  }
  .inbox-empty svg{ width:48px; height:48px; opacity:0.25; margin-bottom:14px; }

  .message-thread{ display:flex; flex-direction:column; height:100%; }
  .message-thread-head{
    padding:14px 20px; border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:12px;
  }
  .thread-head-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
  .thread-head-info h4{ font-size:0.92rem; margin:0 0 1px; }
  .thread-head-info p{ font-size:0.75rem; color:var(--ink-soft); margin:0; }
  .message-list{
    flex:1; overflow-y:auto; padding:20px 20px 10px; display:flex;
    flex-direction:column; gap:12px;
  }
  .message-bubble{
    max-width:72%; display:flex; flex-direction:column; gap:3px;
  }
  .message-bubble.mine{ align-self:flex-end; align-items:flex-end; }
  .message-bubble.theirs{ align-self:flex-start; align-items:flex-start; }
  .bubble-text{
    padding:10px 14px; border-radius:14px; font-size:0.9rem; line-height:1.5; word-break:break-word;
  }
  .message-bubble.mine .bubble-text{
    background:var(--clay); color:var(--paper); border-bottom-right-radius:4px;
  }
  .message-bubble.theirs .bubble-text{
    background:var(--paper-warm); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:4px;
  }
  .bubble-time{ font-size:0.68rem; color:var(--ink-soft); font-family:'Space Mono',monospace; padding:0 4px; }
  .message-input-row{
    padding:12px 16px; border-top:1px solid var(--line);
    display:flex; gap:10px; align-items:flex-end; background:var(--paper);
  }
  .message-input{
    flex:1; border:1px solid var(--line-strong); border-radius:20px; padding:10px 16px;
    font-family:'Karla',sans-serif; font-size:0.92rem; resize:none; max-height:120px;
    min-height:42px; line-height:1.4; background:var(--paper);
  }
  .message-input:focus{ border-color:var(--clay); outline:none; }
  .btn-send{
    width:40px; height:40px; border-radius:50%; background:var(--clay); border:none;
    cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none;
  }
  .btn-send:hover{ background:#a8431f; }
  .btn-send svg{ width:18px; height:18px; color:var(--paper); }
  .btn-send:disabled{ opacity:0.4; cursor:not-allowed; }

  .msg-badge{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--clay); color:var(--paper);
    font-family:'Space Mono',monospace; font-size:0.6rem; font-weight:700;
    min-width:17px; height:17px; border-radius:9px; padding:0 4px;
    margin-left:5px; vertical-align:middle;
  }

  @media (max-width:680px){
    .inbox-layout{ grid-template-columns:1fr; min-height:auto; }
    .inbox-sidebar{ border-right:none; border-bottom:1px solid var(--line); max-height:240px; }
  }

  /* ====== NEWS & EVENTS ====== */
  .news-hero-card{
    border:1px solid var(--line); border-radius:8px; overflow:hidden; display:grid;
    grid-template-columns:1fr 1fr; background:var(--paper); margin-bottom:34px;
  }
  .news-hero-img{ background:var(--paper-warm); overflow:hidden; }
  .news-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; min-height:260px; }
  .news-hero-body{ padding:30px 32px; display:flex; flex-direction:column; justify-content:center; gap:10px; }
  .news-hero-body h3{ font-size:1.4rem; }
  .news-hero-body p{ color:var(--ink-soft); font-size:0.94rem; margin:0; }

  .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .news-card{
    border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper);
    display:flex; flex-direction:column;
  }
  .news-card-img{ aspect-ratio:16/10; background:var(--paper-warm); overflow:hidden; }
  .news-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .news-card-body{ padding:16px 17px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .news-card h3{ font-size:1rem; margin:0; }
  .news-card p.excerpt{ font-size:0.86rem; color:var(--ink-soft); margin:0; flex:1; }
  .news-meta{ font-size:0.78rem; color:var(--ink-soft); display:flex; gap:10px; align-items:center; padding-top:9px; border-top:1px solid var(--line); margin-top:2px; }

  .source-badge{
    display:inline-flex; align-items:center; gap:5px; font-family:'Space Mono',monospace; font-size:0.66rem;
    letter-spacing:0.04em; text-transform:uppercase; padding:4px 8px; border-radius:3px; align-self:flex-start;
  }
  .source-pbv{ background:rgba(196,80,46,0.12); color:var(--clay); border:1px solid rgba(196,80,46,0.35); }
  .source-institution{ background:rgba(47,111,94,0.12); color:var(--pine); border:1px solid rgba(47,111,94,0.35); }
  .source-company{ background:rgba(122,111,166,0.12); color:var(--violet); border:1px solid rgba(122,111,166,0.35); }

  .event-card{
    border:1px solid var(--line); border-radius:6px; background:var(--paper);
    display:grid; grid-template-columns:96px 1fr auto; gap:18px; align-items:start;
    padding:16px 18px; margin-bottom:14px;
  }
  .event-date-block{
    text-align:center; background:var(--paper-warm); border:1px solid var(--line); border-radius:6px; padding:10px 6px;
  }
  .event-date-block .mon{ font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--clay); font-weight:700; }
  .event-date-block .day{ font-family:'Fraunces',serif; font-size:1.5rem; font-weight:600; line-height:1.1; }
  .event-body h3{ font-size:1.02rem; margin:0 0 5px; }
  .event-body p{ font-size:0.86rem; color:var(--ink-soft); margin:0 0 8px; }
  .event-tags{ display:flex; gap:8px; flex-wrap:wrap; }
  .event-format{ font-size:0.78rem; color:var(--ink-soft); white-space:nowrap; text-align:right; }
  .event-format strong{ display:block; color:var(--ink); font-size:0.85rem; }

  /* Event registration */
  .event-register-col{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:120px; }
  .btn-register{
    display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
    background:var(--clay); color:var(--paper); border:none; border-radius:4px;
    cursor:pointer; font-family:'Karla',sans-serif; font-weight:700; font-size:0.82rem;
    white-space:nowrap; transition:background 0.12s;
  }
  .btn-register:hover{ background:#a84428; }
  .btn-register.registered{
    background:var(--pine); cursor:default;
  }
  .btn-register.registered:hover{ background:var(--pine); }
  .event-registrant-count{
    font-size:0.74rem; color:var(--ink-soft); font-family:'Space Mono',monospace;
  }

  /* Submit event form */
  .submit-event-panel{
    border:1px solid var(--line); border-radius:8px; padding:26px 24px;
    background:var(--paper-warm); margin-bottom:28px;
  }
  .submit-event-panel h3{ font-size:1.1rem; margin:0 0 6px; }
  .submit-event-panel .form-hint{ font-size:0.84rem; color:var(--ink-soft); margin:0 0 20px; }

  /* Pending event badge */
  .pending-event-card{
    border:1px dashed var(--ochre); background:rgba(232,163,61,0.05);
    border-radius:6px; padding:14px 18px; margin-bottom:12px;
    display:flex; align-items:center; gap:14px;
  }
  .pending-badge{
    font-family:'Space Mono',monospace; font-size:0.64rem; letter-spacing:0.08em;
    text-transform:uppercase; padding:3px 8px; border-radius:3px;
    background:var(--ochre); color:var(--ink); font-weight:700; flex:none;
  }

  .news-filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }

  .upload-zone{
    border:2px dashed var(--line-strong); border-radius:8px; padding:36px 20px; text-align:center; color:var(--ink-soft);
    cursor:pointer; background:var(--paper-warm);
  }
  .upload-zone:hover{ border-color:var(--clay); }
  .upload-zone.drag-over{ border-color:var(--clay); background:rgba(196,80,46,0.05); }
  .preview-thumb{ width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:6px; }

  /* ====== ATTACHMENTS ====== */
  .attachment-zone{
    border:2px dashed var(--line-strong); border-radius:8px; padding:22px 20px;
    background:var(--paper-warm); transition:border-color 0.15s, background 0.15s;
    cursor:pointer; text-align:center;
  }
  .attachment-zone:hover, .attachment-zone.drag-over{
    border-color:var(--clay); background:rgba(196,80,46,0.04);
  }
  .attachment-zone-inner{ pointer-events:none; }
  .attachment-zone svg{ width:28px; height:28px; opacity:0.4; margin-bottom:8px; }
  .attachment-zone p{ margin:0; font-size:0.86rem; color:var(--ink-soft); }
  .attachment-zone .att-types{
    font-size:0.74rem; color:var(--ink-soft); opacity:0.7; margin-top:4px;
    font-family:'Space Mono',monospace; letter-spacing:0.03em;
  }

  /* Link input row */
  .attachment-link-row{
    display:flex; gap:8px; margin-top:10px;
  }
  .attachment-link-row input{
    flex:1; border:1px solid var(--line-strong); border-radius:4px; padding:9px 12px;
    font-family:'Karla',sans-serif; font-size:0.88rem; background:var(--paper);
  }
  .attachment-link-row input:focus{ border-color:var(--clay); outline:none; }
  .btn-add-link{
    background:var(--ink); color:var(--paper); border:none; padding:9px 16px;
    border-radius:4px; cursor:pointer; font-weight:700; font-size:0.82rem;
    font-family:'Karla',sans-serif; white-space:nowrap;
  }
  .btn-add-link:hover{ background:#333; }

  /* Attachment chips */
  .attachment-chips{
    display:flex; flex-direction:column; gap:8px; margin-top:12px;
  }
  .attachment-chip{
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border:1px solid var(--line); border-radius:6px; background:var(--paper);
  }
  .att-icon{
    width:34px; height:34px; border-radius:4px; display:flex; align-items:center;
    justify-content:center; flex:none; font-size:1rem;
  }
  .att-icon.img-type{ background:rgba(196,80,46,0.1); }
  .att-icon.vid-type{ background:rgba(122,111,166,0.12); }
  .att-icon.pdf-type{ background:rgba(232,163,61,0.12); }
  .att-icon.link-type{ background:rgba(47,111,94,0.1); }
  .att-info{ flex:1; min-width:0; }
  .att-info .att-name{
    font-size:0.86rem; font-weight:600; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; display:block;
  }
  .att-info .att-meta{ font-size:0.74rem; color:var(--ink-soft); }
  .btn-remove-att{
    background:none; border:none; cursor:pointer; color:var(--ink-soft);
    padding:4px; border-radius:3px; font-size:1rem; line-height:1; flex:none;
  }
  .btn-remove-att:hover{ color:#c0392b; background:rgba(192,57,43,0.08); }

  /* Attachment display in modals */
  .attachments-section{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
  .attachments-section h4{ font-size:0.9rem; font-weight:700; margin:0 0 12px; }
  .modal-attachment-item{
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border:1px solid var(--line); border-radius:6px; background:var(--paper-warm); margin-bottom:8px;
    text-decoration:none; color:var(--ink);
  }
  .modal-attachment-item:hover{ border-color:var(--clay); }
  .modal-att-label{ font-size:0.86rem; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .modal-att-meta{ font-size:0.74rem; color:var(--ink-soft); flex:none; }

  /* ====== LANGUAGE SWITCHER ====== */
  .lang-switcher{ position:relative; }
  .lang-btn{
    display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
    border:1.5px solid var(--line-strong); border-radius:4px; background:var(--paper);
    cursor:pointer; font-family:'Karla',sans-serif; font-size:0.82rem; font-weight:600;
    color:var(--ink-soft); transition:border-color 0.12s, color 0.12s;
  }
  .lang-btn:hover{ border-color:var(--ink); color:var(--ink); }
  .lang-btn svg{ width:12px; height:12px; transition:transform 0.15s; }
  .lang-btn.open svg{ transform:rotate(180deg); }
  .lang-dropdown{
    position:absolute; top:calc(100% + 6px); right:0; min-width:160px;
    background:var(--paper); border:1px solid var(--line); border-radius:6px;
    box-shadow:0 8px 24px rgba(28,26,23,0.18); z-index:500; overflow:hidden;
    display:none;
  }
  .lang-dropdown.open{ display:block; }
  .lang-option{
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    cursor:pointer; font-size:0.86rem; font-weight:600; color:var(--ink-soft);
    transition:background 0.1s;
  }
  .lang-option:hover{ background:var(--paper-warm); color:var(--ink); }
  .lang-option.active{ color:var(--clay); background:rgba(196,80,46,0.05); }
  .lang-flag{ font-size:1.1rem; line-height:1; }

  .btn-donate{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--clay); color:var(--paper); border:none;
    padding:8px 14px; border-radius:5px; cursor:pointer;
    font-family:'Karla',sans-serif; font-weight:700; font-size:0.82rem;
    white-space:nowrap; transition:background 0.12s, transform 0.1s;
    text-decoration:none;
  }
  .btn-donate:hover{ background:#b3431f; transform:translateY(-1px); }
  .btn-donate:focus-visible{ outline:3px solid var(--clay); outline-offset:3px; }
  .btn-donate-lg{
    padding:13px 26px; font-size:1rem;
    box-shadow:0 4px 18px rgba(232,163,61,0.35);
  }
  .btn-donate-lg:hover{ box-shadow:0 6px 22px rgba(232,163,61,0.45); }
  .gate-card{
    border:1px solid var(--line); border-radius:8px; padding:40px 30px; text-align:center; background:var(--paper-warm);
  }
  .gate-card h2{ font-size:1.4rem; }
  .gate-card p{ color:var(--ink-soft); max-width:42ch; margin:0 auto 20px; }

  /* ====== NEWSLETTER ====== */
  .newsletter-band{
    background: var(--ink); color: var(--paper);
    padding: 44px 24px; text-align: center;
  }
  .newsletter-band h2{
    font-family: 'Fraunces', serif; font-size: clamp(1.4rem, 2.5vw, 2rem);
    margin: 0 0 8px; color: var(--paper);
  }
  .newsletter-band p{ color: rgba(251,246,238,0.7); font-size: 0.96rem; margin: 0 0 22px; max-width: 48ch; margin-left:auto; margin-right:auto; }
  .newsletter-form{ display: flex; gap: 8px; max-width: 480px; margin: 0 auto; flex-wrap:wrap; justify-content:center; }
  .newsletter-input{
    flex: 1; min-width: 220px; padding: 12px 16px; border-radius: 4px; border: none;
    font-family: 'Karla', sans-serif; font-size: 0.95rem; background: rgba(255,255,255,0.1);
    color: var(--paper); outline: none;
  }
  .newsletter-input::placeholder{ color: rgba(251,246,238,0.4); }
  .newsletter-input:focus{ background: rgba(255,255,255,0.16); box-shadow: 0 0 0 2px var(--ochre); }
  .btn-newsletter{
    background: var(--ochre); color: var(--ink); border: none; padding: 12px 22px;
    border-radius: 4px; font-family: 'Karla', sans-serif; font-weight: 700;
    font-size: 0.92rem; cursor: pointer; white-space: nowrap;
  }
  .btn-newsletter:hover{ background: #d49028; }
  .newsletter-success{
    display: flex; align-items: center; gap: 10px; justify-content: center;
    color: var(--ochre); font-weight: 700; font-size: 1rem;
  }
  .newsletter-privacy{ font-size: 0.74rem; color: rgba(251,246,238,0.4); margin-top: 10px; }

  /* ====== SHARE BUTTONS ====== */
  .share-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
  .share-label{ font-family: 'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .btn-share{
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 4px;
    border: 1.5px solid var(--line-strong); background: none; cursor: pointer;
    font-size: 0.78rem; font-weight: 700; font-family: 'Karla', sans-serif; color: var(--ink-soft);
    text-decoration: none; transition: border-color 0.12s, color 0.12s;
  }
  .btn-share:hover{ border-color: var(--ink); color: var(--ink); }
  .btn-share svg{ width: 14px; height: 14px; }

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--paper); padding:13px 22px; border-radius:30px;
    font-size:0.88rem; font-weight:600; z-index:1000; box-shadow:0 10px 30px rgba(0,0,0,0.25);
  }

  .fade-in{ animation:fadeIn 0.35s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

  .crumb{ font-size:0.85rem; color:var(--ink-soft); margin-bottom:18px; }
  .crumb button{ background:none;border:none;color:var(--clay); cursor:pointer; font-weight:700; padding:0; font-size:0.85rem; }

  .visually-hidden{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* ====================================================
     ACCESSIBILITY TOOLBAR
     ==================================================== */

  /* OpenDyslexic font — loaded from CDN */
  @font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/open-dyslexic-regular.woff') format('woff');
    font-weight: normal; font-style: normal;
  }

  /* Accessibility toggle button — always visible */
  .a11y-toggle-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 800;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    border: 2px solid rgba(251,246,238,0.2);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(28,26,23,0.4);
    transition: transform 0.15s, box-shadow 0.15s;
    font-size: 1.4rem; line-height: 1;
  }
  .a11y-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 6px 26px rgba(28,26,23,0.5); }
  .a11y-toggle-btn:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }

  /* Panel */
  .a11y-panel {
    position: fixed; bottom: 86px; right: 24px; z-index: 801;
    width: 320px; max-height: 80vh; overflow-y: auto;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 16px 48px -12px rgba(28,26,23,0.45);
    display: none; flex-direction: column;
  }
  .a11y-panel.open { display: flex; }
  .a11y-panel-head {
    padding: 16px 18px 14px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--paper);
  }
  .a11y-panel-head h2 { font-size: 1rem; margin: 0; }
  .a11y-panel-close {
    background: none; border: none; cursor: pointer; padding: 4px; line-height: 1;
    color: var(--ink-soft); font-size: 1.3rem; border-radius: 4px;
  }
  .a11y-panel-close:hover { color: var(--ink); background: var(--paper-warm); }

  .a11y-section { padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .a11y-section:last-child { border-bottom: none; }
  .a11y-section-label {
    font-family: 'Space Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 10px;
  }

  /* Toggle switch */
  .a11y-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; gap: 12px;
  }
  .a11y-toggle-row label { font-size: 0.88rem; cursor: pointer; flex: 1; }
  .a11y-toggle-row .toggle-desc { font-size: 0.76rem; color: var(--ink-soft); display: block; margin-top: 1px; }
  .a11y-switch {
    position: relative; width: 40px; height: 22px; flex: none;
  }
  .a11y-switch input { opacity: 0; width: 0; height: 0; }
  .a11y-switch-slider {
    position: absolute; inset: 0; background: var(--line-strong); border-radius: 22px;
    transition: 0.2s; cursor: pointer;
  }
  .a11y-switch-slider::before {
    content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
    background: white; left: 3px; bottom: 3px; transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  .a11y-switch input:checked + .a11y-switch-slider { background: var(--pine); }
  .a11y-switch input:checked + .a11y-switch-slider::before { transform: translateX(18px); }
  .a11y-switch input:focus-visible + .a11y-switch-slider { outline: 3px solid var(--clay); outline-offset: 2px; }

  /* Button group — text size, colour mode etc */
  .a11y-btn-group { display: flex; gap: 6px; flex-wrap: wrap; }
  .a11y-opt-btn {
    padding: 7px 12px; border-radius: 4px; border: 1.5px solid var(--line-strong);
    background: var(--paper); cursor: pointer; font-size: 0.82rem; font-weight: 600;
    font-family: 'Karla', sans-serif; color: var(--ink-soft);
  }
  .a11y-opt-btn:hover { border-color: var(--ink); color: var(--ink); }
  .a11y-opt-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  /* Read aloud button (inline in paragraphs — added by JS) */
  .read-aloud-btn {
    display: none; /* shown when read-aloud mode is active */
    background: none; border: none; cursor: pointer; padding: 2px 4px;
    color: var(--pine); font-size: 0.78rem; font-weight: 700; font-family: 'Karla', sans-serif;
    vertical-align: middle; margin-left: 6px; border-radius: 3px;
    text-decoration: underline dotted;
  }
  .read-aloud-btn:hover { color: var(--clay); }

  /* Reading progress indicator */
  .reading-progress {
    position: fixed; top: 0; left: 0; height: 3px;
    background: var(--clay); z-index: 999; transition: width 0.1s;
    width: 0%; pointer-events: none; display: none;
  }

  /* ARIA live region for screen reader announcements */
  .a11y-live { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* ---- Applied accessibility classes ---- */

  /* Text sizes */
  body.a11y-text-lg  { font-size: 18px !important; }
  body.a11y-text-xl  { font-size: 21px !important; }
  body.a11y-text-xxl { font-size: 25px !important; }
  body.a11y-text-lg h1, body.a11y-text-xl h1, body.a11y-text-xxl h1 { font-size: clamp(2.8rem, 5.5vw, 4.6rem) !important; }

  /* Dyslexia font */
  body.a11y-dyslexia,
  body.a11y-dyslexia *:not(.brand-mark):not(svg):not(path):not(circle) {
    font-family: 'OpenDyslexic', sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.12em !important;
  }

  /* High contrast */
  body.a11y-high-contrast {
    --paper: #000000;
    --paper-warm: #0a0a0a;
    --ink: #ffffff;
    --ink-soft: #e0e0e0;
    --line: rgba(255,255,255,0.25);
    --line-strong: rgba(255,255,255,0.45);
    --clay: #ffb347;
    --pine: #7fffb2;
    --ochre: #ffe066;
    --violet: #d5aaff;
    background: #000 !important;
    color: #fff !important;
  }
  body.a11y-high-contrast .site-header,
  body.a11y-high-contrast .a11y-panel,
  body.a11y-high-contrast .art-card,
  body.a11y-high-contrast .member-card,
  body.a11y-high-contrast .news-card,
  body.a11y-high-contrast .guide-card,
  body.a11y-high-contrast .handbook-card,
  body.a11y-high-contrast .gate-card,
  body.a11y-high-contrast .thread,
  body.a11y-high-contrast .submit-contrib-panel {
    background: #111 !important;
    border-color: rgba(255,255,255,0.3) !important;
  }
  body.a11y-high-contrast .btn-primary { background: #ffb347 !important; color: #000 !important; }
  body.a11y-high-contrast a:focus-visible,
  body.a11y-high-contrast button:focus-visible { outline: 3px solid #ffb347 !important; }

  /* Large cursor */
  body.a11y-large-cursor,
  body.a11y-large-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 5 L5 35 L13 28 L18 38 L22 36 L17 26 L26 26 Z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 5 5, pointer !important; }

  /* Line spacing */
  body.a11y-line-spacing * { line-height: 1.9 !important; }

  /* Word spacing */
  body.a11y-word-spacing * { word-spacing: 0.18em !important; }

  /* Reduced motion (in addition to OS preference) */
  body.a11y-reduce-motion *,
  body.a11y-reduce-motion *::before,
  body.a11y-reduce-motion *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  /* Colour blind filters */
  body.a11y-cb-deuteranopia { filter: url(#cbDeutan); }
  body.a11y-cb-protanopia   { filter: url(#cbProtan);  }
  body.a11y-cb-monochrome   { filter: grayscale(100%); }

  /* Focus highlight mode */
  body.a11y-focus-highlight *:focus {
    outline: 4px solid var(--clay) !important;
    outline-offset: 3px !important;
    background: rgba(232,163,61,0.08) !important;
  }

  /* Reading guide (horizontal line following cursor) */
  .reading-guide-line {
    display: none;
    position: fixed; left: 0; right: 0; height: 2px;
    background: rgba(196,80,46,0.35); pointer-events: none; z-index: 700;
    transition: top 0.05s linear;
  }
  body.a11y-reading-guide .reading-guide-line { display: block; }

  /* Screen reader focus ring enhancement */
  body.a11y-screen-reader a:focus,
  body.a11y-screen-reader button:focus,
  body.a11y-screen-reader input:focus,
  body.a11y-screen-reader select:focus,
  body.a11y-screen-reader textarea:focus {
    outline: 4px solid var(--clay) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 8px rgba(196,80,46,0.15) !important;
  }

  /* Speaking indicator */
  .speaking-indicator {
    display: none;
    position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--paper);
    padding: 10px 18px; border-radius: 30px; font-size: 0.84rem; font-weight: 600;
    z-index: 900; align-items: center; gap: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  }
  .speaking-indicator.active { display: flex; }
  .speaking-indicator .wave { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
  .speaking-indicator .wave span {
    width: 3px; background: var(--ochre); border-radius: 2px; display: block;
    animation: wave-bar 0.8s ease-in-out infinite;
  }
  .speaking-indicator .wave span:nth-child(2) { animation-delay: 0.15s; }
  .speaking-indicator .wave span:nth-child(3) { animation-delay: 0.3s; }
  .speaking-indicator .wave span:nth-child(4) { animation-delay: 0.45s; }
  @keyframes wave-bar {
    0%, 100% { height: 4px; }
    50% { height: 14px; }
  }
  @keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
  }

  @media (max-width: 560px) {
    .a11y-panel { width: calc(100vw - 32px); right: 16px; bottom: 80px; }
    .a11y-toggle-btn { bottom: 16px; right: 16px; }
  }


  /* ====== RESPONSIVE ====== */
  @media (max-width:980px){
    .hero-inner{ grid-template-columns:1fr; }
    .stat-row{ grid-template-columns:repeat(2,1fr); }
    .why-grid{ grid-template-columns:1fr; }
    .gallery-grid{ grid-template-columns:repeat(2,1fr); }
    .modal-card{ grid-template-columns:1fr; }
    .modal-img img{ min-height:240px; }
    .about-hero{ grid-template-columns:1fr; }
    .value-grid{ grid-template-columns:1fr; }
    .team-grid{ grid-template-columns:repeat(2,1fr); }
    .community-layout{ grid-template-columns:1fr; }
    .community-side{ position:static; flex-direction:row; overflow-x:auto; }
    .footer-wrap{ grid-template-columns:1fr 1fr; }
    .news-hero-card{ grid-template-columns:1fr; }
    .news-hero-img img{ min-height:200px; }
    .news-grid{ grid-template-columns:repeat(2,1fr); }
    .event-card{ grid-template-columns:72px 1fr; }
    .event-format{ grid-column:1 / -1; text-align:left; padding-top:4px; }
  }
  @media (max-width:680px){
    nav.main-nav{ display:none; }
    .nav-divider{ display:none; }
    .btn-contact-nav{ display:none; }
    .hamburger{ display:flex; }
    nav.main-nav.open{
      display:flex; flex-direction:column;
      position:absolute; top:60px; left:0; right:0;
      background:var(--paper); border-bottom:1px solid var(--line);
      padding:10px 18px 16px; gap:2px; z-index:99;
    }
    .gallery-grid{ grid-template-columns:1fr; }
    .footer-wrap{ grid-template-columns:1fr; }
    .team-grid{ grid-template-columns:1fr 1fr; }
    .news-grid{ grid-template-columns:1fr; }
    .event-card{ grid-template-columns:60px 1fr; padding:14px; }
  }