/* ==========================================================================
   XRMN — xrmntoken.help
   Visual language: warm editorial journal.
   Sand paper, wine and charcoal, Playfair display, gutter numerals.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}

:root{
  --paper:#f8f1e7;
  --paper-2:#f3e9db;
  --card:#fffaf3;
  --ink:#2a2320;
  --ink-2:#453a32;
  --body:#4e4238;
  --muted:#8a7a69;
  --rule:#e3d6c4;
  --rule-2:#d2c0a8;
  --wine:#8e2f45;
  --wine-d:#6d2334;
  --sand:#c98b3f;

  --f-display:'Playfair Display',Georgia,serif;
  --f-body:'Lato',system-ui,-apple-system,sans-serif;

  --maxw:1100px;
  --gutter:clamp(20px,5vw,46px);
  --ease:cubic-bezier(.2,.75,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html{background:var(--paper)}
body{
  font-family:var(--f-body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.78;
  color:var(--body);
  background:
    radial-gradient(900px 520px at 90% -8%,rgba(142,47,69,.06),transparent 62%),
    radial-gradient(820px 460px at 0% 4%,rgba(201,139,63,.08),transparent 60%),
    linear-gradient(180deg,#f9f2e9 0%,#f4ebdd 52%,#f9f2e9 100%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.3;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.5'/></svg>");
}
.wrap{position:relative;z-index:2}
.shell{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.doc{width:min(100% - 2*var(--gutter),820px);margin-inline:auto}

h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);font-weight:700;line-height:1.14;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.8rem);line-height:1.04;letter-spacing:-.02em}
h2{font-size:clamp(1.48rem,2.9vw,2.15rem)}
h3{font-size:clamp(1.06rem,1.5vw,1.26rem);font-weight:600}
p{margin-block:0 1.2em}
strong{color:var(--ink);font-weight:700}
a{color:var(--wine-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--wine)}
em{font-style:italic}

.kicker{font-family:var(--f-display);font-style:italic;font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--wine);font-weight:500}
.standfirst{font-family:var(--f-display);font-size:clamp(1.14rem,1.7vw,1.42rem);line-height:1.55;color:var(--ink-2);font-weight:400}

.skip{position:absolute;left:14px;top:-70px;z-index:100;background:var(--wine);color:#fff;
  padding:12px 18px;transition:top .28s var(--ease);font-weight:700}
.skip:focus{top:14px}
:focus-visible{outline:2.5px solid var(--wine);outline-offset:3px}

/* ---- masthead ---------------------------------------------------------- */
.mast{background:rgba(248,241,231,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--rule-2);box-shadow:0 1px 0 rgba(210,192,168,.5) inset}
.mast__in{display:flex;align-items:center;gap:clamp(12px,2.6vw,30px);min-height:64px}
.mast .brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.mast .brand:hover{text-decoration:none}
.mast .brand b{font-family:var(--f-display);font-size:1.16rem;font-weight:700;letter-spacing:.01em}
.mast .brand b i{font-style:italic;color:var(--wine)}
.mast .brand small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:2px}
.mast nav{margin-left:auto;display:flex;gap:clamp(12px,2.3vw,26px)}
.mast nav a{font-size:.82rem;color:var(--ink-2);text-decoration:none;padding:6px 0;white-space:nowrap;
  border-bottom:1.5px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.mast nav a:hover,.mast nav a.is-on{color:var(--wine);border-bottom-color:var(--wine);text-decoration:none}

/* ---- hero -------------------------------------------------------------- */
.hero{padding:clamp(42px,6.5vw,84px) 0 clamp(26px,3.5vw,44px)}
.hero__top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.85fr);gap:clamp(24px,4vw,52px);
  align-items:start}
.hero h1{margin:.35em 0 .5em;max-width:18ch}
.hero .standfirst{max-width:46ch}

.glance{background:var(--card);border:1px solid var(--rule-2);border-top:3px solid var(--wine);padding:18px 20px}
.glance h2{font-size:.74rem;font-family:var(--f-body);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--wine);margin-bottom:12px}
.glance ul{display:flex;flex-direction:column;gap:10px}
.glance li{font-size:.9rem;color:var(--ink-2);padding-left:1.2em;position:relative;line-height:1.55}
.glance li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--sand);
  transform:rotate(45deg)}

