:root{
    --cream:#FFFAF0;
    --cream-deep:#F6EEDF;
    --card:#FFFDF8;
    --espresso:#2B1B10;
    --brown:#733919;
    --brown-deep:#4A2410;
    --orange:#C97629;
    --orange-deep:#A85F1D;
    --olive:#818735;
    --olive-light:#C1C04E;
    --taupe:#8A7360;
    --hairline:#E7DCC8;
    --hairline-strong:#D8C7AA;
    --white:#FFFFFF;

    --font-display:'Fredoka',system-ui,sans-serif;
    --font-body:'Karla',system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,monospace;
    --font-arabic:'Cairo',sans-serif;

    --nav-w:270px;
    --pattern-url:url("assets/pattern_overlay_brown_bold.webp");
  }

  *,*::before,*::after{box-sizing:border-box;}

  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  body{
    margin:0;
    background:var(--cream);
    color:var(--espresso);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img{max-width:100%;display:block;}

  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:600;
    margin:0;
    text-wrap:balance;
    color:var(--brown-deep);
  }

  p{margin:0 0 1em 0; max-width:64ch;}
  p:last-child{margin-bottom:0;}

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

  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

  /* ---------- Layout shell ---------- */
  .shell{
    display:grid;
    grid-template-columns:var(--nav-w) 1fr;
    min-height:100vh;
  }
  @media (max-width:900px){
    .shell{grid-template-columns:1fr;}
  }

  /* ---------- Side nav ---------- */
  .toc{
    position:sticky;
    top:0;
    align-self:start;
    height:100vh;
    overflow-y:auto;
    padding:2rem 1.4rem 2rem 2rem;
    border-right:1px solid var(--hairline);
    background:var(--cream-deep);
  }
  @media (max-width:900px){
    .toc{
      position:static;
      height:auto;
      display:flex;
      gap:.4rem;
      overflow-x:auto;
      padding:1rem;
      border-right:none;
      border-bottom:1px solid var(--hairline);
    }
  }

  .toc-hub-link{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:1.4rem;
    padding-bottom:1.2rem;
    border-bottom:1px solid var(--hairline);
    text-decoration:none;
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--taupe);
    transition:color .15s ease;
  }
  .toc-hub-link:hover{color:var(--orange-deep);}
  @media (max-width:900px){
    .toc-hub-link{
      margin:0; padding:0 .8rem 0 0; border-bottom:none; border-right:1px solid var(--hairline);
      flex-shrink:0;
    }
  }

  .toc-brand{
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-bottom:2rem;
    text-decoration:none;
  }
  @media (max-width:900px){ .toc-brand{display:none;} }
  .toc-brand img{width:34px;height:auto;}
  .toc-brand span{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.05rem;
    color:var(--brown-deep);
  }

  .toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem;}
  @media (max-width:900px){ .toc-list{flex-direction:row;} }

  .toc-link{
    display:flex;
    align-items:baseline;
    gap:.55rem;
    padding:.5rem .6rem;
    border-radius:.5rem;
    text-decoration:none;
    color:var(--taupe);
    font-size:.86rem;
    white-space:nowrap;
    transition:background .15s ease, color .15s ease;
  }
  .toc-link:hover{background:var(--hairline);color:var(--brown-deep);}
  .toc-link.active{background:var(--brown);color:var(--cream);}
  .toc-link .n{font-family:var(--font-mono);font-size:.72rem;opacity:.8;}

  /* ---------- Main content ---------- */
  main{min-width:0;}

  .cover{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:4rem 1.5rem;
    background:
      linear-gradient(180deg, rgba(255,250,240,.55), rgba(255,250,240,.9) 70%),
      var(--cream);
    background-image:
      linear-gradient(180deg, rgba(255,250,240,.4), rgba(255,250,240,.92) 75%),
      var(--pattern-url);
    background-size:auto, 620px;
    background-repeat:no-repeat, repeat;
    background-position:center, center;
    border-bottom:1px solid var(--hairline);
  }
  .cover img.cover-logo{width:min(560px, 78vw); margin:0 auto 1.6rem auto;}
  .cover .kicker{
    font-family:var(--font-mono);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:.78rem;
    color:var(--olive);
    margin-bottom:1rem;
  }
  .cover .cover-sub{
    font-size:1.05rem;
    color:var(--brown);
    max-width:42ch;
  }
  .cover .cover-meta{
    margin-top:3rem;
    font-family:var(--font-mono);
    font-size:.76rem;
    color:var(--taupe);
    letter-spacing:.04em;
  }

  section.chapter{
    padding:5rem 1.75rem;
    border-bottom:1px solid var(--hairline);
    scroll-margin-top:1rem;
  }
  section.chapter:nth-of-type(even){background:var(--cream-deep);}
  .chapter-inner{max-width:960px;margin:0 auto;}

  .chapter-head{
    display:flex;
    align-items:flex-end;
    gap:1.1rem;
    margin-bottom:2.75rem;
    padding-bottom:1.4rem;
    border-bottom:2px solid var(--hairline-strong);
  }
  .chapter-head .num{
    font-family:var(--font-mono);
    font-size:1.05rem;
    color:var(--orange-deep);
    background:var(--card);
    border:1px solid var(--hairline-strong);
    border-radius:.4rem;
    padding:.25rem .55rem;
  }
  .chapter-head h2{font-size:clamp(1.7rem, 1.2rem + 2vw, 2.6rem);}
  .chapter-lede{font-size:1.08rem;color:var(--brown);max-width:68ch;margin-bottom:2.2rem;}

  h3.sub{
    font-size:1.25rem;
    margin:2.4rem 0 .9rem 0;
    color:var(--brown-deep);
    display:flex;
    align-items:center;
    gap:.5rem;
  }
  h3.sub:first-of-type{margin-top:0;}
  h3.sub .leaf{width:16px;height:16px;flex:none;}

  .lead-num-title{display:flex; align-items:baseline; gap:.6rem;}

  /* ---------- Reusable components ---------- */
  .card{
    background:var(--card);
    border:1px solid var(--hairline);
    border-radius:.9rem;
    padding:1.4rem 1.5rem;
  }

  .grid{display:grid; gap:1.1rem;}
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  @media (max-width:760px){
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:520px){
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  }

  .pill-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
  .pill{
    font-family:var(--font-mono);
    font-size:.78rem;
    padding:.35rem .7rem;
    border-radius:2rem;
    border:1px solid var(--hairline-strong);
    color:var(--brown);
    background:var(--card);
  }

  .trait-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;}
  @media (max-width:600px){.trait-grid{grid-template-columns:1fr;}}
  .trait{
    background:var(--card);
    border:1px solid var(--hairline);
    border-left:4px solid var(--orange);
    border-radius:.5rem;
    padding:1rem 1.1rem;
  }
  .trait .yes{font-family:var(--font-display);font-weight:600;color:var(--brown-deep);}
  .trait .no{color:var(--taupe); font-size:.92rem;}

  .value-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;}
  .value-list li{display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;}
  .value-list .vnum{font-family:var(--font-mono);color:var(--olive);font-size:1rem;}
  .value-list strong{display:block;color:var(--brown-deep);font-family:var(--font-display);font-weight:600;font-size:1.02rem;margin-bottom:.15rem;}

  blockquote.statement{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
    color:var(--brown-deep);
    border-left:4px solid var(--olive-light);
    padding:.3rem 0 .3rem 1.4rem;
    margin:2rem 0;
    line-height:1.35;
  }
  blockquote.statement cite{
    display:block;
    font-family:var(--font-mono);
    font-style:normal;
    font-size:.75rem;
    color:var(--taupe);
    margin-top:.6rem;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  /* logo tiles */
  .logo-tile{
    border-radius:.9rem;
    border:1px solid var(--hairline);
    padding:2.4rem 1.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
  }
  .logo-tile.on-cream{background:var(--card);}
  .logo-tile.on-deep{background:var(--cream-deep);}
  .logo-tile.on-brown{background:var(--brown);}
  .logo-tile.on-espresso{background:var(--espresso);}
  .logo-tile.on-olive{background:var(--olive);}
  .logo-tile img{max-height:130px;width:auto;max-width:88%;}
  .tile-label{
    font-family:var(--font-mono);
    font-size:.72rem;
    color:var(--taupe);
    text-align:center;
    margin-top:.6rem;
    letter-spacing:.03em;
  }
  .tile-wrap{display:flex;flex-direction:column;}

  /* color swatches */
  .swatch{
    border-radius:.9rem;
    overflow:hidden;
    border:1px solid var(--hairline);
    background:var(--card);
  }
  .swatch .chip{height:110px;}
  .swatch .info{padding:.85rem 1rem 1rem;}
  .swatch .cname{font-family:var(--font-display);font-weight:600;color:var(--brown-deep);font-size:1.02rem;margin-bottom:.35rem;}
  .swatch .code{font-family:var(--font-mono);font-size:.76rem;color:var(--brown);line-height:1.65;}
  .swatch .code b{color:var(--taupe);font-weight:400;}

  /* spec table */
  table.spec{
    width:100%;
    border-collapse:collapse;
    font-size:.9rem;
  }
  table.spec th,table.spec td{
    text-align:left;
    padding:.6rem .7rem;
    border-bottom:1px solid var(--hairline);
  }
  table.spec th{
    font-family:var(--font-mono);
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--taupe);
    font-weight:400;
  }
  table.spec td.mono{font-family:var(--font-mono);font-size:.84rem;}
  .table-scroll{overflow-x:auto;}

  /* typography */
  .type-sample{
    padding:1.4rem 1.5rem;
    border:1px solid var(--hairline);
    border-radius:.9rem;
    background:var(--card);
    margin-bottom:1rem;
  }
  .type-sample .role{
    font-family:var(--font-mono);
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--olive);
    margin-bottom:.6rem;
  }
  .type-sample .big{font-family:var(--tf, var(--font-display));}
  .type-meta{font-family:var(--font-mono);font-size:.76rem;color:var(--taupe);margin-top:.7rem;}

  .scale-row{
    display:flex;
    align-items:baseline;
    gap:1rem;
    padding:.7rem 0;
    border-bottom:1px solid var(--hairline);
  }
  .scale-row .tag{font-family:var(--font-mono);font-size:.7rem;color:var(--taupe);width:5.5rem;flex:none;}
  .scale-row .sample{font-family:var(--font-display);color:var(--brown-deep);font-weight:600;}

  /* graphic language */
  .icon-row{display:flex;flex-wrap:wrap;gap:1.4rem;}
  .icon-chip{
    display:flex;flex-direction:column;align-items:center;gap:.5rem;
    width:96px;text-align:center;
  }
  .icon-chip .shape{
    width:64px;height:64px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--card); border:1px solid var(--hairline);
  }
  .icon-chip .lbl{font-family:var(--font-mono);font-size:.68rem;color:var(--taupe);}

  .pattern-strip{
    border-radius:.9rem;
    overflow:hidden;
    border:1px solid var(--hairline);
    height:180px;
    background-image:var(--pattern-url);
    background-size:420px;
    background-repeat:repeat;
    background-color:var(--cream);
  }

  /* photography */
  .photo-mock{
    border-radius:.9rem;
    border:1px solid var(--hairline);
    aspect-ratio:4/3;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    padding:0;
    position:relative;
    overflow:hidden;
    background-size:cover;
    background-position:center;
  }
  .photo-mock .cap{
    font-family:var(--font-mono);
    font-size:.68rem;
    color:#FBF4E8;
    text-align:left;
    max-width:none;
    width:100%;
    padding:1.6rem .9rem .7rem;
    background:linear-gradient(0deg, rgba(20,10,4,.78), rgba(20,10,4,0));
    line-height:1.5;
  }
  .photo-mock .cap b{color:#FFD9A8;font-weight:600;}

  /* dos donts */
  .dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
  @media (max-width:600px){.dd-grid{grid-template-columns:1fr;}}
  .dd{border-radius:.9rem;padding:1.2rem 1.3rem;border:1px solid var(--hairline);}
  .dd.do{border-top:4px solid var(--olive);}
  .dd.dont{border-top:4px solid var(--orange-deep);}
  .dd h4{font-size:.95rem;margin-bottom:.7rem;display:flex;align-items:center;gap:.4rem;}
  .dd ul{margin:0;padding-left:1.1rem;font-size:.9rem;color:var(--brown);}
  .dd li{margin-bottom:.45rem;}

  footer.colophon{
    padding:3rem 1.75rem 5rem;
    text-align:center;
    background:var(--brown-deep);
    color:var(--cream);
  }
  footer.colophon img{width:64px;margin:0 auto 1rem;}
  footer.colophon .cname{font-family:var(--font-display);font-weight:600;font-size:1.1rem;}
  footer.colophon .meta{font-family:var(--font-mono);font-size:.75rem;color:#D8B99A;margin-top:.5rem;}
  footer.colophon .meta a{color:#F0C896;}
  footer.colophon .colophon-links{
    margin-top:1.6rem;
    padding-top:1.4rem;
    border-top:1px solid rgba(255,250,240,.14);
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:rgba(255,250,240,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    flex-wrap:wrap;
  }
  footer.colophon .colophon-links a{color:rgba(255,250,240,.78);text-decoration:none;transition:color .15s ease;}
  footer.colophon .colophon-links a:hover{color:var(--cream);}

  @media print{
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
    .toc{ display:none; }
    .shell{ display:block; }
    main{ width:100%; }
    .cover{ min-height:auto; padding:3.2in 1in 1in; page-break-after:always; }
    section.chapter{ padding:0.5in 0.6in; page-break-after:always; border-bottom:none; }
    section.chapter:last-of-type{ page-break-after:auto; }
    .chapter-inner{ max-width:100%; }
    .grid-4, .grid-3{ grid-template-columns:repeat(3,1fr); }
    footer.colophon{ page-break-before:always; }
    a{ text-decoration:none; }
  }