/* HonestFace site: ink + gold, Playfair masthead, Jost caps, SF body. */
:root{
  --ink:#080706;--base:#100f0d;--raise:#171512;--raise2:#1e1b17;
  --hair:rgba(240,226,196,.10);--hair2:rgba(240,226,196,.18);
  --gold:#c9a24a;--gold-l:#e7c478;--gold-d:#9c7629;--cream:#f6f0e4;
  --on:#f4efe5;--on2:#aea392;--on3:#7d7465;
  --display:"Playfair Display",Georgia,serif;
  --caps:"Jost","Avenir Next",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --spring:cubic-bezier(.32,.72,0,1);--out:cubic-bezier(.22,1,.36,1);
  --gut:max(20px,env(safe-area-inset-left));
  color-scheme:dark
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--on);font:17px/1.62 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(231,196,120,.35)}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px;border-radius:6px}

/* Type */
.caps{font:500 11.5px/1.4 var(--caps);letter-spacing:.34em;text-transform:uppercase;color:var(--on2);margin:0}
.gold{color:var(--gold-l)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em;text-wrap:balance;margin:0}
em{font-style:italic;color:var(--gold-l)}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--on2);max-width:54ch}
.fine{font-size:14px;color:var(--on3)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* Island nav */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 16px;border-radius:999px;width:max-content;max-width:calc(100% - 24px);
  background:rgba(20,18,15,.58);backdrop-filter:saturate(170%) blur(24px);-webkit-backdrop-filter:saturate(170%) blur(24px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 .5px rgba(240,226,196,.16),0 12px 40px rgba(0,0,0,.45);transition:transform .6s var(--spring)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:#16140f}}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:400 19px/1 var(--display);margin-right:14px;white-space:nowrap}
.brand svg{width:24px;height:24px}
.nav .links{display:flex;gap:2px}
.nav .links a{text-decoration:none;color:var(--on2);font-size:14.5px;padding:9px 14px;border-radius:999px;transition:color .25s,background .25s}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--on);background:rgba(255,255,255,.06)}
.pill{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 14.5px var(--body);color:#191307;background:linear-gradient(180deg,#eccb85,#c9a24a);padding:9px 9px 9px 16px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 22px rgba(201,162,74,.25);transition:transform .35s var(--spring)}
.pill i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.12);font-style:normal;transition:transform .45s var(--spring)}
.pill:hover i{transform:translate(2px,-1px) scale(1.06)}
.pill:active{transform:scale(.97)}
.burger{display:none;width:42px;height:42px;border:0;background:rgba(255,255,255,.06);border-radius:50%;position:relative;cursor:pointer;color:var(--on)}
.burger span{position:absolute;left:13px;width:16px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .5s var(--spring),top .5s var(--spring)}
.burger span:first-child{top:17px}.burger span:last-child{top:24px}
.menu-open .burger span:first-child{top:20.5px;transform:rotate(45deg)}
.menu-open .burger span:last-child{top:20.5px;transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:55;background:rgba(8,7,6,.86);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);display:flex;flex-direction:column;justify-content:center;padding:90px 28px 40px;opacity:0;pointer-events:none;transition:opacity .45s var(--out)}
.sheet a{font:400 40px/1.25 var(--display);text-decoration:none;color:var(--on);opacity:0;transform:translateY(28px);transition:opacity .6s var(--out),transform .7s var(--spring)}
.sheet .caps{margin-top:34px;opacity:0;transition:opacity .6s .35s}
.menu-open .sheet{opacity:1;pointer-events:auto}
.menu-open .sheet a{opacity:1;transform:none}
.menu-open .sheet a:nth-child(2){transition-delay:.05s}.menu-open .sheet a:nth-child(3){transition-delay:.1s}.menu-open .sheet a:nth-child(4){transition-delay:.15s}.menu-open .sheet a:nth-child(5){transition-delay:.2s}
.menu-open .sheet .caps{opacity:1}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 10px 0 26px;border-radius:999px;text-decoration:none;font:500 16.5px var(--body);transition:transform .35s var(--spring),box-shadow .35s}
.btn i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-style:normal;transition:transform .5s var(--spring)}
.btn:hover i{transform:translate(3px,-2px) scale(1.05)}
.btn:active{transform:scale(.975)}
.btn.gold{color:#191307;background:linear-gradient(180deg,#eccb85,#c9a24a);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 40px rgba(201,162,74,.25)}
.btn.gold i{background:rgba(0,0,0,.12)}
.btn.ghost{color:var(--on);box-shadow:inset 0 0 0 1px var(--hair2)}
.btn.ghost i{background:rgba(255,255,255,.07)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(231,196,120,.45)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Hero: a magazine cover framed like a viewfinder */
.cover{position:relative;min-height:100dvh;padding:120px 0 70px;display:flex;flex-direction:column;justify-content:center}
.cover .frame{position:absolute;inset:86px 18px 22px;pointer-events:none}
.cover .frame b{position:absolute;width:34px;height:34px;border-color:rgba(231,196,120,.55);border-style:solid;border-width:0}
.cover .frame b:nth-child(1){left:0;top:0;border-top-width:1.5px;border-left-width:1.5px}
.cover .frame b:nth-child(2){right:0;top:0;border-top-width:1.5px;border-right-width:1.5px}
.cover .frame b:nth-child(3){left:0;bottom:0;border-bottom-width:1.5px;border-left-width:1.5px}
.cover .frame b:nth-child(4){right:0;bottom:0;border-bottom-width:1.5px;border-right-width:1.5px}
.issue{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--hair);padding-bottom:16px;margin-bottom:46px}
.cover-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:56px;align-items:center}
.mast{font-size:clamp(52px,6.6vw,104px);line-height:.96;letter-spacing:-.03em}
.mast .l2{display:block;padding-left:.9em}
.cover .lede{margin:30px 0 34px}
.cover .meta{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.cover .meta span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--on2)}
.cover .meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* iPad frames */
.ipad{position:relative;border-radius:clamp(22px,2.6vw,38px);padding:clamp(8px,1vw,14px);background:linear-gradient(160deg,#2a2622,#14120f 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.12),0 50px 120px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.6)}
.ipad>img,.ipad>.screen{height:auto;border-radius:clamp(14px,1.7vw,26px);width:100%;aspect-ratio:4/3;object-fit:cover;overflow:hidden;background:#000}
.callout{position:absolute;z-index:3;display:flex;gap:10px;align-items:center;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.35;color:var(--on);background:rgba(24,21,17,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 .5px rgba(240,226,196,.2),0 18px 40px rgba(0,0,0,.45);max-width:250px}
.callout b{font-weight:600}
.callout .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold-l);box-shadow:0 0 0 4px rgba(231,196,120,.18)}

/* Live camera demo */
.cam{position:relative}
.cam .screen{position:relative}
.cam .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--out),transform 1.4s var(--out);transform:scale(1.04)}
.cam .shot.on{opacity:1;transform:none}
.cam .shade{position:absolute;inset:0;background:radial-gradient(ellipse 30% 44% at 50% 47%,transparent 98%,rgba(0,0,0,.42) 100%)}
.cam svg.hud{position:absolute;inset:0;width:100%;height:100%}
.hud .oval{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2;transition:stroke .4s}
.hud .lvl{stroke:rgba(255,255,255,.5);stroke-width:1}
.cam.aligned .hud .oval{stroke:var(--gold-l);filter:drop-shadow(0 0 8px rgba(231,196,120,.7))}
.cam .count{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(70px,9vw,140px)/1 var(--display);color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.5);opacity:0;transform:scale(1.25);transition:opacity .25s,transform .45s var(--spring)}
.cam .count.on{opacity:1;transform:none}
.cam .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam .flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.cam .say{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);white-space:nowrap;padding:9px 16px;border-radius:999px;font-size:clamp(12px,1.1vw,15px);background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .3s}
.cam.aligned .say{background:rgba(201,162,74,.92);color:#191307}
.cam .read{position:absolute;top:6%;left:5%;font:500 11px/1.7 var(--mono);color:rgba(255,255,255,.75);letter-spacing:.06em}
.cam .angles{position:absolute;top:6%;right:5%;display:flex;gap:6px}
.cam .angles span{font:500 10px var(--caps);letter-spacing:.18em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.45);color:rgba(255,255,255,.7);transition:background .3s,color .3s}
.cam .angles span.done{background:rgba(231,196,120,.9);color:#191307}
.cam .angles span.now{box-shadow:inset 0 0 0 1px var(--gold-l);color:#fff}
.shutter{position:absolute;top:50%;width:clamp(44px,5vw,70px);height:clamp(44px,5vw,70px);margin-top:calc(clamp(44px,5vw,70px)/-2);border-radius:50%;box-shadow:inset 0 0 0 3px #fff;background:radial-gradient(circle,rgba(255,255,255,.95) 58%,transparent 60%)}
.shutter.l{left:3%}.shutter.r{right:3%}

/* Bands & chapters */
.band{padding:clamp(96px,12vw,170px) 0;position:relative}
.band.alt{background:var(--base)}
.rail{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;padding:26px var(--gut);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rail span{font:500 11px var(--caps);letter-spacing:.3em;text-transform:uppercase;color:var(--on3)}
.chapter{display:flex;align-items:baseline;gap:18px;margin-bottom:26px}
.chapter .no{font:italic 400 clamp(54px,6vw,92px)/.8 var(--display);color:transparent;-webkit-text-stroke:1px rgba(231,196,120,.7)}
h2.big{font-size:clamp(40px,5.2vw,78px);line-height:1.02;letter-spacing:-.025em}
.split{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(40px,6vw,90px);align-items:center}
.split.flip{grid-template-columns:1.14fr .86fr}
.split.flip>:first-child{order:2}
.prose p{color:var(--on2);margin:22px 0 0;max-width:52ch}
.prose p.drop::first-letter{float:left;font:400 74px/.8 var(--display);color:var(--gold-l);margin:8px 12px 0 0}
.points{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:16px}
.points li{position:relative;padding-left:32px;color:var(--on2)}
.points li::before{content:"";position:absolute;left:0;top:12px;width:18px;height:1px;background:var(--gold)}
.points b{color:var(--on);font-weight:500}
figure{margin:0}
figcaption.fig{margin-top:16px;font:500 11px var(--caps);letter-spacing:.26em;text-transform:uppercase;color:var(--on3)}
figcaption.fig b{color:var(--gold-l);font-weight:500}

/* Compare */
.wipe{position:relative;aspect-ratio:3/4;border-radius:30px;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:0 50px 120px rgba(0,0,0,.6),inset 0 0 0 1px var(--hair);--x:50%}
.wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.wipe .after{clip-path:inset(0 0 0 var(--x))}
.wipe .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.5)}
.wipe .knob{position:absolute;top:50%;left:var(--x);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:#191307;box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .3s var(--spring)}
.wipe:active .knob{transform:scale(.92)}
.tag{position:absolute;top:18px;padding:7px 12px;border-radius:999px;font:500 10.5px var(--caps);letter-spacing:.24em;text-transform:uppercase;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tag.l{left:18px}.tag.r{right:18px;background:var(--gold-l);color:#191307}
.pair{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:end}
.quote{font:italic 400 clamp(26px,2.8vw,40px)/1.25 var(--display);color:var(--on);margin:0;max-width:22ch}
.quote::before{content:"“";display:block;font-size:2.4em;line-height:.6;color:var(--gold)}

/* Consent paper */
.paper{position:relative;background:var(--cream);color:#2d2620;border-radius:28px;padding:44px;box-shadow:0 50px 120px rgba(0,0,0,.55);transform:rotate(-1.6deg)}
.paper .caps{color:#8a7d68}
.paper h3{font-size:34px;margin:10px 0 12px}
.paper p{color:#5b5045;margin:0;font-size:16px}
.sig{margin-top:22px;border-bottom:1px solid #d9c9a3;padding-bottom:6px}
.sig svg{width:72%;height:70px;fill:none;stroke:#2d2620;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900}
.paper.in .sig svg{animation:draw 2.2s .3s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.stamp{position:absolute;right:30px;bottom:34px;width:120px;height:120px;border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--gold-d);box-shadow:inset 0 0 0 2.5px var(--gold-d),inset 0 0 0 8px var(--cream),inset 0 0 0 9px var(--gold-d);transform:rotate(-12deg) scale(1.8);opacity:0}
.stamp span{font:500 10.5px var(--caps);letter-spacing:.32em;text-transform:uppercase}
.stamp b{font:400 16px var(--display);margin-top:2px}
.paper.in .stamp{animation:stamp .7s 2.4s var(--spring) forwards}
@keyframes stamp{to{opacity:1;transform:rotate(-12deg) scale(1)}}
.stack{position:relative;padding:0 0 70px 60px}
.stack .ipad{transform:rotate(1.2deg)}
.stack .paper{position:absolute;left:0;bottom:0;width:58%}

/* Records: three screens, the middle one raised */
.cascade{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:22px;align-items:center;margin-top:70px}
.cascade .ipad:nth-child(2){transform:translateY(-34px);z-index:2}
/* Cipher */
.cipher{font:500 clamp(12px,1.05vw,14.5px)/1.9 var(--mono);color:var(--on3);background:#0c0b09;border-radius:26px;padding:clamp(22px,3vw,40px);box-shadow:inset 0 0 0 1px var(--hair);min-height:260px;overflow:hidden;word-break:break-all}
.cipher .k{color:var(--gold-l)}
.cipher .plain{color:var(--on)}
.cipher .row{display:block}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.plan{position:relative;background:var(--raise);border-radius:30px;padding:34px 32px 30px;box-shadow:inset 0 0 0 1px var(--hair);transition:transform .6s var(--spring)}
.plan:hover{transform:translateY(-6px)}
.plan.feat{background:linear-gradient(165deg,#2a2218,#171512 58%);box-shadow:inset 0 0 0 1px rgba(231,196,120,.4),0 30px 80px rgba(201,162,74,.08)}
.plan h3{font-size:36px;margin:12px 0 2px}
.price{font:400 50px/1.1 var(--display);margin:18px 0 2px;font-variant-numeric:tabular-nums}
.price small{font:400 16px var(--body);color:var(--on2);margin-left:4px}
.plan ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:11px;font-size:15.5px;color:var(--on2)}
.plan li{display:flex;gap:11px}
.plan li::before{content:"";flex:none;width:14px;height:8px;margin-top:7px;border-left:1.5px solid var(--gold-l);border-bottom:1.5px solid var(--gold-l);transform:rotate(-45deg)}
.toggle{display:inline-flex;padding:4px;border-radius:999px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--hair);margin-top:30px;position:relative}
.toggle button{position:relative;z-index:1;border:0;background:none;color:var(--on2);font:500 14.5px var(--body);padding:10px 20px;border-radius:999px;cursor:pointer;transition:color .3s}
.toggle button[aria-pressed=true]{color:#191307}
.toggle .thumb{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:linear-gradient(180deg,#eccb85,#c9a24a);transition:transform .5s var(--spring),width .5s var(--spring)}
.save{font-size:12px;margin-left:6px;color:var(--gold-l)}
.toggle button[aria-pressed=true] .save{color:#191307}

/* Journal */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:54px}
.post{text-decoration:none;display:block}
.post .img{aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--raise)}
.post .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.post:hover .img img{transform:scale(1.04)}
.post .caps{margin:20px 0 10px}
.post h3{font-size:26px;line-height:1.2}
.post p{color:var(--on2);font-size:15.5px;margin:10px 0 0}

/* FAQ */
.faq{max-width:860px;margin:50px auto 0;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font:400 22px/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:8px;border-right:1.5px solid var(--gold-l);border-bottom:1.5px solid var(--gold-l);transform:rotate(45deg);transition:transform .45s var(--spring)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{margin:0 0 24px;color:var(--on2);max-width:64ch}

/* End */
.end{text-align:center;padding:clamp(120px,15vw,210px) 0}
.end h2{font-size:clamp(48px,8vw,120px);line-height:.98;letter-spacing:-.03em}
.end .mark{width:84px;height:84px;margin:0 auto 34px}
.end .ctas{justify-content:center;margin-top:40px}

/* Footer */
.foot{border-top:1px solid var(--hair);padding:64px 0 46px;background:var(--base)}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.foot .cols a{display:block;text-decoration:none;color:var(--on2);margin:8px 0;font-size:15px;transition:color .2s}
.foot .cols a:hover{color:var(--on)}
.foot .caps{margin-bottom:12px}
.foot .legal{margin-top:46px;padding-top:24px;border-top:1px solid var(--hair);font-size:13px;color:var(--on3)}

/* Article + legal pages */
.page-head{padding:150px 0 40px}
.page-head h1{font-size:clamp(44px,6vw,84px);line-height:1;letter-spacing:-.025em;margin-top:18px}
.page-head .lede{margin-top:22px}
.article{max-width:740px;margin:0 auto;padding:0 var(--gut) 120px}
.article h2{font-size:clamp(28px,3vw,38px);margin:56px 0 14px}
.article h3{font-size:24px;margin:34px 0 10px}
.article p,.article li{color:#cfc5b4;font-size:18px;line-height:1.75}
.article ul,.article ol{padding-left:22px}
.article li{margin:8px 0}
.article a{color:var(--gold-l)}
.article .meta{font-size:14px;color:var(--on3)}
.article figure{margin:40px 0}
.article figure img{border-radius:20px}
.article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.article th,.article td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--hair);vertical-align:top;color:#cfc5b4}
.article th{font:500 11px var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--on2)}
.article pre{white-space:pre-wrap;font-size:13px;color:var(--on2)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.tabs a{text-decoration:none;font-size:14px;padding:8px 14px;border-radius:999px;color:var(--on2);box-shadow:inset 0 0 0 1px var(--hair)}
.tabs a[aria-current]{color:#191307;background:var(--gold-l);box-shadow:none}

/* Reveal */
.js .rv{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity 1s var(--out),transform 1.1s var(--spring),filter 1s var(--out)}
.js .rv.in{opacity:1;transform:none;filter:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

@media (max-width:980px){
  .nav .links{display:none}.burger{display:block}.nav{gap:8px}
  .cover-grid,.split,.split.flip,.pair{grid-template-columns:1fr;gap:48px}
  .split.flip>:first-child{order:0}
  .mast .l2{padding-left:0}
  .plans,.posts{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr 1fr}
  .cascade{grid-template-columns:1fr}
  .cascade .ipad:nth-child(2){transform:none}
  .stack{padding:0}.stack .ipad{transform:none}.stack .paper{position:relative;width:auto;margin-top:-40px;transform:none}
  .callout{display:none}
  .cover .frame{inset:76px 10px 12px}
}
@media (max-width:560px){
  .paper{padding:30px 24px}.stamp{width:92px;height:92px;right:16px;bottom:22px}.stamp b{font-size:13px}
  .cam .angles{display:none}
  .issue span:nth-child(2){display:none}
  .foot .cols{grid-template-columns:1fr}
  .btn{min-height:52px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none;filter:none}
  .sig svg{stroke-dashoffset:0}.stamp{opacity:1;transform:rotate(-12deg)}
}
@media (prefers-reduced-transparency:reduce){.nav,.callout,.sheet{background:#16140f;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Article drop cap + auth forms */
.article p.drop::first-letter{float:left;font:400 78px/.8 var(--display);color:var(--gold-l);margin:8px 12px 0 0}
.authform label{display:block;font:500 11px var(--caps);letter-spacing:.3em;text-transform:uppercase;color:var(--on2);margin-top:26px}
.authform input{width:100%;font:19px var(--body);padding:12px 0;border:0;border-bottom:1px solid var(--hair2);background:transparent;color:var(--on)}
.authform input:focus{outline:none;border-bottom-color:var(--gold-l)}
.authform button{margin-top:32px;font:500 17px var(--body);color:#191307;background:linear-gradient(180deg,#eccb85,#c9a24a);border:0;border-radius:999px;padding:0 30px;min-height:54px;cursor:pointer}
.authform button:disabled{opacity:.45;cursor:default}
.status{margin-top:24px;font-size:17px;color:var(--on2)}
.status.ok{color:#7fd0a4}.status.err{color:#ff8a80}
.hidden{display:none!important}

/* Utilities (no inline styles: the CSP blocks them) */
.u-0f873e{margin-top:48px}
.u-10efee{max-width:900px}
.u-116e33{text-decoration:none}
.u-11f87e{margin-top:34px}
.u-1baffc{margin-top:16px;max-width:36ch}
.u-200a92{text-align:left}
.u-2f89a9{color:var(--on);text-decoration:none}
.u-3ae1f6{margin-top:20px}
.u-47c857{margin-top:28px}
.u-47ce67{aspect-ratio:16/10;object-fit:cover;width:100%}
.u-4a909e{margin-top:18px}
.u-53896a{margin-top:0}
.u-6a2c44{padding-bottom:40px}
.u-7aa935{left:-34px;bottom:16%}
.u-8dbb5f{max-width:920px;padding-bottom:0}
.u-9781f0{right:-24px;top:-22px}
.u-aa3a2f{margin-top:26px}
.u-b0043e{margin-top:16px}
.u-b2cc00{max-width:740px}
.u-b42810{right:-18px;bottom:22%}
.u-b89a77{margin-top:22px}
.u-c451fd{position:relative}
.u-cb63e9{margin-top:56px}
.u-cd30fa{max-width:15ch}
.u-df74e8{overflow-x:auto}
.u-ede874{align-items:end}
.u-fb894b{padding-bottom:120px}
.cipher .row.gap{margin-top:14px}

/* Copy protection (form fields stay selectable) */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;pointer-events:auto}
@media print{body{display:none}}