/* ClearFrame Journal and legal pages. Z6 forest and gold tokens, article typography.
   Stands alone: the posts and privacy page load this file only. */
:root{
  --sky:#0a1a0a; --sky2:#0f240f; --sky3:#122012; --line:rgba(201,168,76,.22);
  --slate:#060e06; --slate2:#0f240f; --slate3:#040a04;
  --coral:#c9a84c; --coral2:#dfc474;
  --white:#122012; --ink:#e8e2d4; --mute:#a89e8a;
  --hdr:64px;
  --serif:'Gloock',Georgia,serif; --sans:'Onest',system-ui,sans-serif;
  --r:16px; --shadow:0 18px 50px -20px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 24px);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:500;color:var(--ink);background:var(--sky);line-height:1.55;overflow-x:hidden;padding-top:var(--hdr)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-weight:500;line-height:1.05;letter-spacing:-.01em}
h1,h2,.serif{font-family:var(--serif)}
h3{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:0}
p{max-width:62ch}
.wrap{width:min(1240px,calc(100% - 48px));margin:0 auto}
.mute{color:var(--mute)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral2)}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:15px 24px;border-radius:999px;border:1.5px solid transparent;transition:transform .25s,background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn.coral{background:var(--coral);color:#e8e2d4;border-color:var(--coral)}
.btn.coral:hover{background:var(--coral2);border-color:var(--coral2)}
.btn.hair{border-color:var(--ink);color:var(--ink);background:transparent}
.btn.hair:hover{background:var(--slate);color:#e8e2d4}
.btn .ar{width:18px;height:18px;flex:none}
.link{font-weight:700;color:var(--ink);border-bottom:2px solid var(--coral);padding-bottom:2px;display:inline-block}
.link:hover{color:var(--coral2)}

/* odometer numbers */
.odo{font-family:var(--serif);font-size:clamp(64px,8vw,120px);line-height:1;color:var(--coral);display:inline-flex;height:1em;overflow:hidden;letter-spacing:-.02em}
.odo .col{display:block;height:1em;text-align:center;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.odo .col+.col{margin-left:.02em}
.odo .col span{display:block;height:1em;line-height:1}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;height:var(--hdr);z-index:60;background:rgba(10,26,10,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em}
.mark .dot{width:11px;height:11px;border-radius:50%;background:var(--coral);position:relative}
.mark .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--coral);opacity:0}
.mark:hover .dot::after{animation:pulse 1.1s ease-out infinite}
@keyframes pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.top .acts{display:flex;align-items:center;gap:10px}
.top .acts .btn{padding:11px 18px;font-size:14px}
.top .acts .call{display:inline-block;font-weight:700;font-size:14px;padding:0 10px}
.cbtn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;padding:10px 14px;border-radius:999px;border:1.5px solid rgba(201,168,76,.45)}
.cbtn:hover{background:var(--slate);color:#e8e2d4}
.cbtn i{display:block;width:18px;height:2px;background:currentColor;position:relative}
.cbtn i::before,.cbtn i::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor}
.cbtn i::before{top:-6px}.cbtn i::after{top:6px}

