/* TEST SITE */  
  :root{
    --bg: #F8F3F0;
    --surface: #FFFDFC;
    --border: #E7E1DD;
    --text: #2B2B2B;
    --text-2:#4B4B4B;
    --rose: #DBB5B4;
    --sage: #90A49A;
    --shadow: 0 14px 30px rgba(0,0,0,.07);
    --radius: 14px;
    --maxw: 1100px;
    --ink:#222; 
    --ink-soft:#444; 
    --icon-bt-bg:#F8F3F0;
    --artcard:#fff; 
    --boardcard:#fff;
    --img-backing:#fff;
    --artborder:#e8e5e2;
    --tocsage:#64726b;
    --line:#e8e5e2;
    --nav:;
    --outer-radius: 1.5em;
    --padding: 1em;
    --inner-radius: calc(var(--outer-radius) - var(--padding));
  }
  html[data-theme="dark"]{
    --bg: #121212;
    --surface: #1A1A1A;
    --border: #2A2A2A;
    --text: #EDEDED;
    --text-2:#BEBEBE;
    /* keep rose/sage accents */
    --ink:#EDEDED; 
    --ink-soft:#BEBEBE; 
    --icon-bt-bg:#7f7f7f;
    --artcard:#1A1A1A; 
    --boardcard:#F8F3F0;
    --img-backing:#A2A2A2;
    --tocsage:#b1bfb8;
    --shadow: 0 16px 36px rgba(0,0,0,.45);
  }
  html{min-width: 410px;}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);font-family: "Nunito Sans", sans-serif;line-height:1.6}
  a{color:var(--sage);text-decoration:none}
  a:hover{text-decoration:underline}
  img{max-width:100%;display:block}
  .container{width:min(var(--maxw),92%);margin:auto}
  .stack>*+*{margin-top: var(--gap, 1.25rem)}
  .cluster{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
  .brand{font-weight:900;letter-spacing:-.01em}
  h1,h2,h3{margin:0 0 .4rem;font-weight:normal;font-family: "Oswald", sans-serif;}
  h1{font-size: clamp(36px, 6vw, 64px); letter-spacing:-.01em;} /* (2.25em, calc(5vw + 1rem), 4em) */
  h2{font-size: clamp(24px, 4vw, 32px); letter-spacing:-.01em;}
  h3{font-size: clamp(20px, 3vw, 24px); font-weight:700;}
  .text-muted{color:var(--text-2)}
  .tag{font-size: 0.80em;color:var(--text-2);margin: 0;padding: 0.5em;}
  p.desc{min-height: 52px;}
  li>a, p>a {color: #2B4035; font-weight: bold; text-decoration: underline;}

  /* Buttons */
  .btn{font-family: "Nunito Sans", sans-serif;display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.2rem;border-radius:12px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:transform .06s ease, box-shadow .2s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn-primary{background:var(--rose);color:#111;border-color:color-mix(in oklab,var(--rose),#000 12%)}
  .btn-outline{background:transparent;color:var(--rose);border-color:var(--sage)}
  .btn-outline-rose{background:rgba(219, 181, 180, .5);color:var(--text-2);border-color:var(--rose)}
  .btn-outline-rose:hover{background:var(--rose);color:var(--text);text-decoration:none;transform:none;}
  .btn-outline-sage{background:rgba(144, 164, 154, .5);color:var(--text-2);border-color:var(--sage)}
  .btn-outline-sage:hover{background:var(--sage);color:var(--text);text-decoration:none;transform:none;}
  .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--icon-bt-bg);cursor:pointer}
  .icon{width:22px;height:22px;display:inline-block}
  .cart-wrap{position:relative}
  .cart-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--rose);color:#111;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;border:1px solid color-mix(in oklab,var(--rose),#000 12%)}

  /* Nav / Sticky */
  .nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border);backdrop-filter: blur(6px)}
  .nav__bar{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0}
  .nav__links{display:flex;gap:.5rem;align-items:center}
  .nav__links a{color:var(--text);padding:.4rem .6rem;border-radius:10px}
  .nav__links a:hover{background:color-mix(in oklab,var(--sage),transparent 85%)}
  .nav__links a.active{background:rgba(219, 181, 180, .5);color:var(--ink);border-color:var(--rose)}
  .only-mobile{display:none}
  @media (max-width: 840px){
    .only-desktop{display:none!important}
    .only-mobile{display:inline-flex}
  }

  /* Footer */
  .footer{border-top:1px solid var(--border);padding:2rem 0;background:color-mix(in oklab,var(--surface),transparent 20%)}
  @media only screen and (max-width: 890px) {
      footer .cluster{display: block; margin-bottom: 0.8em; text-align: center;}
  }

  /* Cards/Grid */
  .card{background:var(--artcard); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.04); display:flex; flex-direction:column }
  .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem }
  .grid.cols-3{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}

  /* Hero */
  .hero{position:relative;min-height:68vh;border-bottom:1px solid var(--border);display:grid;place-items:center;text-align:center;overflow:hidden}
  .hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter: saturate(.9) contrast(.98) brightness(.95)}
  .hero__scrim{position:absolute;inset:0;background:linear-gradient(to bottom, color-mix(in oklab,var(--bg),transparent 35%), color-mix(in oklab,var(--bg),transparent 10%))}
  .hero__content{position:relative;padding:4rem 1rem}
  .pill{display:inline-block;padding:.35rem .7rem;border-radius:999px;background:color-mix(in oklab,var(--sage),transparent 80%);color:var(--sage);border:1px solid color-mix(in oklab,var(--sage),transparent 50%);font-weight:700}

  /* Drawers & Overlay */
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter: blur(1px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60}
  .overlay.show{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;bottom:0;width:min(88vw, 340px);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);z-index:70;transform:translateX(-100%);transition:transform .25s ease}
  .drawer.right{right:0;left:auto;transform:translateX(100%)}
  .drawer.show{transform:translateX(0)}
  .drawer__hd{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border)}
  .drawer__bd{padding:1rem;display:grid;gap:.8rem}
  .drawer__bd a{color:var(--text)}
  .divider{height:1px;background:var(--border);border-radius:1px;margin:.5rem 0}

  /* Item layout */
  .item-hero{display:grid;grid-template-columns: 1.1fr 1fr;gap:1.5rem;align-items:start}
  @media (max-width: 900px){ .item-hero{grid-template-columns:1fr} .hero{min-height:56vh} }

  /* Toasts */
  .toast-host{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:grid;gap:.5rem;z-index:90}
  .toast{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:.7rem 1rem;min-width:260px;display:flex;gap:.6rem;align-items:center}
  .toast__icon{font-size:18px}
  .toast-enter{animation:toast-in .28s ease both}
  .toast-leave{animation:toast-out .28s ease both}
  @keyframes toast-in{from{opacity:0;transform:translate(-50%, 6px)}to{opacity:1;transform:translate(-50%, 0)}}
  @keyframes toast-out{to{opacity:0;transform:translate(-50%, 6px)}}


  /* Mobile bottom nav */
  .bottom-nav{position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--surface);border-top:1px solid var(--border);display:none;z-index:55}
  .bottom-nav .nav-items{display:flex;justify-content:space-around;align-items:center;height:100%}
  .bottom-nav a,.bottom-nav button{flex:1;text-align:center;color:var(--text);background:none;border:none;cursor:pointer;font-size:13px;text-decoration:none}
  .bottom-nav .icon{display:block;font-size:18px;margin-bottom:2px}
  .bottom-cart-wrap{position:relative;display:inline-block}
  .bottom-cart-badge{position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--rose);color:#111;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;border:1px solid color-mix(in oklab,var(--rose),#000 12%)}
  @media(max-width:840px){.bottom-nav{display:block}body{padding-bottom:56px}}


  /* Mobile bottom bar */
  .mb-bar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--border);z-index:55;display:none}
  .mb-bar__wrap{display:flex;justify-content:space-around;align-items:center;padding:1rem .4rem .35rem }
  .mb-link{display:flex;flex-direction:column;align-items:center;gap:.15rem;color:var(--text);text-decoration:none;font-size:12px}
  .mb-ico{font-size:18px;line-height:1}
  .mb-rel{position:relative}
  @media (max-width:840px){
    .mb-bar{display:block}
    body{padding-bottom:64px} /* avoid bar overlap */
  }

  /* Mobile utilities */
  @media only screen and (max-width: 530px) {
    .mobile-none{display: none;}
  }

  /* Article pages */
  article h1{font-size: clamp(36px, 6vw, 48px); letter-spacing:-.01em;line-height:1.2;}
  .lead{color:var(--ink-soft);margin:.25rem 0 0}
  .article_card{background:var(--artcard);border:1px solid var(--artborder);border-radius:14px;padding:clamp(16px,2.5vw,24px);box-shadow:0 1px 0 rgba(0,0,0,.03);margin:1rem 0}
  .wrap{max-width:900px;margin:auto;padding:clamp(16px,3vw,32px)}
  nav.toc{border:1px solid var(--artborder);border-left:6px solid var(--sage);padding:8px 16px;background:color-mix(in oklab,var(--sage),transparent 99%)}
  nav.toc a{text-decoration:none;color:var(--tocsage); font-weight: bold;}
  figure{margin:1rem 0;text-align:center}
  figure img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--artborder);background:var(--artcard);}
  figcaption{font-size:.9rem;color:var(--ink-soft);margin-top:.5rem}
  table{margin-bottom: 1em;width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--artborder);overflow:hidden}
  th,td{padding:.75rem;border-top:1px solid var(--artborder);text-align:left;vertical-align:top}
  thead th{background:var(--bg);border-top:none}
  .note{border-left:6px solid var(--rose);background:var(--bg);padding:12px 16px;border-radius:10px;margin:1rem 0}
  code{background:var(--bg);border:1px solid var(--artborder);padding:.1rem .35rem;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .section {scroll-margin-top: 4em;}






  .filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem }
  .filter-btn{ appearance:none; border:1px solid var(--line); background:var(--artcard); color: var(--ink); padding:.55rem .85rem; border-radius:10px; font-weight:700; cursor:pointer }
  .filter-btn[aria-pressed="true"]{ background:var(--sage); color:var(--artcard); border-color:var(--sage) }
  .filter-btn:focus-visible{ outline:3px solid var(--rose); outline-offset:2px }


  .card__media{aspect-ratio:16/10;background:linear-gradient(135deg, color-mix(in oklab,var(--sage),transparent 30%), color-mix(in oklab,var(--sage),transparent 60%))}
  /*.card__media img{width:100%; aspect-ratio:1/1.2; object-fit:cover; display:block; background-size:cover;background-position:center;}*/
  .card__media img{ width:100%; aspect-ratio:1/1.2; object-fit:cover; display:block; background:transparent; }
  .card .body{background:var(--artcard); padding:14px; display:flex; flex-direction:column; gap:.4rem }
  .tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.25rem }
  .tag{ font-size:.75rem; font-weight:700; border:1px solid var(--line); padding:.2rem .45rem; border-radius:999px; color:#555 }
  .hidden{ display:none !important }
  .fallback{ padding:14px; border:1px dashed var(--line); border-radius:12px; background:var(--artcard); color:var(--ink-soft) }
  @media (min-width:674px){
    .card h3, .card p {min-height: 60px;}
  }  
  .card h3{ margin:.1rem 0; line-height:1.25 }
  /* CTA + links */
  .card a.card-link { display:block; text-decoration:none; color:inherit }
  .card a.card-title { text-decoration:none; color:var(--ink) }
  .card a.card-title:hover, .card a.card-title:focus { color:var(--ink-soft);text-decoration:underline }
  .card .cta { margin-top:.8rem }
  .card .cta .btn {text-align: center; display:inline-block; padding:.5rem .9rem; border-radius:8px; font-weight:600; background:var(--sage); color:var(--artcard); text-decoration:none; border:1px solid var(--sage); min-width: 125px;}
  .card .cta .btn-muted {text-align: center; display:inline-block; padding:.5rem .9rem; border-radius:8px; font-weight:600; background:color-mix(in oklab,var(--sage),transparent 50%); color:var(--artcard); text-decoration:none; border:1px solid var(--sage); min-width: 125px; cursor: no-drop;}
  .card .cta .btn:hover { background:#779187; border-color:#779187 }
  .card .cta .btn:focus-visible { outline:3px solid var(--rose); outline-offset:2px }
  .tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.25rem }
  .tag{ font-size:.75rem; font-weight:700; border:1px solid var(--line); padding:.2rem .45rem; border-radius:999px; color: var(--ink-soft); }
  .hidden{ display:none !important }
  .fallback{ padding:14px; border:1px dashed var(--line); border-radius:12px; background:var(--artcard); color:#555 }


  .wrap-board { max-width: 1100px; margin: auto; padding: clamp(16px, 3vw, 32px); }
  .grid-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
  .item-board { display:flex; gap:14px; background:var(--boardcard); border:1px solid var(--line); padding:14px; border-radius:14px; align-items:center; }
  .icon-board img { display:block; }
  .text-board h2 { margin:.2rem 0 .2rem; font-size:1.05rem; color: #2B2B2B}
  .text-board p.note-board { margin:0; font-size:.9rem; color: #2B2B2B; }


  /* Print */
  @media print{
    body{background:var(--artcard);} 
    a{color:inherit} 
    .card, .note, nav.toc{box-shadow:none}
    footer {page-break-after: always;}
    nav, .mb-bar, footer {display: none;}
  }
  

  /* Screen reader additions */
  .sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border-width: 0;}



  /* 
  img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    background: blue;  -- for testing only to ensure full coverage
  }

    For 100% vh on mobile: use 100dvh
    .element {
      height: 100vh;
      height: 100dvh;
      padding: 2em;
    
    }

    */