/* studio.css — the shared "architecture studio" skin for parametric.co.il.
   One file restyles every page. Opt in with <body class="studio">.
   Image paths are relative to this file; change them here only. */

@font-face{
  font-family:"GveretLevin";
  src:url(fonts/GveretLevin-Regular.woff2) format("woff2"),url(fonts/GveretLevin-Regular.ttf) format("truetype");
  font-display:swap;
}
/* stand-ins shown until the web fonts arrive, sized to run as wide as the real ones so lines wrap the same and the page does not jump
   when they swap (12.10.2026: the guides page jumped 57px on phones; the system fallback ran 5% wider than Heebo). Arial and its metric
   clones cover Windows, macOS and Linux; where none is installed the old system fallback is used. The ranges are what the real fonts
   cover anyway, so nothing ends up in a stand-in for good. */
@font-face{font-family:"Heebo fb";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:103.8%;unicode-range:U+20-7E,U+A0-FF,U+590-5FF,U+2010-2027}
@font-face{font-family:"Heebo fb";font-weight:700;src:local("Arial Bold"),local("Liberation Sans Bold"),local("Arimo Bold");size-adjust:104%;unicode-range:U+20-7E,U+A0-FF,U+590-5FF,U+2010-2027}
@font-face{font-family:"Hand fb";src:local("Arial"),local("Liberation Sans"),local("Arimo");size-adjust:93.6%;unicode-range:U+20,U+590-5FF}

:root{
  --blueprint:#0E1B2E; --cream:#F5F1E8; --orange:#D97757; --orange-ink:#B4532F;
  --ink:#1b2433; --muted:#566070; --rule:rgba(14,27,46,.22);
  --paper:#F8F5EE; --tape:rgba(233,221,193,.9);
  --mat:#6f9c78; --mat-print:rgba(240,236,224,.7);
  --hand:"GveretLevin","Hand fb","Heebo",sans-serif;
  --body:"Heebo","Heebo fb",system-ui,sans-serif;
  --img-mat:url(/studio/renders/bg-mat.webp);
  --img-kraft:url(/studio/renders/bg-kraft.webp);
  --img-trace:url(img/trace-sheet.webp);
  /* SVG ornaments, painted in currentColor through mask */
  --svg-north:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='24' cy='27' r='16'/%3E%3Cpath d='M24 3 31 37 24 31Z' fill='%23000'/%3E%3Cpath d='M24 3 17 37 24 31Z'/%3E%3C/svg%3E");
  --svg-scale:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 26'%3E%3Cg font-family='sans-serif' font-size='8' text-anchor='middle'%3E%3Ctext x='4' y='8'%3E0%3C/text%3E%3Ctext x='28' y='8'%3E1%3C/text%3E%3Ctext x='52' y='8'%3E2%3C/text%3E%3Ctext x='132' y='8'%3E5%3C/text%3E%3C/g%3E%3Crect x='4' y='13' width='128' height='7' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M4 13h24v7H4zM52 13h40v7H52z'/%3E%3C/svg%3E");
  --svg-wobble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6C40 2 70 8 112 5s92-3 126 1' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --knife:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg transform='rotate(-45 16 16)' stroke='%23222' stroke-width='.8'%3E%3Cpath d='M1 16 9 13v6Z' fill='%23d4d8dc'/%3E%3Cpath d='M9 12.5h6v7H9z' fill='%239aa0a6'/%3E%3Crect x='15' y='12' width='16' height='8' rx='1.5' fill='%23f2c230'/%3E%3Cpath d='M19 14.5h6v3h-6z' fill='%23222'/%3E%3C/g%3E%3C/svg%3E") 5 27;
}

