:root{
    --paper:#EEF0EA;
    --paper-alt:#E3E6DC;
    --white:#FBFAF6;
    --ink:#f0f0f0;
    --ink-soft:#565F52;
    --ink-faint:#8A8F7E;
    --teal:#2F6F63;
    --teal-deep:#FDCF00;
    --ochre:#B9752A;
    --line:rgba(255, 255, 255, 0.15);
    --serif:'Source Serif 4', Georgia, serif;
    --display:'Space Grotesk', sans-serif;
    --cousine:'IBM Plex Mono', monospace;
    --script:'Caveat', cursive;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  a{color:var(--teal-deep);}

  :focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
  }
  ::marker{
    color: var(--yellow);
  }
  .wrap{
    max-width:1024px;
    margin:0 auto;
    padding:0 0 60px;
  }

  /* ---------- INDEX / TOC ---------- */

  .toc{
    margin:36px 0 8px;
    border-top:1px solid var(--line);
  }
  .toc-item{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:13px 0;
    border-bottom:1px solid var(--line);
    text-decoration:none;
    color:var(--ink);
  }
  .toc-item:hover .toc-title{color:var(--teal-deep);}
  .toc-num{
    color: #8A8A8A;
    text-align: center;
    font-family: var(--cousine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    padding: 10px 5px;
    border-radius: 20px;
    border: 1px solid var(--line);
  }
  .toc-title{
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 90%;
    color: #818181;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -1.2px;
    transition: color 0.4s ease-in-out;
  }
  .toc-fill{
    flex:1 1 auto;
    border-bottom:1px dotted var(--ink-faint);
    height:1px;
    transform:translateY(-4px);
    min-width:16px;
  }
  .toc-count{
    font-family:var(--cousine);
    font-size:14px;
    color:var(--ink-faint);
    flex:0 0 auto;
  }

  /* ---------- CATEGORY SECTIONS ---------- */

  section.cat{
    padding:52px 0 8px;
    scroll-margin-top:84px;
  }
  .cat-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
  }
  .cat-code{
    color: #8A8A8A;
    text-align: center;
    font-family: var(--cousine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  h2{
    font-family:var(--display);
    font-weight:600;
    font-size:23px;
    line-height: 1;
    margin:0;
    color:var(--ink);
  }

  details{
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:10px;
    overflow:hidden;
  }
  details + details{margin-top:10px;}
  summary{
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    color: var(--white);
    padding: 12px 40px 12px 10px;
  }
  summary::-webkit-details-marker{display:none;}
  summary .icon{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    color:var(--teal-deep);
  }
  summary .icon::before, summary .icon::after{
    content:"";
    position:absolute;
    background:currentColor;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
  }
  summary .icon::before{width:12px;height:1.6px;}
  summary .icon::after{width:1.6px;height:12px;transition:transform .18s ease;}
  details[open] summary .icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
  details[open] summary{border-bottom:1px solid var(--line);}

  .answer{
    padding:20px 18px;
    color:var(--text);
    font-size:16px;
  }
  .answer p{margin:0 0 12px;}
  .answer p:last-child{margin-bottom:0;}
  .answer ol, .answer ul{margin:0 0 12px; padding-left:20px;}
  .answer li{margin-bottom:8px;}
  .answer .note{
    font-family:var(--cousine);
    font-size:15px;
    color:var(--text);
    border-left:2px solid var(--ochre);
    padding-left:12px;
    margin-top:14px;
  }

  /* ---------- CURIOSITIES / LOG ---------- */

  .log-intro{
    color:var(--text);
    font-size:15.5px;
    max-width:58ch;
    margin:0 0 26px;
  }
  .log{
    border-top:1px solid var(--line);
  }
  .log-entry{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:14px;
    padding:20px 0;
    border-bottom:1px solid var(--line);
  }
  .log-num{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    color: #8A8A8A;
    align-self: flex-start;
    text-align: center;
    font-family: var(--cousine);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .log-quote{
    font-family:var(--serif);
    font-style:italic;
    font-size:17px;
    color:var(--ink);
    margin:0 0 6px;
    position:relative;
  }
/*  .log-quote .mark{
    font-family:var(--cousine);
    font-style:normal;
    color:var(--white);
    margin-right:2px;
    line-height:0;
  }*/
  .log-note{
    font-size:16px;
    color:var(--text);
    margin:0;
  }
  @media (max-width:560px){
    body{font-size:16px;}
    .faqPage h1 {font-size: 48px}
    .hero{padding:40px 0 20px;}
    section.cat{padding:38px 0 4px;}
    .toc-title{font-size:16px;}
    summary{padding:14px 42px 14px 15px; font-size:15px;}
    .log-entry{grid-template-columns:30px 1fr;}
}