/* =========================================================
   HAUS OF JJ — components carried over from Haus of Techniques (Oct 2026)
   Loaded after site.css on every page. Remove the <link> to hot-carry.css
   (and the hot-carry.js / effects.js <script> tags) to go back.

   1. Drafting Room palette        6. Status on project cards
   2. Type styles                  7. Enquiry strip on project pages
   3. Buttons with an arrow cell   8. Title block: Location, General Notes, WhatsApp
   4. "Next step" boxes            10. Numbered cards with line icons (About)
   5. Works filters                12. Pencil + highlighter (effects.js)
========================================================= */

/* =========================================================
   1. DRAFTING ROOM PALETTE (same values as hausoftechniques.com)
   Drafting Film  #F6F6F3  sheet background
   Technical Pen  #121316  text, linework, rules
   Redline        #D42A1F  section numbers, current nav, highlights of state
   Cyanotype      #1C4F9C  Blueprint mode (unchanged)
   Trace Blue     #E2EAF5  image placeholders, soft fills
   Label grey     #66696E  small uppercase labels
   Highlighter    #F3D230  key-phrase marker only
========================================================= */
:root{
  --dr-film:#f6f6f3;--dr-pen:#121316;--dr-red:#d42a1f;--dr-cyan:#1c4f9c;
  --dr-trace:#e2eaf5;--dr-label:#66696e;--dr-hl:#f3d230;--dr-grey:#ecebe6;
  --hot-motion:320ms cubic-bezier(.2,.75,.25,1);
  --body-ink:#3a3a3a;--label-ink:var(--dr-label);
}
html:not(.blueprint){--ink:var(--dr-pen);--paper:var(--dr-film);--red:var(--dr-red);--line:var(--dr-pen);--head-bg:#ebebe7}
html:not(.blueprint),html:not(.blueprint) body{background:var(--dr-film)!important;color:var(--dr-pen)}
html.blueprint{--body-ink:rgba(255,255,255,.85);--label-ink:rgba(255,255,255,.62)}

/* surfaces and lines that were hard-coded black / white */
html:not(.blueprint) #header,html:not(.blueprint) #header .header-inner,
html:not(.blueprint) .menu-open .mobile-nav,html:not(.blueprint) #footer-sections .footer-inner{background:var(--dr-film)!important}
html:not(.blueprint) .header-icon.hot{color:var(--dr-pen)}
html:not(.blueprint) .menu-toggle span{background:var(--dr-pen)}
html:not(.blueprint) .lb-prev::before,html:not(.blueprint) .lb-next::before{border-color:var(--dr-pen)}
html:not(.blueprint) #hjj-north svg circle{stroke:var(--dr-pen)}
html:not(.blueprint) #hjj-north svg path{fill:var(--dr-red)}

/* image placeholders while photos load: material hatch on Trace Blue */
html:not(.blueprint) .m-item,html:not(.blueprint) .card-img,html:not(.blueprint) .g-item{background:var(--hatch-timber),var(--dr-trace)!important}
html:not(.blueprint) .card:nth-child(3n+2) .card-img,html:not(.blueprint) .g-item:nth-child(3n+2),html:not(.blueprint) .m-item:nth-child(3n+2){background:var(--hatch-concrete),var(--dr-trace)!important}
html:not(.blueprint) .card:nth-child(3n) .card-img,html:not(.blueprint) .g-item:nth-child(3n),html:not(.blueprint) .m-item:nth-child(3n){background:var(--hatch-steel),var(--dr-trace)!important}

/* hatched drop shadow: one line every 6.4px, as on Haus of Techniques */
:root{--hatch-shadow:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 6.4px)}
html.blueprint{--hatch-shadow:repeating-linear-gradient(45deg,var(--red) 0 1px,transparent 1px 6.4px)}

