:root{
    --bg:#fff; --fg:#0b0b0b; --muted:#bdbdbd; --line:#ececec; --accent:#f7f7f7; --active:#7c1a14;
  }
  
  /* ===== Ortica Light (optional local font) ===== */
  @font-face{
    font-family:"Ortica";
    src:url("fonts/Ortica-Light.woff2") format("woff2"),
        url("fonts/Ortica-Light.woff")  format("woff");
    font-weight:300; font-style:normal; font-display:swap;
  }
  
  /* Base */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--fg);
    font-family:"Ortica", Georgia, "Times New Roman", Times, serif;
    font-weight:300; font-size:17px; line-height:1.35; letter-spacing:.01em;
  }
  
  /* Grid */
  .grid{ display:grid; grid-template-columns:300px 1fr; min-height:100vh; }
  
  /* Sidebar */
  .sidebar{
    border-right:1px solid var(--line);
    padding:28px 20px; position:sticky; top:0; height:100vh; overflow:auto;
  }
  .site-title{
    display:block; color:var(--fg); text-decoration:none;
    font-weight:300; line-height:.95; letter-spacing:.01em;
    font-size: clamp(22px, 3.2vw, 34px); margin-bottom:22px;
  }
  
  /* Tabs + sublists */
  .tabs{ display:grid; gap:10px; }
  .group{ display:block; }
  .tab{
    width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center;
    background:transparent; border:none; padding:6px 6px; border-radius:8px; cursor:pointer;
    color:#333; transition:transform .25s cubic-bezier(.215,.61,.355,1), background .25s, color .2s;
    font:inherit;
  }
  .tab:hover{ background:var(--accent); }
  .tab.is-active{ color:var(--active); background:var(--accent); transform:translateX(6px); }
  .chev{ font-size:12px; opacity:.6; }
  
  .sublist{ margin:4px 0 8px 0; padding-left:6px; display:none; }
  .sublist.is-open{ display:block; }
  .sub{
    display:block; width:100%; text-align:left;
    background:transparent; border:none; cursor:pointer;
    color:var(--muted); padding:6px 8px; border-radius:6px; letter-spacing:.02em;
    transition:color .2s, background .25s, transform .25s cubic-bezier(.215,.61,.355,1);
  }
  .sub:hover{ color:#444; }
  .sub.is-active{ color:var(--active); background:var(--accent); transform:translateX(6px); }
  
  /* Aux links */
  .aux{ margin-top:12px; }
  .aux-link{ display:inline-block; color:#555; text-decoration:none; padding:6px 4px; border-radius:6px; }
  .aux-link:hover{ background:var(--accent); }
  .aux-link.is-active{ color:var(--active); background:var(--accent); }
  
  /* Stage */
  .stage{ display:grid; grid-template-rows: 1fr auto auto; min-height:100vh; }
  .figure{ margin:0; place-self:center; max-width:min(95vw,1100px); width:100%; text-align:center; padding:24px; }
  .figure img{ width:100%; max-height:78vh; object-fit:contain; opacity:0; animation:fadeIn .6s ease forwards; }
  .fade-in{ animation:fadeIn .6s ease forwards; }
  @keyframes fadeIn{ from{opacity:0; filter:saturate(.96)} to{opacity:1; filter:saturate(1)} }
  
  .caption{ margin-top:10px; color:#333; letter-spacing:.02em; text-align:center; }
  
  /* Controls */
  .controls{ display:flex; align-items:center; justify-content:center; gap:14px; padding:8px 0 16px; }
  .controls button{
    background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; cursor:pointer;
    transition:background .2s, transform .15s; font-family:inherit;
  }
  .controls button:hover{ background:var(--accent); }
  .controls button:active{ transform:translateY(1px); }
  .counter{ color:#333; min-width:84px; text-align:center; }
  
  /* Footer */
  .site-footer{ border-top:1px solid var(--line); padding:16px 24px; color:#777; text-align:center }
  
  /* Contact */
  .contact-wrap{ max-width:760px; margin:0 auto; padding:32px 24px; text-align:center; }
  .contact-title{ font-size: clamp(22px, 3.2vw, 28px); margin:0 0 6px; }
  .contact-location{ color:#444; margin:0 0 10px; }
  .contact-line a{ color:#000; text-decoration:underline; }
  
  /* Mobile */
  @media (max-width:860px){
    .grid{ grid-template-columns:1fr; }
    .sidebar{ position:static; height:auto; border-right:none; border-bottom:1px solid var(--line); padding:20px 16px; }
    .site-title{ font-size: clamp(22px, 7vw, 34px); }
    .sub{ padding:10px 8px; }
    .figure{ padding:12px; }
    .figure img{ max-height:70vh; }
    .controls{ gap:18px; padding:12px 0 20px; }
    .controls button{ padding:12px 16px; border-radius:12px; font-size:16px; }
    .counter{ min-width:90px; font-size:15px; }
  }
  
  /* Very short */
  @media (max-height:520px){ .figure img{ max-height:60vh; } }
  
  /* Prevent accidental highlight */
  body, .tabs, .controls, img{ -webkit-tap-highlight-color:transparent; user-select:none; }