.bleed{width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(28px,4vw,48px);background:#1b1512}
.bleed img{width:100%;height:clamp(240px,42vw,520px);object-fit:cover;opacity:.95}
.bleed figcaption{max-width:var(--maxw);margin-inline:auto;padding:12px clamp(20px,5vw,46px);
  font-family:var(--f-display);font-style:italic;font-size:.92rem;color:var(--muted);
  border-bottom:1px solid var(--rule)}

/* ---- sections ---------------------------------------------------------- */
.sect{padding-block:clamp(28px,4vw,50px);border-top:1px solid var(--rule);scroll-margin-top:84px;
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:clamp(14px,2.4vw,26px)}
.sect:first-child{border-top:0;padding-top:0}
.sect__n{font-family:var(--f-display);font-size:1.5rem;color:var(--wine);font-weight:700;
  line-height:1;padding-top:.35em}
.sect__body{min-width:0}
.sect h2{margin-bottom:.6em;max-width:26ch}
.prose p{margin-bottom:1.2em}
.prose ul{margin:0 0 1.25em;display:flex;flex-direction:column;gap:.5em}
.prose li{padding-left:1.5em;position:relative}
.prose li::before{content:"\2014";position:absolute;left:0;color:var(--sand)}

/* callout band */
.band{margin:1.8em 0;padding:22px 24px;background:var(--paper-2);border-left:4px solid var(--sand)}
.band b{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);
  font-weight:700;margin-bottom:8px}
.band p:last-child{margin-bottom:0}

.quote{margin:2em 0;padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.quote p{font-family:var(--f-display);font-size:clamp(1.28rem,2.5vw,1.85rem);line-height:1.32;color:var(--ink);
  font-weight:500;font-style:italic;margin:0;max-width:28ch}

/* person cards */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:1.7em 0}
.who > div{background:var(--card);border:1px solid var(--rule);padding:18px}
.who h3{font-size:1rem;margin-bottom:.35em}
.who p{font-size:.87rem;color:var(--muted);margin:0;line-height:1.6}
.who span{display:block;font-family:var(--f-display);font-style:italic;color:var(--sand);font-size:.9rem;margin-bottom:6px}

/* table */
.tbl-wrap{overflow-x:auto;margin:1.7em 0;border:1px solid var(--rule-2)}
table{font-size:.9rem;min-width:520px}
caption{caption-side:top;text-align:left;font-family:var(--f-display);font-style:italic;color:var(--muted);
  padding:13px 16px;border-bottom:1px solid var(--rule);font-size:.9rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wine);
  background:var(--paper-2);font-weight:700}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(201,139,63,.05)}
td strong{color:var(--ink)}

figure.inline{margin:2em 0}
figure.inline img{width:100%;height:clamp(190px,30vw,330px);object-fit:cover}
figure.inline figcaption{margin-top:10px;font-family:var(--f-display);font-style:italic;font-size:.9rem;color:var(--muted)}

/* faq */
.faq{margin-top:1.5em;border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:18px 40px 18px 0;position:relative;font-family:var(--f-display);
  font-size:1.1rem;font-weight:600;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--wine);border-bottom:2px solid var(--wine);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--wine)}
.faq .a{padding:0 0 20px;font-size:.95rem}
.faq .a p:last-child{margin-bottom:0}

.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* ---- footer ------------------------------------------------------------ */
.ftr{background:#2a2320;color:#cbbcaa;padding:clamp(44px,6vw,70px) 0 30px;margin-top:24px}
.ftr a{color:#e8b9a0}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr);gap:clamp(26px,5vw,56px);
  padding-bottom:30px;border-bottom:1px solid rgba(203,188,170,.2)}
.ftr__brand b{font-family:var(--f-display);font-size:1.3rem;color:#fff;font-weight:700;
  display:flex;align-items:center;gap:10px}
.ftr__brand b i{font-style:italic;color:#e0876a}
.ftr__brand p{margin-top:13px;font-size:.87rem;color:#a8998a;max-width:42ch}
.linknet__label{font-family:var(--f-display);font-style:italic;color:#a8998a;margin-bottom:14px;font-size:.95rem}
.linknet ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px 22px}
.linknet a{display:block;font-size:.86rem;color:#e2d6c8;text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease),color .25s var(--ease)}
.linknet a:hover{color:#fff;border-bottom-color:rgba(203,188,170,.45)}
.linknet small{display:block;font-size:.73rem;color:#a8998a;font-style:italic}
.ftr__legal{padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  font-size:.76rem;color:#a8998a}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:900px){
  .hero__top{grid-template-columns:1fr;gap:26px}
  .hero h1{max-width:none}
  .ftr__top{grid-template-columns:1fr;gap:28px}
}
@media (max-width:600px){
  .mast nav{display:none}
  .sect{grid-template-columns:1fr;gap:0}
  .sect__n{padding-top:0;margin-bottom:.3em;font-size:1.2rem}
  .ftr__legal{flex-direction:column;gap:9px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}