/* ============ Journal (additions on top of the approved landing CSS) ============ */
.links a[aria-current="page"]{color:var(--ink);position:relative}
.links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--spec)}
/* page intro */
.jhero{position:relative;padding:64px 0 36px;overflow:hidden}
.jhero .wrap{position:relative}
.jhero::before{content:"";position:absolute;right:-10%;top:-60%;width:900px;height:800px;background:radial-gradient(closest-side at 40% 40%,rgba(11,138,122,.08),transparent 70%),radial-gradient(closest-side at 62% 55%,rgba(122,63,242,.08),transparent 70%);pointer-events:none}
.jhead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.jhero h1{font-size:clamp(42px,4.8vw,60px);line-height:1.04;letter-spacing:-.025em}
.jhero .lede{max-width:46ch}
.jhead-r{display:flex;align-items:center;gap:12px}
/* filters */
.jfilters{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:16px}
.jrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.jcats{display:flex;flex-wrap:wrap;gap:8px}
.jcat{display:inline-flex;align-items:center;gap:8px;font:500 14.5px/1 var(--sans);color:var(--ink2);background:var(--card);border-radius:999px;padding:10px 16px;box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s,background .2s,color .2s}
.jcat:hover{box-shadow:0 0 0 1px var(--ink);color:var(--ink)}
.jcat i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.jcat small{font-size:12.5px;color:var(--ink3);font-weight:500}
.jcat.on{background:var(--ink);color:#fff;box-shadow:0 8px 20px -12px rgba(20,19,18,.6)}
.jcat.on small{color:rgba(255,255,255,.55)}
.jcount{font-size:13.5px;color:var(--ink3)}
.jtags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.jlbl{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-right:8px}
.jtag{font-size:13px;font-weight:500;color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 10px;transition:border-color .2s,color .2s}
.jtag:hover{border-color:var(--ink3);color:var(--ink)}
.jtag.on{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* cards: same shell as the approved .pc product card */
.jgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.jc{--acc:#141312;position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:12px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;isolation:isolate}
.jc::before{content:"";position:absolute;inset:-1px;border-radius:27px;padding:1.5px;background:linear-gradient(135deg,var(--acc),transparent 55%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
.jc:hover{transform:translateY(-6px);box-shadow:0 44px 70px -40px color-mix(in srgb,var(--acc) 70%,#000),0 2px 6px -2px rgba(20,19,18,.08)}
.jc:hover::before{opacity:1}
.jimg{position:relative;aspect-ratio:3/2;border-radius:17px;overflow:hidden;background:var(--bg2)}
.jimg::after{content:"";position:absolute;inset:0;border-radius:17px;box-shadow:inset 0 0 0 1px rgba(20,19,18,.06);pointer-events:none}
.jimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.jc:hover .jimg img{transform:scale(1.03)}
.jbody{display:flex;flex-direction:column;flex:1;padding:20px 12px 8px}
.jmeta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink3)}
.jmeta time::before{content:"·";margin-right:10px;color:#c2bdb3}
.jcatl{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink2)}
.jcatl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.jc h3{margin-top:12px;font:500 22px/1.22 var(--slab);letter-spacing:-.01em}
.jc p{margin-top:10px;color:var(--ink2);font-size:15.5px;line-height:1.5}
.jfoot{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.jmins{font-size:13px;color:var(--ink3)}
.jc .visit{padding:8px 13px;font-size:14px}
.jc:hover .visit{background:var(--ink);color:#fff;box-shadow:none}
.jc:hover .visit svg{transform:translateX(3px)}
.jc>a.cover{position:absolute;inset:0;z-index:2;border-radius:26px}
/* featured */
.jfeat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;margin-bottom:22px}
.jfeat .jimg{aspect-ratio:3/2}
.jfeat .jbody{padding:30px 30px 18px 34px}
.jflag{align-self:flex-start;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--bg2);color:var(--ink2);margin-bottom:18px}
.jc.jfeat h2{margin-top:14px;font-size:clamp(28px,2.6vw,36px);line-height:1.12;letter-spacing:-.02em}
.jfeat p{font-size:17px;margin-top:14px;max-width:40ch}
.jby{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink)}
.jby img{display:block;width:28px;height:28px}
.jby span{font-weight:500;color:var(--ink3)}
.jfeat .visit{padding:10px 15px;font-size:14.5px}
/* pagination */
.jpag{margin-top:48px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.jpages{display:flex;align-items:center;gap:6px}
.jpages a,.jpages span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 6px;border-radius:999px;font:600 14.5px/1 var(--sans);color:var(--ink2);font-variant-numeric:tabular-nums}
.jpages a:hover{box-shadow:0 0 0 1px var(--ink);color:var(--ink)}
.jpages .on{background:var(--ink);color:#fff}
.jpages .gap{min-width:24px;color:var(--ink3)}
.jpag .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.jpag-m{display:none;font-size:14px;color:var(--ink3)}
/* ---------- article ---------- */
.ahead{position:relative;padding:44px 0 0}
.col{max-width:720px;margin:0 auto}
.crumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink3);margin-bottom:28px}
.crumb a{color:var(--ink2);font-weight:500}.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;color:#c2bdb3}
.ahead .jmeta{font-size:14px}
.ahead h1{margin-top:16px;font-size:clamp(34px,4vw,50px);line-height:1.08;letter-spacing:-.025em}
.ahead .sum{margin-top:18px;font-size:20px;line-height:1.5;color:var(--ink2)}
.ahero{margin-top:28px;position:relative;aspect-ratio:2/1;border-radius:24px;overflow:hidden;background:var(--bg2)}
.ahero img{display:block;width:100%;height:100%;object-fit:cover}
.ahero::after{content:"";position:absolute;inset:0;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(20,19,18,.06)}
/* prose: Wagtail StreamField blocks */
.prose{padding-top:56px;font-size:18px;line-height:1.7;color:var(--ink2)}
.prose>*+*{margin-top:22px}
.prose p strong,.prose li strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--blue) 55%,transparent);transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--blue)}
.prose code{font:500 .86em var(--mono);color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.prose h2{margin-top:54px;font:500 32px/1.18 var(--slab);letter-spacing:-.015em;color:var(--ink)}
.prose h3{margin-top:38px;font:500 23px/1.28 var(--slab);letter-spacing:-.01em;color:var(--ink)}
.prose h2+*,.prose h3+*{margin-top:14px}
.prose ul,.prose ol{list-style:none;display:grid;gap:10px}
.prose li{position:relative;padding-left:28px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.8em;width:10px;height:2px;border-radius:2px;background:var(--ink3)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:6px;background:var(--ink);color:#fff;font:600 11.5px/20px var(--sans);text-align:center}
.prose figure{margin:40px 0}
.prose figure.wide{width:min(960px,calc(100vw - 64px));position:relative;left:50%;transform:translateX(-50%)}
.prose figure .fimg{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--bg2)}
.prose figure .fimg img{display:block;width:100%;height:100%;object-fit:cover}
.prose figure .fimg::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(20,19,18,.06)}
.prose figcaption{margin:12px auto 0;max-width:720px;font-size:14px;line-height:1.5;color:var(--ink3)}
.code{margin-top:30px!important;margin-bottom:30px;border-radius:16px;background:#121214;overflow:hidden;box-shadow:0 26px 50px -30px rgba(20,19,18,.55)}
.code-h{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 16px;border-bottom:1px solid rgba(255,255,255,.07);font:500 12px var(--mono);color:#8b8780}
.code-h b{font-weight:500;color:#d9d5cc}
.code-h .lang{margin-left:auto;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#7d7970}
.code-h button{font:600 12px var(--sans);color:#d9d5cc;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px 10px;cursor:pointer}
.code pre code{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0}
.code pre{margin:0;padding:18px 20px 20px;overflow-x:auto;font:400 14px/1.75 var(--mono);color:#e9e7e3;tab-size:4}
.code .k{color:#c4a8ff}.code .s{color:#7ee0c8}.code .f{color:#8fb0ff}.code .c{color:#7a7589}.code .n{color:#f2b38f}
.prose blockquote{margin:40px 0;position:relative;padding:4px 0 4px 28px}
.prose blockquote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(180deg,#0b8a7a,#2f6bff 30%,#7a3ff2 62%,#ef4a4a)}
.prose blockquote p{font:500 25px/1.38 var(--slab);letter-spacing:-.01em;color:var(--ink)}
.prose blockquote cite{display:block;margin-top:12px;font:500 14px var(--sans);font-style:normal;color:var(--ink3)}
.embed{margin-top:36px!important;margin-bottom:36px}
.embed .frm{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#17151f;display:grid;place-items:center;box-shadow:0 26px 50px -30px rgba(20,19,18,.55)}
.embed .frm::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 70% 30%,rgba(122,63,242,.28),transparent 70%),radial-gradient(closest-side at 25% 80%,rgba(11,138,122,.22),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/36px 36px}
.embed .play{position:relative;width:72px;height:72px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 18px 40px -14px rgba(0,0,0,.6)}
.embed .play svg{margin-left:4px}
.embed .src{position:absolute;left:16px;top:16px;font:600 12px var(--sans);color:#fff;background:rgba(23,21,31,.8);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 12px}
.embed .bar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;font:500 12px var(--mono);color:#cfcbc2}
.embed .bar i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.embed .bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:18%;background:var(--spec)}
/* after the body */
.afoot{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:22px}
.afoot .jtags{gap:6px}
.jprod{position:relative;display:flex;align-items:center;gap:16px;padding:16px 16px 16px 18px;border-radius:20px;background:var(--card);border:1px solid var(--line);transition:background .2s,border-color .2s,box-shadow .25s}
.jprod:hover{background:#fff;border-color:#cfc9bd;box-shadow:0 24px 40px -30px rgba(20,19,18,.35)}
.jprod img{flex:none;width:44px;height:44px;display:block}
.jprod .t{min-width:0}
.jprod .t small{display:block;font:600 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.jprod .t b{display:block;margin-top:3px;font:500 19px/1.2 var(--slab);color:var(--ink)}
.jprod .t>span{display:block;font-size:14px;color:var(--ink2);margin-top:1px}
.jprod .visit{margin-left:auto}
.jprod:hover .visit{background:#2f6bff;color:#fff;box-shadow:none}
.jprod:hover .visit svg{transform:translate(2px,-2px)}
.jprod>a.cover{position:absolute;inset:0;border-radius:20px}
.rel{padding:96px 0 100px}
.rel .proj-head{margin-bottom:40px}
/* homepage block */
.jhome .proj-head{margin-bottom:44px}
.jhome-r{display:flex;align-items:center;gap:12px}
@media (max-width:1100px){.jgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.jgrid>.jc:nth-child(3):last-child{display:none}}
@media (max-width:960px){.jfeat{grid-template-columns:1fr}.jfeat .jbody{padding:22px 12px 8px}}
@media (max-width:700px){
 .jhero{padding:36px 0 24px}.jhero h1{font-size:40px}.jhead{align-items:flex-start}
 .jfilters{margin-top:28px;padding-top:20px}
 .jcat{padding:9px 13px;font-size:14px}
 .jcount{display:none}
 .jgrid{grid-template-columns:minmax(0,1fr);gap:16px}.jgrid>.jc:nth-child(3):last-child{display:flex}
 .jc{border-radius:22px;padding:10px}.jc>a.cover{border-radius:22px}.jc::before{border-radius:23px}.jimg{border-radius:14px}.jimg::after{border-radius:14px}
 .jbody{padding:16px 8px 6px}.jc h3{font-size:21px}
 .jfeat{margin-bottom:16px}.jc.jfeat h2{font-size:26px}.jfeat p{font-size:16px}.jflag{margin-bottom:14px}
 .jfeat .jfoot{flex-direction:column;align-items:flex-start;gap:14px}
 .jpag{margin-top:32px}.jpages{display:none}.jpag-m{display:block}
 .ahead{padding-top:24px}.crumb{margin-bottom:20px}.ahead h1{font-size:34px}.ahead .sum{font-size:18px}
 .ahero{border-radius:18px;aspect-ratio:3/2}.ahero::after{border-radius:18px}
 .prose{padding-top:36px;font-size:17px}.prose h2{font-size:26px;margin-top:44px}.prose h3{font-size:20px;margin-top:32px}
 .prose figure.wide{width:100%;left:0;transform:none}.prose figure .fimg{border-radius:14px}.prose figure .fimg::after{border-radius:14px}
 .code{border-radius:14px}.code pre{font-size:12.5px;line-height:1.7;padding:14px 16px 16px}.code-h{padding:0 8px 0 14px}.code-h .lang{display:none}.code-h button{margin-left:auto}
 .prose blockquote{padding-left:20px}.prose blockquote p{font-size:21px}
 .embed .frm{border-radius:14px}.embed .play{width:56px;height:56px}
 .jprod{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:16px}.jprod .visit{grid-column:1/-1;margin-left:0;justify-self:start}
 .rel{padding:70px 0}.rel .proj-head,.jhome .proj-head{margin-bottom:28px}
 .jhome-r{flex-wrap:wrap}
}

/* Integration with the live studio stylesheets.
   studio.css already styles .prose, h1–h3 and links. These resets keep the
   journal column on the mockup's type scale without changing other pages,
   because this file is only loaded with the journal. */
.journal-page { overflow-x: clip; }
.col { width: 100%; min-width: 0; }
.prose { max-width: none; }
.prose p,
.prose ul,
.prose ol { margin: 0; padding-left: 0; }
.prose .rich-text > * + * { margin-top: 22px; }
.prose li + li { margin-top: 0; }
.jgrid .jc p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jc .jbody,
.jprod .t,
.jprod .visit { pointer-events: none; }
.rel h2,
.jhome h2 {
  font: 500 clamp(34px, 4.3vw, 52px)/1.08 var(--slab);
  letter-spacing: -0.02em;
}
.embed .frm iframe,
.embed .frm .responsive-object,
.embed .frm .responsive-object iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed .frm .responsive-object { padding-bottom: 0 !important; }
.code,
.prose,
.ahero,
.jhero .wrap,
.ahead .wrap { min-width: 0; }
.code pre { max-width: 100%; }