/* contents drawer */
.veil{position:fixed;inset:0;background:rgba(6,14,6,.45);z-index:70;opacity:0;pointer-events:none;transition:opacity .35s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--slate);color:#e8e2d4;z-index:71;transform:translateX(104%);transition:transform .5s cubic-bezier(.16,1,.3,1);overflow-y:auto;padding:28px 28px 48px}
body.nav .veil{opacity:1;pointer-events:auto}
body.nav .drawer{transform:none}
.drawer .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.drawer .x{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(232,226,212,.4);display:grid;place-items:center;font-size:22px;line-height:1}
.drawer .x:hover{background:#122012;color:var(--ink)}
.drawer h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#a89e8a;margin:26px 0 10px;font-weight:700}
.drawer ol{list-style:none}
.drawer ol a{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(232,226,212,.1);font-weight:600;font-size:15px}
.drawer ol a b{color:var(--coral);font-size:11px;letter-spacing:.08em;width:22px;flex:none}
.drawer ol a:hover{color:var(--coral)}
.drawer .pages{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.drawer .pages a{display:block;padding:8px 0;font-weight:600;border-bottom:1px solid rgba(232,226,212,.1)}
.drawer .pages a:hover{color:var(--coral)}
.drawer .start{font-size:15px;line-height:1.5;color:#e8e2d4}

/* article hero */
.ahero{padding:clamp(56px,7vw,96px) 0 clamp(36px,4vw,56px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.ahero .grid{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:end}
.ahero .k{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral2);margin-bottom:18px}
.ahero .k::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--coral)}
.ahero h1{font-size:clamp(36px,4.6vw,68px);line-height:1.02;letter-spacing:-.02em;max-width:18ch}
.ahero h1 i{font-style:normal;color:var(--coral2)}
.ahero .meta{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:22px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ahero .meta span{display:inline-flex;align-items:center;gap:10px}
.ahero .meta span+span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral)}
.ahero .t{padding-bottom:.1em}

/* article body */
.abody{padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px)}
article{max-width:760px}
article p{font-size:17px;line-height:1.75;color:var(--ink);margin-bottom:22px;max-width:66ch}
article > p:first-of-type{font-family:var(--serif);font-size:clamp(21px,2vw,26px);line-height:1.4;color:#e8e2d4;max-width:30ch;margin-bottom:34px}
article h2{font-size:clamp(28px,3vw,40px);line-height:1.1;margin:52px 0 16px;max-width:22ch}
article h2 i{font-style:normal;color:var(--coral2)}
article h3{font-size:20px;margin:32px 0 10px;color:#e8e2d4}
article ul,article ol{margin:0 0 26px 20px;color:var(--ink)}
article li{font-size:16px;line-height:1.7;margin-bottom:12px;padding-left:4px}
article li::marker{color:var(--coral)}
article li b{color:#e8e2d4;font-weight:700}
article a{color:#e8e2d4;border-bottom:1.5px solid var(--coral);padding-bottom:1px;transition:color .25s}
article a:hover{color:var(--coral2)}
article table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15px}
article th,article td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
article th{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
article strong{color:#e8e2d4}
article img{border-radius:12px;margin:0 0 26px}
blockquote{border-left:3px solid var(--coral);padding:8px 0 8px 26px;margin:38px 0;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.3;color:#e8e2d4;max-width:40ch}
blockquote p{font:inherit;color:inherit;margin:0;max-width:none}
.callout{background:#122012;border-radius:var(--r);padding:26px 28px;margin:38px 0;box-shadow:0 1px 0 var(--line);border-left:4px solid var(--coral)}
.callout .k{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--coral2);margin-bottom:10px}
.callout p{margin-bottom:10px;font-size:16px}
.callout p:last-child{margin-bottom:0}
.fine{font-size:13px;line-height:1.7;color:var(--mute);border-top:1px solid var(--line);margin-top:48px;padding-top:22px}
.fine a{color:var(--mute);border-bottom-color:rgba(201,168,76,.45)}
.fine a:hover{color:var(--coral2)}

/* back to the journal, under the article */
.aback{margin-top:40px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.aback::before{content:"";width:28px;height:2px;background:var(--coral);flex:none}

/* close and footer */
.acta,.close{background:var(--slate);color:#e8e2d4;padding:clamp(96px,12vw,160px) 0;text-align:center;position:relative;overflow:hidden}
.acta .big,.close h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5.4vw,80px);line-height:1;letter-spacing:-.01em;max-width:16ch;margin:0 auto 32px}
.acta .big i,.close h2 em{font-style:normal;color:var(--coral)}
.acta .cta,.close .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.acta .ring,.close .ring{position:absolute;width:900px;height:900px;border-radius:50%;border:1px solid rgba(201,168,76,.12);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.acta .ring.r2,.close .ring.r2{width:600px;height:600px}.acta .ring.r3,.close .ring.r3{width:1200px;height:1200px}
.acta .eyebrow,.close .eyebrow{color:#dfc474;margin-bottom:22px}
.acta .proofline,.close .proofline{margin:24px auto 0;font-size:15px;font-weight:600;color:#a89e8a;display:flex;gap:12px;align-items:center;justify-content:center;max-width:none}
.acta .proofline::before,.close .proofline::before{content:"";width:28px;height:2px;background:var(--coral);flex:none}
footer{background:var(--slate3);color:#a89e8a;padding:56px 0 32px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(232,226,212,.1)}
footer .mark{color:#e8e2d4}
footer h5{color:#e8e2d4;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;font-weight:800}
footer ul{list-style:none}
footer li{padding:4px 0}
footer a:hover{color:var(--coral)}
footer .id{margin-top:14px;max-width:38ch}
footer .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:13px}
footer address{font-style:normal;line-height:1.6}

/* lead forms (newsletter) */
.fcard{background:#122012;border-radius:var(--r);padding:30px;box-shadow:0 1px 0 var(--line)}
.fcard h3{font-size:26px;margin-bottom:8px}
.fcard p{font-size:15px;color:var(--mute);margin-bottom:20px}
.fcard label{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.fcard input{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--sky3);color:var(--ink);margin-bottom:14px}
.fcard input:focus{outline:none;border-color:var(--coral);background:#122012}
.fcard .btn{margin-top:4px}
.trust{margin:18px 0 0!important;padding-top:14px;border-top:1px solid var(--sky2);font-size:13px;color:var(--mute);line-height:1.5}
form[data-lead] .sent{padding:6px 0}
form[data-lead] .sent b{display:block;font-family:var(--serif);font-weight:500;font-size:28px;color:#e8e2d4;margin-bottom:8px}
form[data-lead] .sent p{margin:0;font-size:15px;color:var(--mute)}
form[data-lead] .note{display:block;margin-top:10px;font-size:13px;color:var(--coral2)}

.rv{will-change:transform,opacity}

@media (max-width:899px){
  :root{--hdr:58px}
  .wrap{width:min(1240px,calc(100% - 32px))}
  .top .acts .call,.top .acts .btn{display:none}
  .ahero .grid{grid-template-columns:1fr;gap:6px}
  .odo{font-size:56px}
  .ahero h1{max-width:none}
  footer .cols{grid-template-columns:1fr 1fr}
  .acta .ring,.close .ring{display:none}
  blockquote{padding-left:18px}
  .callout{padding:22px 20px}
}
@media (max-width:520px){
  footer .cols{grid-template-columns:1fr}
  .fcard{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* reveals: hidden only when the script is running and motion is allowed */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}