/* Intraface Ghost theme. The first half is intraface.cc's own design system, kept identical to
   public/index.html (tokens, grid, hairlines, header, footer, sketches); the second half is the blog. */

:root{
  --bg:#f4f3ee; --ink:#121211; --ink2:#2b2b29; --muted:#6c6b66; --faint:#a3a29c;
  --line:rgba(18,18,17,.24); --hair:rgba(18,18,17,.1); --tint:rgba(18,18,17,.05); --ok:#2f6b41;
  --sans:var(--gh-font-body,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif);
  --display:var(--gh-font-heading,"Inter Tight","Inter",ui-sans-serif,system-ui,sans-serif);
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --hand:"Architects Daughter","Comic Sans MS",cursive;
  --g:clamp(16px,4.4vw,72px); --pad:clamp(18px,2.75vw,44px); --sp:clamp(56px,8vw,128px);
  --fs-h1:clamp(40px,4.75vw,80px); --fs-h2:clamp(30px,2.95vw,50px); --fs-big:clamp(34px,4.5vw,76px);
  --fs-body:clamp(14px,1.1vw,17px); --fs-small:clamp(12px,.86vw,13.5px); --fs-nav:clamp(13px,.95vw,15px);
  --hdr:clamp(56px,4.6vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}
/* Ghost injects the admin accent colour in its own :root rule after this file; pin it to ink. */
:root:root{--ghost-accent-color:#121211}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
section,footer{position:relative;scroll-margin-top:var(--hdr)}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(100% - 2*var(--g),1600px);margin-inline:auto;position:relative}

/* dashed hairlines */
.hl,.vl{position:absolute;pointer-events:none;z-index:1}
.hl{height:1px;left:0;right:0;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 9px);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) var(--d,0s)}
.vl{width:1px;top:0;bottom:0;background:repeating-linear-gradient(180deg,var(--line) 0 4px,transparent 4px 9px);transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ease) var(--d,0s)}
.hl.in,.vl.in{transform:none}
.bl{position:relative}
.bl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:repeating-linear-gradient(180deg,var(--line) 0 4px,transparent 4px 9px);transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ease) .15s;z-index:1}
.bl.in::before{transform:none}

/* reveal primitives */
.r{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.r.in{opacity:1;transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln>span{display:inline-block;text-wrap:balance;transform:translateY(112%);transition:transform 1.15s var(--ease) var(--d,0s)}
.in .ln>span{transform:none}

/* type */
.h1{font-family:var(--display);font-weight:400;font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.025em}
.h2{font-family:var(--display);font-weight:400;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.022em}
.big{font-family:var(--display);font-weight:400;font-size:var(--fs-big);line-height:1.06;letter-spacing:-.028em}
.label{font-size:var(--fs-small);color:var(--muted);margin-bottom:clamp(14px,1.6vw,24px)}
.muted{color:var(--muted)}
.lead{color:var(--muted);max-width:44ch}
.mono{font-family:var(--mono)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);font-size:var(--fs-nav);padding:.72em 1.15em;border-radius:2px;transition:background .25s}
.btn:hover{background:#34342f}
.tlink{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-nav);color:var(--ink)}
.tlink svg{transition:transform .35s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}
.ctas{display:flex;align-items:center;gap:clamp(16px,2.2vw,28px);flex-wrap:wrap}

/* header */
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr);background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .4s}
.hdr-in{height:100%;display:flex;align-items:center;padding-inline:var(--pad);gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:clamp(18px,1.45vw,22px);letter-spacing:-.035em}
.mark{width:1.05em;height:1.05em;overflow:visible}
.nav{margin-left:auto;display:flex;gap:clamp(18px,3.4vw,52px);font-size:var(--fs-nav);color:var(--ink2)}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1);transform-origin:left}
.nav a.on{color:var(--ink)}
.nav .nav-m{display:none}
.hdr .btn{margin-left:clamp(12px,3.4vw,52px)}
.menu{display:none;font-size:var(--fs-nav);padding:8px 2px}
.hdr-decor{position:absolute;inset:0;pointer-events:none;transition:opacity .5s}
.hdr.scrolled{box-shadow:0 1px 0 var(--hair)}
.hdr.scrolled .hdr-decor,.hdr.scrolled>.hl{opacity:0;transition:opacity .4s}

