:root{
    --paper:#f5efe2; --paper-2:#ebe2cf; --paper-3:#fffaf0;
    --ink:#1a1815; --ink-soft:#3a362f; --ink-mute:#6b655a;
    --rule:#cbbfa6; --rule-soft:#dfd4ba;
    --accent:#6e1f2a; --accent-soft:#8b3540; --gold:#b08a3e;
    --serif:"Fraunces","Hoefler Text",Georgia,serif;
    --sans:"Manrope",-apple-system,"Helvetica Neue",sans-serif;
    --shadow-sm: 0 1px 2px #00000010;
    --shadow: 0 1px 0 #00000008, 0 24px 50px -28px #2a221240;
    --shadow-lg: 0 30px 80px -20px #2a221250;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:var(--sans); background:var(--paper); color:var(--ink);
    font-size:16px; font-weight:400; line-height:1.55;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
    background-image:
      radial-gradient(circle at 20% 30%, #00000006 0 1px, transparent 1px),
      radial-gradient(circle at 70% 80%, #00000005 0 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px; mix-blend-mode:multiply;
  }
  a{color:inherit; text-decoration:none}

  .doc{ max-width:1100px; margin:0 auto; padding:24px 36px 48px; position:relative; z-index:2; }
  @media (max-width:720px){ .doc{padding:18px 20px 36px} }

  /* topbar */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
    padding-bottom:14px; border-bottom:1px solid var(--rule-soft);
    margin-bottom:28px;
  }
  .mark{ display:flex; align-items:center; gap:14px; font-family:var(--serif); min-width:0; flex:1 1 auto }
  .mark .seal{
    width:42px; height:42px; border-radius:50%;
    border:1.5px solid var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-style:italic; font-weight:600;
    color:var(--accent); font-size:17px; letter-spacing:.02em;
    background: radial-gradient(circle, #fffaf0 60%, #6e1f2a10 100%);
  }
  .mark .mono-name{ font-size:22px; font-weight:600; letter-spacing:-.005em; line-height:1.1; white-space:nowrap; }
  .mark-stack{ display:flex; flex-direction:column; gap:3px; min-width:0 }
  .mark .tag{
    font-family:var(--sans); font-size:11px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  @media (max-width:520px){
    .mark .mono-name{ font-size:18px }
    .mark .tag{ font-size:10px; letter-spacing:.10em }
  }
  .top-actions{ display:flex; align-items:center; gap:10px }
  .langs{
    display:inline-flex; align-items:center;
    border:1px solid var(--rule); border-radius:99px; padding:2px;
    font-family:var(--sans); font-size:11px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; background:#fff;
  }
  .langs button{
    background:none; border:0; padding:6px 11px; color:var(--ink-mute);
    cursor:pointer; font:inherit; letter-spacing:inherit;
    text-transform:inherit; border-radius:99px;
  }
  .langs button.on{ background:var(--ink); color:var(--paper) }
  .ico-btn{
    width:32px; height:32px; border:1px solid var(--rule); border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--ink-soft); background:#fff; transition:.2s;
  }
  .ico-btn:hover{ background:var(--accent); color:var(--paper); border-color:var(--accent) }
  .ico-btn svg{ width:13px; height:13px }

  /* hero */
  .hero{
    display:grid; grid-template-columns: 1.4fr .8fr;
    gap:44px; align-items:center;
    padding: 16px 0 36px; border-bottom:1px solid var(--rule-soft);
    margin-bottom:32px; position:relative;
  }
  .hero::before{
    content:"01"; position:absolute; right:-4px; top:-8px;
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:120px; color:#1a18150a; line-height:.85;
    pointer-events:none; user-select:none;
  }
  @media (max-width:780px){ .hero::before{ display:none } }
  @media (max-width:780px){ .hero{ grid-template-columns:1fr; gap:22px } }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--sans); font-size:11.5px; font-weight:600;
    letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
    margin-bottom:14px; flex-wrap:wrap;
  }
  .eyebrow::before{ content:""; width:24px; height:1.5px; background:var(--accent); }
  h1{
    font-family:var(--serif); font-weight:600;
    font-size:clamp(32px,7vw,58px); line-height:1.05;
    letter-spacing:-.02em; margin:0 0 16px; color:var(--ink);
    overflow-wrap:break-word; hyphens:auto;
  }
  h1 em{
    font-style:italic; color:var(--accent); font-weight:500;
    position:relative;
  }
  h1 em::after{
    content:""; position:absolute; left:0; right:0; bottom:.04em;
    height:8px; background:#6e1f2a18; z-index:-1;
  }
  .lede{
    font-family:var(--sans); font-size:17px; line-height:1.55;
    color:var(--ink-soft); margin:0 0 20px; max-width:540px; font-weight:400;
  }
  .quick{
    display:grid; grid-template-columns: repeat(2,auto);
    gap:18px 40px; padding-top:18px; justify-content:start;
    border-top:1px solid var(--rule-soft); position:relative;
  }
  .quick::before{
    content:""; position:absolute; left:0; top:-1px;
    width:60px; height:2px; background:var(--accent);
  }
  @media (max-width:520px){ .quick{ grid-template-columns:repeat(2,1fr) } }
  .quick div{ display:flex; flex-direction:column; gap:2px }
  .quick dt{
    font-family:var(--sans); font-size:11px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
  }
  .quick dd{
    font-family:var(--serif); font-size:19px; font-weight:500;
    margin:0; color:var(--ink); line-height:1.2; letter-spacing:-.005em;
  }
  @media (max-width:520px){
    .quick dd{ font-size:17px }
  }

  .portrait{
    background:var(--paper-3); padding:12px 12px 44px; box-shadow:var(--shadow-lg);
    transform: rotate(1deg); position:relative; max-width:300px;
    justify-self:center; isolation:isolate;
  }
  .portrait::before{
    content:""; position:absolute; top:-10px; left:50%;
    transform: translateX(-50%) rotate(-2deg);
    width:70px; height:18px; background: #c9a8604d;
    box-shadow: 0 1px 2px #00000020;
  }
  .portrait .img-wrap{ overflow:hidden }
  .portrait img{
    width:100%; aspect-ratio: 4/5; object-fit:cover;
    object-position:50% 35%; display:block; filter: sepia(.04);
    transform: scale(1.18); transform-origin: 50% 35%;
  }
  .portrait .name{
    position:absolute; bottom:12px; left:0; right:0; text-align:center;
    font-family:var(--serif); font-style:italic; font-size:15px; font-weight:500;
    color:var(--ink-soft); letter-spacing:.01em;
    z-index:2; padding:0 6px;
    line-height:1.2;
  }

  /* two-col grid */
  .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; margin-bottom:28px; }
  @media (max-width:780px){ .grid{ grid-template-columns:1fr } }

  .card{
    background:var(--paper-3); border:1px solid var(--rule-soft);
    padding:26px 26px 22px; box-shadow: var(--shadow-sm);
    position:relative;
  }
  .card::before{
    content:""; position:absolute; top:0; left:0; width:40%;
    height:3px; background:var(--accent);
  }
  .card .h2-row{
    display:flex; align-items:baseline; gap:12px;
    padding-bottom:14px; margin-bottom:8px;
    border-bottom:1px solid var(--rule-soft);
  }
  .card h2{
    font-family:var(--serif); font-weight:600; font-size:26px;
    margin:0; line-height:1.1; letter-spacing:-.015em;
  }
  .card h2 em{ font-style:italic; color:var(--accent); font-weight:500 }
  .card .num{
    font-family:var(--serif); font-style:italic; font-size:15px;
    color:var(--accent); font-weight:500; letter-spacing:.02em;
  }

  /* about list */
  .about-points{ list-style:none; padding:0; margin:0 }
  .about-points li{
    position:relative;
    padding:10px 0 10px 18px;
    border-bottom:1px dashed var(--rule);
    font-size:15.5px; font-weight:400; line-height:1.55; color:var(--ink-soft);
  }
  .about-points li:last-child{ border-bottom:0 }
  .about-points li::before{
    content:""; position:absolute; left:0; top:17px;
    width:6px; height:6px; background:var(--accent); border-radius:50%;
  }
  .about-points strong{ color:var(--ink); font-weight:600 }

  /* spec list */
  .specs{ list-style:none; padding:0; margin:0 }
  .specs li{
    display:grid; grid-template-columns: 38% 1fr auto; gap:10px;
    padding:9px 0; border-bottom:1px dashed var(--rule);
    align-items:baseline; font-size:15px;
  }
  @media (max-width:520px){
    .specs li{ grid-template-columns: 1fr auto; gap:6px 12px; align-items:baseline }
    .specs .k{ grid-column:1 / -1; margin-bottom:-2px }
  }
  .specs li:last-child{ border-bottom:0 }
  .specs .k{
    font-family:var(--sans); font-size:12px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute);
  }
  .specs .v{ font-family:var(--serif); font-size:18px; color:var(--ink); font-weight:500; letter-spacing:-.005em }
  .specs .v strong{ color:var(--accent); font-weight:600; font-style:italic; }
  .specs .pill{
    font-family:var(--sans); font-size:10.5px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; padding:4px 10px;
    border:1px solid var(--rule); border-radius:99px; color:var(--ink-mute);
    white-space:nowrap;
  }
  .specs .pill.solid{
    background:var(--accent); color:var(--paper); border-color:var(--accent);
    box-shadow: 0 2px 6px -1px #6e1f2a40;
  }

  /* regions strip */
  .regions{
    display:grid; grid-template-columns: 38% 1fr; gap:10px; align-items:baseline;
    padding-top:14px; margin-top:14px;
    border-top:1px solid var(--rule-soft);
  }
  @media (max-width:520px){
    .regions{ grid-template-columns: 1fr; gap:6px }
  }
  .regions .lab{
    font-family:var(--sans); font-size:12px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute);
  }
  .regions .pins{
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  .regions .pin{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--serif); font-size:18px; font-weight:500;
    color:var(--ink); letter-spacing:-.005em;
  }
  .regions .pin::before{
    content:""; width:6px; height:6px; background:var(--accent); border-radius:50%;
  }

  /* docs row */
  .docs-row{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-bottom:28px;
  }
  @media (max-width:720px){ .docs-row{ grid-template-columns:1fr } }
  .doc-chip{
    background:var(--paper-3); border:1px solid var(--rule-soft);
    padding:18px 20px; display:grid;
    grid-template-columns: 26px 1fr; gap:14px; align-items:start;
    box-shadow: var(--shadow-sm); transition:.25s;
  }
  .doc-chip:hover{ box-shadow: var(--shadow); transform: translateY(-1px) }
  .doc-chip .ck{
    width:26px; height:26px; border-radius:50%;
    background:var(--accent); color:var(--paper);
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow: 0 2px 6px -1px #6e1f2a50;
  }
  .doc-chip .ck svg{ width:13px; height:13px }
  .doc-chip h4{
    margin:0 0 3px; font-family:var(--serif); font-weight:600; font-size:17px;
    letter-spacing:-.005em;
  }
  .doc-chip p{ margin:0; font-size:13.5px; color:var(--ink-mute); line-height:1.45; }

  /* contact strip */
  .contact-strip{
    display:grid; grid-template-columns: 1.1fr repeat(3,1fr);
    gap:24px; padding:28px 28px;
    background:var(--ink); color:var(--paper);
    align-items:center; position:relative; overflow:hidden;
  }
  .contact-strip::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 50%, var(--accent) 100%);
  }
  @media (max-width:780px){
    .contact-strip{ grid-template-columns:1fr; gap:14px; padding:22px 20px }
    .contact-strip .cell + .cell::before{ display:none }
    .contact-strip .val{ font-size:16px }
  }
  .contact-strip h3{
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:24px; margin:0; line-height:1.15; letter-spacing:-.01em;
  }
  .contact-strip h3 em{ color:var(--gold); font-style:italic; font-weight:600 }
  .contact-strip .cell{ display:flex; flex-direction:column; gap:5px; position:relative }
  .contact-strip .cell + .cell::before{
    content:""; position:absolute; left:-12px; top:10%; bottom:10%;
    width:1px; background:#ffffff15;
  }
  .contact-strip .lbl{
    font-family:var(--sans); font-size:11px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:#cbb78a;
  }
  .contact-strip .val{
    font-family:var(--serif); font-size:18px; font-weight:500;
    word-break:break-word; overflow-wrap:anywhere; line-height:1.2; letter-spacing:-.005em;
  }
  .contact-strip a.val:hover{ color:var(--gold) }

  /* CTA bar */
  .cta-bar{
    display:flex; flex-wrap:wrap; align-items:center;
    justify-content:space-between; gap:18px;
    padding:22px 26px; margin-top:20px;
    background:var(--paper-2); border:1px solid var(--rule);
    position:relative;
  }
  @media (max-width:520px){
    .cta-bar{ padding:18px 18px 18px 22px; gap:14px }
    .cta-bar .left{ font-size:16px }
    .cta-bar .btns{ width:100% }
    .cta-bar .btns .btn{ flex:1 1 auto; justify-content:center }
  }
  .cta-bar::before{
    content:""; position:absolute; top:8px; bottom:8px; left:8px;
    width:3px; background:var(--accent);
  }
  .cta-bar .left{
    font-family:var(--serif); font-size:18px; font-weight:500; color:var(--ink);
    letter-spacing:-.005em; padding-left:14px;
  }
  .cta-bar .left em{ color:var(--accent); font-style:italic; font-weight:600 }
  .cta-bar .btns{ display:flex; gap:8px; flex-wrap:wrap }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 16px; font-family:var(--sans); font-size:11.5px;
    font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    border:1px solid var(--ink); color:var(--ink); background:transparent;
    cursor:pointer; transition:.2s;
  }
  .btn:hover{ background:var(--ink); color:var(--paper) }
  .btn.primary{ background:var(--accent); color:var(--paper); border-color:var(--accent) }
  .btn.primary:hover{ background:var(--ink); border-color:var(--ink) }
  .btn svg{ width:12px; height:12px }

  footer{
    padding-top:24px; margin-top:32px;
    border-top:1px solid var(--rule-soft);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-family:var(--sans); font-size:11px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
    align-items:center;
  }
  footer .sig{
    font-family:var(--serif); font-style:italic; font-size:16px; font-weight:500;
    text-transform:none; letter-spacing:.005em; color:var(--ink-soft);
    white-space:nowrap;
  }
  @media (max-width:520px){
    footer{ font-size:10px; letter-spacing:.10em }
    footer .sig{ font-size:14px }
  }