/* =========================================================
   2. TYPE STYLES
   Tier 2  titles in the condensed display face
   Tier 3  body copy in normal (sentence) case, softer ink
   Tier 4  labels stay uppercase, small and grey
========================================================= */
/* tier 3 — reading text */
.about .about-text p:not(.about-lead),
.proj-desc p,
.hiw .hot-wwd-body p{
  text-transform:none!important;letter-spacing:0!important;font-size:14px!important;line-height:1.65!important;color:var(--body-ink)!important}
.about .about-text p:not(.about-lead){font-size:15px!important}
.proj-desc p{max-width:68ch}

/* tier 2 — project title in the strip and the drawing title in the footer */
.proj-title .ts-name .ts-v,
#footer-sections .tb-title .tb-val{
  font-family:var(--hot-display);font-weight:700;font-stretch:condensed;letter-spacing:0!important;line-height:1.05}
.proj-title .ts-name .ts-v{font-size:clamp(20px,1.8vw,26px)!important}
#footer-sections .tb-title .tb-val{font-size:clamp(17px,1.4vw,21px)!important}

/* tier 4 — small labels in Label grey */
html:not(.blueprint) .hot-sec .ts-k,
html:not(.blueprint) .hot-sec .hot-sec-scale .ts-v,
html:not(.blueprint) .proj-title .ts-k,
html:not(.blueprint) .hot-num:not(.hot-num--red),
html:not(.blueprint) .pf-k{color:var(--dr-label)!important}
html.blueprint :is(.hot-sec .ts-k,.hot-sec .hot-sec-scale .ts-v,.proj-title .ts-k,.pf-k){color:var(--label-ink)!important;opacity:1}

/* =========================================================
   3. BUTTONS — label cell | arrow cell. The arrow rests → and turns ↗;
   on hover the arrow cell inks in. The outline never changes.
========================================================= */
.st-btns{gap:16px!important}
.st-btn{position:relative;display:inline-flex!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;
  min-width:230px!important;min-height:48px;padding:0 56px 0 0!important;
  border:var(--rule)!important;background:var(--paper)!important;color:var(--ink)!important;
  font-size:11px!important;font-weight:600;letter-spacing:.14em!important;text-decoration:none;transition:none!important}
.st-btn>span{flex:1 1 auto;display:flex;align-items:center;padding:16px 22px}
.st-btn::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;border-left:var(--rule);transition:background-color 180ms}
.st-btn i{position:absolute!important;right:22px;top:50%;margin-top:-5px;z-index:1;color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .st-btn:hover{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--ink)!important}
  .st-btn:hover::after{background:var(--ink)}
  .st-btn:hover i{color:var(--paper)!important}
}
.st-btn:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.st-btn:focus-visible::after,.st-btn:active::after{background:var(--ink)}
.st-btn:focus-visible i,.st-btn:active i{color:var(--paper)!important}
html.blueprint .st-btn:hover{color:var(--ink)!important}
/* "back" buttons keep the arrow on the right, pointing back */
@media (max-width:767px){.st-btn{min-width:0!important;width:100%}.st-btns{width:100%}}