/* Resources dropdown (same markup and styles on intraface.cc and the blog) */
.dd{position:relative;display:flex;align-items:center}
.dd-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 0;font-size:inherit;color:inherit;position:relative}
.dd-btn svg{width:9px;height:9px;transition:transform .3s var(--ease)}
.dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-btn.on{color:var(--ink)}
.dd-btn.on::after{content:"";position:absolute;left:0;right:15px;bottom:0;height:1px;background:var(--ink)}
.dd-menu{position:absolute;top:calc(100% + 16px);left:50%;min-width:300px;background:var(--bg);border:1px solid var(--ink);outline:1px dashed var(--line);outline-offset:6px;box-shadow:0 24px 48px -24px rgba(18,18,17,.35);padding:6px;opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .2s ease,transform .3s var(--ease),visibility 0s linear .3s;z-index:60}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .3s var(--ease)}
@media (hover:hover) and (min-width:901px){.dd:hover .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .3s var(--ease)}.dd:hover .dd-btn svg{transform:rotate(180deg)}}
.nav .dd-menu a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:10px 12px;opacity:1!important;transform:none!important}
.nav .dd-menu a::after{display:none}
.dd-menu a:hover,.dd-menu a:focus-visible{background:var(--tint);outline:none}
.dd-menu .ico{grid-row:span 2;width:30px;height:30px;border:1px dashed var(--line);display:grid;place-items:center;color:var(--ink)}
.dd-menu .ico svg{width:14px;height:14px}
.dd-menu b{font-weight:500;color:var(--ink);font-size:14px;line-height:1.2}
.dd-menu small{color:var(--muted);font-size:12.5px;line-height:1.35}

/* grid */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.span2{grid-column:span 2}.span3{grid-column:span 3}
.cell{padding:var(--sp) var(--pad)}

/* footer */
.foot-cols .cell{padding:clamp(48px,5vw,80px) var(--pad);text-align:center}
.foot-brand .logo{font-size:clamp(26px,2.4vw,38px);justify-content:center}
.foot-brand p{color:var(--muted);margin-top:16px;font-size:var(--fs-body)}
.foot-brand small{display:block;color:var(--muted);margin-top:18px;font-size:var(--fs-body)}
.foot-cols h5{font-weight:400;font-size:clamp(15px,1.3vw,19px);margin-bottom:16px}
.foot-cols ul{list-style:none;display:grid;gap:12px;color:var(--muted);font-size:var(--fs-body)}
.foot-cols ul a:hover{color:var(--ink)}
.foot-art{position:relative;padding:clamp(20px,3vw,48px) 0 clamp(28px,4vw,64px)}
.foot-art .sk{display:block;width:min(100% - 2*var(--g),1400px);margin:0 auto;aspect-ratio:1200/380}

/* pencil sketches draw themselves in when revealed */
.sk{overflow:visible}
.sk path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease) var(--dl,0s)}
.in .sk path,.sk.in path{stroke-dashoffset:0}
.sk text{opacity:0;transition:opacity .8s ease 1.1s}
.in .sk text,.sk.in text{opacity:1}

/* ================= the blog ================= */

/* page head: label, headline, intro */
.page-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.page-head .cell{padding-bottom:clamp(36px,4vw,64px)}
.page-head .cell:last-child{display:flex;align-items:flex-end}
.crumb{display:inline-flex;align-items:center;gap:8px}
.crumb a:hover{color:var(--ink)}