/* ---------- page surface: cutting mat + edge ruler ---------- */
html:has(body.studio),body.studio{overflow-x:clip}
body.studio{
  margin:0;position:relative;color:var(--ink);font:400 18px/1.75 var(--body);
  -webkit-font-smoothing:antialiased;
  /* CSS fallback mat: grid with a heavier line every 5 cells */
  background-color:var(--mat);
  background-image:
    linear-gradient(var(--mat-print) 1px,transparent 1px),linear-gradient(90deg,var(--mat-print) 1px,transparent 1px),
    linear-gradient(rgba(240,236,224,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(240,236,224,.25) 1px,transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
  --dim-color:var(--mat-print);
}
body.studio::before{ /* the rendered mat, fixed: sheets slide over it like on a desk */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--img-mat) center/cover no-repeat;
}
body.studio::after{ /* ruler ticks along the physical left edge */
  content:"";position:fixed;top:0;bottom:0;left:0;width:18px;z-index:40;pointer-events:none;
  background:
    linear-gradient(var(--mat-print) 1px,transparent 0) 0 0/16px 80px repeat-y,
    linear-gradient(var(--mat-print) 1px,transparent 0) 0 0/11px 40px repeat-y,
    linear-gradient(var(--mat-print) 1px,transparent 0) 0 0/6px 8px repeat-y,
    linear-gradient(90deg,transparent 17px,var(--mat-print) 0) 0 0/18px 100%;
}
.ruler-mark{ /* added by studio.js: scroll position on the ruler */
  position:fixed;top:0;left:0;width:18px;height:3px;z-index:41;pointer-events:none;
  background:var(--orange);will-change:transform;
}
@media (max-width:600px){
  body.studio{font-size:17px}
  body.studio::after,.ruler-mark{width:11px}
}
/* phones: a mat rendered top-down for a tall screen (lighter, and the grid stays at real size) */
@media (max-width:700px){:root{--img-mat:url(/studio/renders/bg-mat-m.webp)}}

/* element defaults wrapped in :where() so any page class overrides them */
:where(body.studio) img{display:block;max-width:100%;height:auto}
body.studio picture{display:contents} /* <picture> only swaps the file for phones; the <img> keeps its own layout */
:where(body.studio) a{color:var(--orange-ink)}
:where(body.studio) p{margin:0 0 1em}
:where(body.studio) p:last-child{margin-bottom:0}
body.studio :focus-visible{outline:2.5px solid var(--orange);outline-offset:3px}

/* ---------- type: hand-lettered headings, Heebo body ---------- */
body.studio :is(h1,h2),.hand{
  font-family:var(--hand);font-weight:400;font-synthesis:none;
  color:var(--blueprint);line-height:1.05;letter-spacing:0;margin:0 0 .35em;
}
body.studio h1{font-size:clamp(54px,11vw,112px)}
body.studio h2{font-size:clamp(34px,6vw,54px)}
body.studio h2::after{ /* a single marker stroke under section titles */
  content:"";display:block;width:min(100%,5.5em);height:.2em;margin-top:.08em;
  background:var(--orange);opacity:.8;
  -webkit-mask:var(--svg-wobble) 0 0/100% 100% no-repeat;mask:var(--svg-wobble) 0 0/100% 100% no-repeat;
}
body.studio h3{font:700 1.14em/1.35 var(--body);color:var(--blueprint);margin:0 0 .4em}

/* ---------- surfaces ---------- */
.sheet{ /* a paper sheet lying on the mat; content lives on these */
  --dim-color:var(--muted);
  position:relative;width:min(920px,100% - 40px);margin:40px auto;box-sizing:border-box;
  padding:clamp(24px,5vw,60px);background:var(--paper);color:var(--ink);rotate:var(--tilt,0deg);
  box-shadow:0 1px 1px rgba(20,40,25,.12),0 18px 34px -16px rgba(12,36,20,.55);
}
.trace-paper{ /* translucent vellum: the mat shows through, blurred */
  --dim-color:var(--muted);
  background:var(--img-trace) center/cover,rgba(240,237,230,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
/* ---------- kapa card: 5mm paper-foam-paper board ---------- */
.kapa{
  --face:#fcfbf7;--core:#efece5;--liner:#d3cdc0;--ex:-1px;
  --dim-color:var(--muted);
  position:relative;display:block;box-sizing:border-box;padding:var(--pad,22px 24px);
  background:var(--face);color:var(--ink);text-decoration:none;
  border-radius:2px 1px 2px 1.5px;rotate:var(--tilt,0deg);
  box-shadow:
    calc(var(--ex)*1) 1px 0 var(--liner),
    calc(var(--ex)*2) 2px 0 var(--core),
    calc(var(--ex)*3) 3px 0 var(--core),
    calc(var(--ex)*4) 4px 0 var(--core),
    calc(var(--ex)*5) 5px 0 var(--liner),
    calc(var(--ex)*6) 7px 4px rgba(12,36,20,.32),
    calc(var(--ex)*10) 18px 26px -8px rgba(12,36,20,.4);
  transition:translate .25s ease,box-shadow .25s ease;
}
.board > .kapa:nth-child(3n+1){--tilt:-.7deg}
.board > .kapa:nth-child(3n+2){--tilt:.45deg}
.board > .kapa:nth-child(3n){--tilt:-.2deg}
@media (hover:hover){
  a.kapa:hover{translate:0 -3px;box-shadow:
    calc(var(--ex)*1) 1px 0 var(--liner),calc(var(--ex)*2) 2px 0 var(--core),calc(var(--ex)*3) 3px 0 var(--core),
    calc(var(--ex)*4) 4px 0 var(--core),calc(var(--ex)*5) 5px 0 var(--liner),
    calc(var(--ex)*9) 12px 8px rgba(12,36,20,.25),calc(var(--ex)*14) 28px 36px -8px rgba(12,36,20,.4)}
}
.kapa .tag{display:block;font-size:.8em;font-weight:500;color:var(--orange-ink);margin-bottom:.35em}
.kapa p{color:var(--muted);font-size:.96em}
.kapa .go{display:inline-block;margin-top:.7em;font-weight:700;color:var(--orange-ink)}
.kapa > img:only-child{width:100%}
.kraft p,.chip p{color:var(--ink)}
.kraft :is(.tag,.go),.chip :is(.tag,.go){color:var(--blueprint)}

/* board variants (also usable as plain surfaces); after .kapa so they win */
.kraft{ /* brown corrugated board */
  --face:linear-gradient(rgba(205,168,118,.72),rgba(205,168,118,.72)),var(--img-kraft) 0 0/512px;
  --core:#a8814f;--liner:#7a5934;--dim-color:rgba(27,36,51,.6);
  background:var(--face);
}
.chip{ /* grey chipboard */
  --face:#a5a199;--core:#8d8980;--liner:#6f6b63;
  background:var(--face);
}

.board{ /* a loose grid of pieces on the mat */
  display:grid;gap:34px 26px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  width:min(1040px,100% - 40px);margin:0 auto;
}

/* pinned: map pin through the board */
.pinned{margin-top:12px}
.pinned::before{
  content:"";position:absolute;top:-8px;left:50%;width:17px;height:17px;margin-left:-8.5px;z-index:2;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75) 0 1.5px,transparent 3px),
             radial-gradient(circle at 40% 36%,#f2a684,var(--orange) 48%,#86331b);
  box-shadow:4px 6px 3px -2px rgba(0,0,0,.35);
  transition:scale .28s cubic-bezier(.3,1.7,.5,1),opacity .12s;
}
/* taped: one torn masking-tape strip; taped-corners: two diagonal strips */
.taped,.taped-corners{position:relative}
.taped::after,.taped-corners::before,.taped-corners::after{
  content:"";position:absolute;z-index:2;width:96px;height:26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 40%,rgba(120,100,60,.08)),var(--tape);
  clip-path:polygon(0 4%,3% 18%,0 34%,4% 50%,1% 68%,3% 84%,0 100%,100% 96%,97% 80%,100% 62%,96% 46%,99% 30%,97% 14%,100% 0);
}
.taped::after{top:-13px;left:50%;margin-left:-48px;rotate:-3deg}
.taped-corners::before{top:-6px;right:-30px;rotate:38deg}
.taped-corners::after{top:-6px;left:-30px;rotate:-38deg}

/* ---------- trace overlay: a vellum sheet that flips up on hover / tap ---------- */
.trace{position:relative;display:block;margin:0;isolation:isolate;cursor:pointer;perspective:1100px}
.trace > img{width:100%}
.feather{ /* soften the edges of a photo taken on the mat so it melts into the page */
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect;
}
.trace-sheet{
  position:absolute;inset:0;z-index:1;rotate:-.6deg;transform-origin:50% 0;opacity:.84;
  background:var(--img-trace) center/cover,rgba(238,235,228,.7);
  -webkit-backdrop-filter:blur(2.5px) saturate(.6);backdrop-filter:blur(2.5px) saturate(.6);
  clip-path:polygon(0 0,100% 0,100% 100%,34px 100%,0 calc(100% - 34px));
  transition:transform .7s cubic-bezier(.2,.75,.2,1),opacity .6s ease;
}
.trace-sheet::after{ /* dog-eared corner: says "lift me" without words */
  content:"";position:absolute;bottom:0;left:0;width:34px;height:34px;
  background:linear-gradient(45deg,transparent 50%,#d8d2c5 50%,#f3efe7 85%);
}
@media (hover:hover){.trace:hover .trace-sheet{transform:rotateX(-74deg);opacity:.45}}
.trace.is-lifted .trace-sheet{transform:rotateX(-74deg);opacity:.45}

/* ---------- dimension-line divider (מידה) ---------- */
.dim{
  --c:var(--dim-color,currentColor);
  display:block;position:relative;box-sizing:border-box;border:0;height:22px;overflow:visible;color:var(--c);
  width:min(1040px,100% - 40px);margin:var(--dim-gap,64px) auto;
  background:linear-gradient(var(--c),var(--c)) 50% 50%/100% 1px no-repeat;
}
.dim::before{ /* extension lines 10px in from each end, 45-degree ticks where they cross */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(var(--c),var(--c)) 10px 0/1px 100% no-repeat,
    linear-gradient(var(--c),var(--c)) calc(100% - 10px) 0/1px 100% no-repeat,
    linear-gradient(45deg,transparent 42%,var(--c) 42% 58%,transparent 58%) 4px 50%/13px 13px no-repeat,
    linear-gradient(45deg,transparent 42%,var(--c) 42% 58%,transparent 58%) calc(100% - 4px) 50%/13px 13px no-repeat;
}
.dim[data-dim]::after{
  content:attr(data-dim);position:absolute;left:50%;bottom:50%;translate:-50% -5px;
  font:500 13px/1 var(--body);letter-spacing:.04em;
}
.sheet .dim,.kapa .dim{width:100%;--dim-gap:40px}

/* ---------- ornaments: north arrow, scale bar ---------- */
.north,.scalebar{display:inline-block;vertical-align:middle;background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.north{--m:var(--svg-north);width:var(--size,46px);aspect-ratio:1;rotate:var(--north,-14deg)}
.scalebar{--m:var(--svg-scale);width:var(--size,140px);aspect-ratio:140/26}

/* ---------- navigation: drawing-set sheet tabs ---------- */
.sheet-tabs{
  display:flex;align-items:flex-end;gap:3px;overflow-x:auto;scrollbar-width:none;counter-reset:sheet;
  width:min(920px,100% - 40px);margin:28px auto 0;padding-top:6px;position:relative;z-index:1;
  -webkit-mask:linear-gradient(to left,#000 85%,transparent);mask:linear-gradient(to left,#000 85%,transparent);
}
.sheet-tabs::-webkit-scrollbar{display:none}
.sheet-tabs :is(ol,ul){display:contents;list-style:none}
.sheet-tabs > a,.sheet-tabs li{
  flex:none;padding:8px 16px 9px;font:500 15px/1.3 var(--body);color:var(--ink);text-decoration:none;
  background:#e2dccf;border:1px solid var(--rule);border-bottom:0;border-radius:7px 7px 0 0;
  translate:0 4px;transition:translate .2s,background-color .2s;
}
.sheet-tabs li a{color:inherit;text-decoration:none}
.sheet-tabs ol > li{counter-increment:sheet}
.sheet-tabs ol > li::before{content:"A-" counter(sheet,decimal-leading-zero);
  display:block;font-size:11px;color:var(--orange-ink);letter-spacing:.05em}
.sheet-tabs > a:hover,.sheet-tabs li:hover{background:#ece7dc;translate:0 1px}
.sheet-tabs [aria-current="page"],.sheet-tabs li:has([aria-current="page"]){background:var(--paper);translate:0 0}
.sheet-tabs + .sheet{margin-top:0}

/* ---------- footer: architectural title block (חותמת גיליון) ---------- */
.title-block{
  --dim-color:var(--muted);
  width:min(1040px,100% - 40px);box-sizing:border-box;margin:72px auto 28px;padding:9px;
  background:var(--paper);color:var(--ink);font-size:15px;line-height:1.6;
  border:2px solid var(--blueprint);outline:1px solid var(--blueprint);outline-offset:-6px;
  box-shadow:0 18px 34px -16px rgba(12,36,20,.55);
}
.tb{display:grid;grid-template-columns:1fr auto;border:1px solid var(--blueprint)}
.tb > *{padding:14px 18px;margin:0}
.tb-name strong{font:400 clamp(30px,5vw,40px)/1.1 var(--hand);color:var(--blueprint)}
.tb-meta{display:grid;grid-template-columns:repeat(3,auto);padding:0;border-inline-start:1px solid var(--blueprint)}
.tb-meta > div{padding:10px 16px;border-inline-start:1px solid var(--rule)}
.tb-meta > div:first-child{border-inline-start:0}
.tb-meta dt{font-size:12px;color:var(--muted)}
.tb-meta dd{margin:0;font-weight:700;color:var(--blueprint);font-size:16px;white-space:nowrap}
.tb-legal{grid-column:1/-1;border-top:1px solid var(--blueprint);font-size:.92em;color:var(--muted)}
.title-block a{color:var(--orange-ink)}
@media (max-width:640px){
  .tb{grid-template-columns:1fr}
  .tb-meta{border-inline-start:0;border-top:1px solid var(--blueprint)}
}

/* ---------- scroll stage: scrubs an image sequence on a canvas ---------- */
.scrub{position:relative}
.scrub-stage{display:grid;place-items:center}
.scrub-stage > *{grid-area:1/1}
.scrub canvas{display:none}
.scrub-still{width:min(1040px,100% - 40px)}
.scrub.is-live{height:var(--scrub-len,300vh)}
.scrub.is-live .scrub-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scrub.is-live canvas{display:block;width:100%;height:100%;object-fit:contain}
.scrub.is-live .scrub-still{display:none}

/* ---------- reveal: pinned sheets get laid down, then pinned ---------- */
.will-reveal{opacity:0;translate:0 -22px;rotate:calc(var(--tilt,0deg) - 2.5deg)}
.will-reveal.pinned::before{scale:1.8;opacity:0}
.will-reveal.is-in{opacity:1;translate:0 0;rotate:var(--tilt,0deg);
  transition:opacity .35s ease-out var(--d,0ms),translate .65s cubic-bezier(.2,.8,.25,1) var(--d,0ms),rotate .65s cubic-bezier(.2,.8,.25,1) var(--d,0ms)}
.will-reveal.is-in.pinned::before{scale:1;opacity:1;transition-delay:calc(var(--d,0ms) + .5s)}

/* ---------- knife easter egg (click the north arrow) ---------- */
html.knife,html.knife *{cursor:var(--knife),crosshair !important}
.cut{position:absolute;z-index:60;width:44px;height:1.5px;margin:-1px 0 0 -22px;pointer-events:none;
  background:linear-gradient(#2a2a2a,#2a2a2a) 0 0/100% 1px no-repeat,rgba(255,255,255,.6);
  animation:cut 1.6s ease-out forwards}
@keyframes cut{0%{transform:scaleX(0)}12%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .kapa,.sheet-tabs > a,.sheet-tabs li{transition:none}
  .trace-sheet{transition:opacity .2s}
  .trace.is-lifted .trace-sheet{transform:none;opacity:0}
  @media (hover:hover){.trace:hover .trace-sheet{transform:none;opacity:0}}
  .cut{animation-duration:.01s}
}

/* ---------- legal set: privacy.html, terms.html, accessibility.html (body.lg) ----------
   One calm reading sheet. The studio only frames it: a pinned print and a taped title above, the title block below. */
body.lg .lg-top{width:min(1040px,100% - 32px);margin:0 auto}
body.lg .lg-crumb{display:inline-block;margin:22px 0 0;padding:4px 16px 5px;font:500 15px/1.4 var(--body);rotate:-1.2deg;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 40%),var(--tape);
  clip-path:polygon(0 4%,3% 18%,0 34%,4% 50%,1% 68%,3% 84%,0 100%,100% 96%,97% 80%,100% 62%,96% 46%,99% 30%,97% 14%,100% 0)}
body.lg .lg-crumb a{color:var(--blueprint);text-decoration:none}
body.lg .lg-print{--pad:9px;--tilt:-.35deg;margin:20px 0 0}
body.lg .lg-print img{width:100%;aspect-ratio:3/1;object-fit:cover}
body.lg .lg-title{position:relative;z-index:3;box-sizing:border-box;width:fit-content;max-width:calc(100% - 24px);
  margin:-78px max(30px,(100% - 760px)/2) 0 0;padding:26px 34px 22px;background:var(--paper);rotate:.6deg;
  box-shadow:0 1px 1px rgba(20,40,25,.12),0 18px 34px -16px rgba(12,36,20,.55)}
body.lg .lg-title h1{font-size:clamp(46px,6.4vw,84px);margin:0 0 .12em}
body.lg .lg-title .sub{margin:0;color:var(--muted);font-size:.95em;text-wrap:balance}
body.lg .lg-sheet{width:min(760px,100% - 32px);margin:40px auto 0;padding:clamp(26px,6vw,56px) clamp(22px,6vw,60px);line-height:1.8}
body.lg .lg-sheet h2{font-size:clamp(30px,3.6vw,38px);margin:1.25em 0 .2em}
body.lg .lg-sheet h2:first-child{margin-top:0}
body.lg .lg-sheet h2::after{display:none}
body.lg .lg-sheet ul{margin:0 0 1em;padding-inline-start:1.3em}
body.lg .lg-sheet li{margin-bottom:.45em}
body.lg .lg-sheet li::marker{color:var(--orange-ink)}
body.lg .lg-sheet strong{color:var(--blueprint)}
body.lg .lg-sheet .meta{color:var(--muted);font-size:.92em}
body.lg .lg-sheet .box{margin:1.6em 0;--pad:18px 22px}
body.lg .lg-sheet .box p:not(.meta){color:var(--ink);font-size:1em}
body.lg .lg-sheet a{overflow-wrap:anywhere}
body.lg .tb-orn{display:flex;align-items:center;justify-content:center;gap:16px;border-inline-start:1px solid var(--blueprint);color:var(--blueprint);opacity:.8}
body.lg .tb-legal [aria-current]{color:var(--blueprint);font-weight:700;text-decoration:none}
@media (max-width:700px){
  body.lg .lg-print img{aspect-ratio:16/9}
  body.lg .lg-title{margin:-30px 10px 0 0;padding:18px 20px 16px}
  body.lg .lg-sheet{margin-top:28px}
}
@media (max-width:640px){body.lg .tb-orn{display:none}}
/* where the margin is too narrow for the floating light button, it would sit on the text: it lies under the title block instead */
@media (max-width:1000px){body.lg .mood-btn.is-fixed{position:relative;left:auto;bottom:auto;display:flex;width:fit-content;margin:-8px auto 28px}}

/* ===================== blog-html set (body.bh) =====================
   Reading pages: blog-ai-images, blog-vscode-architects, why-html, what-is-html.
   The post's sheet from the blog pile becomes its title page (same paper, same drawing);
   the article itself lies under it on one clean, long sheet. Studio objects stay in the margins. */
body.bh{--bh-w:min(800px,100% - 32px)}
body.bh .bh-crumb{display:block;width:var(--bh-w);margin:22px auto 0}
body.bh .bh-crumb a{display:inline-block;padding:4px 16px 5px;font:500 15px/1.4 var(--body);color:var(--blueprint);text-decoration:none;rotate:-1.2deg;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 40%),var(--tape);
  clip-path:polygon(0 4%,3% 18%,0 34%,4% 50%,1% 68%,3% 84%,0 100%,100% 96%,97% 80%,100% 62%,96% 46%,99% 30%,97% 14%,100% 0)}
body.bh .bh-crumb a:hover{text-decoration:underline}

/* --- the title sheet --- */
body.bh .bh-hero{position:relative;z-index:2;box-sizing:border-box;width:min(900px,100% - 32px);margin:18px auto 0;
  padding:clamp(26px,4.4vw,52px) clamp(20px,5vw,60px) clamp(26px,3.6vw,40px);
  background:var(--bh-paper,#F8F5EE);color:var(--ink);rotate:-.4deg;
  box-shadow:0 1px 1px rgba(20,40,25,.14),0 22px 36px -18px rgba(12,36,20,.6)}
body.bh .bh-hero.bh-wc{--bh-paper:#F3EEE2}
body.bh .bh-hero.bh-butter{--bh-paper:rgba(242,231,176,.86);-webkit-backdrop-filter:blur(3.5px) saturate(.45);backdrop-filter:blur(3.5px) saturate(.45)}
body.bh .bh-hero.bh-trace{background:var(--img-trace) center/cover,rgba(241,238,231,.8);-webkit-backdrop-filter:blur(3.5px) saturate(.45);backdrop-filter:blur(3.5px) saturate(.45)}
body.bh .bh-kicker{float:left;margin:4px 0 10px 12px;padding:1px 10px;font-size:13px;font-weight:500;line-height:1.6;
  color:var(--orange-ink);border:1.5px solid;border-radius:2px;rotate:-3deg}
body.bh .bh-hero h1{font-size:clamp(46px,7.4vw,92px);line-height:1.04;margin:0 0 .22em;text-wrap:balance}
body.bh .bh-hero h1::after{content:"";display:block;width:min(100%,3.4em);height:.1em;margin-top:.1em;background:var(--orange);opacity:.85;
  -webkit-mask:var(--svg-wobble) 0 0/100% 100% no-repeat;mask:var(--svg-wobble) 0 0/100% 100% no-repeat}
body.bh .bh-lede{clear:both;max-width:58ch;font-size:clamp(17.5px,1.9vw,20px);line-height:1.65;color:var(--ink)}
body.bh .bh-art{position:relative;margin:clamp(14px,2.4vw,26px) 0 0}
body.bh .bh-art img{width:100%;height:auto}
body.bh .bh-byline{max-width:64ch;margin:1.1em 0 0;padding-top:.9em;font-size:.88em;line-height:1.6;color:var(--muted);
  background:linear-gradient(90deg,var(--rule) 55%,transparent 0) 0 0/9px 1px repeat-x}
body.bh .bh-byline strong{color:var(--blueprint)}
body.bh .bh-prop{position:absolute;z-index:3;pointer-events:none;height:auto}
@media (max-width:900px){body.bh .bh-prop{display:none}}

/* --- the reading sheet --- */
body.bh .bh-sheet{position:relative;z-index:1;box-sizing:border-box;width:var(--bh-w);margin:-18px auto 0;
  padding:clamp(44px,6vw,76px) clamp(18px,6vw,68px) clamp(34px,5vw,60px);
  background:#FBF9F4;color:var(--ink);font-size:18px;line-height:1.85;
  box-shadow:0 1px 1px rgba(20,40,25,.12),0 18px 34px -16px rgba(12,36,20,.55)}
/* element defaults at the lowest weight, so each page's own component rules win */
:where(body.bh .bh-sheet) p{margin:0 0 1.15em}
:where(body.bh .bh-sheet) a{color:var(--orange-ink)}
:where(body.bh .bh-sheet) strong{font-weight:700;color:var(--blueprint)}
body.bh .bh-sheet h2{font-size:clamp(32px,4.4vw,44px);line-height:1.1;margin:1.5em 0 .45em}
body.bh .bh-sheet h3{font:700 clamp(19px,2.4vw,22px)/1.35 var(--body);color:var(--blueprint);margin:1.9em 0 .5em}
:where(body.bh .bh-sheet) hr{border:0;height:13px;margin:2.6em 0;color:var(--rule);   /* a dimension line, ticks at both ends */
  background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1px no-repeat,
    linear-gradient(45deg,transparent 42%,currentColor 42% 58%,transparent 58%) 0 50%/13px 13px no-repeat,
    linear-gradient(45deg,transparent 42%,currentColor 42% 58%,transparent 58%) 100% 50%/13px 13px no-repeat}
:where(body.bh .bh-sheet) figure{margin:2em 0}
:where(body.bh .bh-sheet) figure img{width:100%;box-sizing:border-box;border:7px solid #fff;border-radius:0;
  box-shadow:0 1px 2px rgba(20,40,25,.2),0 12px 20px -12px rgba(12,36,20,.5)}
:where(body.bh .bh-sheet) figcaption{margin-top:10px;font-size:.88em;color:var(--muted);text-align:center}
:where(body.bh .bh-sheet) pre{border-radius:3px}

/* --- closing card on the mat --- */
body.bh .bh-end{position:relative;box-sizing:border-box;width:min(720px,100% - 32px);margin:56px auto 0;rotate:.6deg;
  padding:clamp(30px,4.4vw,48px) clamp(22px,4.4vw,48px);text-align:center;color:rgba(245,241,232,.88);
  background:linear-gradient(rgba(245,241,232,.07) 1px,transparent 1px) 0 0/30px 30px,
             linear-gradient(90deg,rgba(245,241,232,.07) 1px,transparent 1px) 0 0/30px 30px,
             radial-gradient(130% 100% at 30% 20%,#18304f,var(--blueprint) 70%);
  box-shadow:0 1px 1px rgba(0,0,0,.2),0 20px 34px -16px rgba(30,20,5,.7)}
body.bh .bh-end h2{color:var(--cream);font-size:clamp(36px,5vw,50px)}
body.bh .bh-end h2::after{margin-inline:auto}
body.bh .bh-end p{max-width:52ch;margin:0 auto 1.1em}
body.bh .bh-end .btn{display:inline-block;margin-top:6px;padding:14px 32px;background:var(--orange);color:var(--blueprint);font-weight:900;
  font-size:1.03em;text-decoration:none;border-radius:2px;
  box-shadow:-1px 1px 0 #b45c3c,-2px 2px 0 #f3d9c9,-3px 3px 0 #f3d9c9,-4px 4px 0 #b45c3c,-5px 8px 10px rgba(0,0,0,.35);transition:translate .2s}
body.bh .bh-end .btn:hover{translate:0 -2px}
body.bh .tb-name{font-size:15px}

@media (max-width:600px){
  body.bh .bh-crumb{margin-top:16px}
  body.bh .bh-hero{rotate:-.7deg;margin-top:12px}
  body.bh .bh-kicker{float:none;display:inline-block;margin:0 0 10px}
  body.bh .bh-sheet{font-size:17px;line-height:1.8}
}
@media (prefers-reduced-motion:reduce){body.bh .bh-end .btn{transition:none}}


/* ==================== guides-1: long-form guide pages ====================
   claude-code-architects, tabaa-ai, dwg-ai, revit-ai. Opt in with <body class="studio g1">.
   A print of the topic is pinned at the top with the title card taped over it; the article
   is one drafting sheet (~70 characters a line); notes are strips of yellow trace taped on it;
   the closing pieces lie loose on the mat. */
html:has(body.g1){scroll-behavior:smooth}
.g1 h2[id]{scroll-margin-top:24px}

/* hero: print + taped title card */
.g1-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;width:min(1160px,100% - 40px);margin:30px auto 0}
.g1-print{grid-column:1/-1;grid-row:1;margin:0;--pad:10px;--tilt:-.35deg}
.g1-print img{width:100%;aspect-ratio:16/9;object-fit:cover}
.g1-model img{background:radial-gradient(120% 90% at 50% 30%,#fbfaf7,#e6e2da 75%)}
.g1-drawing{position:relative;padding:18px 18px 22px;background:#fbfaf6;rotate:.3deg;
  box-shadow:0 1px 1px rgba(20,40,25,.14),0 18px 30px -14px rgba(12,36,20,.6)}
.g1-drawing img{aspect-ratio:1156/430;object-position:50% 0;outline:1.5px solid var(--blueprint);outline-offset:8px}
.g1-title{grid-column:1/span 7;grid-row:1;position:relative;z-index:3;box-sizing:border-box;
  margin:0 -12px -150px 0;padding:34px clamp(26px,3vw,42px) 32px;
  background:var(--paper);rotate:.6deg;box-shadow:0 1px 1px rgba(20,40,25,.12),0 22px 38px -16px rgba(12,36,20,.6)}
.g1-title .eyebrow{display:inline-block;margin:0 0 .9em;padding:4px 16px 5px;font:500 15px/1.5 var(--body);color:var(--blueprint);rotate:-1.2deg;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 40%),var(--tape);
  clip-path:polygon(0 6%,2% 30%,0 55%,2% 80%,0 100%,100% 96%,98% 70%,100% 45%,98% 20%,100% 0)}
.g1-title .eyebrow a{color:var(--blueprint)}
body.g1 .g1-title h1{font-size:clamp(44px,5.4vw,78px);line-height:1.02;margin:0 0 .3em}
.g1-title .lede{font-size:1.06em;max-width:58ch}
.g1-title .byline{margin-top:1.1em;padding-top:.9em;font-size:.88em;line-height:1.65;color:var(--muted);
  background:linear-gradient(90deg,var(--rule) 55%,transparent 0) 0 0/9px 1px repeat-x}
.g1-title .byline strong{color:var(--blueprint)}
/* the drawing is a wide strip: the card sits under it and only touches its blank foot */
.g1-drawing + .g1-title{grid-row:2;margin:-70px -12px 0 0}
/* the model print (revit-ai) lies beside the card, on the left */
.g1-hero:has(.g1-model){align-items:center}
.g1-model{grid-column:5/-1;--tilt:-.8deg}
.g1-model img{aspect-ratio:9/4;object-fit:contain}
.g1-model + .g1-title{grid-column:1/span 5;margin:0 0 0 -56px}
body.g1 .g1-model + .g1-title h1{font-size:clamp(42px,4.4vw,64px)}
.g1-hero:has(.g1-drawing,.g1-model) + main .g1-sheet{margin-top:72px}

/* the reading sheet */
.g1-sheet{position:relative;box-sizing:border-box;width:min(860px,100% - 32px);margin:64px auto 0;
  padding:clamp(30px,6vw,76px) clamp(20px,6.6vw,84px) clamp(34px,6vw,72px);
  background:var(--paper);color:var(--ink);
  outline:1px solid rgba(14,27,46,.2);outline-offset:-14px;
  box-shadow:0 1px 1px rgba(20,40,25,.12),0 24px 44px -18px rgba(12,36,20,.62)}
.g1-hero + main .g1-sheet{margin-top:190px} /* clears the title card hanging under the print */
.g1-sheet p{margin:0 0 17px}
.g1-sheet :is(ul,ol){margin:0 0 18px;padding-inline-start:22px}
.g1-sheet li{margin-bottom:9px}
.g1-sheet li::marker{color:var(--orange-ink)}
.g1-sheet strong{color:var(--blueprint)}
.g1-sheet .lead{font-size:1.08em;color:var(--muted)}
/* chapter numbers: GveretLevin's 1 and 6 read like ו and ז, so the digits fall through to Heebo */
@font-face{font-family:"G1Hand";src:url(fonts/GveretLevin-Regular.woff2) format("woff2");unicode-range:U+0000-002F,U+003A-10FFFF;font-display:swap}
body.g1 .g1-sheet h2{font-family:"G1Hand","Heebo",sans-serif;font-size:clamp(32px,4.4vw,46px);line-height:1.1;margin:66px 0 20px}
body.g1 .g1-sheet h2:first-child{margin-top:0}
body.g1 .g1-sheet h3{font-size:clamp(19px,2.4vw,22px);margin:34px 0 12px}
.g1-sheet h4{font:700 1.02em/1.4 var(--body);color:var(--blueprint);margin:22px 0 8px}
.g1 code{background:rgba(14,27,46,.06);padding:2px 6px;border-radius:3px;font-size:.9em;font-family:ui-monospace,Consolas,monospace;
  direction:ltr;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.g1 pre{max-width:100%;overflow-x:auto;font-family:var(--body)} /* Hebrew prompts read in Heebo, not a fallback typewriter */
.g1-sheet iframe{max-width:100%}

/* hr = a dimension line */
.g1-sheet hr{--c:var(--muted);position:relative;height:22px;border:0;margin:52px 0;overflow:visible;
  background:linear-gradient(var(--c),var(--c)) 50% 50%/100% 1px no-repeat}
.g1-sheet hr::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(var(--c),var(--c)) 10px 0/1px 100% no-repeat,
    linear-gradient(var(--c),var(--c)) calc(100% - 10px) 0/1px 100% no-repeat,
    linear-gradient(45deg,transparent 42%,var(--c) 42% 58%,transparent 58%) 4px 50%/13px 13px no-repeat,
    linear-gradient(45deg,transparent 42%,var(--c) 42% 58%,transparent 58%) calc(100% - 4px) 50%/13px 13px no-repeat}

/* table of contents: an index card on the sheet */
.g1 .toc{--tilt:-.4deg;--pad:24px 28px 18px;margin:8px 0 22px}
body.g1 .toc h2{font-size:clamp(30px,3.4vw,38px);margin:0 0 .25em}
.g1 .toc ol{margin:0;padding-inline-start:24px;font-size:.96em;border-top:1.5px solid var(--blueprint);padding-top:10px}
.g1 .toc li{margin-bottom:5px;line-height:1.5}
.g1 .toc li::marker{font-weight:700;font-size:.9em}
.g1 .toc a{color:var(--ink);text-decoration:none;background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat;transition:background-size .25s}
.g1 .toc a:hover,.g1 .toc a:focus-visible{background-size:100% 2px}

/* notes: a strip of yellow trace taped onto the sheet */
.g1 .note{position:relative;margin:34px 0 26px;padding:24px 22px 18px;color:var(--ink);rotate:-.3deg;
  background:linear-gradient(176deg,rgba(255,255,255,.4),transparent 45%),#f4ecc8;
  box-shadow:0 1px 1px rgba(60,45,10,.12),0 8px 14px -10px rgba(60,45,10,.5)}
.g1 .note:nth-of-type(even){rotate:.3deg}
.g1 .note.taped::after{left:auto;right:22px;margin:0;width:84px;rotate:-4deg}
.g1 .note .lbl{display:block;font:400 26px/1.15 var(--hand);color:var(--orange-ink);margin-bottom:6px}
.g1 .note p:last-child{margin-bottom:0}

/* tables: a schedule drawn on the sheet, scrolling inside its own frame on phones */
.g1 .tw{overflow-x:auto;margin:0 0 24px;border:1.5px solid var(--blueprint);background:#fcfbf7}
.g1 table{border-collapse:collapse;width:100%;font-size:.94em;min-width:480px}
.g1 :is(th,td){padding:11px 14px;text-align:right;vertical-align:top;border-bottom:1px solid var(--rule)}
.g1 :is(th,td) + :is(th,td){border-inline-start:1px solid var(--rule)}
.g1 th{font-weight:700;color:var(--blueprint);white-space:nowrap;background:rgba(14,27,46,.045);border-bottom:1.5px solid var(--blueprint)}
.g1 tr:last-child td{border-bottom:0}

/* course-only box: a blueprint print */
.g1 .gated{margin:6px 0 26px;padding:24px 26px;color:rgba(245,241,232,.88);rotate:.25deg;
  background:linear-gradient(rgba(245,241,232,.07) 1px,transparent 1px) 0 0/28px 28px,
             linear-gradient(90deg,rgba(245,241,232,.07) 1px,transparent 1px) 0 0/28px 28px,
             radial-gradient(130% 100% at 30% 20%,#18304f,var(--blueprint) 70%);
  box-shadow:0 14px 26px -14px rgba(12,36,20,.6)}
.g1 .gated p{margin:0}
.g1 .gated strong{color:#fff}
.g1 .gated a{color:#F0A882}

/* FAQ */
.g1 .faq{border-top:1.5px solid var(--blueprint);margin-top:8px}
.g1 .faq details{border-bottom:1px solid var(--rule)}
.g1 .faq summary{cursor:pointer;position:relative;padding:17px 0;padding-inline-end:36px;font-weight:700;font-size:1.02em;line-height:1.5;color:var(--blueprint);list-style:none}
.g1 .faq summary::-webkit-details-marker{display:none}
.g1 .faq summary::after{content:"+";position:absolute;inset-inline-end:4px;top:12px;font:400 32px/1 var(--hand);color:var(--orange)}
.g1 .faq details[open] summary::after{content:"\2013"}
.g1 .faq .a{padding:0 0 18px;color:var(--muted)}
.g1 .faq .a p:last-child{margin-bottom:0}

/* closing pieces, loose on the mat */
.g1-tail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 34px;align-items:start;width:min(1040px,100% - 40px);margin:72px auto 0}
.g1-tail > *{margin:0}
.g1-tail p{margin:0 0 .8em}
body.g1 .g1-tail h2{font-size:clamp(30px,3.4vw,40px);line-height:1.15}
.g1 .more{--tilt:-.8deg;--pad:24px 28px 22px}
.g1 .more ul{list-style:none;margin:0;padding:0;font-size:.96em}
.g1 .more li{position:relative;padding:.4em 1.3em .4em 0;line-height:1.55}
.g1 .more li::before{content:"";position:absolute;right:0;top:1.05em;width:.8em;height:2px;background:var(--blueprint);rotate:-8deg}
.g1 .nextnav{--tilt:.7deg;--pad:24px 28px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between}
.g1 .nextnav .lbl{display:block;font:400 28px/1.1 var(--hand);color:var(--blueprint);margin-bottom:4px}
.g1 .nextnav .t{font-weight:700;font-size:1.08em;color:var(--blueprint);text-decoration-color:rgba(14,27,46,.4);text-underline-offset:4px}
.g1 .nextnav .all{font-weight:700;color:var(--blueprint);white-space:nowrap}
.g1 .author{--tilt:-.4deg;--pad:26px 28px 22px}
.g1 .author p{color:var(--ink);font-size:.96em}
.g1 .author ul{margin:0;padding-inline-start:20px;font-size:.95em}
.g1 .cta-box{position:relative;rotate:.6deg;padding:clamp(28px,4vw,42px) clamp(22px,3.6vw,40px);text-align:center;color:rgba(245,241,232,.88);
  background:linear-gradient(rgba(245,241,232,.07) 1px,transparent 1px) 0 0/30px 30px,
             linear-gradient(90deg,rgba(245,241,232,.07) 1px,transparent 1px) 0 0/30px 30px,
             radial-gradient(130% 100% at 30% 20%,#18304f,var(--blueprint) 70%);
  box-shadow:0 1px 1px rgba(0,0,0,.2),0 20px 34px -16px rgba(12,36,20,.7)}
body.g1 .cta-box h2{color:var(--cream)}
body.g1 .cta-box h2::after{margin-inline:auto}
.g1 .cta-box p{max-width:52ch;margin-inline:auto}
.g1 .cta-box a:not(.btn){color:#F0A882}
.g1 .cta-box .btn{display:inline-block;margin-top:10px;padding:14px 30px;background:var(--orange);color:var(--blueprint);font-weight:700;text-decoration:none;font-size:1.03em;border-radius:2px;
  box-shadow:-1px 1px 0 #b45c3c,-2px 2px 0 #f3d9c9,-3px 3px 0 #f3d9c9,-4px 4px 0 #b45c3c,-5px 8px 10px rgba(0,0,0,.35);transition:translate .2s}
.g1 .cta-box .btn:hover{translate:0 -2px}
.g1 .cta-box .cap{font-size:.86em;color:rgba(245,241,232,.66);margin:14px auto 0;text-wrap:balance}

/* footer ornaments */
.g1 .tb-orn{display:flex;gap:18px;align-items:center;color:var(--blueprint);border-inline-start:1px solid var(--blueprint)}
.g1 .tb-orn .north{cursor:pointer}
.g1 .tb-name strong{margin-inline-end:.25em}

@media (max-width:820px){
  .g1-hero{display:block;width:calc(100% - 24px);margin-top:16px}
  .g1-hero .g1-title{margin:-46px 12px 0 6px;padding:24px 22px 24px}
  .g1-hero .g1-drawing + .g1-title{margin-top:-14px}
  .g1-drawing img{aspect-ratio:auto}
  .g1-hero + main .g1-sheet{margin-top:40px}
  .g1-tail{grid-template-columns:1fr;gap:40px;width:calc(100% - 32px)}
}
@media (max-width:700px){
  .g1-print:not(.g1-drawing) img{aspect-ratio:auto}
  .g1-drawing{padding:12px 12px 16px}
  .g1-sheet{width:calc(100% - 20px);outline-offset:-8px}
  .g1 .toc{--pad:20px 18px 14px}
  .g1 .note{padding:22px 16px 16px}
  .g1 .tb-orn{display:none}
}
@media (prefers-reduced-motion:reduce){
  html:has(body.g1){scroll-behavior:auto}
  .g1 .toc a,.g1 .cta-box .btn{transition:none}
}

/* ==== guides-2 start: long-form guide pages (body.g2) — qgis-architects, ai-urban-planning, areas-quantities-ai, permit-check-ai.
   The guide is one clean paper sheet on the mat; the studio pieces (print, trace title, index card, notes, tail) frame it. ==== */
/* the hand face without digits and "I": in GveretLevin they read as the Hebrew vav ("1." -> "ו.", "AI" -> "וA"), so those fall back to Heebo */
@font-face{font-family:"G2Hand";src:url(fonts/GveretLevin-Regular.woff2) format("woff2");font-display:swap;
  unicode-range:U+0020-002F,U+003A-0048,U+004A-007E,U+00A0-00FF,U+0590-05FF,U+2010-2027}
body.g2{--hand:"G2Hand","Heebo",sans-serif}
body.g2 .eyebrow{display:inline-block;justify-self:start;margin:0 0 16px;padding:4px 16px 5px;font:500 15px/1.4 var(--body);color:var(--blueprint);rotate:-1.2deg;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 40%),var(--tape);
  clip-path:polygon(0 4%,3% 18%,0 34%,4% 50%,1% 68%,3% 84%,0 100%,100% 96%,97% 80%,100% 62%,96% 46%,99% 30%,97% 14%,100% 0)}
body.g2 .eyebrow a{color:var(--blueprint)}

/* hero: the guide's print from the crit wall, its title on trace paper laid over the corner */
.g2-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;width:min(1180px,100% - 32px);margin:22px auto 0}
.g2-hero > .eyebrow{grid-column:1/-1}
body.g2 .g2-print{grid-column:1/-1;grid-row:2;margin:0;--pad:9px;--tilt:-.35deg}
.g2-print img{width:100%;aspect-ratio:21/9;object-fit:cover}
.g2-print.obj img{object-fit:contain;background:radial-gradient(120% 90% at 50% 30%,#f1efea,#d8d4cb 70%,#cbc6bb)}
.g2-title{grid-column:1/span 7;grid-row:2;z-index:3;margin:0 -14px -120px 0;padding:30px 38px 28px;rotate:.6deg;
  background:var(--img-trace) center/cover,rgba(244,241,234,.88);box-shadow:0 1px 1px rgba(20,40,25,.12),0 18px 34px -16px rgba(12,36,20,.55)}
body.studio .g2-title h1{font-size:clamp(46px,5.6vw,80px);line-height:1;margin-bottom:.22em}
body.studio .g2-title.long h1{font-size:clamp(40px,4.3vw,60px);line-height:1.04}
.g2-title .lede{font-size:1.04em;line-height:1.65;max-width:54ch;margin:0}
.g2-title .byline{margin:1em 0 0;padding-top:.8em;font-size:.86em;line-height:1.6;color:var(--muted);
  background:linear-gradient(90deg,var(--rule) 55%,transparent 0) 0 0/9px 1px repeat-x}
.g2-title .byline strong{color:var(--blueprint)}

/* the reading sheet: ~70 characters a line, real contrast, plain Heebo */
body.g2 .g2-sheet{width:min(800px,100% - 32px);margin:160px auto 0;padding:clamp(30px,6vw,64px) clamp(20px,7vw,72px) clamp(30px,6vw,60px);line-height:1.8}
.g2-sheet::before,.g2-sheet::after{top:-10px}
body.g2 .g2-sheet > h2{font-size:clamp(32px,4.3vw,46px);line-height:1.1;margin:1.45em 0 .45em;scroll-margin-top:24px}
body.g2 .g2-sheet h3{font-size:1.14em;margin:1.7em 0 .45em}
body.g2 .g2-sheet :is(ul,ol){margin:0 0 1.1em;padding-inline-start:1.3em}
body.g2 .g2-sheet li{margin-bottom:.5em}
body.g2 .g2-sheet li::marker{color:var(--orange-ink)}
body.g2 .g2-sheet strong{font-weight:700;color:var(--blueprint)}
body.g2 .g2-sheet .lead{font-size:1.1em;line-height:1.75;color:#34405a}
body.g2 .g2-sheet .dim{--dim-gap:44px}
body.g2 code{display:inline-block;max-width:100%;overflow-wrap:anywhere;direction:ltr;padding:1px 6px;border-radius:3px;
  background:rgba(14,27,46,.07);font:.86em/1.5 ui-monospace,Consolas,monospace}

/* index card pinned at the head of the sheet */
body.g2 .toc{--pad:22px 26px 16px;--tilt:-.5deg;margin:30px 0 6px;font-size:.96em}
body.studio.g2 .toc h2{font-size:32px;margin:0 0 .15em}
body.g2 .toc h2::after{width:3.2em}
body.g2 .toc ol{list-style:none;margin:0;padding:0;counter-reset:g2s;border-top:1.5px solid var(--blueprint)}
body.g2 .toc li{counter-increment:g2s;display:grid;grid-template-columns:2em minmax(0,1fr);align-items:baseline;margin:0;padding:.32em 0;border-bottom:1px solid var(--rule);line-height:1.5}
body.g2 .toc li::before{content:counter(g2s);font:400 24px/1 var(--hand);color:var(--orange-ink)}
body.g2 .toc a{color:var(--ink);text-decoration:none;background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat;transition:background-size .25s}
body.g2 .toc a:is(:hover,:focus-visible){background-size:100% 2px}

/* side notes: a sticky note on the sheet */
body.g2 .note{position:relative;margin:1.6em 0;padding:18px 24px 18px;rotate:-.4deg;
  background:linear-gradient(170deg,rgba(255,255,255,.4),transparent 45%),#f4e8ab;
  box-shadow:0 1px 1px rgba(60,40,0,.15),2px 12px 16px -10px rgba(40,25,5,.45)}
body.g2 .note .lbl{display:block;margin-bottom:.15em;font:400 1.55em/1.15 var(--hand);color:var(--blueprint)}
body.g2 .note a{color:#8f3a1c}

/* course-only box: a blueprint print on the sheet */
body.g2 :is(.gated,.prompt,.cta-box){color:rgba(245,241,232,.9);
  background:linear-gradient(rgba(245,241,232,.07) 1px,transparent 1px) 0 0/30px 30px,
             linear-gradient(90deg,rgba(245,241,232,.07) 1px,transparent 1px) 0 0/30px 30px,
             radial-gradient(130% 100% at 30% 20%,#18304f,var(--blueprint) 70%);
  box-shadow:0 1px 1px rgba(0,0,0,.2),0 16px 26px -14px rgba(20,30,20,.6)}
body.g2 .gated{margin:1.8em 0;padding:24px 28px;rotate:.3deg}
body.g2 :is(.gated,.cta-box) strong{color:#fff}
body.g2 :is(.gated,.cta-box) a:not(.btn){color:#F0A882}

/* a prompt typed to the tool */
body.g2 .prompt{white-space:pre-wrap;overflow-x:auto;margin:0 0 1.2em;padding:20px 22px;direction:rtl;text-align:right;
  font:400 .93em/1.75 var(--body);color:var(--cream);border-radius:2px}
body.g2 .prompt-cap{font-size:.9em;color:var(--muted);margin:-.3em 0 1.4em}

/* tables: a drawing schedule, scrolls inside its own frame on phones */
body.g2 .tw{overflow-x:auto;margin:0 0 1.4em;background:#fffdf8;border:1.5px solid var(--blueprint)}
body.g2 table{border-collapse:collapse;width:100%;min-width:480px;font-size:.93em;line-height:1.6}
body.g2 :is(th,td){padding:10px 14px;text-align:right;vertical-align:top;border-bottom:1px solid var(--rule)}
body.g2 :is(th,td) + :is(th,td){border-inline-start:1px solid var(--rule)}
body.g2 th{font-weight:700;color:var(--blueprint);background:rgba(14,27,46,.05);border-bottom:1.5px solid var(--blueprint);white-space:nowrap}
body.g2 tr:last-child td{border-bottom:0}

/* questions */
body.g2 .faq{border-top:1.5px solid var(--blueprint);margin-top:.6em}
body.g2 .faq details{border-bottom:1px solid var(--rule)}
body.g2 .faq summary{cursor:pointer;list-style:none;position:relative;padding:15px 0;padding-inline-end:36px;font-weight:700;color:var(--blueprint);line-height:1.5}
body.g2 .faq summary::-webkit-details-marker{display:none}
body.g2 .faq summary::after{content:"+";position:absolute;inset-inline-end:4px;top:9px;font:400 34px/1 var(--hand);color:var(--orange-ink)}
body.g2 .faq details[open] summary::after{content:"\2013"}
body.g2 .faq .a{padding:0 0 18px;color:#3a4558}

/* tail: the closing pieces laid on the mat */
.g2-tail{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 34px;align-items:start;width:min(1040px,100% - 32px);margin:76px auto 0}
body.g2 .g2-tail > .more{grid-row:span 2;--tilt:-.8deg;--pad:26px 30px 24px}
body.g2 .g2-tail h2{font-size:clamp(32px,3.4vw,40px)}
body.g2 .more ul{list-style:none;margin:0;padding:0}
body.g2 .more li{position:relative;padding:.4em 1.3em .4em 0;line-height:1.6;font-size:.96em;color:var(--ink)}
body.g2 .more li::before{content:"";position:absolute;right:0;top:1.1em;width:.8em;height:2px;background:var(--blueprint);rotate:-8deg}
body.g2 .nextnav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 22px;--pad:22px 26px 20px;--tilt:.9deg;margin-top:12px}
body.g2 .nextnav .lbl{display:block;font-size:.86em;font-weight:500;color:var(--blueprint)}
body.g2 .nextnav .t{font:400 clamp(28px,3vw,36px)/1.1 var(--hand);color:var(--blueprint);text-decoration:none}
body.g2 .nextnav .t:hover{text-decoration:underline;text-decoration-color:var(--orange)}
body.g2 .nextnav .all{font-weight:700;color:var(--blueprint);white-space:nowrap}
body.g2 .author{--pad:24px 28px;--tilt:-.4deg;font-size:.96em}
body.g2 .author p{color:var(--ink)}
body.g2 .cta-box{grid-column:1/-1;position:relative;rotate:.5deg;margin-top:10px;padding:clamp(28px,4vw,46px) clamp(22px,4vw,46px);text-align:center}
body.studio.g2 .cta-box h2{color:var(--cream)}
body.g2 .cta-box h2::after{margin-inline:auto}
body.g2 .cta-box p{max-width:56ch;margin-inline:auto}
body.g2 .btn{display:inline-block;margin-top:14px;padding:14px 32px;background:var(--orange);color:var(--blueprint);font-weight:900;font-size:1.03em;text-decoration:none;border-radius:2px;
  box-shadow:-1px 1px 0 #b45c3c,-2px 2px 0 #f3d9c9,-3px 3px 0 #f3d9c9,-4px 4px 0 #b45c3c,-5px 8px 10px rgba(0,0,0,.35);transition:translate .2s}
body.g2 .btn:hover{translate:0 -2px}
body.g2 .cta-box .cap{text-wrap:balance;font-size:.86em;color:rgba(245,241,232,.66);margin-top:14px}

/* title block ornaments */
body.g2 .tb-orn{display:flex;gap:18px;align-items:center;color:var(--blueprint);border-inline-start:1px solid var(--blueprint)}
body.g2 .tb-orn .north{cursor:pointer}
body.g2 .tb-name strong{margin-inline-end:.25em}

@media (max-width:820px){
  .g2-hero{display:block}
  .g2-print img{aspect-ratio:16/9}
  body.g2 .g2-title{margin:-34px 10px 0 6px;position:relative;padding:22px 22px 22px}
  body.g2 .g2-sheet{margin-top:44px}
  .g2-tail{grid-template-columns:minmax(0,1fr)}
  body.g2 .g2-tail > .more{grid-row:auto}
}
@media (max-width:700px){.g2-print img{aspect-ratio:4/5}}
/* guides-2 QA: phone tables fit the sheet (a third column was hidden past the frame edge) */
@media (max-width:600px){
  body.g2 table{min-width:0;font-size:.88em;line-height:1.5}
  body.g2 :is(th,td){padding:8px 9px}
  body.g2 th{white-space:normal}
}
/* content renders (8.10.2026): .whole = the print is the guide's own picture, shown whole; the title card tucks under its foot (like .g1-drawing) */
@media (min-width:821px){
  .g1-print.whole + .g1-title{grid-row:2;margin:-70px -12px 0 0}
  .g1-hero:has(.g1-print.whole) + main .g1-sheet{margin-top:72px}
  .g2-print.whole img{aspect-ratio:16/9}
  .g2-print.whole + .g2-title{grid-row:3;margin:-70px -14px 0 0}
  body.g2 .g2-hero:has(.whole) + main .g2-sheet{margin-top:72px}
}
/* guides-2 QA: keep the hero object clear of the title sheet on desktop */
@media (min-width:821px){
  .g2-print.obj img{object-position:4% 50%}
  .g2-hero:has(img[src*="sketch-marker"]) .g2-title{grid-column:6/span 7;margin:0 0 -120px -14px;rotate:-.6deg}
}
@media (prefers-reduced-motion:reduce){body.g2 :is(.toc a,.btn){transition:none}}
@media (max-width:640px){
  body.g2 .tb-orn{display:none}
  body.g2 .gated{margin-inline:-6px;padding:20px 18px}
  body.g2 .note{padding:16px 18px}
}
@media (prefers-reduced-motion:reduce){
  body.g2 :is(.toc a,.btn){transition:none}
}
/* ==== guides-2 end ==== */

/* ---------- guides-3 set: install, pricing, skills, agents guides (body.g3) ----------
   A long read: the article is one clean paper sheet (about 70 characters a line); the studio
   pieces (print, contents card, notes, tables, cards) frame it and never sit behind the text. */
html:has(body.g3){scroll-padding-top:20px}
@media (prefers-reduced-motion:no-preference){html:has(body.g3){scroll-behavior:smooth}}
body.g3 .eyebrow{display:inline-block;margin:22px 0 0;padding:4px 16px 5px;font:500 15px/1.4 var(--body);color:var(--blueprint);rotate:-1.2deg;
  background:linear-gradient(180deg,rgba(255,255,255,.3),transparent 40%),var(--tape);
  clip-path:polygon(0 6%,2% 30%,0 55%,2% 80%,0 100%,100% 96%,98% 70%,100% 45%,98% 20%,100% 0)}
body.g3 .eyebrow a{color:var(--blueprint)}

/* hero: the guide's print pinned to the mat, its title sheet taped over the corner */
body.g3 .g3-hero{width:min(1120px,100% - 32px);margin:0 auto}
body.g3 .g3-hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;margin-top:18px}
body.g3 .g3-print{grid-column:6/-1;grid-row:1;margin:0;--pad:10px;--tilt:.6deg}
body.g3 .g3-print img{width:100%;aspect-ratio:16/9;object-fit:cover}
body.g3 .studio-bg{background:radial-gradient(120% 90% at 50% 30%,#f1efea,#d8d4cb 70%,#cbc6bb)}
body.g3 .g3-title{grid-column:1/span 6;grid-row:1;z-index:3;position:relative;box-sizing:border-box;
  padding:clamp(26px,3.4vw,40px) clamp(24px,3.4vw,40px);background:var(--paper);rotate:-.5deg;
  box-shadow:0 1px 1px rgba(20,40,25,.12),0 18px 34px -16px rgba(12,36,20,.55)}
body.studio.g3 .g3-title h1{font-size:clamp(44px,4.8vw,68px);line-height:1;margin-bottom:.3em}
body.studio.g3 .g3-title h1::after{content:"";display:block;width:3.6em;height:.12em;margin-top:.1em;background:var(--orange);opacity:.85;
  -webkit-mask:var(--svg-wobble) 0 0/100% 100% no-repeat;mask:var(--svg-wobble) 0 0/100% 100% no-repeat}
body.g3 .lede{font-size:1.05em;line-height:1.7;margin:0}
body.g3 .byline{margin-top:1em;padding-top:.85em;font-size:.86em;line-height:1.6;color:var(--muted);
  background:linear-gradient(90deg,var(--rule) 55%,transparent 0) 0 0/9px 1px repeat-x}
body.g3 .byline strong{color:var(--blueprint)}

/* the article sheet */
body.g3 .g3-sheet{position:relative;box-sizing:border-box;width:min(820px,100% - 32px);margin:56px auto 0;
  padding:clamp(28px,6vw,64px) clamp(20px,6vw,66px) clamp(30px,6vw,60px);background:var(--paper);color:var(--ink);
  box-shadow:0 1px 1px rgba(20,40,25,.12),0 22px 40px -18px rgba(12,36,20,.6)}
body.g3 .g3-sheet > *{max-width:690px}
/* the hand font's 4 and 7 read as Hebrew letters in numbered headings: digits fall back to Heebo */
@font-face{font-family:"GveretLevin-g3";src:url(fonts/GveretLevin-Regular.woff2) format("woff2");font-display:swap;unicode-range:U+0-2F,U+3A-10FFFF}
body.studio.g3 .g3-sheet h2{font-family:"GveretLevin-g3","Heebo",sans-serif;font-weight:500;font-size:clamp(32px,4.3vw,46px);line-height:1.08;margin:64px 0 .45em;scroll-margin-top:20px}
body.studio.g3 .g3-sheet h3{font:700 clamp(19px,2.4vw,22px)/1.4 var(--body);margin:34px 0 10px}
body.g3 .g3-sheet p{margin:0 0 17px}
body.g3 .g3-sheet :is(ul,ol){margin:0 0 18px;padding-inline-start:22px}
body.g3 .g3-sheet li{margin-bottom:9px}
body.g3 .g3-sheet li::marker{color:var(--orange-ink)}
body.g3 strong{font-weight:700;color:var(--blueprint)}
body.g3 .lead{font-size:1.08em;color:var(--muted)}
body.g3 code{background:rgba(14,27,46,.07);padding:1px 6px;border-radius:3px;font:.88em ui-monospace,Consolas,monospace;direction:ltr;display:inline-block;max-width:100%;overflow-wrap:anywhere}
/* hr = a dimension line across the sheet */
body.g3 .g3-sheet hr{--c:rgba(86,96,112,.55);border:0;height:22px;margin:52px 0;max-width:none;
  background:
    linear-gradient(var(--c),var(--c)) 50% 50%/100% 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 10px 0/1px 100% no-repeat,
    linear-gradient(var(--c),var(--c)) calc(100% - 10px) 0/1px 100% no-repeat,
    linear-gradient(45deg,transparent 42%,var(--c) 42% 58%,transparent 58%) 4px 50%/13px 13px no-repeat,
    linear-gradient(45deg,transparent 42%,var(--c) 42% 58%,transparent 58%) calc(100% - 4px) 50%/13px 13px no-repeat}

/* note: a yellow sticky note on the sheet */
body.g3 .note{position:relative;margin:6px 0 26px;padding:18px 22px;background:#f4e7aa;rotate:-.35deg;
  background-image:linear-gradient(170deg,rgba(255,255,255,.4),transparent 45%);
  box-shadow:0 1px 1px rgba(60,40,0,.14),2px 10px 14px -9px rgba(40,25,5,.5)}
body.g3 .note:nth-of-type(even){rotate:.3deg}
body.g3 .note .lbl{display:block;font:400 26px/1.1 var(--hand);color:var(--blueprint);margin-bottom:4px}
body.g3 .note p:last-child{margin-bottom:0}

/* table of contents: a kapa card pinned to the sheet */
body.g3 .toc{--pad:22px 26px 18px;--tilt:.6deg;margin:30px 0 8px}
body.studio.g3 .toc h2{font-size:clamp(30px,3.4vw,38px);margin:0 0 .2em}
body.studio.g3 .toc h2::after{display:none}
body.g3 .toc ol{list-style:none;margin:0;padding:0;counter-reset:sec;border-top:1.5px solid var(--blueprint)}
body.g3 .toc li{counter-increment:sec;display:grid;grid-template-columns:2.2em 1fr;align-items:baseline;margin:0;
  padding:.32em 0;border-bottom:1px solid var(--rule);font-size:.95em;line-height:1.45}
body.g3 .toc li::before{content:counter(sec);font:700 14px/1 var(--body);color:var(--orange-ink)}
body.g3 .toc a{color:var(--ink);text-decoration:none;background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat;transition:background-size .25s}
body.g3 .toc a:hover,body.g3 .toc a:focus-visible{background-size:100% 2px}

/* tables: a drawing schedule, scrolling inside its own frame on a phone */
body.g3 .tw{overflow-x:auto;margin:6px 0 24px;background:#fcfbf7;border:3px double var(--blueprint);padding:2px}
body.g3 .tw table{border-collapse:collapse;width:100%;font-size:.93em;line-height:1.6;min-width:480px}
body.g3 .tw :is(th,td){padding:10px 13px;text-align:right;vertical-align:top;border-bottom:1px solid var(--rule)}
body.g3 .tw th{font-weight:700;color:var(--blueprint);white-space:nowrap;border-bottom:1.5px solid var(--blueprint)}
body.g3 .tw tr:last-child td{border-bottom:0}

/* gated: the course box, a blueprint sheet taped onto the paper */
body.g3 .gated{position:relative;margin:30px 0 26px;padding:24px 26px;rotate:.3deg;color:rgba(245,241,232,.88);
  background:linear-gradient(rgba(245,241,232,.07) 1px,transparent 1px) 0 0/28px 28px,
             linear-gradient(90deg,rgba(245,241,232,.07) 1px,transparent 1px) 0 0/28px 28px,
             radial-gradient(130% 100% at 30% 20%,#18304f,var(--blueprint) 70%);
  box-shadow:0 1px 1px rgba(0,0,0,.2),0 14px 24px -14px rgba(30,20,5,.7)}
body.g3 .gated p{margin:0}
body.g3 .gated strong{color:#fff}
body.g3 .gated a{color:#F0A882}

/* FAQ: lines on the sheet, a hand-drawn plus */
body.g3 .faq{border-top:1.5px solid var(--blueprint);margin-top:8px}
body.g3 .faq details{border-bottom:1px solid var(--rule)}
body.g3 .faq summary{cursor:pointer;list-style:none;position:relative;padding:16px 0;padding-inline-end:34px;
  font-weight:700;font-size:1.02em;line-height:1.5;color:var(--blueprint)}
body.g3 .faq summary::-webkit-details-marker{display:none}
body.g3 .faq summary::after{content:"+";position:absolute;inset-inline-end:4px;top:8px;font:400 34px/1 var(--hand);color:var(--orange-ink);transition:rotate .25s}
body.g3 .faq details[open] summary::after{rotate:45deg}
body.g3 .faq .a{padding:0 0 18px;color:var(--muted)}
body.g3 .faq .a p:last-child{margin-bottom:0}

/* after the sheet: reading list, next guide, author, course, laid out on the mat */
body.g3 .g3-after{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"more author" "next next" "cta cta";
  gap:46px 30px;align-items:start;width:min(1000px,100% - 32px);margin:64px auto 0}
body.g3 .more{grid-area:more;--tilt:-.8deg;--pad:24px 28px 22px}
body.g3 .author{grid-area:author;--tilt:.7deg;--pad:24px 28px 22px;margin-top:40px}
body.studio.g3 :is(.more,.author) h2{font-size:clamp(30px,3.4vw,40px)}
body.g3 .more ul{list-style:none;margin:0;padding:0}
body.g3 .more li{position:relative;padding:.35em 1.3em .35em 0;line-height:1.55;font-size:.95em}
body.g3 .more li::before{content:"";position:absolute;right:0;top:1em;width:.8em;height:2px;background:var(--blueprint);rotate:-8deg}
body.g3 .kapa.more p,body.g3 .kapa.author p{color:var(--ink);font-size:.95em}
body.g3 .nextnav{grid-area:next;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
  --pad:22px 28px;--tilt:-.4deg;width:min(100%,760px);justify-self:center}
body.g3 .nextnav .lbl{display:block;font:400 24px/1.1 var(--hand);color:var(--blueprint);margin-bottom:4px}
body.g3 .nextnav .t{font:700 1.12em/1.4 var(--body);color:var(--blueprint);text-decoration:underline 2px rgba(14,27,46,.35);text-underline-offset:5px}
body.g3 .nextnav .t:hover{text-decoration-color:var(--blueprint)}
body.g3 .nextnav .all{font-weight:700;color:var(--blueprint);white-space:nowrap}
body.g3 .cta-box{grid-area:cta;position:relative;rotate:.6deg;padding:clamp(30px,4vw,46px) clamp(22px,4vw,46px);
  color:rgba(245,241,232,.88);text-align:center;width:min(100%,820px);justify-self:center;box-sizing:border-box;
  background:linear-gradient(rgba(245,241,232,.07) 1px,transparent 1px) 0 0/30px 30px,
             linear-gradient(90deg,rgba(245,241,232,.07) 1px,transparent 1px) 0 0/30px 30px,
             radial-gradient(130% 100% at 30% 20%,#18304f,var(--blueprint) 70%);
  box-shadow:0 1px 1px rgba(0,0,0,.2),0 20px 34px -16px rgba(30,20,5,.7)}
body.studio.g3 .cta-box h2{color:var(--cream)}
body.g3 .cta-box h2::after{margin-inline:auto}
body.g3 .cta-box p{max-width:56ch;margin-inline:auto}
body.g3 .cta-box a:not(.btn){color:#F0A882}
body.g3 .btn{display:inline-block;margin-top:14px;padding:14px 32px;background:var(--orange);color:var(--blueprint);font-weight:900;
  text-decoration:none;font-size:1.03em;border-radius:2px;
  box-shadow:-1px 1px 0 #b45c3c,-2px 2px 0 #f3d9c9,-3px 3px 0 #f3d9c9,-4px 4px 0 #b45c3c,-5px 8px 10px rgba(0,0,0,.35);transition:translate .2s}
body.g3 .btn:hover{translate:0 -2px}
body.g3 .cta-box .cap{text-wrap:balance;font-size:.86em;color:rgba(245,241,232,.66);margin-top:14px}
body.g3 .tb-orn{display:flex;align-items:center;gap:18px;color:var(--blueprint);border-inline-start:1px solid var(--blueprint)}
body.g3 .tb-orn .north{cursor:pointer}
body.g3 .tb-legal p{margin:0 0 .5em}
body.g3 .tb-legal p:last-child{margin:0}

@media (max-width:900px){
  body.g3 .g3-hero-grid{display:block}
  body.g3 .g3-title{margin:-44px 12px 0 8px;padding:22px 22px 24px}
  body.g3 .g3-after{grid-template-columns:1fr;grid-template-areas:"more" "author" "next" "cta"}
  body.g3 .author{margin-top:0}
}
@media (max-width:700px){
  body.g3 .g3-print img{aspect-ratio:4/3}
  body.g3 .g3-sheet{width:calc(100% - 28px);margin-top:36px}
  body.g3 .toc{--pad:18px 18px 14px}
  body.g3 .note{padding:16px 18px}
  body.g3 .gated{padding:20px}
  body.g3 .cta-box.taped-corners::before{right:-12px}
  body.g3 .cta-box.taped-corners::after{left:-12px}
}
@media (max-width:640px){body.g3 .tb-orn{display:none}}
@media (prefers-reduced-motion:reduce){
  body.g3 .faq summary::after,body.g3 .btn,body.g3 .toc a{transition:none}
}

/* ---------- light: the button that turns the day (studio.js) ---------- */
.mood-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 13px;box-sizing:border-box;
  font:500 15px/1 var(--body);color:var(--blueprint);background:var(--paper);border:1px solid var(--rule);border-radius:22px;
  cursor:pointer;box-shadow:0 8px 16px -10px rgba(10,20,14,.6)}
.mood-btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mood-btn:hover{background:#fff}
.mood-btn.is-fixed{position:fixed;left:30px;bottom:18px;z-index:56}
@media (max-width:600px){.mood-btn.is-fixed{left:20px;bottom:14px}}
[data-mood=night] .mood-btn svg{color:var(--orange-ink)}

/* ---------- live clock: a wall clock on the studio wall ([data-clock], built by studio.js) ---------- */
.clock{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:start;gap:4px 14px}
.clock-face{grid-row:span 2;width:var(--clock,96px);height:auto;overflow:visible;filter:drop-shadow(0 10px 9px rgba(10,6,2,.5))}
.clock-rim{fill:none;stroke:var(--blueprint);stroke-width:5}
.clock-paper{fill:var(--paper)}
.clock-ticks line{stroke:var(--blueprint);stroke-width:1.7}
.clock-ticks .fine{stroke:var(--muted);stroke-width:.7}
.clock-h,.clock-m{stroke:var(--blueprint);stroke-linecap:round}
.clock-h{stroke-width:3.8}
.clock-m{stroke-width:2.3}
.clock-s{stroke:var(--orange);fill:var(--orange);stroke-width:1.1}
.clock-pin{fill:var(--paper)}
.clock-read{margin:0;display:flex;align-items:baseline;gap:8px;font:500 13px/1.2 var(--body);color:var(--cream);text-shadow:0 1px 8px rgba(20,12,6,.75)}
.clock-read time{font:500 27px/1 var(--body);letter-spacing:.02em;font-variant-numeric:tabular-nums} /* not the hand font: its 1 is a slash and 7 reads as a letter */
.clock .mood-btn{justify-self:start}

/* ---------- night: "the night before the deadline". The page goes dark and the cursor is the desk lamp ----------
   The lamp multiplies the page; outside the pool it stops at #bcc1cd, which keeps muted text on paper at AA. */
[data-mood=night] body.studio{background-color:#26352b}
[data-mood=night] body.studio::before{filter:brightness(.42) saturate(.7)}
.lamp{display:none}
[data-mood=night] .lamp{display:block;position:fixed;inset:0;z-index:55;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(circle min(46vmin,380px) at var(--lx,30%) var(--ly,34%),#fff5e2,#fdf0dc 40%,#bcc1cd)}
@media (forced-colors:active),(prefers-contrast:more){[data-mood=night] .lamp{display:none}}
/* links: #B4532F on paper is 4.57:1 by day but ~3.9:1 under the lamp's #bcc1cd edge; this one is ~5.2:1 there (WCAG AA, promised in accessibility.html) */
html[data-mood=night]{--orange-ink:#8f3f22}

/* light changes cross-fade (studio.js adds .mood-vt around a same-page view transition) */
html.mood-vt::view-transition-old(root){animation:.9s ease both vt-out}
html.mood-vt::view-transition-new(root){animation:.9s ease both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ---------- page transition: a trace sheet slides over the old page, the new page is under it ---------- */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.vt-sheet{display:none}
.vt-sheet:is(.is-on,.is-cover){display:block;position:fixed;inset:0;z-index:70;pointer-events:none;
  background:var(--img-trace) center/cover,rgba(240,237,230,.88);
  box-shadow:-28px 0 40px -18px rgba(10,20,14,.4),28px 0 40px -18px rgba(10,20,14,.4)}
.vt-sheet.is-on{translate:100% 0;view-transition-name:trace} /* captured just off the right edge (RTL: the sheet comes from the reading side) */
::view-transition-group(trace){animation:vt-trace 1s cubic-bezier(.65,0,.35,1) both}
::view-transition-old(trace){animation:none}
@keyframes vt-trace{to{translate:-200vw 0}}
html:not(.mood-vt)::view-transition-old(root){animation:vt-hold-out 1s both}
html:not(.mood-vt)::view-transition-new(root){animation:vt-hold-in 1s both}
@keyframes vt-hold-out{0%,46%{opacity:1}54%,100%{opacity:0}}
@keyframes vt-hold-in{0%,46%{opacity:0}54%,100%{opacity:1}}
.vt-sheet.is-cover{animation:vt-cover .45s cubic-bezier(.5,0,.3,1) both} /* fallback: the sheet slides on, then the link opens */
@keyframes vt-cover{from{translate:100% 0}}

@media (prefers-reduced-motion:reduce){
  .clock-s{display:none}
}

/* ---------- guides-3 set (QA): long reads keep the light button off the text ----------
   Below 1100px the fixed button would sit over the paper sheet; it moves to the end of the page instead. */
@media (max-width:1100px){body.g3 .mood-btn.is-fixed{position:relative;left:auto;bottom:auto;display:flex;width:fit-content;margin:28px auto 28px}}

/* ---------- guides-1 set (QA): reading comfort on the guide pages ----------
   The light button moves off the text to the end of the page below 1100px (same as guides-3);
   on a phone the ready-made prompt sheds its nested padding (inline styles from the source, hence !important). */
@media (max-width:1100px){body.g1 .mood-btn.is-fixed{position:relative;left:auto;bottom:auto;display:flex;width:fit-content;margin:28px auto 28px}}
@media (max-width:600px){
  body.g1 #prompt{padding:1.2rem .85rem !important}
  body.g1 #prompt > div{padding:.8rem .7rem !important}
  body.g1 #prompt pre{padding:.85rem .8rem !important}
}
/* a schedule wider than the phone sheet scrolls inside its frame: a soft shadow on the left edge says there is more,
   and it disappears once the reader has scrolled to the last column */
body.g3 .tw{background:
  linear-gradient(to right,#fcfbf7 40%,rgba(252,251,247,0)) left center/44px 100% no-repeat local,
  linear-gradient(to right,rgba(14,27,46,.22),rgba(14,27,46,0)) left center/16px 100% no-repeat scroll,
  #fcfbf7}

/* blog-html set: room for the ascender of a leading ל on narrow title sheets */
body.bh .bh-hero h1{padding-inline-start:.1em}

/* ---------- blog-html set (QA): the light button stays off the reading sheet ----------
   Below 1100px the fixed button sat over the article text; it moves to the end of the page (same as guides-1/3). */
@media (max-width:1100px){body.bh .mood-btn.is-fixed{position:relative;left:auto;bottom:auto;display:flex;width:fit-content;margin:28px auto 28px}}

/* ---------- light button on pages without the clock (7.10, after the 20-page migration) ----------
   Floating in a corner it ended up over article text on wide sheets too; on every page without [data-clock]
   it lies quietly at the end of the page, centred under the title block, at every screen width. */
.mood-btn.is-fixed{position:relative;left:auto;bottom:auto;display:flex;width:fit-content;margin:-8px auto 28px}

/* credit for the lobby photo (interior + ceiling design: Bella Shviro; Shlomi drew the shop drawings) */
.photo-credit{display:block;margin:10px 0 0;font:400 13px/1.5 var(--body);color:var(--muted)}
.bh-art + .photo-credit{text-align:center;margin:12px auto 0}
.leaf .photo-credit{position:relative;z-index:2;font-size:12px}
.bh-art + .photo-credit{position:relative;z-index:3;margin-top:44px}
@media (max-width:600px){.bh-art + .photo-credit{margin-top:64px;padding-inline:8px}}

/* link to the making-of page: footer of every page + the note on the home hero (7.10) */
.tb-mo{margin:0 0 8px}.tb-mo a{font-weight:700}
.hero-note .mo-link{margin:10px 0 0;font-weight:700}
.hero-note .mo-link a{color:var(--orange-ink,#B4532F)}

/* clips: a short film mounted like a print. <figure class="kapa clip [tall]"><video data-ambient ...>
   studio.js plays video[data-ambient] only while it is on screen; reduced motion = the poster only */
.clip{margin:0;--pad:8px}
.clip video{display:block;width:100%;height:auto;background:#d9d5cc}
.clip.tall video,.clip video.tall{aspect-ratio:9/16;object-fit:cover}
.clip figcaption{margin-top:9px;padding-inline:4px;font-size:.86em;line-height:1.55;color:var(--muted)}
:is(.sheet,.bh-sheet,.g1-sheet) .clip{margin:2.2em auto}
:is(.sheet,.bh-sheet,.g1-sheet) .clip.tall{width:min(300px,78%)}
.clip-pair{display:grid;grid-template-columns:3.16fr 1fr;gap:14px;align-items:end} /* 16:9 + 9:16 at equal height */
@media (max-width:600px){.clip-pair{grid-template-columns:1fr}.clip-pair > video:last-child{width:56%;justify-self:center}}