/* =========================================================
   4. "NEXT STEP" BOX beside a title strip: label cell | arrow cell
========================================================= */
.hot-sec-row{display:flex;align-items:stretch;gap:24px}
.hot-sec-row .hot-sec{flex:1 1 auto;min-width:0;margin-bottom:0!important}
.hot-sec-go{display:flex;align-items:stretch;flex:0 0 auto;border:var(--rule);color:var(--ink);text-decoration:none;background:var(--paper)}
.hot-sec-row.has-note .hot-sec-go{align-self:flex-start;height:var(--hsg-h,auto)}
.hsg-l{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 24px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.14em;white-space:nowrap}
.hsg-k{font-size:9px;font-weight:400;letter-spacing:.14em;color:var(--label-ink)}
.hsg-a{position:relative;width:56px;border-left:var(--rule);transition:background-color 180ms}
.hsg-a::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:currentColor;transform:rotate(45deg);
  transition:transform 260ms cubic-bezier(.3,.7,.2,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7'/%3E%3C/svg%3E") center/contain no-repeat}
.hot-sec-go--back .hsg-a::after{transform:scaleX(-1) rotate(45deg)}
@media (hover:hover) and (pointer:fine){
  .hot-sec-go:hover .hsg-a{background:var(--ink);color:var(--paper)}
  .hot-sec-go:hover .hsg-a::after{transform:rotate(0)}
  .hot-sec-go--back:hover .hsg-a::after{transform:scaleX(-1) rotate(0)}
  .hot-sec-go:hover .hsg-k{color:var(--red)}
}
.hot-sec-go:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.hot-sec-go:focus-visible .hsg-a,.hot-sec-go:active .hsg-a{background:var(--ink);color:var(--paper)}
@media (min-width:768px) and (max-width:1100px){.hsg-l{padding:12px 16px}}
@media (max-width:767px){
  .hot-sec-row{flex-wrap:wrap;gap:12px}
  .hot-sec-row .hot-sec{flex:1 1 100%}
  .hot-sec-go{margin-left:auto;min-height:48px}
  .hot-sec-row.has-note .hot-sec-go{height:auto}
  .hsg-a{width:48px}
}

/* page headers on Works / Explorations */
.hot-intro{padding:0 var(--gap);margin:0 auto clamp(32px,3.5vw,52px)}
.hot-intro .hot-sec .ts-no .ts-v{color:var(--red)}

/* project pages: the row carries the strip's frame margins */
.hot-sec-row.proj-go{margin:0 var(--gap) 32px}
.status-bar + .hot-sec-row.proj-go{margin-top:20px}
.hot-sec-row.proj-go .proj-title{margin:0!important;flex:1 1 auto;min-width:0}
/* About: the box beside a section strip */
.story-sec>.hot-sec-row{margin-bottom:0}
.story-sec>.hot-sec-row+.hatch-shadow,.story-sec>.hot-sec-row+.hot-hww{margin-top:clamp(28px,2.6vw,40px)}
#places>.hot-sec-row .hot-sec{margin-right:0}

/* =========================================================
   5. WORKS FILTERS — Type / Status / Region with live counts
========================================================= */
.pf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,1fr) minmax(210px,.8fr);border:var(--rule);margin:0 var(--gap) clamp(32px,3vw,48px);background:var(--paper)}
.pf-g{display:flex;flex-direction:column;border-right:var(--rule);min-width:0}
.pf-g:last-child{border-right:0}
.pf-k{display:block;padding:6px 14px;background:var(--head-bg);border-bottom:var(--rule);font-size:8.5px;font-weight:600;letter-spacing:.14em}
.pf-o{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px}
.pf-b{font:inherit;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border:var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s}
.pf-b span{opacity:.5;margin-left:6px}
.pf-b:hover{background:var(--dr-grey)}
.pf-b[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.pf-b[aria-pressed="true"] span{opacity:.7}
.pf-b:disabled{cursor:default;opacity:.35}
.pf-b:focus-visible{outline:1px solid var(--red);outline-offset:2px}
.pf-n{padding:12px 14px 6px;font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:22px;line-height:1.2;white-space:nowrap}
.pf-n em{font-style:normal;color:var(--red)}
.pf-reset{display:block;margin:0 14px 12px;padding:0;border:0;background:none;font:inherit;font-size:9.5px;letter-spacing:.14em;color:var(--red);cursor:pointer;text-align:left;visibility:hidden}
.pf.on .pf-reset{visibility:visible}
.card.pf-hide{display:none!important}
.card.pf-in{animation:pfIn .35s ease both}
@keyframes pfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pf-empty{display:none;padding:40px var(--gap);font-size:12px;letter-spacing:.1em;color:var(--label-ink)}
html.blueprint .pf-b{background:transparent}
html.blueprint .pf-b:hover{background:rgba(255,255,255,.1)}
html.blueprint .pf-b[aria-pressed="true"]{background:var(--ink);color:#1c4f9c}
@media (min-width:768px) and (max-width:1100px){
  .pf{grid-template-columns:1fr 1fr}
  .pf-g{border-bottom:var(--rule)}
  .pf-g:nth-child(2n){border-right:0}
  .pf-g:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:767px){
  .pf{grid-template-columns:minmax(0,1fr)}
  .pf-g{border-right:0;border-bottom:var(--rule)}
  .pf-g:last-child{border-bottom:0;flex-direction:row;align-items:center;justify-content:space-between}
  .pf-g:last-child .pf-k{display:none}
  .pf-n{padding:12px 14px}
  .pf-reset{margin:0 14px}
}
@media (prefers-reduced-motion:reduce){.card.pf-in{animation:none}}

/* =========================================================
   7. ENQUIRY STRIP before the sheet index (project pages)
========================================================= */
.hot-sec-row.proj-enq{margin:clamp(40px,5vw,72px) var(--gap) 0}
.hot-sec-row.proj-enq + #itemPagination.sx{margin-top:24px!important}
.hot-sec-row.proj-enq .ts-no .ts-v{color:var(--red)}
@media (max-width:767px){.hot-sec-row.proj-go{margin-bottom:28px}}

/* =========================================================
   8. TITLE BLOCK: LOCATION under DRAWN BY, GENERAL NOTES strip
========================================================= */
/* desktop: DRAWN BY over LOCATION in column 1 */
#footer-sections .tb-brand{grid-row:1!important;justify-content:flex-start}
#footer-sections .tb-brand .tb-logo{margin-top:auto;margin-bottom:6px}
#footer-sections .tb-loc{grid-column:1;grid-row:2;border-left:0!important;border-top:var(--rule)!important;min-height:0!important;padding-bottom:10px!important}
#footer-sections .tb-loc .tb-val{font-size:10.5px}
#footer-sections .tb-notes{grid-column:1 / -1!important;grid-row:auto!important;border-left:0!important;border-top:var(--rule)!important;min-height:0!important;padding-bottom:12px!important}
#footer-sections .tb-notes .tb-val{font-size:9px;line-height:1.6;letter-spacing:.08em;opacity:.8;max-width:none}
/* tablet: LOCATION | CONTACT | MODE | SHEET on row 2 */
@media (min-width:768px) and (max-width:1100px){
  #footer-sections .tb-loc{grid-column:1!important;grid-row:2!important}
  #footer-sections .tb-contact{grid-column:2!important;grid-row:2!important;border-left:var(--rule)!important}
}
/* phone: DRAWN BY | LOCATION side by side */
@media (max-width:767px){
  #footer-sections .tb-brand{grid-column:1!important;grid-row:1!important}
  #footer-sections .tb-loc{grid-column:2!important;grid-row:1!important;border-left:var(--rule)!important;border-top:0!important;justify-content:flex-start}
  #footer-sections .tb-loc .tb-val{margin-top:auto}
  #footer-sections .tb-loc .tb-label{margin-left:-12px!important;margin-right:-12px!important}
}

/* =========================================================
   10. NUMBERED CARDS WITH LINE ICONS (About: How I work)
========================================================= */
.hot-hww{--pad:clamp(22px,2.4vw,40px);--hs:18px;position:relative;isolation:isolate;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--rule);border-left:var(--rule);margin-right:var(--hs);margin-bottom:var(--hs)}
.hot-hww::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:var(--hs) calc(-1 * var(--hs)) calc(-1 * var(--hs)) var(--hs);background:var(--hatch-shadow)}
.hot-hww-card{display:flex;flex-direction:column;min-width:0;min-height:260px;padding:var(--pad);border-right:var(--rule);border-bottom:var(--rule);background:var(--paper);transition:background-color 200ms ease}
.hot-wwd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:40px}
.hot-icon{display:inline-flex;flex:0 0 auto;width:73px;height:73px;color:var(--ink);transition:color 200ms ease}
.hot-icon svg{display:block;width:100%;height:100%;overflow:visible}
.hot-icon svg *{transform-box:fill-box;transform-origin:center;transition:transform var(--hot-motion);stroke-width:calc(64 / 73)}
.hot-num{font-size:11px;font-weight:600;line-height:1;letter-spacing:.08em;color:var(--red)!important}
.hot-wwd-body{margin-top:auto}
.hot-wwd-body h3{margin:0 0 14px;font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(20px,1.7vw,24px);line-height:1.05;letter-spacing:0;text-transform:uppercase}
.hot-wwd-body p{margin:0}
.i-draw{stroke-dasharray:1}
@media (hover:hover) and (pointer:fine){
  html:not(.blueprint) .hot-hww-card:hover{background:var(--dr-grey)}
  html.blueprint .hot-hww-card:hover{background:rgba(255,255,255,.08)}
  .hot-hww-card:hover .hot-icon{color:var(--red)}
  .hot-hww-card:hover .i-turn{animation:hot-turn 520ms cubic-bezier(.2,.75,.25,1) both}
  .hot-hww-card:hover .i-pulse{animation:hot-pulse 360ms cubic-bezier(.2,.75,.25,1) both}
  .hot-hww-card:hover .i-d1{animation-delay:90ms}
  .hot-hww-card:hover .i-d2{animation-delay:180ms}
  .i-stack{transform-origin:center bottom!important}
  .hot-hww-card:hover .i-stack{transform:scaleY(1.5)}
  .hot-hww-card:hover .i-inR{transform:translateX(1.5px)}
  .hot-hww-card:hover .i-inL{transform:translateX(-1.5px)}
  .hot-hww-card:hover .i-draw{animation:hot-draw 420ms cubic-bezier(.2,.75,.25,1) both}
}
@keyframes hot-turn{0%{transform:scaleX(1) skewY(0)}46%{transform:scaleX(.08) skewY(-3deg)}54%{transform:scaleX(-.08) skewY(3deg)}100%{transform:scaleX(-1) skewY(0)}}
@keyframes hot-pulse{0%{transform:scale(1)}58%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes hot-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (max-width:900px){.hot-hww{grid-template-columns:minmax(0,1fr)}.hot-hww-card{min-height:0}.hot-wwd-top{margin-bottom:28px}}
@media (max-width:767px){.hot-hww{--hs:10px}.hot-icon{width:57px;height:57px}.hot-icon svg *{stroke-width:calc(64 / 57)}}
@media (prefers-reduced-motion:reduce){.hot-hww-card *{animation:none!important;transition:none!important}}

/* =========================================================
   12. HIGHLIGHTER + PENCIL (drawn by effects.js)
   The highlighter replaces the thin red underline on key phrases.
   The map panel on About keeps its plain text.
========================================================= */
mark.hl{color:inherit;padding:0 .08em;margin:0 -.04em;box-shadow:none!important;
  background:linear-gradient(transparent 55%,var(--dr-hl) 55%) no-repeat 0 0/100% 100%!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html.blueprint mark.hl{color:#121316;background-image:linear-gradient(transparent 55%,rgba(255,230,0,.85) 55%)!important}
.smap-info mark.hl{background:none!important;color:inherit!important;padding:0;margin:0;box-shadow:inset 0 -1px 0 var(--red)!important}

#hotfx-over{position:absolute;left:0;top:0;width:100%;height:0;z-index:40;pointer-events:none;overflow:hidden}
#hotfx-tools{position:absolute;left:0;top:0;width:100%;height:0;z-index:76;pointer-events:none;overflow:hidden}
#hotfx-tools svg{pointer-events:none}
html.has-hotfx mark.hl.hfx-hl{background-image:var(--hfx-hl)!important;background-repeat:no-repeat!important;background-position:0 0!important;background-size:0% 100%!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s cubic-bezier(.55,.05,.35,1)!important}
html.has-hotfx mark.hl.hfx-hl.hfx-drawn{background-size:100% 100%!important}
html.blueprint.has-hotfx mark.hl.hfx-hl{color:#121316;background-image:var(--hfx-hl-bp)!important}
@media (prefers-reduced-motion:reduce){html.has-hotfx mark.hl.hfx-hl{transition:none!important}}
.hfx-tool{pointer-events:auto;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hfx-tool:focus-visible .hfx-hit{stroke:#d42a1f;stroke-width:.8}
.hfx-hit{pointer-events:all}
.hfx-print{font:400 6.5px "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:1.6px;fill:#c9cdd1}
.hfx-lead{fill:#2b2b2b}
#hotfx-floor{position:fixed;inset:0;z-index:75;pointer-events:none;overflow:hidden}
.hfx-fallen{position:absolute;left:0;top:0;background:#2b2b2b;border-radius:1px;box-shadow:0 1px 1.5px rgba(0,0,0,.25);transform-origin:0 50%}
/* room above the title block for the pencil to rest */
#footer-sections{margin-top:clamp(56px,6vw,96px)!important}

/* project number in the title strip in Redline, as on Haus of Techniques */
.proj-title .ts-no .ts-v{color:var(--red)}
/* the map panel on About keeps its plain red underline, never the highlighter band */
html .smap-info mark.hl,html.has-hotfx .smap-info mark.hl.hfx-hl,html.blueprint.has-hotfx .smap-info mark.hl.hfx-hl{
  background:none!important;background-image:none!important;color:inherit!important;padding:0!important;margin:0!important;box-shadow:inset 0 -1px 0 var(--red)!important}

/* =========================================================
   iPAD + SAFARI FIXES (Oct 2026)
========================================================= */
/* Map labels: a separate copy of each label is drawn underneath as its halo
   (added by hot-carry.js). Safari ignores the old one-element "paint-order"
   halo on small text and painted the outline over the letters, which made
   key-plan names look broken. The original labels no longer carry a stroke. */
.kp .kt:not(.tx-halo),.stmap.lg .apl:not(.tx-halo){stroke:none!important}
svg .tx-halo{fill:none!important;stroke:var(--paper)!important;stroke-linejoin:round;stroke-linecap:round;paint-order:normal!important;
  stroke-width:.32em!important;opacity:1!important;pointer-events:none}
.kp .tx-halo{stroke-width:var(--kts,.5px)!important}
.stmap.lg .apl.tx-halo{stroke-width:.3em!important}
/* stop numbers under each place name: heavier, so they read on both paper and blueprint */
.stmap .pin .pn{font-weight:600}
html.blueprint .stmap .pin .pn{fill:#dbe9ff}
html.blueprint .stmap .brk text,html.blueprint .stmap .det-t,html.blueprint .stk .brk2 text{opacity:.8}

/* Section strip + "next step" box on tablets: the strip keeps the full width
   (titles no longer squeeze onto three lines) and the box sits under it on the right */
@media (min-width:768px) and (max-width:1100px){
  .hot-sec-row{flex-wrap:wrap;gap:16px}
  .hot-sec-row .hot-sec{flex:1 1 100%}
  .hot-sec-row .hot-sec-go{margin-left:auto;min-height:52px}
  .hot-sec-row.has-note .hot-sec-go{height:auto}
}

/* About, tablet portrait (768–900px): photo and KEY side by side instead of the
   photo sitting alone on the left; the biography runs in two columns */
@media (min-width:768px) and (max-width:900px){
  .about .about-sticky{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px;align-items:start}
  .about .about-sticky>.hatch-shadow{grid-column:1;grid-row:1}
  .about .about-sticky>.fig{grid-column:1;grid-row:2}
  .about .about-sticky>.about-key{grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:start}
  .about .about-img{max-width:none!important;width:100%}
  .about .about-text{columns:2 260px!important;column-gap:36px;column-rule:var(--rule)}
  .about .about-text .about-lead,.about .about-text .st-btns{column-span:all}
}

/* About "How I work" cards: three in a row on tablets too (one column only on phones) */
@media (min-width:768px) and (max-width:900px){
  .hot-hww{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hot-hww-card{min-height:250px;padding:22px}
  .hot-wwd-top{margin-bottom:28px}
  .hot-wwd-body h3{font-size:18px}
  .hiw .hot-wwd-body p{font-size:13px!important}
}

/* =========================================================
   EASIER READING (Oct 2026) — shared by Haus of JJ and Haus of Techniques
   Less "encyclopedia": picture first, a short intro, details on request,
   and no text smaller than 10px. Pairs with the "easier reading" script.
========================================================= */

/* 1. Type sizes: reading text never below 16px, labels never below 10px */
.proj-desc p,
.about .about-text p:not(.about-lead),
.hiw .hot-wwd-body p,
.hot-hww .hot-wwd-body p,
.hot-wwd-body p,
.hot-statement p:not(.hot-kicker),
.hot-hw-text,.hot-wwd-list li,.hot-hw-list li,.hot-av p,
.st-learn{
  font-size:clamp(16px,1.12vw,17px)!important;line-height:1.65!important;letter-spacing:0!important}
.hot-sec .hot-sec-note .ts-v{font-size:15px!important;line-height:1.55!important}
.ts-k,.tb-label,.pf-k,.sx-k,.g-filter-k,.ak-h,.hsg-k,.k9,.g-count,.sb-stages,.sb-head,
.kp figcaption,.smap-cap,.cv th,.about-key dt,.hf-help,.hot-kicker,.hot-label{font-size:10px!important}
.proj-meta dt,.proj-meta dd,.cv td,#footer-sections .tb-val,.about-key dd,.rtag-name{font-size:12px!important}
.cv-exp td:last-child{font-size:11.5px!important}
.rtag-sub{font-size:10px!important}
figcaption,.fig,.g-lead figcaption,.hot-fig figcaption{font-size:10.5px!important}
.proj-meta dt,.proj-meta dd{line-height:1.5}

/* 2. Project pages: the lead picture opens the page, under the title strip */
#page>.g-lead{margin:0 var(--gap) clamp(32px,3.5vw,52px)!important}
#page>.g-lead .g-item{display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:none;cursor:zoom-in}
#page>.g-lead .g-item img{width:100%;height:100%!important;object-fit:cover!important}
#page>.g-lead figcaption{margin-top:10px}

/* 3. The first paragraph reads as an introduction */
.proj-desc p:first-child{
  font-size:clamp(19px,1.55vw,23px)!important;line-height:1.45!important;font-weight:500;
  color:var(--ink)!important;max-width:34em;margin-bottom:1.1em!important}

/* 4. "Read more": the rest of the text waits until it's asked for */
.rd-x[hidden]{display:none!important}
.rd-more{display:inline-flex;align-items:stretch;margin:8px 0 0;padding:0;border:var(--rule);background:var(--paper);color:var(--ink);
  font:inherit;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;column-span:all}
.rd-more>span{display:flex;align-items:center;padding:12px 18px}
.rd-more>i{position:relative;width:44px;border-left:var(--rule);transition:background-color 180ms}
.rd-more>i::before,.rd-more>i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;margin-left:-5.5px;background:currentColor;transition:transform 260ms cubic-bezier(.3,.7,.2,1)}
.rd-more>i::after{transform:rotate(90deg)}
.rd-more[aria-expanded="true"]>i::after{transform:rotate(0)}
@media (hover:hover) and (pointer:fine){.rd-more:hover>i{background:var(--ink);color:var(--paper)}}
.rd-more:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.rd-more small{font-size:10px;font-weight:400;letter-spacing:.12em;opacity:.6;margin-left:10px}
@media (prefers-reduced-motion:reduce){.rd-more>i::before,.rd-more>i::after{transition:none}}

/* the fact table's own toggle sits as its last row */
.proj-meta .rd-tog{display:block!important;border-top:var(--rule);padding:0!important}
.proj-meta .rd-tog .rd-more{display:flex;width:100%;margin:0;border:0;justify-content:space-between}
.proj-meta .rd-tog .rd-more>span{padding:11px 14px}
/* facts already shown in the title strip / status bar */
.proj-meta .rd-dup{display:none!important}
/* the lead picture never fills more than about two-thirds of the screen, so the intro shows too */
#page>.g-lead .g-item{max-height:68vh}

/* phones and tablets: the intro text comes before the fact table */
@media (max-width:900px){.proj-info>.proj-desc{order:-1}.proj-info{row-gap:28px}}

/* map panels: clean straight cut edges instead of zigzag break marks (from Haus of Techniques) */
.stmap .map-cut-mask{fill:var(--paper);stroke:none}

/* =========================================================
   MAPS: side by side on every device, always fully inside the window
   (Asia | Pacific | Americas). The stacked phone/tablet version is retired.
   Label sizes are set by hot-carry.js so they stay readable at any size.
========================================================= */
.smap-fig .m-desk,.fs-mapwrap .m-desk{display:block!important}
.smap-fig .m-mob,.fs-mapwrap .m-mob{display:none!important}
.m-desk svg.stmap,.lg-map svg.stmap{display:block;width:100%;height:auto;
  max-height:calc(100vh - var(--frame) * 2 - 48px - 130px);max-height:calc(100svh - var(--frame) * 2 - 48px - 130px)}
@media (max-width:767px){.m-desk svg.stmap,.lg-map svg.stmap{max-height:calc(100svh - var(--frame) * 2 - 44px - 110px)}}
.m-desk .stmap .pin .pl{font-size:var(--mlab,12px)!important}
.m-desk .stmap .pin .pn{font-size:var(--mnum,9px)!important;font-weight:600}
.m-desk .stmap .det .pin .pl{font-size:calc(var(--mlab,12px) * .8)!important}
.m-desk .stmap .det-t,.m-desk .stmap .brk text{font-size:var(--msm,9px)!important}
.m-desk .stmap.m-tiny .det-t,.m-desk .stmap.m-tiny .brk text{display:none}
.smap-fig,.fs-mapwrap>.m-desk{min-width:0}

/* mobile menu open: tuck the pencil and its fallen leads away so they do not show through the menu */
#hotfx-tools,#hotfx-floor{transition:opacity 200ms ease,visibility 0s linear 0s}
.menu-open #hotfx-tools,.menu-open #hotfx-floor{opacity:0;visibility:hidden;transition:opacity 150ms ease,visibility 0s linear 150ms}

/* =========================================================
   BLUEPRINT CONSISTENCY (2026-10-11) — blueprint mode keeps to blue + white;
   the yellow highlighter is the one colour that stays
========================================================= */
/* highlighted words: blueprint blue on the yellow band, instead of black */
html.blueprint mark.hl,html.blueprint mark.hl.hfx-hl,html.blueprint.has-hotfx mark.hl.hfx-hl{color:#1c4f9c!important}
/* mechanical pencil: a white line drawing on blue, no metal, no shadow */
html.blueprint .hfx-tool g[filter]{filter:none}
html.blueprint .hfx-tool rect:not(.hfx-hit):not(.hfx-lead):not(.hfx-ring),html.blueprint .hfx-tool path{fill:#1c4f9c!important;stroke:#fff!important;stroke-width:.6px!important}
html.blueprint .hfx-tool line{stroke:rgba(255,255,255,.5)!important}
html.blueprint .hfx-tool .hfx-ring{fill:#fff!important}
html.blueprint .hfx-print{fill:#fff}
html.blueprint .hfx-lead{fill:#fff}
html.blueprint .hfx-fallen{background:#fff;box-shadow:none}
/* the map panel is not a photo: no blue screen tint over it (it made the panel a lighter blue) */
html.blueprint .hatch-shadow:has(> .smap)::after{display:none}

/* Textured marker strokes: keep white text readable until the stroke arrives. */
html.blueprint mark.hl{color:#fff!important;background-color:transparent!important}
html.blueprint.has-hotfx mark.hl.hfx-hl{
  color:#fff!important;background-color:transparent!important;
  background-image:var(--hfx-hl-bp)!important;
  transition:background-size 1.1s cubic-bezier(.55,.05,.35,1),color .15s 1.1s!important;
}
html.blueprint.has-hotfx mark.hl.hfx-hl.hfx-drawn{color:#1c4f9c!important}
@media(prefers-reduced-motion:reduce){html.blueprint.has-hotfx mark.hl.hfx-hl{transition:none!important}}