/* the plate: the framed cover, same as the hero film card */
.plate{position:relative;margin:0;background:var(--bg);border:1px solid var(--ink);outline:1px dashed var(--line);outline-offset:9px;box-shadow:0 40px 70px -42px rgba(18,18,17,.45);overflow:visible}
.plate-bar{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;border-bottom:1px dashed var(--line);font:400 11.5px/1 var(--mono);color:var(--ink2);white-space:nowrap;overflow:hidden}
.plate-bar svg{width:11px;height:11px;flex:none}
.plate-bar b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.plate-bar .sp{flex:1}
.plate-bar .muted{color:var(--muted)}
.plate-art{position:relative;aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.plate-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate-art .sk{position:absolute;inset:0;width:100%;height:100%}
.plate figcaption{padding:10px 12px;border-top:1px dashed var(--line);font-size:var(--fs-small);color:var(--muted)}

/* featured post on the blog home */
.feature{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.feature-txt{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.6vw,22px)}
.feature-txt .h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.feature-art{padding:var(--sp) var(--pad)}
.feature-ex{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.meta{font:400 12px/1.4 var(--mono);color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 12px}
.meta .dot::before{content:"·"}

/* post rows, like the site's use-case list */
.rows{padding-bottom:var(--sp)}
.row{position:relative;display:grid;grid-template-columns:25% minmax(0,1fr) auto auto;gap:clamp(16px,2vw,32px);align-items:baseline;padding:clamp(20px,2vw,30px) var(--pad);opacity:0;transition:opacity 1s var(--ease) var(--d,0s),background .3s}
.row.in{opacity:1}
.row:hover{background:var(--tint)}
.row-date{font:400 12px/1.4 var(--mono);color:var(--muted)}
.row-main{display:grid;gap:6px}
.row-title{font-family:var(--display);font-size:clamp(19px,1.6vw,25px);letter-spacing:-.015em;line-height:1.2}
.row-ex{color:var(--muted);font-size:var(--fs-body);max-width:62ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-tag{font:400 11.5px/1 var(--mono);color:var(--muted);border:1px dashed var(--line);padding:5px 7px;white-space:nowrap}
.row .a{color:var(--muted);transition:transform .4s var(--ease),color .3s}
.row:hover .a{transform:translateX(5px);color:var(--ink)}
.rows-end{position:relative;height:1px}
.empty{padding:var(--sp) var(--pad);color:var(--muted)}

/* pagination */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(20px,2.4vw,32px) var(--pad);font:400 12.5px/1 var(--mono);color:var(--muted)}
.pager a{color:var(--ink)}
.pager a:hover{text-decoration:underline;text-underline-offset:4px}

/* post */
.post-head{text-align:center;padding:clamp(48px,6vw,104px) var(--pad) clamp(36px,4vw,56px)}
.post-head .label{display:flex;justify-content:center;gap:10px}
.post-title{font-family:var(--display);font-weight:400;font-size:clamp(36px,4.2vw,68px);line-height:1.05;letter-spacing:-.025em;max-width:20ch;margin:0 auto;text-wrap:balance}
.post-ex{color:var(--muted);font-size:clamp(16px,1.3vw,20px);line-height:1.5;max-width:52ch;margin:clamp(16px,1.8vw,26px) auto 0;text-wrap:pretty}
.post-head .meta{justify-content:center;margin-top:clamp(18px,2vw,28px)}
.post-cover{width:min(100% - 2*var(--g),1040px);margin:0 auto clamp(48px,6vw,96px)}
.post-foot{width:min(100% - 2*var(--g),720px);margin:clamp(40px,5vw,72px) auto 0;padding-top:20px;border-top:1px dashed var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags a{font:400 11.5px/1 var(--mono);color:var(--muted);border:1px dashed var(--line);padding:6px 8px}
.tags a:hover{color:var(--ink);border-color:var(--ink)}
.copy-link{font:400 12px/1 var(--mono);color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.copy-link:hover{color:var(--ink)}

/* article body: a 720px column, with room for wide and full-width cards */
.gh-content{display:grid;grid-template-columns:[full-start] minmax(var(--g),1fr) [wide-start] minmax(0,160px) [main-start] min(720px,100% - 2*var(--g)) [main-end] minmax(0,160px) [wide-end] minmax(var(--g),1fr) [full-end];font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.72;color:var(--ink2)}
.gh-content>*{grid-column:main;margin-top:1.15em}
.gh-content>:first-child{margin-top:0}
.gh-content .kg-width-wide{grid-column:wide}
.gh-content .kg-width-full{grid-column:full}
.gh-content h2,.gh-content h3,.gh-content h4{font-family:var(--display);font-weight:400;color:var(--ink);letter-spacing:-.018em;line-height:1.18}
.gh-content h2{font-size:clamp(26px,2.2vw,34px);margin-top:2em}
.gh-content h3{font-size:clamp(21px,1.6vw,25px);margin-top:1.7em}
.gh-content h4{font-size:19px;font-weight:500;margin-top:1.5em}
.gh-content a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--faint)}
.gh-content a:hover{text-decoration-color:var(--ink)}
.gh-content strong{color:var(--ink);font-weight:600}
.gh-content ul,.gh-content ol{padding-left:1.3em}
.gh-content li+li{margin-top:.4em}
.gh-content li::marker{color:var(--muted)}
.gh-content blockquote:not([class]){border-left:2px solid var(--ink);padding:.1em 0 .1em 1.1em;font-family:var(--display);font-size:1.15em;line-height:1.5;color:var(--ink)}
.gh-content blockquote.kg-blockquote-alt{font-family:var(--hand);font-size:1.5em;line-height:1.4;text-align:center;color:var(--ink);padding:.4em 1em}
.gh-content hr{border:0;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 9px);margin:2.4em 0}
.gh-content code:not(pre code){font-family:var(--mono);font-size:.86em;background:var(--tint);padding:.12em .36em;border-radius:2px;color:var(--ink)}
.gh-content pre{font-family:var(--mono);font-size:13.5px;line-height:1.65;background:#fcfbf8;border:1px dashed var(--line);padding:16px 18px;overflow-x:auto;color:var(--ink)}
.gh-content table{border-collapse:collapse;width:100%;font-size:.92em}
.gh-content th,.gh-content td{text-align:left;padding:10px 12px;border-bottom:1px dashed var(--line)}
.gh-content th{font-weight:500;color:var(--ink)}

/* Koenig cards in the site's language */
.gh-content figure{margin-top:1.8em}
.gh-content figcaption{margin-top:10px;font-size:var(--fs-small);color:var(--muted);text-align:center}
.gh-content .kg-image-card img,.gh-content .kg-gallery-image img{background:#fcfbf8;outline:1px dashed var(--line);outline-offset:6px}
.gh-content .kg-image-card:not(.kg-width-full) img{margin:0 auto}
.gh-content .kg-callout-card{border:1px dashed var(--line);border-radius:0;background:transparent}
.gh-content .kg-callout-card-accent{background:var(--ink);color:var(--bg)}
.gh-content .kg-bookmark-container{border:1px solid var(--ink);border-radius:0;background:#fcfbf8;text-decoration:none}
.gh-content .kg-bookmark-title{font-family:var(--display);font-weight:500}
.gh-content .kg-btn,.gh-content .kg-btn-accent{border-radius:2px;background:var(--ink);color:var(--bg);font-weight:400}
.gh-content .kg-toggle-card,.gh-content .kg-file-card-container,.gh-content .kg-product-card-container,.gh-content .kg-audio-card{border:1px dashed var(--line);border-radius:0;background:transparent}
.gh-content .kg-header-card{border-radius:0}

/* waitlist band, same as the site's closing section */
.cta .cell{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2vw,28px)}
.cta p{color:var(--muted);max-width:42ch}
.more-head{padding:clamp(40px,4vw,64px) var(--pad) clamp(20px,2vw,28px)}

/* error page */
.err{padding:var(--sp) var(--pad);text-align:center}
.err .big{margin:10px 0 18px}

/* small screens */
@media (max-width:900px){
  .nav,.hdr .btn,.hdr-decor{display:none}
  .menu{display:block;margin-left:auto}
  .hdr.open .nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);padding:8px var(--g) 16px;box-shadow:0 1px 0 var(--hair)}
  .hdr.open .nav a{padding:12px 0}
  .hdr.open .nav .nav-m{display:block}
  .hdr.open .nav .dd{flex-direction:column;align-items:stretch}
  .hdr.open .nav .dd-btn{padding:12px 0;pointer-events:none}
  .hdr.open .nav .dd-btn svg{display:none}
  .hdr.open .nav .dd-menu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;border:0;outline:0;box-shadow:none;background:transparent;padding:0 0 6px 14px}
  .hdr.open .nav .dd-menu a{padding:8px 0;display:block}
  .hdr.open .nav .dd-menu .ico,.hdr.open .nav .dd-menu small{display:none}
  .hdr.open .nav .dd-menu b{font-weight:400}
  .grid4,.page-head,.feature{grid-template-columns:minmax(0,1fr)}
  .span2,.span3{grid-column:auto}
  .bl::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 9px);transform:scaleX(0);transform-origin:left}
  .bl.in::before{transform:none}
  .page-head .cell:first-child{padding-bottom:12px}
  .page-head .cell:last-child{padding-top:0}
  .feature-art{padding-top:8px}
  .row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .row-date{grid-column:1;grid-row:1}
  .row-main{grid-column:1;grid-row:2}
  .row-tag{display:none}
  .row .a{grid-column:2;grid-row:1/3}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .foot-cols .cell{padding-bottom:40px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .r,.ln>span,.hl,.vl,.bl::before,.row{opacity:1!important;transform:none!important}
  .sk path{stroke-dashoffset:0!important}
  .sk text{opacity:1!important}
}