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

  :root{
    --cream:#F2EBDD;
    --paper:#F8F4EB;
    --sand:#E5DCC9;
    --terra:#B8543A;
    --olive:#5C6B4A;
    --brown:#3D2E24;
    --brown-soft:#675448;
    --mustard:#D9A94E;
    --line:#CFC4AD;
    --line-soft:#E2D9C7;
    --white:#FFFDF8;
    --pad:clamp(20px,4vw,56px);
    --max:1600px;
    --ease:cubic-bezier(.22,1,.36,1);
  }

  html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    scrollbar-width:thin;
    scrollbar-color:var(--terra) var(--sand);
    overflow-x:hidden;
  }

  body{
    background:var(--cream);
    color:var(--brown);
    font-family:"Manrope",system-ui,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  ::selection{background:var(--terra);color:var(--cream)}
  a{color:inherit;text-decoration:none}
  button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
  button:focus-visible,
  a:focus-visible{outline:2px solid var(--terra);outline-offset:4px}

  .wrap{width:min(var(--max),100%);margin-inline:auto;padding-inline:var(--pad)}

  .serif{
    font-family:"DM Serif Display",Georgia,serif;
    font-weight:400;
    line-height:.95;
    letter-spacing:-.025em;
  }

  .serif em{color:var(--terra);font-style:italic}
  .hand{font-family:"Caveat",cursive;font-weight:600}

  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .75s var(--ease),transform .75s var(--ease);
  }

  .reveal.visible{opacity:1;transform:none}

  header{
    position:relative;
    z-index:50;
    background:rgba(242,235,221,.96);
    border-bottom:1px solid var(--line);
  }

  .head{
    min-height:82px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:32px;
  }

  .logo{
    display:inline-flex;
    align-items:baseline;
    gap:7px;
    width:max-content;
    font-family:"DM Serif Display",Georgia,serif;
    font-size:30px;
    line-height:1;
    letter-spacing:-.02em;
  }

  .logo-mark{
    width:9px;height:9px;
    flex:0 0 9px;
    margin-right:1px;
    border-radius:50%;
    background:var(--terra);
    transform:translateY(-5px);
  }

  .logo em{color:var(--terra);font-size:.84em;font-style:italic}

  .head-nav{
    display:flex;
    justify-content:center;
    gap:clamp(18px,2.5vw,38px);
  }

  .head-nav a{
    position:relative;
    padding:7px 0;
    color:var(--brown-soft);
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    transition:color .25s ease;
  }

  .head-nav a::after{
    content:"";
    position:absolute;
    left:50%;bottom:0;
    width:5px;height:5px;
    border-radius:50%;
    background:var(--terra);
    transform:translate(-50%,4px);
    opacity:0;
    transition:opacity .25s ease,transform .25s ease;
  }

  .head-nav a:hover{color:var(--brown)}
  .head-nav a:hover::after{opacity:1;transform:translate(-50%,0)}

  .head-actions{display:flex;align-items:center;gap:20px}

  .back-link{
    position:relative;
    padding:7px 0;
    color:var(--brown-soft);
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    transition:color .25s ease;
  }

  .back-link:hover{color:var(--brown)}

  .page-hero{
    padding:clamp(64px,9vw,120px) 0 clamp(40px,5vw,64px);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }

  .page-eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
    color:var(--olive);
    font-size:20px;
  }

  .page-eyebrow::before{content:"";width:42px;height:1px;background:var(--olive)}

  .page-title{
    font-size:clamp(56px,8vw,132px);
    line-height:.9;
    color:var(--brown);
  }

  .page-title em{color:var(--olive);font-style:italic}

  .page-meta{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:26px;
    color:var(--brown-soft);
    font-size:13px;
    font-weight:600;
  }

  .page-meta .dot{
    width:5px;height:5px;
    border-radius:50%;
    background:var(--olive);
  }

  .page-wrap{
    padding:clamp(60px,8vw,110px) 0 clamp(80px,10vw,140px);
  }

  .page-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:clamp(24px,3vw,48px);
    align-items:start;
  }

  .toc{
    grid-column:1/span 3;
    position:sticky;
    top:32px;
  }

  .toc-label{
    color:var(--brown-soft);
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:18px;
  }

  .toc-list{
    display:flex;
    flex-direction:column;
    border-top:1px solid var(--line);
  }

  .toc-list a{
    padding:13px 0;
    border-bottom:1px solid var(--line-soft);
    color:var(--brown-soft);
    font-size:13px;
    font-weight:600;
    transition:color .25s ease,padding-left .25s ease;
  }

  .toc-list a:hover{color:var(--olive);padding-left:6px}

  .content{
    grid-column:5/span 8;
    max-width:760px;
  }

  .intro{
    margin-bottom:44px;
    color:var(--brown-soft);
    font-size:18px;
    line-height:1.7;
  }

  .intro em{
    font-family:"DM Serif Display",Georgia,serif;
    font-style:italic;
    color:var(--brown);
    font-size:1.08em;
  }

  .content section{
    padding:36px 0;
    border-top:1px solid var(--line);
    scroll-margin-top:32px;
  }

  .content section:first-of-type{border-top:0;padding-top:0}

  .content h2{
    font-family:"DM Serif Display",Georgia,serif;
    font-weight:400;
    font-size:clamp(30px,3.4vw,42px);
    line-height:1.05;
    letter-spacing:-.02em;
    margin-bottom:20px;
    color:var(--brown);
  }

  .content h2 em{color:var(--olive);font-style:italic}

  .content p{
    margin-bottom:16px;
    color:var(--brown-soft);
    font-size:15px;
    line-height:1.8;
  }

  .content p:last-child{margin-bottom:0}

  .content ul{
    list-style:none;
    margin:6px 0 16px;
    padding:0;
  }

  .content ul li{
    position:relative;
    padding:6px 0 6px 26px;
    color:var(--brown-soft);
    font-size:15px;
    line-height:1.7;
  }

  .content ul li::before{
    content:"";
    position:absolute;
    left:0;top:16px;
    width:12px;height:1px;
    background:var(--olive);
  }

  .content strong{color:var(--brown);font-weight:700}

  .content a.inline{
    color:var(--terra);
    border-bottom:1px solid rgba(184,84,58,.35);
    transition:border-color .2s ease;
  }

  .content a.inline:hover{border-color:var(--terra)}

  .note{
    margin-top:44px;
    padding:28px 30px;
    border-radius:5px;
    background:var(--sand);
    border:1px solid var(--line);
    color:var(--brown-soft);
    font-size:15px;
    line-height:1.75;
  }

  .note .hand{
    display:block;
    margin-bottom:8px;
    color:var(--olive);
    font-size:20px;
  }

  footer{
    padding:75px 0 32px;
    border-top:1px solid var(--line);
    background:var(--cream);
  }

  .footer-grid{
    display:grid;
    grid-template-columns:2fr repeat(3,1fr);
    gap:40px;
    padding-bottom:50px;
    border-bottom:1px solid var(--line);
  }

  .footer-logo{font-family:"DM Serif Display",Georgia,serif;font-size:27px}
  .footer-logo em{color:var(--terra);font-style:italic}
  .footer-desc{max-width:320px;margin-top:16px;color:var(--brown-soft);font-size:13px;line-height:1.7}

  .footer-col h3{margin-bottom:15px;color:var(--brown-soft);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
  .footer-col a{display:block;margin:7px 0;color:var(--brown);font-size:13px;transition:color .2s ease}
  .footer-col a:hover{color:var(--terra)}

  .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:28px;color:var(--brown-soft);font-size:11px}
  .footer-bottom-links{display:flex;gap:20px}
  .footer-bottom-links a:hover{color:var(--terra)}

  @media (max-width:1100px){
    .head-nav{display:none}
    .head{grid-template-columns:auto auto;justify-content:space-between}
    .toc{display:none}
    .content{grid-column:1/span 12;max-width:100%}
    .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
    .footer-grid > .footer-col:first-child{grid-column:1/span 2}
  }

  @media (max-width:720px){
    .head{min-height:70px}
    .logo{font-size:25px}
    .page-title{font-size:clamp(48px,14vw,72px)}
    .page-meta{flex-wrap:wrap;gap:10px}
    .content h2{font-size:clamp(26px,7vw,34px)}
    .note{padding:22px}
    .footer-bottom{flex-direction:column}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .reveal{opacity:1;transform:none}
  }