/* =========================================================
   HAUS OF JJ — site stylesheet ("drafted" theme)
   One file: base layout, then the drafted theme, then project-page extras.
   Later rules override earlier ones, so keep additions at the bottom.
========================================================= */
/* HAUS OF JJ — offline build. Plain header/footer; desktop scroll splash kept from the Squarespace custom CSS. */
:root{--font:"Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#000;font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* header */
#header{z-index:50}
.header-inner{max-width:1500px;margin:0 auto;padding:20px var(--gap);display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-title-logo img{height:26px;width:auto}
.header-nav{display:flex;align-items:center;gap:28px;font-size:14px;letter-spacing:.02em}
.header-icon.hot{display:block;width:16px;height:25px;color:#000;transition:color 180ms ease}
.header-icon.hot svg{width:100%;height:100%;fill:currentColor}
.header-icon.hot:hover{color:#f00;opacity:1}
.menu-toggle{display:none;width:28px;height:28px;position:relative}
.menu-toggle span{position:absolute;left:3px;right:3px;top:50%;background:#000;transition:transform 220ms ease}
.menu-toggle span:last-child{transform:rotate(90deg)}
.menu-open .menu-toggle span:first-child{transform:rotate(45deg)}
.menu-open .menu-toggle span:last-child{transform:rotate(135deg)}
.mobile-nav{display:none}
/* home masonry */
.masonry{columns:3;column-gap:var(--gap);padding:0 var(--gap) var(--gap);margin:0 auto}
.m-item{display:block;break-inside:avoid}
.m-item img{width:100%}
/* index grids */
.grid{grid-template-columns:repeat(3,1fr);gap:40px var(--gap);padding:24px var(--gap) 60px;margin:0 auto}
.card-img{aspect-ratio:1/1;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:13px;font-weight:400;letter-spacing:.04em;margin:12px 0 0}
/* project */
.proj-title{letter-spacing:.04em}
.gallery{display:grid;gap:var(--gap);padding:0 var(--gap);margin:0 auto}
.g-item{display:block;aspect-ratio:4/3;overflow:hidden}
.g-item img{width:100%;height:100%;object-fit:cover}
#itemPagination{display:flex;justify-content:space-between;margin:0 auto;padding:60px var(--gap)}
.lightbox{position:fixed;inset:0;background:rgba(255,255,255,.97);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:calc(100vw - 160px);max-height:calc(100vh - 80px);width:auto;height:auto;object-fit:contain}
.lb-close{position:absolute;top:16px;right:24px;font-size:36px;line-height:1}
.lb-prev,.lb-next{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-prev::before,.lb-next::before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-left:2.25px solid #000;border-bottom:2.25px solid #000}
.lb-prev::before{transform:translate(-50%,-50%) rotate(45deg)}
.lb-next::before{transform:translate(-50%,-50%) rotate(225deg)}
/* about */
.about{display:grid;grid-template-columns:1fr 1fr;margin:0 auto;padding:24px var(--gap) 60px}
.about-img img{width:100%}
.about h1{font-size:13px;font-weight:400;letter-spacing:.04em;margin:0 0 20px}
.about p{margin:0 0 1em;max-width:62ch}
/* footer */
#footer-sections{border-top:1px solid #000}
.footer-inner{max-width:1500px;margin:0 auto;padding:28px 0 36px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:12px;letter-spacing:.04em}
.footer-inner p{margin:0}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
/* mobile */
@media (max-width:767px){
  .header-inner{padding:14px var(--gap)}
  .header-nav{display:none}
  .menu-toggle{display:block}
  .menu-open .mobile-nav{display:flex;flex-direction:column;font-size:22px}
  .masonry{columns:1}
  .grid{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .lightbox img{max-width:100vw}
}
@media (min-width:768px) and (max-width:1100px){.masonry{columns:2}.grid{grid-template-columns:repeat(2,1fr)}}

/* ============ HOMEPAGE SPLASH SCREEN (ported) ============ */

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ============ LIQUID-GLASS HEADER + FOOTER (ported) ============ */
#header{position:fixed;background:transparent;pointer-events:none}
#header .header-inner,#header .mobile-nav{pointer-events:auto}
#header .header-inner{margin:0 auto;isolation:isolate}
/* push content below the floating header */
#footer-sections{position:relative;z-index:20}
#footer-sections .footer-inner{overflow:hidden;isolation:isolate}
@media (max-width:767px){
  .menu-open .mobile-nav{margin-top:12px;height:auto}
  #footer-sections{transition:opacity 220ms cubic-bezier(.22,.61,.36,1)}
  .menu-open #footer-sections{opacity:0;pointer-events:none}
}

/* ============ PROJECT TEXT ============ */
.proj-info{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin:0 auto;padding:0 var(--gap) 48px}
.proj-meta{margin:0;font-size:11px;line-height:1.5;letter-spacing:.04em}
.proj-meta div{display:grid;grid-template-columns:minmax(120px,40%) 1fr}
.proj-meta dd{margin:0}
.proj-desc p{font-size:13px;letter-spacing:.02em;margin:0 0 1.1em;max-width:70ch}
@media (max-width:900px){.proj-info{grid-template-columns:1fr}}

/* Explorations project galleries: natural aspect ratios, masonry columns */
.gallery--natural{display:block;column-gap:var(--gap)}
.gallery--natural .g-item{aspect-ratio:auto;width:100%;margin:0 0 var(--gap);break-inside:avoid;background:none}
.gallery--natural .g-item img{height:auto;object-fit:initial}

/* project galleries: 3 columns (2 on tablet, 1 on phone) */
.gallery{grid-template-columns:repeat(3,1fr)}
.gallery--natural{columns:3}
@media (max-width:1100px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery--natural{columns:2}}
@media (max-width:767px){.gallery{grid-template-columns:1fr}.gallery--natural{columns:1}}

/* Works / Explorations index: natural image heights in masonry columns */
.grid{display:block!important;columns:3;column-gap:var(--gap)}
.grid .card{display:block;break-inside:avoid;margin:0 0 40px}
.grid .card-img{aspect-ratio:auto!important;height:auto}
.grid .card-img img{height:auto!important;object-fit:initial!important}
@media (max-width:1100px){.grid{columns:2}}
@media (max-width:767px){.grid{columns:1}}

/* mobile menu icon row: HOT glyph + email */
.mn-icons{display:flex}
.mn-icons a{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
.mn-icons svg{width:22px;height:22px;fill:currentColor}
.mn-hot svg{width:16px;height:25px}
.mn-mail svg{fill:none}
.fl-ic{display:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fl-ic--solid{fill:currentColor!important;stroke:none!important;width:20px!important;height:20px!important}
.fl-ic--hot{width:14px!important;height:22px!important}/* =========================================================
   HAUS OF JJ — "DRAFTED" TEST THEME
   Hatches, drafting symbols, one red accent, dimension strings.
========================================================= */
:root{
  --line:#000;
  /* timber / CLT: 45° hatch */
  --hatch-timber:repeating-linear-gradient(45deg,rgba(0,0,0,.16) 0 1px,transparent 1px 7px);
  /* steel: crosshatch */
  --hatch-steel:repeating-linear-gradient(45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 6px),repeating-linear-gradient(-45deg,rgba(0,0,0,.18) 0 1px,transparent 1px 6px);
  /* concrete: speckle */
  --hatch-concrete:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cg fill='%23000' fill-opacity='.28'%3E%3Ccircle cx='4' cy='6' r='.9'/%3E%3Ccircle cx='19' cy='3' r='.6'/%3E%3Ccircle cx='30' cy='12' r='1.1'/%3E%3Ccircle cx='11' cy='19' r='.7'/%3E%3Ccircle cx='24' cy='25' r='.9'/%3E%3Ccircle cx='6' cy='31' r='.6'/%3E%3Ccircle cx='34' cy='33' r='.8'/%3E%3Cpath d='M15 30l2.4-1.2.4 2.2z'/%3E%3Cpath d='M28 4l2-1 .5 1.9z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 1. HATCHES AS LOADING PLACEHOLDERS ---------- */
.m-item,.card-img,.g-item{background:var(--hatch-timber),#fff!important;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px}
.card:nth-child(3n+2) .card-img,.g-item:nth-child(3n+2),.m-item:nth-child(3n+2){background:var(--hatch-concrete),#fff!important}
.card:nth-child(3n) .card-img,.g-item:nth-child(3n),.m-item:nth-child(3n){background:var(--hatch-steel),#fff!important}
.m-item img.is-loaded,.card-img img.is-loaded,.g-item img.is-loaded{opacity:1}

.card h3{align-items:center}
.card h3::before{font-size:10px;color:var(--red);min-width:2ch}
.card:hover h3{color:var(--red)}
/* header symbols removed; current page just turns red */
.header-nav a.is-current,.mobile-nav a.is-current{color:var(--red);opacity:1!important}
.header-nav a:not(.hot):hover{color:var(--red);opacity:1}


/* ---------- 4. ELEVATION-TAG PAGINATION ---------- */
#itemPagination{font-size:12px;letter-spacing:.06em;align-items:center}
#itemPagination a{display:flex;align-items:center;gap:12px}
#itemPagination a:hover{color:var(--red)}

/* ---------- 5. DIMENSION STRING OVER PROJECT TITLE ---------- */
.proj-title{position:relative}
.proj-title[data-dim]::before{position:absolute;right:var(--gap);top:4px;
  font-size:10px;letter-spacing:.08em;color:var(--red);text-align:center;padding-bottom:6px;
  border-bottom:1px solid var(--red)}
.proj-title[data-dim=""]::before{display:none}
.proj-title[data-dim]::after{position:absolute;right:var(--gap);top:14px;height:14px;
  background:
    linear-gradient(135deg,transparent 45%,var(--red) 45% 55%,transparent 55%) left bottom/9px 9px no-repeat,
    linear-gradient(135deg,transparent 45%,var(--red) 45% 55%,transparent 55%) right bottom/9px 9px no-repeat;
  border-left:1px solid var(--red);border-right:1px solid var(--red)}
.proj-title[data-dim=""]::after{display:none}
.proj-meta dt{color:var(--red)}

/* ---------- 6. NORTH-ARROW SCROLL INDICATOR (homepage) ---------- */
#hjj-north{position:fixed;z-index:60;display:flex;align-items:center;
  font-size:10px;letter-spacing:.12em;transition:opacity 300ms}
#hjj-north.is-hidden{opacity:0;pointer-events:none}

/* ---------- 8. BLUEPRINT MODE (press B, or the footer toggle) ---------- */
.bp-toggle{font:inherit;font-size:12px;letter-spacing:.04em}
.bp-toggle:hover{color:var(--red)}
html.blueprint{background:#1c4f9c}
html.blueprint body{color:#fff;background:#1c4f9c}
html.blueprint #header .header-inner,html.blueprint #footer-sections .footer-inner,html.blueprint #hjj-north{color:#fff}
html.blueprint .header-icon.hot{color:#fff}
html.blueprint .m-item img,html.blueprint .card-img img,html.blueprint .g-item img,html.blueprint .about-img img{filter:grayscale(1) contrast(1.1);mix-blend-mode:screen;transition:filter 500ms ease,opacity 600ms ease,transform 600ms ease}
html.blueprint body .m-item.m-item,html.blueprint body .card .card-img.card-img,html.blueprint body .g-item.g-item,html.blueprint .about-img{background:#1c4f9c!important;outline-color:rgba(255,255,255,.35)}
/* full colour on hover */
html.blueprint .m-item:hover img,html.blueprint .card:hover .card-img img,html.blueprint .g-item:hover img,html.blueprint .about-img:hover img{filter:none;mix-blend-mode:normal}
html.blueprint .about::before{display:none}
html.blueprint .menu-toggle span{background:#fff}
html.blueprint .proj-meta div{border-color:rgba(255,255,255,.3)}
html.blueprint .lightbox{background:rgba(28,79,156,.97)}
html.blueprint .mobile-nav{background:#1c4f9c!important}

@media (max-width:767px){
  #hjj-north{bottom:max(16px,env(safe-area-inset-bottom))}
  .proj-title[data-dim]::before{font-size:9px}
}

/* drafting-table transition: the new mode sweeps across like a sheet being pulled over the table */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:hjj-sheet-sweep 750ms cubic-bezier(.65,0,.35,1) both}
@keyframes hjj-sheet-sweep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){::view-transition-new(root){animation:none}}

/* =========================================================
   TITLE BLOCK + SHEET BORDER
   Replaces the liquid-glass header/footer in this theme.
========================================================= */
:root{
  --frame:30px;            /* margin that holds the grid references */
  --ink:#000;
  --paper:#fff;
}
html.blueprint{--ink:#fff;--paper:#1c4f9c}

/* ---- sheet border ---- */
#sheet-frame{position:fixed;z-index:70;pointer-events:none}
#sheet-frame::before{content:"";position:absolute}
#sheet-frame::after{content:"";position:absolute;inset:8px}
#sheet-frame .sf-top,#sheet-frame .sf-bottom{position:absolute;left:var(--frame);right:var(--frame);height:var(--frame);display:flex}
#sheet-frame .sf-top{top:0}#sheet-frame .sf-bottom{bottom:0}
#sheet-frame .sf-left,#sheet-frame .sf-right{position:absolute;top:var(--frame);bottom:var(--frame);width:var(--frame);display:flex;flex-direction:column}
#sheet-frame .sf-left{left:0}#sheet-frame .sf-right{right:0}
#sheet-frame span{flex:1;display:grid;place-items:center;font-size:9px;letter-spacing:.1em;color:var(--ink);position:relative}
#sheet-frame .sf-top span+span::before,#sheet-frame .sf-bottom span+span::before{content:"";position:absolute;left:0;height:8px;background:var(--ink)}
#sheet-frame .sf-top span+span::before{bottom:0}#sheet-frame .sf-bottom span+span::before{top:0}
#sheet-frame .sf-left span+span::before,#sheet-frame .sf-right span+span::before{content:"";position:absolute;top:0;width:8px;background:var(--ink)}
#sheet-frame .sf-left span+span::before{right:0}#sheet-frame .sf-right span+span::before{left:0}
/* paper-coloured mask outside the border so content disappears "off the sheet" */
body::after{content:"";position:fixed;inset:0;z-index:65;pointer-events:none;
  border:var(--frame) solid var(--paper)}
html.blueprint body::after{border-color:#1c4f9c}

/* keep everything inside the sheet */
body{padding:0 var(--frame)}
.masonry,.grid,.gallery,.proj-info,.proj-title,.about,#itemPagination{max-width:none}

/* ---- header: ruled strip ---- */
#header{padding:0!important}
#header .header-inner{
  max-width:none!important;padding:0!important;
  background:var(--paper)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;align-items:stretch;gap:0}
#header .header-title-logo{padding:0 20px;display:flex;align-items:center}
#header .header-nav{gap:0;align-items:stretch;font-size:12px;letter-spacing:.06em}
#header .header-nav a{display:flex;align-items:center;padding:0 22px}
#header .header-nav a.hot{padding:0 18px;width:auto;height:auto}
#header .header-nav a.hot svg{width:14px;height:22px}
#header .header-nav a:not(.hot)::before{content:attr(data-ref);font-size:9px;margin-right:8px;opacity:.55}
#header .header-nav a.is-current{background:var(--ink);color:var(--paper)!important}
html.blueprint #header .header-nav a.is-current{color:#1c4f9c!important}

/* ---- footer: title block ---- */
#footer-sections{padding:0 0 var(--frame)!important;margin:0!important;border:0!important}
#footer-sections .footer-inner{
  max-width:none!important;padding:0!important;margin:0!important;
  background:var(--paper)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;
  display:grid!important;gap:0!important;
  grid-template-columns:minmax(220px,1.3fr) 2fr 1fr .6fr .6fr minmax(200px,1.2fr) minmax(120px,.8fr);
  grid-template-rows:auto auto;flex-direction:initial!important}
.tb-cell{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:12px 14px;border-left:var(--rule);min-height:84px;color:var(--ink)}
.tb-cell:first-child{border-left:0}
.tb-label{font-size:8.5px;letter-spacing:.14em}
.tb-val{font-size:11px;letter-spacing:.06em}
.tb-title .tb-val{font-size:15px;letter-spacing:.04em}
.tb-logo img{height:20px;width:auto}
.tb-brand{grid-column:1;grid-row:1 / 3}
.tb-title{grid-column:2;grid-row:1}.tb-status{grid-column:3;grid-row:1}.tb-scale{grid-column:4;grid-row:1}.tb-date{grid-column:5;grid-row:1}
.tb-contact{grid-column:6;grid-row:1 / 3}
.tb-sheet{grid-row:1 / 3;align-items:flex-start}
.tb-sheetno{white-space:nowrap}
.tb-sheetno{font-size:34px;line-height:1;letter-spacing:-.01em}
.tb-contact .footer-links{display:flex;font-size:10.5px}
.tb-contact .bp-toggle{align-self:flex-start;font-size:10.5px;margin-top:4px}
.tb-copy{grid-row:2;min-height:0;padding-bottom:8px;border-top:var(--rule)}
.tb-copy .tb-val{font-size:9px;opacity:.6}

/* blueprint: remove old glass tint */
html.blueprint #header .header-inner,html.blueprint #footer-sections .footer-inner{background:#1c4f9c!important}

/* north arrow pill sits inside the sheet */
#hjj-north{border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
html.blueprint #hjj-north{background:#1c4f9c}

/* lightbox covers the frame */
.lightbox{z-index:300}

/* ---- tablet ---- */
@media (max-width:1100px){
  .tb-brand{grid-column:1;grid-row:1}.tb-title{grid-column:2 / 4;grid-row:1}.tb-status{grid-column:4;grid-row:1}
  .tb-scale,.tb-date{display:none}
  .tb-contact{border-left:0;border-top:var(--rule)}
  .tb-sheet{border-top:var(--rule);flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:14px}
  .tb-copy{grid-row:3;border-left:0}
}

/* ---- phone ---- */
@media (max-width:767px){
  :root{--frame:12px}
  #sheet-frame span{display:none}
  #sheet-frame::after{inset:4px}
  .menu-toggle{margin:0 14px;align-self:center}
  .menu-open .mobile-nav{margin:0!important;border-radius:0!important;box-shadow:none!important;
    background:var(--paper)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    border-bottom:var(--rule);padding:0!important;gap:0!important}
  .menu-open .mobile-nav a{padding:16px;border-top:var(--rule);font-size:18px}
  .tb-brand{grid-column:1 / -1;grid-row:1}
  .tb-title{grid-column:1 / -1;grid-row:2;border-left:0;border-top:var(--rule)}
  .tb-status{grid-column:1;grid-row:3;border-left:0;border-top:var(--rule)}
  .tb-sheet{border-top:var(--rule)}
  .tb-scale,.tb-date{display:none}
  .tb-cell{min-height:64px}
}

/* =========================================================
   DETAIL-BUBBLE TITLES + SECTION-CUT PAGINATION
========================================================= */
.card h3::before{content:none!important}

/* detail bubble: circle split by a horizontal line */
.card h3{gap:10px!important}

/* drawing title: bubble, then name on a heavy underline, scale below */
.proj-title{font-size:inherit!important}
.proj-title[data-dim]::before,.proj-title[data-dim]::after{left:calc(var(--gap) + 80px)}
/* cut line extending toward the page, like a section line */
#itemPagination a{position:relative}
#itemPagination a.prev{padding-left:0}

@media (max-width:767px){
  #itemPagination .prev,#itemPagination .next{font-size:10px}
}

/* =========================================================
   STATUS PROGRESS BAR (replaces the dimension string)
========================================================= */
.proj-title[data-dim]::before,.proj-title[data-dim]::after{content:none!important}
.proj-title{padding-top:14px!important}
.status-bar{--pct:0%;padding:22px var(--gap) 0;color:var(--ink)}
.sb-head{display:flex;gap:14px;align-items:baseline;font-size:9.5px;letter-spacing:.14em;margin-bottom:8px}
.sb-pct{margin-left:auto;color:var(--red)}
.sb-track{position:relative;height:12px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.sb-fill{position:absolute;left:0;top:0;bottom:0;width:var(--pct);background:var(--ink);
  transition:width 1200ms cubic-bezier(.22,.61,.36,1)}
.sb-fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:8px;background:var(--red)}
.sb-stages{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6px;font-size:8.5px;letter-spacing:.12em}
.sb-stages span{padding-left:6px;padding-top:2px}
.sb-stages span:last-child{text-align:right;padding:2px 6px 0 0}
@media (max-width:767px){.sb-stages{font-size:7px;letter-spacing:.06em}}
@media (prefers-reduced-motion:reduce){.sb-fill{transition:none}}

/* smaller section-cut heads, 1pt line, no dashed lead */
#itemPagination .prev,#itemPagination .next{gap:12px!important}

/* =========================================================
   PROJECT TITLE STRIP (project pages) + ROOM TAG (index cards)
========================================================= */
.proj-title{display:flex!important;align-items:stretch!important;gap:0!important;margin:14px var(--gap) 32px!important;padding:0!important;font-weight:400}
.ts-cell{display:flex;flex-direction:column;gap:8px;padding:12px 16px}
.ts-k{font-size:8.5px;letter-spacing:.14em}
.ts-v{font-size:12px;letter-spacing:.06em}
.ts-no{flex:0 0 110px}
.ts-name{flex:1 1 auto}.ts-name .ts-v{font-size:19px;letter-spacing:.05em}
.ts-loc{flex:0 1 300px}
.ts-year{flex:0 0 110px}

.card h3{display:block!important}
.rtag{max-width:100%}
.rtag-no{grid-row:span 2;display:grid;place-items:center;padding:8px 12px;font-size:11px;letter-spacing:.06em}
.rtag-name{padding:8px 14px;font-size:13px;letter-spacing:.05em}
.rtag-sub{grid-column:2;padding:5px 14px;font-size:8.5px;letter-spacing:.14em;opacity:.75}
.rtag:only-child .rtag-name:last-child{grid-row:span 2;display:flex;align-items:center}

@media (max-width:900px){
  .proj-title{flex-wrap:wrap!important}
  .ts-name{flex:1 1 60%}
  .ts-loc{flex:1 1 100%;border-left:0;border-top:1.33px solid var(--ink)}
  .ts-year{border-top:1.33px solid var(--ink)}
  .ts-loc+.ts-year{flex:0 0 110px}
}
@media (max-width:767px){
  .ts-no{flex:0 0 72px}.ts-cell{padding:10px 12px}
  .ts-name .ts-v{font-size:15px}
}

/* even gap: content starts one --gap below the header, same as the side gap */
.status-bar{padding-top:0!important}
.proj-title{margin-top:0!important}
.grid{padding-top:0!important}
.masonry{padding-top:0!important}
.about{padding-top:0!important}

/* room tag spans the full width of its card image */
.rtag{display:grid!important;width:100%;grid-template-columns:auto 1fr!important;box-sizing:border-box}
.rtag-no{min-width:64px}
.rtag-name,.rtag-sub{white-space:normal;overflow-wrap:anywhere;min-width:0}
.rtag{grid-template-columns:auto minmax(0,1fr)!important}

/* =========================================================
   CLEAN IMAGES: no zoom / hover effects anywhere,
   except the homepage black-and-white -> colour reveal.
========================================================= */
.card:hover .card-img img,a.m-item:hover img{transform:none!important;opacity:1!important}
/* homepage: black & white until hovered */
html.blueprint body.homepage .m-item:hover img{filter:none!important;mix-blend-mode:normal!important}
#hjj-north svg{transition:transform 120ms linear}

/* no hatch placeholder, no fade-in: images appear as soon as they load */
body .m-item.m-item,body .card .card-img.card-img,body .g-item.g-item,
html.blueprint body .m-item.m-item,html.blueprint body .card .card-img.card-img,html.blueprint body .g-item.g-item{
  background:transparent!important;background-image:none!important;outline:0!important}
.m-item img,.card-img img,.g-item img{opacity:1!important}

/* compass heading label sits beside the dial, upright and easy to read */
#hjj-north .n-dir{display:inline-block;font-size:10px;letter-spacing:.1em;color:var(--red)}

/* =========================================================
   LINEWEIGHT AUDIT: one weight for every border and stroke.
   1px CSS = 2 device pixels on Retina, which is also what the
   browser was already drawing for the 1.33px (1pt) borders.
========================================================= */
:root{--lw:1px;--rule:var(--lw) solid var(--ink)}
#sheet-frame::before{border:var(--lw) solid var(--ink)!important;inset:calc(var(--frame) - var(--lw))!important}
#sheet-frame::after{border:var(--lw) solid var(--ink)!important;opacity:1!important}
#sheet-frame span::before{background:var(--ink)!important}
#sheet-frame .sf-top span+span::before,#sheet-frame .sf-bottom span+span::before{width:var(--lw)!important}
#sheet-frame .sf-left span+span::before,#sheet-frame .sf-right span+span::before{height:var(--lw)!important}
#header .header-inner{border-bottom:var(--rule)!important}
#header .header-title-logo{border-right:var(--rule)!important}
#header .header-nav a{border-left:var(--rule)!important}
#footer-sections .footer-inner{border-top:var(--rule)!important}
.tb-cell{border-left-width:var(--lw)!important}
.tb-copy,.tb-contact,.tb-title,.tb-status,.tb-sheet{border-top-width:var(--lw)!important}
.proj-title{border:var(--rule)!important}
.ts-cell{border-left:var(--rule)!important}.ts-cell:first-child{border-left:0!important}
.rtag{border:var(--rule)!important}
.rtag-no{border-right:var(--rule)!important}
.rtag-sub{border-top:var(--rule)!important}
.proj-meta div{border-top:var(--rule)!important}
.proj-meta div:last-child{border-bottom:var(--rule)!important}
.sb-stages{opacity:1!important}
.sb-stages span{border-left:var(--rule)!important;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.sb-stages span:last-child{border-left:0!important;border-right:var(--rule)!important}
.bp-toggle{border-bottom:var(--rule)!important}
#hjj-north{border:var(--rule)!important}
.lb-prev::before,.lb-next::before{border-left-width:var(--lw)!important;border-bottom-width:var(--lw)!important}
#hjj-north svg circle{stroke-width:var(--lw)!important;vector-effect:non-scaling-stroke}
.menu-toggle span{height:var(--lw)!important}

/* compass pill: tighter, even padding */
#hjj-north{padding:6px 8px!important;gap:6px!important}
#hjj-north svg{width:18px!important;height:18px!important}
#hjj-north .n-dir{min-width:1.6em!important;text-align:center!important}

/* About: all caps */
.about,.about h1,.about p{text-transform:uppercase}

/* =========================================================
   ABOUT — PORTRAIT WITH HATCHED SHADOW + CV SCHEDULES
========================================================= */
.about{grid-template-columns:minmax(0,4fr) minmax(0,7fr)!important;align-items:start}
.hatch-shadow{margin:0 18px 18px 0}
.hatch-shadow::before{content:"";position:absolute;inset:18px -18px -18px 18px}
.hatch-shadow img{position:relative;width:100%;border:var(--rule)}
html.blueprint .hatch-shadow img{mix-blend-mode:normal!important}
.fig{font-size:8.5px;letter-spacing:.14em;margin:30px 0 0;color:color-mix(in srgb,var(--ink) 60%,transparent)}
.about p{font-size:12.5px!important;letter-spacing:.03em!important}

.cv{padding:24px var(--gap) 56px;display:grid}
.cv-h{display:flex;justify-content:space-between;align-items:center;margin:0;padding:10px 14px;border:var(--rule);border-bottom:0;
  font-size:12px;letter-spacing:.08em}
.cv-scroll{overflow-x:auto}
.cv table{width:100%;border-collapse:collapse;font-size:11px;letter-spacing:.05em;line-height:1.5}
.cv th,.cv td{border:var(--rule);text-align:left;vertical-align:top}
.cv th{font-size:8.5px;letter-spacing:.14em;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.cv td.mk{width:64px;white-space:nowrap;color:var(--red)}
.cv td:nth-child(2){white-space:nowrap;width:1%}
.cv-exp td:last-child{min-width:280px;font-size:10px;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.cv-tagrow{display:grid;grid-template-columns:1fr 2fr .7fr}
.cv-tags > div{display:flex;flex-wrap:wrap;border:var(--rule)}
.cv-tags span{border:var(--rule);padding:5px 10px;font-size:9.5px;letter-spacing:.1em}
@media (max-width:900px){
  .about-img{max-width:420px}
  .cv-tagrow{grid-template-columns:1fr}
}

/* blueprint: every image reveals full colour on hover */
html.blueprint body .card:hover .card-img img,
html.blueprint body .g-item:hover img,
html.blueprint body .m-item:hover img,
html.blueprint body .about-img:hover img{mix-blend-mode:normal!important}

/* hatch shadow sits visibly behind the portrait */
.hatch-shadow{isolation:isolate}
.hatch-shadow::before{z-index:0!important}
.hatch-shadow img{z-index:1}

/* =========================================================
   BLUEPRINT LIGHT SWITCH (footer)
   Wall-plate with two screws and a rocker lever that flips.
========================================================= */
.bp-switch{display:inline-flex!important;align-items:center;gap:10px;border:0!important;padding:0;margin-top:8px;cursor:pointer;color:var(--ink)}
.sw-lab{font-size:9px;letter-spacing:.12em;transition:color 200ms,opacity 200ms;opacity:.45}
.bp-switch[aria-checked="false"] .sw-off,.bp-switch[aria-checked="true"] .sw-on{color:var(--red)}
html.blueprint .bp-switch[aria-checked="true"] .sw-on{color:#fff}
.bp-switch:focus-visible{outline:var(--rule);outline-offset:4px}

/* =========================================================
   TITLE BLOCK: light switch in its own MODE cell
========================================================= */
#footer-sections .footer-inner{grid-template-columns:minmax(200px,1.2fr) 2fr 1fr .6fr .6fr minmax(190px,1.1fr) minmax(170px,.9fr) minmax(120px,.8fr)!important}
.tb-mode{grid-column:7;grid-row:1 / 3}
.tb-sheet{grid-column:8!important}
@media (max-width:1100px){
  .tb-contact{grid-column:1 / 3!important;grid-row:2!important}
  .tb-mode{grid-column:3;grid-row:2;border-top:var(--rule)}
  .tb-sheet{grid-column:4!important;grid-row:2!important}
}
@media (max-width:767px){
  .tb-mode{min-height:0}
  .tb-sheet{grid-column:2!important;grid-row:3!important}
}
.tb-sheet .tb-val{white-space:nowrap}

/* =========================================================
   HEADING HIERARCHY: light grey header bands + bold labels
   across the CV schedules, details table, title strip and title block.
========================================================= */
:root{--head-bg:#f0f0ee;--head-ink:var(--ink)}
html.blueprint{--head-bg:rgba(255,255,255,.12)}

/* CV schedules */
.cv-h{background:var(--head-bg);font-weight:600!important}
.cv th{background:var(--head-bg);font-weight:600!important;color:var(--head-ink)!important}
.cv-tags .cv-h{margin:0}

/* project details table: label column */
.proj-meta dt{font-weight:600}
.proj-meta div{padding:0!important;gap:0!important}
.proj-meta dt{background:var(--head-bg);padding:7px 10px}
.proj-meta dd{padding:7px 12px}

/* title strip + title block: label becomes a full-width band at the top of each cell */
.ts-cell,.tb-cell{padding-top:0!important}
.ts-k,.tb-label{display:block;margin:0 -16px 6px;padding:6px 16px;background:var(--head-bg);
  border-bottom:var(--rule);font-weight:600;opacity:1!important;color:var(--head-ink)}
@media (max-width:767px){.ts-k{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}}
.tb-copy{padding-top:8px!important}

/* status bar + room-tag number get the same treatment */
.sb-head span:first-child{font-weight:600;opacity:1}
.rtag-no{background:var(--head-bg);font-weight:600}
.tb-label,.ts-k{align-self:stretch!important}

/* =========================================================
   SMOOTH BLUEPRINT -> COLOUR FADE
   mix-blend-mode can't animate, so the blue tint is now an
   overlay whose opacity eases in/out along with the greyscale.
========================================================= */
.m-item,.card-img,.g-item,.hatch-shadow{position:relative}
html.blueprint body .m-item img,html.blueprint body .card-img img,html.blueprint body .g-item img,html.blueprint body .about-img img{
  mix-blend-mode:normal!important;filter:grayscale(1) contrast(1.1)!important}
.m-item::after,.card-img::after,.g-item::after,.hatch-shadow::after{content:"";position:absolute;z-index:2;pointer-events:none;
  background:#1c4f9c;mix-blend-mode:screen;opacity:0;transition:opacity 900ms cubic-bezier(.4,0,.2,1)}
html.blueprint .m-item::after,html.blueprint .card-img::after,html.blueprint .g-item::after,html.blueprint .hatch-shadow::after{opacity:1}
.m-item img,.card-img img,.g-item img,.about-img img{transition:filter 900ms cubic-bezier(.4,0,.2,1)!important}
/* hover: overlay fades away and colour eases back */
html.blueprint body .m-item:hover::after,html.blueprint body .card:hover .card-img::after,html.blueprint body .g-item:hover::after,html.blueprint body .about-img:hover .hatch-shadow::after{opacity:0}
html.blueprint body .m-item:hover img,html.blueprint body .card:hover .card-img img,html.blueprint body .g-item:hover img,html.blueprint body .about-img:hover img{filter:none!important}
/* homepage paper mode greyscale -> colour also eases */
body.homepage .m-item img.is-loaded{filter:grayscale(1)}
body.homepage .m-item:hover img{filter:none}

/* =========================================================
   SIMPLE TOGGLE SWITCH
========================================================= */
.sw-track{position:relative;display:inline-block;width:38px;height:20px;border:var(--rule);border-radius:999px;
  background:var(--paper);transition:background-color 350ms ease}
.sw-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink);
  transition:transform 420ms cubic-bezier(.34,1.56,.64,1),background-color 350ms ease}
.bp-switch[aria-checked="true"] .sw-knob{transform:translateX(18px)}
.bp-switch:hover .sw-track{border-color:var(--red)}
.bp-switch:active .sw-knob{width:17px}
.bp-switch[aria-checked="true"]:active .sw-knob{transform:translateX(15px)}
@media (prefers-reduced-motion:reduce){.sw-knob,.sw-track{transition:none}}

/* faster colour reveal (was 900ms) */
.m-item::after,.card-img::after,.g-item::after,.hatch-shadow::after{transition-duration:450ms!important}
.m-item img,.card-img img,.g-item img,.about-img img{transition-duration:450ms!important}

/* =========================================================
   ABOUT: less dead space
   - portrait + KEY facts stay pinned while you read
   - bio set in two columns so it's half as tall
========================================================= */
.about{grid-template-columns:minmax(260px,3fr) minmax(0,8fr)!important}
.about-sticky{position:sticky}
.about-text{columns:2 260px;column-gap:40px;column-rule:var(--rule)}
.about-text p{break-inside:avoid;margin:0 0 1.1em!important}
.about-key{margin:22px 0 0;border:var(--rule);font-size:10px;letter-spacing:.06em}
.ak-h{background:var(--head-bg);border-bottom:var(--rule);padding:6px 12px;font-weight:600;font-size:8.5px;letter-spacing:.14em}
.about-key>div:not(.ak-h){display:grid;grid-template-columns:1fr;gap:3px;border-top:var(--rule)}
.about-key>div:nth-child(2){border-top:0}
.about-key dt{display:flex;align-items:center;gap:8px;font-size:8.5px;letter-spacing:.14em;font-weight:600}
.about-key dd{margin:0 0 0 26px;line-height:1.45}
.ak-n{display:inline-grid;place-items:center;width:16px;height:16px;border:var(--rule);border-radius:50%;font-size:8px;font-weight:400}
@media (max-width:900px){
  .about{grid-template-columns:1fr!important}
  .about-sticky{position:static}
  .about-text{columns:1}
}

/* MODE cell: switch centred with even spacing */
.tb-mode{justify-content:flex-start!important;align-items:stretch!important}
.tb-mode .bp-switch{flex:1 1 auto;width:100%;display:flex!important;align-items:center;margin:0}
.tb-mode .bp-switch{margin-top:-6px!important}
#footer-sections .footer-inner{grid-template-columns:minmax(200px,1.2fr) 2fr 1fr .6fr .6fr minmax(190px,1.1fr) minmax(212px,.9fr) minmax(120px,.8fr)!important}
@media (max-width:1100px){#footer-sections .footer-inner{grid-template-columns:1.2fr 2fr 1fr 1fr!important}.tb-mode{min-width:212px}}
@media (max-width:767px){#footer-sections .footer-inner{grid-template-columns:1fr 1fr!important}}
.tb-mode{padding-left:0!important;padding-right:0!important}
.tb-mode .tb-label{margin-left:0!important;margin-right:0!important}
.tb-mode .bp-switch{justify-content:space-evenly!important;gap:0!important}

/* =========================================================
   OVERSCROLL LINES: the page canvas (only visible when you
   rubber-band past the top/bottom) carries the title block's
   column lines, so they never appear to stop.
========================================================= */
/* stop the rubber-band bounce past the top/bottom of the page (trackpads, phones) */
html{background:var(--paper)!important}
html,body{overscroll-behavior-y:none}
body{background-color:var(--paper)!important}
html.blueprint body{background-color:#1c4f9c!important}

/* blueprint: compass arrow + dial match the white text */
html.blueprint #hjj-north svg{filter:none!important}
html.blueprint #hjj-north svg path{fill:#fff}
html.blueprint #hjj-north svg circle{stroke:#fff}
html.blueprint #hjj-north .n-dir{color:#fff}

/* 1pt border around every image, same line as all other blocks */
.m-item img,.card-img img,.g-item img,.about-img img{box-sizing:border-box;border:var(--rule)!important}
/* keep the blueprint tint overlay inside the border */
.m-item::after,.card-img::after,.g-item::after,.hatch-shadow::after{inset:1px!important}

/* =========================================================
   "CLICK / TAP TO VIEW PROJECT" pill — mirrors the compass
========================================================= */
#hjj-view{position:fixed;z-index:60;
  display:flex;align-items:center;gap:6px;padding:6px 8px;
  font-size:10px;letter-spacing:.12em;color:var(--ink);background:var(--paper);border:var(--rule);
  transition:opacity 300ms}
#hjj-view.is-hidden{opacity:0;pointer-events:none}
#hjj-view svg{width:18px;height:18px;overflow:visible}
#hjj-view .v-ring{fill:none;stroke:var(--ink);stroke-width:var(--lw);vector-effect:non-scaling-stroke}
#hjj-view .v-tick{stroke:var(--ink);stroke-width:var(--lw);vector-effect:non-scaling-stroke}
#hjj-view .v-dot{fill:var(--red);transform-origin:10px 10px;animation:hjj-view-pulse 1.6s ease-in-out infinite}
html.blueprint #hjj-view .v-dot{fill:#fff}
@keyframes hjj-view-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.7)}}
@media (max-width:767px){#hjj-view{font-size:9px}}
@media (prefers-reduced-motion:reduce){#hjj-view .v-dot{animation:none}}

/* project details table: full box with vertical lines */
.proj-meta{border-left:var(--rule);border-right:var(--rule)}
.proj-meta dt{border-right:var(--rule)}
.proj-meta{align-self:start}

/* =========================================================
   SHEET SIZE cell (live window size), shares row 2 with the copyright
========================================================= */
.tb-copy{grid-column:2 / 4!important}
.tb-size{grid-column:4 / 6;grid-row:2;min-height:0;border-top:var(--rule);padding-bottom:8px!important;gap:4px}
.tb-size .tb-val{font-variant-numeric:tabular-nums;font-size:10.5px}
@media (max-width:1100px){
  .tb-copy{grid-column:1 / 4!important}
  .tb-size{grid-column:4;grid-row:3}
}
@media (max-width:767px){
  .tb-copy{grid-column:1 / -1!important}
  .tb-size{border-left:0}
}
.tb-size .tb-val{white-space:normal!important}
.tb-size small{display:block;font-size:8.5px;letter-spacing:.14em;margin-top:3px;color:color-mix(in srgb,var(--ink) 60%,transparent)}
@media (max-width:1100px){
  .tb-sheet{flex-wrap:wrap}
  .tb-sheet .tb-label{flex:0 0 calc(100% + 28px)}
}

/* =========================================================
   MOBILE FIXES: smooth menu + clean title block
========================================================= */
@media (max-width:767px){
  /* header: single ruled strip, no stray divider after the logo */
  #header .header-title-logo{border-right:0!important}
  .menu-toggle{-webkit-tap-highlight-color:transparent;outline:0}
  .menu-toggle span{transition:transform 360ms cubic-bezier(.65,0,.35,1)!important}

  /* menu slides open like a sheet being unrolled, instead of popping in */
  #header{position:fixed}
  #header .mobile-nav{display:flex!important;flex-direction:column;gap:0!important;
    position:absolute;left:0;right:0;top:100%;
    height:calc(100dvh - var(--frame) * 2 - 52px);
    margin:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;
    background:var(--paper)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;
    transition:clip-path 420ms cubic-bezier(.65,0,.35,1),visibility 0s linear 420ms}
  .menu-open #header .mobile-nav{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto;
    transition:clip-path 420ms cubic-bezier(.65,0,.35,1),visibility 0s}
  #header .mobile-nav a{padding:18px 16px!important;border-top:0!important;border-bottom:var(--rule);font-size:20px!important;
    opacity:0;transform:translateY(-8px);transition:opacity 260ms ease,transform 320ms cubic-bezier(.22,.61,.36,1)}
  .menu-open #header .mobile-nav a{opacity:1;transform:none}
  .menu-open #header .mobile-nav a:nth-child(1){transition-delay:120ms}
  .menu-open #header .mobile-nav a:nth-child(2){transition-delay:170ms}
  .menu-open #header .mobile-nav a:nth-child(3){transition-delay:220ms}
  .menu-open #header .mobile-nav a:nth-child(4){transition-delay:270ms}
  .menu-open #hjj-north,.menu-open #hjj-view{opacity:0!important}

  /* title block: sheet cell stacks cleanly (no stretched header band) */
  .tb-sheet{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start!important;gap:6px!important}
  .tb-sheet .tb-label{flex:none!important}
  .tb-sheetno{font-size:28px!important;margin-top:4px}
  .tb-status{justify-content:flex-start!important}
  .tb-cell{justify-content:flex-start!important;gap:8px!important;padding-bottom:12px!important}
  .tb-status .tb-val,.tb-title .tb-val{margin-top:4px}#header .mobile-nav{border-top:0!important}
}

/* =========================================================
   MOBILE MENU: only as tall as its items; icon row at the end
========================================================= */
@media (max-width:767px){
  #header .mobile-nav{border-bottom:0}
  #header .mobile-nav > *{opacity:0;transform:translateY(-8px);transition:opacity 260ms ease,transform 320ms cubic-bezier(.22,.61,.36,1)}
  .menu-open #header .mobile-nav > *{opacity:1;transform:none}
  .menu-open #header .mobile-nav > :nth-child(4){transition-delay:270ms}
  #header .mn-icons{border-bottom:var(--rule)}
  #header .mn-icons a{padding:16px!important;border-bottom:0!important;font-size:inherit!important;color:var(--ink)}
  #header .mn-icons a + a{border-left:var(--rule)}
  #header .mn-icons a:active,#header .mn-icons a:hover{color:var(--red)}
  #header .mn-hot svg{width:15px;height:24px}
  #header .mn-mail svg{width:24px;height:24px;stroke-width:1}
  html.menu-lock,html.menu-lock body{overflow:visible}
}

/* =========================================================
   SAFE AREAS (phones with a notch / Dynamic Island / rounded screen)
   --sh-t/r/b/l are set by drafted.js; they are 0 on desktop.
========================================================= */
:root{--sh-t:0px;--sh-r:0px;--sh-b:0px;--sh-l:0px;--sheet-rad:0px}
#sheet-frame{inset:var(--sh-t) var(--sh-r) var(--sh-b) var(--sh-l)!important}
body{padding-left:calc(var(--frame) + var(--sh-l))!important;padding-right:calc(var(--frame) + var(--sh-r))!important}
#header{top:calc(var(--frame) + var(--sh-t))!important;left:calc(var(--frame) + var(--sh-l))!important;right:calc(var(--frame) + var(--sh-r))!important}
#footer-sections{padding-bottom:calc(var(--frame) + var(--sh-b))!important}
#hjj-north{right:calc(var(--frame) + var(--sh-r) + 14px)!important;bottom:calc(var(--frame) + var(--sh-b) + 14px)!important}
#hjj-view{left:calc(var(--frame) + var(--sh-l) + 14px)!important;bottom:calc(var(--frame) + var(--sh-b) + 14px)!important}
body::after{border-width:calc(var(--frame) + var(--sh-t)) calc(var(--frame) + var(--sh-r)) calc(var(--frame) + var(--sh-b)) calc(var(--frame) + var(--sh-l))!important}
/* rounded sheet: mask with a rounded window instead of square borders */
html.has-safe body::after{border:0!important;
  inset:calc(var(--frame) + var(--sh-t)) calc(var(--frame) + var(--sh-r)) calc(var(--frame) + var(--sh-b)) calc(var(--frame) + var(--sh-l));
  border-radius:var(--sheet-rad);box-shadow:0 0 0 100vmax var(--paper)}
html.blueprint.has-safe body::after{box-shadow:0 0 0 100vmax #1c4f9c}
html.has-safe #header .header-inner{border-radius:var(--sheet-rad) var(--sheet-rad) 0 0!important}
html.has-safe #header .header-title-logo{padding-left:max(20px,calc(var(--sheet-rad) * .6))!important}
html.has-safe #footer-sections .footer-inner{border-radius:0 0 var(--sheet-rad) var(--sheet-rad);overflow:hidden}
@media (max-width:767px){
  #hjj-north{right:calc(var(--frame) + var(--sh-r) + 10px)!important;bottom:calc(var(--frame) + var(--sh-b) + 10px)!important}
  #hjj-view{left:calc(var(--frame) + var(--sh-l) + 10px)!important;bottom:calc(var(--frame) + var(--sh-b) + 10px)!important}
  #header .mobile-nav{height:auto!important}
}

/* square corners everywhere unless the device has safe areas (phones/tablets) */
html:not(.has-safe) #sheet-frame::before,html:not(.has-safe) #sheet-frame::after,
html:not(.has-safe) #header .header-inner,html:not(.has-safe) #footer-sections .footer-inner{border-radius:0!important}

/* rectangular sheet on every device — no rounded corners anywhere */
html.has-safe{--sheet-rad:0px!important}
#sheet-frame::before,#sheet-frame::after,#header .header-inner,#footer-sections .footer-inner,body::after{border-radius:0!important}

/* =========================================================
   MOBILE TITLE BLOCK: compact two-up rows + icon contacts
   rows: brand | title | status+sheet | contact+mode | size | copy
========================================================= */
@media (max-width:767px){
  .tb-contact{grid-column:1!important;grid-row:4!important;border-left:0!important}
  .tb-mode{grid-column:2!important;grid-row:4!important;border-left:var(--rule)!important;border-top:var(--rule)!important;padding:0 !important}
  .tb-mode .tb-label{margin:0!important;padding-left:12px!important}
  .tb-mode .bp-switch{justify-content:space-evenly!important;gap:0!important;margin:0!important;padding:10px 0}
  .tb-mode .sw-lab{font-size:8px;letter-spacing:.08em}
  .tb-size{grid-column:1 / -1!important;grid-row:5!important}
  .tb-copy{grid-row:6!important}
  /* contact links as icons */
  .tb-contact .footer-links{flex:1}#footer-sections .footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
}

/* =========================================================
   HOT RED: one fully saturated red everywhere (#FF0000)
========================================================= */
:root{--red:#ff0000}
.bp-switch[aria-checked="false"] .sw-off,.bp-switch[aria-checked="true"] .sw-on{opacity:1!important}
.cv td.mk,.proj-meta dt,.sb-pct,#hjj-north .n-dir{opacity:1!important}

/* contact links as icons on every screen size, left-aligned */
.tb-contact .footer-links{flex-direction:row!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center}
.tb-contact .footer-links a{align-items:center;justify-content:center}
.tb-contact .fl-ic{display:block}
.tb-contact .fl-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tb-contact .footer-links a:hover,.tb-contact .footer-links a:active{color:var(--red)}
@media (max-width:767px){.tb-contact .footer-links{justify-content:flex-start!important}}

/* hovers turn solid red — never faded (faded red reads as pink) */
.footer-links a:hover,.tb-contact .footer-links a:hover,.header-nav a:hover,#itemPagination a:hover,.card:hover,.mn-icons a:hover{opacity:1!important}

/* =========================================================
   SHORTER HEADER — 48px strip (was 56), logo 18px (was 22)
   Phones: 44px strip (was 52). Matches Haus of Techniques.
========================================================= */
.about-sticky{top:calc(var(--frame) + 48px + var(--gap))}
@media (max-width:767px){#header .mobile-nav{height:calc(100dvh - var(--frame) * 2 - var(--sh-t) - var(--sh-b) - 44px)!important}}
/* 1. blueprint: red becomes a pale blueprint white-blue, never inverted */
html.blueprint{--red:#bcd8ff;--bp-ink:#1c4f9c}
html.blueprint .header-title-logo img,html.blueprint .tb-logo img{filter:brightness(0) invert(1)!important}
html.blueprint .sb-fill::after{background:var(--red)!important}

/* 2. image frames: 3px paper mat between picture and frame line */
.m-item img,.card-img img,.g-item img,.hatch-shadow img{padding:3px!important;background:var(--paper)!important;box-sizing:border-box!important}

/* 3. contact icons in the title block: square 1pt boxes, red fill on hover */
.tb-contact .footer-links{gap:0!important}
.tb-contact .footer-links a{display:grid!important;place-items:center;width:34px;height:34px;padding:0!important;border:var(--rule);margin-right:-1px;color:var(--ink);
  transition:background-color 180ms,color 180ms,border-color 180ms}
.tb-contact .footer-links a svg{width:17px!important;height:17px!important}
.tb-contact .footer-links a:hover{background:var(--red);border-color:var(--red);color:#fff!important;position:relative;z-index:1;opacity:1!important}
html.blueprint .tb-contact .footer-links a:hover{color:var(--bp-ink)!important}
@media (max-width:767px){.tb-contact .footer-links{gap:0!important}}

/* 4. shorter header strip: 48px (44px on phones) */
#header .header-inner{min-height:48px!important}
#header .header-title-logo img{height:20px!important}
#page{padding-top:calc(var(--frame) + var(--sh-t) + 48px + var(--gap))!important}
@media (max-width:767px){
  #header .header-inner{min-height:44px!important}
  #header .header-title-logo img{height:18px!important}
  #page{padding-top:calc(var(--frame) + var(--sh-t) + 44px + var(--gap))!important}
}

/* 5. active nav: red rule along the bottom of the black cell */
#header .header-nav a.is-current{box-shadow:inset 0 -3px 0 var(--red)}

/* 6. project number cell goes red on card hover (tag frame stays black) */
.card:hover .rtag,.card:hover .rtag-sub,.card:hover .rtag-name{border-color:var(--ink)!important;color:var(--ink)!important}
.card:hover .rtag-no{border-color:var(--ink)!important;background:var(--red)!important;color:#fff!important}
html.blueprint .card:hover .rtag-no{color:var(--bp-ink)!important}
.rtag-no{transition:background-color 180ms ease,color 180ms ease}

/* 7. phone title block: sheet size and © paired side by side */
@media (max-width:767px){
  #footer-sections .tb-size{grid-column:1!important;grid-row:5!important}
  #footer-sections .tb-copy{grid-column:2!important;grid-row:5!important;border-left:var(--rule)!important;border-top:var(--rule)!important;padding-top:12px!important}
}
.tb-contact .footer-links a svg.fl-ic--hot{width:13px!important;height:20px!important}

/* ================= graphics refinements (Sep 2026) ================= */
:root{--hatch-shadow:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 7px)}
html.blueprint{--hatch-shadow:repeating-linear-gradient(45deg,var(--red) 0 1px,transparent 1px 7px)}
.hatch-shadow::before{background:var(--hatch-shadow)}
@media (max-width:767px){.hatch-shadow{margin:0 10px 10px 0}.hatch-shadow::before{inset:10px -10px -10px 10px}.g-no{flex-basis:72px!important}}

/* =========================================================
   MORE BREATHING ROOM — looser spacing across the site
========================================================= */
:root{--gap:40px}
@media (max-width:1100px){:root{--gap:32px}}
@media (max-width:767px){:root{--gap:20px}}
/* galleries + grids: gutters follow --gap, more air between rows */
.m-item{margin-bottom:var(--gap)!important}
.grid .card{margin-bottom:72px!important}
.card h3{margin-top:18px!important}
.gallery--natural .g-item,.g-wrap .g-item{margin-bottom:var(--gap)!important}
.g-group{margin-bottom:80px!important}
.g-lead{margin-bottom:80px!important}
.g-filter{margin-bottom:48px!important}
/* project page: status bar, title strip, details, text */
.status-bar + .proj-title{margin-top:32px!important}
.proj-title{margin-bottom:56px!important}
.proj-info{gap:72px!important;padding-bottom:96px!important}
.proj-desc p{margin-bottom:1.5em!important;line-height:1.85!important}
.proj-meta dt,.proj-meta dd{padding-top:11px!important;padding-bottom:11px!important}
/* about + CV */
.about{gap:80px!important;padding-bottom:40px!important}
.about p{margin-bottom:1.4em!important;line-height:1.85!important}
.cv{padding-top:56px!important;padding-bottom:96px!important}
.cv th,.cv td{padding:12px 16px!important}
.cv-tags > div{gap:10px!important;padding:18px!important}
.cv-tagrow{gap:40px!important}
.about-key>div:not(.ak-h){padding:12px 14px!important}
/* sheet index / pagination + footer */
#itemPagination{padding-top:72px!important;padding-bottom:96px!important}
#footer-sections{margin-top:48px}
.tb-cell{padding-left:18px!important;padding-right:18px!important}
.tb-label{margin-left:-18px!important;margin-right:-18px!important;padding-left:18px!important;padding-right:18px!important}
@media (max-width:767px){
  .grid .card{margin-bottom:48px!important}
  .g-group,.g-lead{margin-bottom:56px!important}
  .proj-title{margin-bottom:40px!important}
  .proj-info{gap:40px!important;padding-bottom:64px!important}
  .about{gap:40px!important}
  .cv{padding-top:40px!important}
  .tb-cell{padding-left:14px!important;padding-right:14px!important}
  .tb-label{margin-left:-14px!important;margin-right:-14px!important;padding-left:14px!important;padding-right:14px!important}
}

/* =========================================================
   STORY — places lived (site-plan map), full story, flight log
   ported from Haus of Techniques, restyled for the drafted sheet
========================================================= */
.story-sec{padding:0 var(--gap);margin:0 auto;max-width:1500px;display:grid;gap:0}
.story-sec+.story-sec{margin-top:72px}
.story-sec .cv-h{border-bottom:0}
.about-lead{column-span:all;font-size:clamp(17px,1.7vw,24px)!important;color:var(--ink)}
.about-text mark.hl,.story-page mark.hl{background:none;color:inherit;box-shadow:inset 0 -1px 0 var(--red);padding:0}
.st-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;column-span:all}
.st-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:200px;padding:12px 14px;border:var(--rule);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--paper);color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.st-btn i{font-style:normal}
.st-btn:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
html.blueprint .st-btn:hover{color:#1c4f9c}
.st-btns--sec{padding-top:28px}

/* map (svg) */
.stmap{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}
.stmap .grat{fill:none;stroke:currentColor;stroke-opacity:.14;stroke-dasharray:2 4;stroke-width:1}
.stmap .land{stroke:currentColor;stroke-width:.8;fill:var(--paper)}
.stmap .brk line{stroke:currentColor;stroke-width:1}
.stmap .brk path{fill:none;stroke:currentColor}
.stmap .brk text,.stmap .det-t,.stmap .npt text{font:9px "Helvetica Neue",Arial,sans-serif;letter-spacing:.16em;fill:currentColor;opacity:.6}
.stmap .npt path{fill:currentColor}
.stmap .rt{fill:none;stroke:currentColor;stroke-opacity:.3;stroke-width:1.2;stroke-dasharray:.006 .006}
.stmap .rt.done{stroke:var(--red);stroke-opacity:1;stroke-dasharray:none}
.stmap .rt.now{stroke-width:2}
.stmap.draw .rt.done{stroke-dasharray:1;stroke-dashoffset:1;animation:rtd .9s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--d,0)*1s)}
@keyframes rtd{to{stroke-dashoffset:0}}
.stmap .pin{cursor:pointer}
.stmap .pin .hit{fill:transparent}
.stmap .pin .dot{fill:var(--paper);stroke:var(--red);stroke-width:2;transition:r .25s}
.stmap .pin.been .dot{fill:var(--red)}
.stmap .pin.on .dot{r:9;fill:var(--red);stroke:currentColor}
.stmap .pin .pl{font:600 12px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.08em;fill:currentColor}
.stmap .pin .pn{font:9px "Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;fill:var(--red)}
.stmap .pin.pin-sm .pl,.stmap .pin.pin-sm .pn{display:none}
.stmap .pin:hover .dot{r:9}
.stmap .det-c,.stmap .det-ring,.stmap .det-l{fill:none;stroke:currentColor;stroke-width:1}
.stmap .det-bg{fill:var(--paper)}
.stmap .det .land{fill:var(--head-bg)}
.stmap .det .pin .pl{font-size:10px}

.smap{display:grid;grid-template-columns:minmax(0,8.4fr) minmax(0,3.6fr);border:var(--rule);background:var(--paper)}
.smap-fig{padding:clamp(16px,2vw,28px);border-right:var(--rule)}
.smap-fig .m-mob{display:none}
.smap-side{display:flex;flex-direction:column}
.smap-info{padding:26px;flex:1;display:flex;flex-direction:column;gap:10px}
.st-no{font-size:38px;line-height:.85;color:var(--red)}
.smap-info h3{font-size:clamp(20px,1.8vw,28px);text-transform:uppercase}
.st-ctry{margin:0;opacity:.6;text-transform:uppercase}
.st-learn{margin:0}
.smap-info .ph{margin-top:auto;padding-top:18px;font-size:9px;letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.smap-nav{display:grid;grid-template-columns:1fr auto 1fr;border-top:var(--rule)}
.smap-nav button{font-size:10px;text-transform:uppercase;padding:16px;cursor:pointer;color:var(--ink);background:none;border:0}
.smap-nav .ct{font-size:9.5px;letter-spacing:.14em;padding:0 12px;border-left:var(--rule);border-right:var(--rule);display:flex;align-items:center}
.smap-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.smap-cap i{display:inline-block;width:18px;border-top:2px solid var(--red);vertical-align:3px;margin-right:6px}
@media (max-width:900px){.smap{grid-template-columns:1fr}.smap-fig{border-right:0;border-bottom:var(--rule)}}
@media (max-width:767px){
  .smap-fig .m-desk,.fs-mapwrap .m-desk{display:none}.smap-fig .m-mob,.fs-mapwrap .m-mob{display:block}
  .m-mob .stmap+.stmap{border-top:1px dashed color-mix(in srgb,var(--ink) 40%,transparent)}
  .stmap .pin .pl{font-size:22px}.stmap .pin .pn{font-size:14px}
  .stmap .det .pin .pl{font-size:15px}.stmap .brk text{display:none}
  .smap-info{padding:20px}
}

/* full story page */
.story-page .story-sec{padding-top:8px}
.fs-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end;padding:24px 0 clamp(40px,5vw,72px)}
.fs-hero h1{font-size:clamp(40px,6vw,96px);letter-spacing:-.02em;margin:0;text-transform:uppercase}
.fs-hero p{margin:0;max-width:52ch}
.fs-mapwrap{border:var(--rule);background:var(--paper);margin-bottom:clamp(56px,6vw,96px)}
.fs-mapwrap>.m-desk,.fs-mapwrap>.m-mob{padding:28px 28px 0}
.fs-mapwrap>.smap-cap{padding:12px 28px 18px}
.fs-mapwrap .m-mob{display:none}
.fs-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.fs-rail{position:sticky;top:calc(var(--frame) + 56px + var(--gap));border-top:var(--rule)}
.fs-rail a{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent);opacity:.4;align-items:baseline;transition:opacity .2s}
.fs-rail a b{text-transform:uppercase}
.fs-rail a span{font-size:8.5px;letter-spacing:.1em}
.fs-rail a.on{opacity:1}.fs-rail a.on .n{color:var(--red)}
.fs-rail .prog{height:2px;background:color-mix(in srgb,var(--ink) 18%,transparent);margin-top:14px;position:relative}
.fs-rail .prog i{position:absolute;left:0;top:0;bottom:0;background:var(--red);width:0;transition:width .3s}
.fs-ch{padding:0 0 clamp(56px,6vw,96px);display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:20px 48px;scroll-margin-top:calc(var(--frame) + 72px)}
.fs-ch header{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end;border-bottom:var(--rule);padding-bottom:14px;margin-bottom:12px}
.fs-ch h2{font-size:clamp(26px,3vw,44px);margin:0;text-transform:uppercase}
.fs-ch header .meta{text-align:right;font-size:9px;letter-spacing:.14em;text-transform:uppercase;line-height:1.8}
.fs-ch header .meta b{display:block;color:var(--red);font-weight:400}
.fs-ch .tx p{margin:0 0 1.3em;max-width:64ch}
.fs-side{display:flex;flex-direction:column;gap:16px}
.kp{border:var(--rule);background:var(--paper);margin:0}
.kp svg{display:block;width:100%;height:auto;color:var(--ink)}
.kp figcaption{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border-top:var(--rule)}
.fs-mob{display:none}
.fs-end{border-top:var(--rule);padding:clamp(32px,4vw,56px) 0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end}
.fs-end p{margin:0;max-width:56ch}
.fs-end .st-btns{margin-top:0}
@media (max-width:1000px){.fs-body{grid-template-columns:1fr}.fs-rail{display:none}.fs-ch{grid-template-columns:1fr}.fs-side .kp{max-width:200px}}
@media (max-width:767px){
  .fs-hero{grid-template-columns:1fr}.fs-hero h1{font-size:12vw}
  .fs-mapwrap>.m-desk,.fs-mapwrap>.m-mob{padding:16px 16px 0}.fs-mapwrap>.smap-cap{padding:10px 16px 14px}
  .fs-mob{display:flex;position:sticky;top:calc(var(--frame) + 44px);z-index:5;background:var(--paper);border-bottom:var(--rule);border-top:var(--rule);margin:0 0 24px;padding:10px 0;gap:10px;align-items:baseline}
  .fs-mob .st-no{font-size:16px}.fs-mob b{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.fs-mob span:last-of-type{margin-left:auto;font-size:9px;letter-spacing:.12em}
  .fs-mob i{position:absolute;left:0;bottom:-1px;height:2px;background:var(--red);width:0;transition:width .3s}
  .fs-ch header{grid-template-columns:auto 1fr}.fs-ch header .meta{grid-column:1/-1;text-align:left}
  .fs-end{grid-template-columns:1fr}
}

/* flight logbook */
.lg-map{border:var(--rule);padding:clamp(12px,2vw,24px);background:var(--paper)}
.stmap.lg .fl{fill:none;stroke:var(--red);stroke-linecap:round}
.in .stmap.lg .fl{stroke-dasharray:1;stroke-dashoffset:1;animation:rtd 1.2s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i)*18ms)}
.stmap.lg .ap{fill:var(--paper);stroke:currentColor;stroke-width:1}.stmap.lg .ap.big{fill:currentColor}
.stmap.lg .apl{font:600 11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.08em;fill:currentColor;paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.lg-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-left:var(--rule);border-bottom:var(--rule)}
.lg-stats>div{border-right:var(--rule);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.k9{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.lg-stats b{font-size:clamp(20px,2vw,30px);line-height:1;font-weight:600;white-space:nowrap}
.lg-stats>div:nth-child(n+5) b{font-size:clamp(16px,1.5vw,22px)}
.lg-stats b small{font-size:.5em;margin-left:3px;opacity:.6}
.lg-stats em{font-style:normal}
.lg-years{padding:28px 0 26px}
.lgy{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;align-items:end;height:130px;margin-top:12px;border-bottom:1px solid var(--ink)}
.lgy div{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.lgy i{display:block;width:100%;height:calc(var(--h)*100%);background:var(--ink)}
.lgy div:hover i{background:var(--red)}
.lgy b{position:absolute;bottom:calc(var(--h)*100% + 4px);font:500 9px/1 "Helvetica Neue",Arial,sans-serif}
.lgy span{position:absolute;top:calc(100% + 6px);font-size:8.5px;letter-spacing:.06em;opacity:.6}
@media (max-width:1000px){.lg-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.lg-stats>div{border-top:var(--rule)}}
@media (max-width:767px){.lg-stats{grid-template-columns:1fr 1fr}.lgy{gap:2px;height:100px}.lgy b{display:none}.lgy span{font-size:7.5px}.lgy div:nth-child(odd) span{visibility:hidden}.stmap.lg .apl{font-size:24px;stroke-width:5px}}
@media (prefers-reduced-motion:reduce){.stmap.draw .rt.done,.in .stmap.lg .fl{animation:none;stroke-dasharray:none;stroke-dashoffset:0}.stmap .pin .dot{transition:none}}
.stmap.lg .sph{fill:var(--paper);stroke:currentColor}
.stmap.lg .lgl{stroke:currentColor;stroke-width:.6}
#places .cv-h{margin-right:18px}
.story-page .fs-hero{padding-top:28px}

.hatch-shadow>.smap{position:relative;z-index:1}
mark.hl{background:none;color:inherit;box-shadow:inset 0 -1px 0 var(--red);padding:0}

/* ---------- About map: route draws / retracts as you step through cities ---------- */
#smap .stmap .rt.done{stroke:currentColor;stroke-opacity:.3;stroke-dasharray:.006 .006;stroke-width:1.2}
#smap .stmap .rtr{fill:none;stroke:var(--red);stroke-width:1.2;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),stroke-width .3s}
#smap .stmap .rtr.on{stroke-dashoffset:0}
#smap .stmap .rtr.now{stroke-width:2}
#smap .stmap .pin .dot{transition:r .25s,fill .3s .15s}
@keyframes pinpop{0%{r:6}55%{r:14}100%{r:9}}
#smap .stmap .pin.on.pop .dot{animation:pinpop .55s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){#smap .stmap .rtr{transition:none}#smap .stmap .pin.on.pop .dot{animation:none}}

/* BUTTONS — border always stays visible on hover; arrow rests → and turns to ↗ */
.st-btn i{font-size:0!important;display:inline-block;width:10px;height:10px;flex:0 0 10px;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}
@media (hover:hover) and (pointer:fine){.st-btn:hover{border-color:var(--ink)}.st-btn:hover i{transform:rotate(0)}}
.st-btn:focus-visible i{transform:rotate(0)}
.smap-nav button:hover{background:var(--red);color:var(--paper)}
@media (prefers-reduced-motion:reduce){.st-btn i{transition:none}}

/* MODE cell: label bar runs edge to edge (later padding rules had re-inset it) */
#footer-sections .tb-mode{padding-left:0!important;padding-right:0!important}
#footer-sections .tb-mode .tb-label{margin-left:0!important;margin-right:0!important;padding-left:18px!important;padding-right:18px!important}
@media (max-width:767px){#footer-sections .tb-mode .tb-label{padding-left:12px!important}}

/* STORY page: back navigation + closed title box */
.fs-crumb{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-size:10px;letter-spacing:.14em;color:var(--ink);width:max-content}
.fs-crumb span{opacity:.5}
.fs-crumb i{font-style:normal;transition:transform 200ms ease}
.fs-crumb:hover{color:var(--red)}.fs-crumb:hover i{transform:translateX(-4px)}
.st-btn--back i{transform:scaleX(-1) rotate(45deg)}
@media (hover:hover) and (pointer:fine){.st-btn--back:hover i{transform:scaleX(-1) rotate(0)}}
.st-btn--back:focus-visible i{transform:scaleX(-1) rotate(0)}
.story-page .story-sec>.cv-h{border-bottom:var(--rule)}
.story-page .story-sec>.cv-h+.fs-hero{margin-top:0}

/* MAP FRAMES (from HOT): hatch shadow on the story map, one fixed sheet footprint per step */
.fs-mapwrap{--hs:18px;position:relative;isolation:isolate;margin-right:var(--hs);margin-bottom:calc(clamp(56px,6vw,96px) + var(--hs))}
.fs-mapwrap::before{content:"";position:absolute;z-index:-1;inset:var(--hs) calc(-1*var(--hs)) calc(-1*var(--hs)) var(--hs);background:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 7px)}
.fs-mapwrap>*{position:relative;background:var(--paper)}
@media (min-width:901px){
  .smap{aspect-ratio:2.44/1;min-height:0}
  .smap-fig,.smap-side,.smap-info{min-height:0}
  .smap-info{overflow-y:auto;scrollbar-width:thin}
}
@media (max-width:900px){.smap-info{flex:none;block-size:clamp(340px,55vw,420px);overflow-y:auto;scrollbar-width:thin}}
@media (max-width:767px){.fs-mapwrap{--hs:10px}}
html.blueprint :is(.kp,.lg-map){background:var(--paper)}
.fs-mapwrap>.smap-cap{opacity:1;color:color-mix(in srgb,var(--ink) 65%,transparent)}

/* ---------- header: shared seam, compact tablet nav, icon stays visible on mobile ---------- */
@media (min-width:768px){#header .header-nav{margin-left:-1px}}
@media (min-width:768px) and (max-width:1080px){
  #header .header-title-logo{padding:0 12px!important;flex:0 0 auto!important}
  #header .header-title-logo img{height:16px!important;width:auto!important;max-width:none!important}
  #header .header-nav a:not(.hot){padding:0 12px!important;font-size:11px}
  #header .header-nav a:not(.hot)::before{display:none}
  #header .header-nav a.hot{padding:0 12px!important}
}
@media (max-width:767px){
  #header .header-nav{display:flex!important;align-items:stretch;margin-left:auto;gap:0}
  #header .header-nav a:not(.hot){display:none!important}
  #header .header-nav a.hot{display:flex!important;align-items:center;padding:0 14px!important;border-left:var(--rule)!important;border-right:var(--rule)}
  #header .header-nav a.hot svg{width:14px!important;height:22px!important}
  #header .mobile-nav .mn-hot{display:none!important}
}

/* key plans: nearby-city tags */
.kp .kc{fill:var(--paper);stroke:currentColor;stroke-width:.35}
.kp .kt{fill:currentColor;letter-spacing:.04em;paint-order:stroke;stroke:var(--paper);stroke-width:.5px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;stroke-linejoin:round}
.kp .kt-own{font-weight:700;fill:var(--red)}
.kt{stroke-width:var(--kts,.5px)!important}

/* =========================================================
   CONSISTENCY WITH HAUS OF TECHNIQUES — section bars, type, map panel
========================================================= */
:root{--hot-display:"Helvetica Neue Condensed","HelveticaNeue-CondensedBold","Arial Narrow","Helvetica Neue",Arial,sans-serif}
.hot-sec{display:flex;flex-wrap:wrap;align-items:stretch;border:var(--rule);margin:0 0 clamp(36px,3.5vw,52px);background:var(--paper)}
.hot-sec .ts-no{flex:0 0 110px}
.hot-sec .hot-sec-scale{flex:0 0 110px}
.hot-sec .ts-k{opacity:1;color:color-mix(in srgb,var(--ink) 50%,transparent)}
.hot-sec .ts-no .ts-v{color:var(--red)}
.hot-sec .hot-sec-kind .ts-v,.hot-sec .ts-no .ts-v{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;font-size:clamp(20px,1.8vw,26px);letter-spacing:0;line-height:1;margin:0}
.hot-sec .hot-sec-scale .ts-v{color:color-mix(in srgb,var(--ink) 50%,transparent)}
.hot-sec .hot-sec-note{flex:1 1 100%;border-left:0!important;border-top:var(--rule)}
.hot-sec .hot-sec-note .ts-v{text-transform:none;letter-spacing:0;font-size:14px;line-height:1.55;padding-bottom:4px}
h1.ts-v{font-size:inherit}
@media (max-width:767px){.hot-sec .ts-no{flex:0 0 72px}.hot-sec .hot-sec-scale{display:none}.hot-sec .hot-sec-kind .ts-v{font-size:15px}}
.cv-sched .hot-sec{margin-bottom:28px}
.cv{gap:clamp(56px,6vw,88px)!important}
.a-top{padding-top:44px}
.a-top .hot-sec{margin-bottom:0}
.story-sec+.story-sec{margin-top:clamp(64px,7vw,104px)}

/* bio lead = HOT founder headline */
.about-lead{font-family:var(--hot-display)!important;font-weight:700!important;font-stretch:condensed;font-size:clamp(28px,2.7vw,42px)!important;line-height:1.02!important;letter-spacing:-.01em!important;text-transform:uppercase;margin:0 0 28px!important}
.about-lead span{color:var(--red)}

/* map panel + story copy: HOT's display heads and sentence-case reading text */
.st-no{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;letter-spacing:0}
.smap-info .st-no{font-size:44px;line-height:.8}
.smap-info h3,.fs-ch h2{font-family:var(--hot-display);font-weight:700;font-stretch:condensed;letter-spacing:0}
.smap-info h3{font-size:clamp(30px,2.6vw,42px);line-height:1;margin:14px 0 0}
.st-learn,.fs-ch .tx p,.fs-hero p,.fs-end p{text-transform:none;letter-spacing:0;font-size:15px;line-height:1.6;color:color-mix(in srgb,var(--ink) 85%,transparent)}
.fs-ch .tx p,.fs-hero p,.fs-end p{font-size:17px;line-height:1.7}
.smap-info .st-learn{margin-top:10px;font-size:clamp(13px,1.05vw,15px);line-height:1.55}
.st-ctry{font-size:9.5px;letter-spacing:.14em}
.fs-hero h1{font-family:var(--hot-display);font-stretch:condensed;font-weight:700;font-size:clamp(46px,6.4vw,104px);line-height:.88}
.fs-ch h2{font-size:clamp(34px,3.4vw,54px);line-height:.9}
.fs-ch header .st-no{font-size:56px;line-height:.78}
.fs-rail a b,.smap-nav button{letter-spacing:.14em}
.fs-rail a b{font-family:var(--hot-display);font-stretch:condensed;font-weight:700;font-size:15px;letter-spacing:0}
.lg-stats b{font-family:var(--hot-display);font-stretch:condensed;letter-spacing:-.01em}
.lg-stats em{text-transform:none;letter-spacing:0;font-size:12px;opacity:.7}
.fs-hero{padding-top:0!important}
.cv{--cvg:clamp(56px,6vw,88px);gap:var(--cvg)!important}
.cv>.hot-sec{margin-bottom:calc(28px - var(--cvg))}
.a-top{margin-bottom:clamp(36px,3.5vw,52px)}
.hot-sec .hot-sec-kind{flex:1 1 0;min-width:0}

/* STACKED MAP (≤900px): Asia over the Americas, Pacific legs joined top-to-bottom */
@media (max-width:900px){
  .smap-fig .m-desk,.fs-mapwrap .m-desk{display:none}.smap-fig .m-mob,.fs-mapwrap .m-mob{display:block}
}
.stmap.stk{max-width:520px;margin:0 auto;overflow:hidden}
.stk .land,.stk .grat,.stk .rt{vector-effect:non-scaling-stroke}
.stk .rt{stroke-width:1.2px}.stk .rt.now{stroke-width:2px}
.stk .brk2 line{stroke:currentColor;stroke-dasharray:4 4;opacity:.5}
.stk .brk2 text{font:10px "Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;fill:currentColor;opacity:.6}
.stk .mA .pin .pl{font-size:15px}.stk .mA .pin .pn{font-size:11px}
.stk .mA .det .pin .pl{font-size:11px}
.stk .mB .pin .pl{font-size:26px}.stk .mB .pin .pn{font-size:18px}
.stk .mB .pin .dot{r:11}.stk .mB .pin.on .dot{r:16}
.stk .mA .pin .dot{r:6}.stk .mA .pin.on .dot{r:9}
.stk .det-t{font-size:8px}
.m-mob .stmap+.stmap{margin-top:0;border-top:0;padding-top:0}/* =========================================================
   HAUS OF JJ — project pages: lead image, image filters,
   grouped sheets, sheet-index prev/next (matches Haus of Techniques)
========================================================= */
:root{--pg-muted:color-mix(in srgb,var(--ink) 58%,transparent);--pg-soft:color-mix(in srgb,var(--ink) 6%,transparent)}

/* lead image */
.g-wrap{padding:0 var(--gap)}
.g-lead{margin:0 0 40px}
.g-lead .g-item{display:block;width:100%;aspect-ratio:16/9;background:none;padding:0;border:0;cursor:zoom-in}
.g-lead .g-item img{width:100%;height:100%!important;object-fit:cover!important}
.g-lead figcaption{font-size:9.5px;letter-spacing:.14em;color:var(--pg-muted);margin-top:10px}

/* filter buttons */
.g-filter{display:flex;flex-wrap:wrap;align-items:stretch;border:var(--rule);margin:0 0 32px}
.g-filter-k{display:flex;align-items:center;padding:0 16px;font-size:8.5px;letter-spacing:.14em;background:var(--head-bg);border-right:var(--rule)}
.g-f{font:inherit;font-size:11px;letter-spacing:.08em;padding:12px 16px;border:0;border-right:var(--rule);background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease}
.g-f i{font-style:normal;font-size:9px;color:var(--pg-muted);margin-left:6px;transition:color 160ms ease}
.g-f:hover{background:var(--pg-soft)}
.g-f.is-on{background:var(--ink);color:var(--paper);box-shadow:inset 0 -3px 0 var(--red)}
.g-f.is-on i{color:inherit;opacity:.7}
.g-f:focus-visible{outline:2px solid var(--red);outline-offset:-3px}

/* grouped sheets */
.g-group{margin:0 0 48px}
.g-group[hidden]{display:none}
.g-group.is-in{animation:pg-in 360ms cubic-bezier(.2,.75,.25,1) both}
@keyframes pg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.g-wrap .gallery{padding:0!important;max-width:none}
.g-head{display:flex;align-items:stretch;border:var(--rule);margin:0 0 20px;font-weight:400;font-size:12px;letter-spacing:.08em}
.g-head span{display:flex;align-items:center;padding:10px 16px}
.g-no{flex:0 0 110px;color:var(--red);border-right:var(--rule)}
.g-lab{flex:1}
.g-count{border-left:var(--rule);font-size:10px;letter-spacing:.12em;color:var(--pg-muted)}

/* sheet index (replaces the section-cut prev/next) */
#itemPagination.sx{display:block!important;margin:24px var(--gap) 72px!important;padding:0!important;border:var(--rule);font-size:12px!important}
.sx-head{display:flex;justify-content:space-between;background:var(--head-bg);border-bottom:var(--rule)}
.sx-k{font-size:8.5px;letter-spacing:.14em;padding:6px 16px}
.sx-count{color:var(--pg-muted)}
.sx-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr)}
#itemPagination.sx .sx-cell{display:flex;align-items:center;justify-content:center;padding:14px 0;border-left:var(--rule);font-size:12px;letter-spacing:.06em;color:var(--ink);
  transition:background-color 160ms ease,color 160ms ease}
#itemPagination.sx .sx-cell:first-child{border-left:0}
#itemPagination.sx .sx-cell.is-on{background:var(--ink);color:var(--paper);box-shadow:inset 0 -3px 0 var(--red)}
#itemPagination.sx .sx-cell:not(.is-on):hover{background:var(--pg-soft);color:var(--red)}
.sx-no{font-variant-numeric:tabular-nums}
.sx-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:var(--rule);font-size:12px;letter-spacing:.06em}
#itemPagination.sx .sx-bar a{display:flex;align-items:center;gap:0!important;padding:12px 16px;transition:color 160ms ease}
#itemPagination.sx .sx-bar a:hover{color:var(--red);opacity:1}
#itemPagination.sx .sx-next{justify-content:flex-end}
.sx-hover{font-size:9.5px;letter-spacing:.14em;color:var(--pg-muted);text-align:center}
html.blueprint #itemPagination.sx .sx-cell.is-on,html.blueprint .g-f.is-on{color:#1c4f9c}

@media (max-width:767px){
  .g-no{flex-basis:56px}.g-lead{margin-bottom:28px}
  .g-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.g-filter::-webkit-scrollbar{display:none}
  .g-f{white-space:nowrap;padding:12px}
  .sx-row{overflow-x:auto;scrollbar-width:none}.sx-row::-webkit-scrollbar{display:none}
  .sx-bar{grid-template-columns:1fr 1fr}.sx-hover{display:none}
  #itemPagination.sx .sx-bar a{font-size:10px;padding:12px}
}
@media (prefers-reduced-motion:reduce){.g-group.is-in{animation:none}}