/* =========================================================
   HAUS OF JJ — "DRAFTED" TEST THEME
   Hatches, drafting symbols, one red accent, dimension strings.
========================================================= */
:root{
  --red:#d42a1f;
  --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");
  /* insulation batt: wave */
  --hatch-batt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6c3-6 9-6 12 0s9 6 12 0' fill='none' stroke='%23000' stroke-opacity='.25'/%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,.card-img img,.g-item img{opacity:0;transition:opacity 600ms ease,transform 600ms ease}
.m-item img.is-loaded,.card-img img.is-loaded,.g-item img.is-loaded{opacity:1}

.card h3{display:flex;align-items:center;gap:8px}
.card h3::before{content:attr(data-no);font-size:10px;color:var(--red);min-width:2ch}
.card:hover h3{color:var(--red)}

/* ---------- 2. CLT LAYUP DIVIDERS ---------- */
.clt-divider{max-width:1500px;margin:0 auto 32px;padding:0 var(--gap)}
.clt-divider i{display:block;height:5px;border:1px solid #000;border-top-width:0}
.clt-divider i:first-child{border-top-width:1px}
.clt-divider i:nth-child(odd){background:var(--hatch-timber)}
.clt-divider i:nth-child(even){background:repeating-linear-gradient(90deg,transparent 0 23px,rgba(0,0,0,.35) 23px 24px)}
#footer-sections .clt-divider{padding:0;margin:0 0 20px}

/* ---------- 3. DRAFTING SYMBOLS IN THE NAV ---------- */
/* 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);opacity:1}
.etag{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;font-size:10px;line-height:1.1;text-align:center}
.etag svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.etag svg .tri{fill:#000;transition:fill 180ms}
#itemPagination a:hover .etag svg .tri{fill:var(--red)}
.etag b{font-weight:400;display:block;border-bottom:1px solid currentColor;padding-bottom:2px;margin-bottom:2px}

/* ---------- 5. DIMENSION STRING OVER PROJECT TITLE ---------- */
.proj-title{position:relative;padding-top:34px!important}
.proj-title[data-dim]::before{content:attr(data-dim);position:absolute;left:var(--gap);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{content:"";position:absolute;left:var(--gap);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);opacity:1}

/* ---------- 6. NORTH-ARROW SCROLL INDICATOR (homepage) ---------- */
#hjj-north{position:fixed;right:24px;bottom:22px;z-index:60;display:flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.12em;padding:7px 12px 7px 10px;border-radius:999px;
  background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  box-shadow:0 3px 10px -5px rgba(0,0,0,.24),0 1px 4px -2px rgba(0,0,0,.12);transition:opacity 300ms}
#hjj-north svg{width:20px;height:20px;transition:transform 80ms linear}
#hjj-north.is-hidden{opacity:0;pointer-events:none}
html.hjj-intro-active #hjj-north{opacity:0}

/* ---------- 8. BLUEPRINT MODE (press B, or the footer toggle) ---------- */
.bp-toggle{font:inherit;font-size:12px;letter-spacing:.04em;border-bottom:1px solid currentColor}
.bp-toggle:hover{color:var(--red)}
html.blueprint{--red:#fff;background:#1c4f9c}
html.blueprint body{color:#fff;background:#1c4f9c}
html.blueprint #header .header-inner,html.blueprint #footer-sections .footer-inner,html.blueprint #hjj-north{background:rgba(28,79,156,.55);color:#fff}
html.blueprint .header-icon.hot{color:#fff}
html.blueprint .header-title-logo img{filter:invert(1)}
html.blueprint #hjj-north svg{filter:invert(1)}
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 .clt-divider i{border-color:rgba(255,255,255,.8)}
html.blueprint .clt-divider i:nth-child(odd){background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 1px,transparent 1px 7px)}
html.blueprint .clt-divider i:nth-child(even){background:repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.45) 23px 24px)}
html.blueprint .etag svg{filter:invert(1)}
html.blueprint .lightbox{background:rgba(28,79,156,.97)}
html.blueprint .mobile-nav{background:#1c4f9c!important}

@media (max-width:767px){
  #hjj-north{right:16px;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;
  --rule:1px solid var(--ink);
}
html.blueprint{--ink:#fff;--paper:#1c4f9c}

/* ---- sheet border ---- */
#sheet-frame{position:fixed;inset:0;z-index:70;pointer-events:none}
#sheet-frame::before{content:"";position:absolute;inset:calc(var(--frame) - 1px);border:1.5px solid var(--ink)}
#sheet-frame::after{content:"";position:absolute;inset:8px;border:1px solid var(--ink);opacity:.35}
#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;width:1px;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;height:1px;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,.clt-divider{max-width:none}

/* ---- header: ruled strip ---- */
#header{top:var(--frame)!important;left:var(--frame)!important;right:var(--frame)!important;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;
  border-radius:0!important;box-shadow:none!important;
  border-bottom:var(--rule);align-items:stretch;min-height:56px;gap:0}
#header .header-title-logo{padding:0 20px;border-right:var(--rule);display:flex;align-items:center}
#header .header-title-logo img{height:22px}
#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;border-left:var(--rule)}
#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}
#page{padding-top:calc(56px + 32px)!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;
  border-radius:0!important;box-shadow:none!important;
  border-top:var(--rule);
  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;opacity:.55}
.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}
html.blueprint .tb-logo img{filter:invert(1)}
.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-column:7;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;flex-direction:column;gap:5px;font-size:10.5px}
.tb-contact .bp-toggle{align-self:flex-start;font-size:10.5px;margin-top:4px}
.tb-copy{grid-column:2 / 6;grid-row:2;min-height:0;padding-top:8px;padding-bottom:8px;border-top:var(--rule)}
.tb-copy .tb-val{font-size:9px;opacity:.6}
#footer-sections .clt-divider{display:none}

/* 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{right:calc(var(--frame) + 14px);bottom:calc(var(--frame) + 14px);border-radius:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper);border:var(--rule)}
html.blueprint #hjj-north{background:#1c4f9c}

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

/* ---- tablet ---- */
@media (max-width:1100px){
  #footer-sections .footer-inner{grid-template-columns:1.2fr 2fr 1fr 1fr}
  .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{grid-row:2;grid-column:1 / 3;border-left:0;border-top:var(--rule)}
  .tb-contact .footer-links{flex-direction:row;flex-wrap:wrap;gap:6px 18px}
  .tb-sheet{grid-column:3 / 5;grid-row:2;border-top:var(--rule);flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:14px}
  .tb-copy{grid-column:1 / -1;grid-row:3;border-left:0}
}

/* ---- phone ---- */
@media (max-width:767px){
  :root{--frame:12px}
  #sheet-frame span{display:none}
  #sheet-frame::after{inset:4px}
  #header .header-inner{min-height:52px}
  #header .header-title-logo{border-right:0}
  .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}
  #page{padding-top:calc(52px + 20px)!important}
  #footer-sections .footer-inner{grid-template-columns:1fr 1fr}
  .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{grid-column:2;grid-row:3;border-top:var(--rule);flex-direction:column;align-items:flex-start;gap:6px}
  .tb-sheetno{font-size:26px}
  .tb-scale,.tb-date{display:none}
  .tb-contact{grid-column:1 / -1;grid-row:4}
  .tb-copy{grid-row:5}
  .tb-cell{min-height:64px}
  #hjj-north{right:calc(var(--frame) + 10px);bottom:calc(var(--frame) + 10px)}
}

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

/* detail bubble: circle split by a horizontal line */
.dbub{position:relative;display:inline-grid;grid-template-rows:1fr 1fr;place-items:center;
  width:64px;height:64px;flex:0 0 64px;border:1.4px solid var(--ink);border-radius:50%;
  font-size:13px;letter-spacing:.04em;line-height:1;color:var(--ink)}
.dbub::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.2px solid var(--ink)}
.dbub span:first-child{align-self:end;padding-bottom:6px;font-size:16px}
.dbub span:last-child{align-self:start;padding-top:6px;font-size:11px}
.dbub--sm{width:34px;height:34px;flex-basis:34px;font-size:8px;border-width:1px;margin-right:4px}
.dbub--sm::after{border-top-width:1px}
.dbub--sm span:first-child{font-size:10px;padding-bottom:2px}
.dbub--sm span:last-child{font-size:7px;padding-top:2px}
.card h3{gap:10px!important;margin-top:14px!important}
.card:hover .dbub{border-color:var(--red);color:var(--red)}
.card:hover .dbub::after{border-color:var(--red)}

/* drawing title: bubble, then name on a heavy underline, scale below */
.proj-title{display:flex!important;align-items:center;gap:16px;font-size:inherit!important}
.dtitle{display:flex;flex-direction:column;gap:6px;min-width:min(420px,60vw)}
.dtitle-name{font-size:17px;letter-spacing:.05em;padding-bottom:6px;border-bottom:2px solid var(--ink);position:relative}
.dtitle-name::after{content:"";position:absolute;left:0;right:0;bottom:-5px;border-bottom:1px solid var(--ink)}
.dtitle-scale{font-size:9.5px;letter-spacing:.14em;opacity:.6;padding-top:4px}
.proj-title[data-dim]::before,.proj-title[data-dim]::after{left:calc(var(--gap) + 80px)}

/* section-cut head for prev/next */
#itemPagination .etag{display:none}
.scut{position:relative;display:inline-block;width:80px;height:70px;flex:0 0 80px;color:var(--ink)}
.scut svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scut-ring{fill:var(--paper);stroke:currentColor;stroke-width:1.6}
.scut-tri{fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:miter;transition:fill 180ms}
.scut-no{position:absolute;top:0;height:70px;width:60px;display:grid;place-items:center;font-size:13px;letter-spacing:.04em}
.scut--next .scut-no{left:3px}
.scut--prev .scut-no{left:17px}
.scut-ring{stroke-width:1.6}
#itemPagination a:hover .scut{color:var(--red)}
/* cut line extending toward the page, like a section line */
#itemPagination a{position:relative}
#itemPagination a.prev{padding-left:0}
#itemPagination .prev .scut::after,#itemPagination .next .scut::before{content:"";position:absolute;top:50%;width:26px;border-top:1.6px dashed currentColor}
#itemPagination .prev .scut::after{left:100%}
#itemPagination .next .scut::before{right:100%}
#itemPagination .prev{gap:36px!important}
#itemPagination .next{gap:36px!important}

@media (max-width:767px){
  .dbub{width:52px;height:52px;flex-basis:52px}
  .dbub span:first-child{font-size:13px}
  .dbub span:last-child{font-size:9px}
  .dtitle{min-width:0;flex:1}
  .dtitle-name{font-size:14px}
  .scut{width:64px;height:56px;flex-basis:64px}
  .scut svg{width:64px;height:56px}
  .scut-no{height:56px;width:48px;font-size:10.5px}
  .scut--next .scut-no{left:2.5px}.scut--prev .scut-no{left:13.5px}
  #itemPagination .prev,#itemPagination .next{gap:26px!important;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-head span:first-child{opacity:.55}
.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)}
html.blueprint .sb-fill::after{background:#ff5a4f}
.sb-stages{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6px;font-size:8.5px;letter-spacing:.12em;opacity:.55}
.sb-stages span{border-left:1px solid var(--ink);padding-left:6px;padding-top:2px}
.sb-stages span:last-child{text-align:right;border-left:0;border-right:1px solid var(--ink);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 .scut::after,#itemPagination .next .scut::before{content:none!important}
#itemPagination .prev,#itemPagination .next{gap:12px!important}
.scut{width:44px!important;height:38px!important;flex:0 0 44px!important}
.scut svg{width:44px!important;height:38px!important}
.scut-ring,.scut-tri{stroke-width:1.33px!important;vector-effect:non-scaling-stroke}
.scut-no{height:38px!important;width:33px!important;font-size:8px!important;letter-spacing:.02em}
.scut--next .scut-no{left:1.6px!important}
.scut--prev .scut-no{left:9.4px!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;
  border:1.33px solid var(--ink);font-weight:400}
.ts-cell{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-left:1.33px solid var(--ink)}
.ts-cell:first-child{border-left:0}
.ts-k{font-size:8.5px;letter-spacing:.14em;opacity:.55}
.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}
.dbub:not(.dbub--sm),.dtitle{display:none}

.card h3{display:block!important;margin-top:14px!important}
.rtag{display:inline-grid;grid-template-columns:auto auto;border:1.33px solid var(--ink);max-width:100%}
.rtag-no{grid-row:span 2;display:grid;place-items:center;padding:8px 12px;border-right:1.33px solid var(--ink);font-size:11px;letter-spacing:.06em}
.rtag-name{padding:8px 14px;font-size:13px;letter-spacing:.05em}
.rtag-sub{grid-column:2;border-top:1.33px solid var(--ink);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}
.card:hover .rtag,.card:hover .rtag-no,.card:hover .rtag-sub{border-color:var(--red);color:var(--red)}

@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 */
#page{padding-top:calc(var(--frame) + 56px + var(--gap))!important}
.status-bar{padding-top:0!important}
.proj-title{margin-top:0!important}
.status-bar + .proj-title{margin-top:20px!important}
.grid{padding-top:0!important}
.masonry{padding-top:0!important}
.about{padding-top:0!important}
@media (max-width:767px){
  #page{padding-top:calc(var(--frame) + 52px + var(--gap))!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}
.card-img img,.g-item img,.m-item img,.about-img img{transition:opacity 600ms ease,filter 500ms ease!important}
/* homepage: black & white until hovered */
body.homepage .m-item img.is-loaded{filter:grayscale(1)}
body.homepage .m-item:hover img{filter:none}
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;transition:filter 500ms ease!important}

/* compass heading label sits beside the dial, upright and easy to read */
#hjj-north .n-dir{display:inline-block;min-width:2.2em;font-size:10px;letter-spacing:.1em;text-align:left;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}
.scut-ring,.scut-tri,#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;gap:56px!important;align-items:start}
.hatch-shadow{position:relative;margin:0 18px 18px 0}
.hatch-shadow::before{content:"";position:absolute;inset:18px -18px -18px 18px;z-index:-1;
  background:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 7px)}
.hatch-shadow img{position:relative;width:100%;border:var(--rule);background:var(--paper)}
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-tag{display:inline-block;border:var(--rule);padding:9px 16px!important;font-size:15px!important;letter-spacing:.06em!important;margin:0 0 22px!important}
.about p{font-size:12.5px!important;line-height:1.75!important;letter-spacing:.03em!important}

.cv{padding:24px var(--gap) 56px;display:grid;gap:36px}
.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;font-weight:400;letter-spacing:.08em}
.cv-count{font-size:8.5px;letter-spacing:.14em;color:var(--red)}
.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);padding:8px 12px;text-align:left;vertical-align:top}
.cv th{font-size:8.5px;font-weight:400;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;gap:24px}
.cv-tags > div{display:flex;flex-wrap:wrap;gap:8px;border:var(--rule);padding:14px}
.cv-tags span{border:var(--rule);padding:5px 10px;font-size:9.5px;letter-spacing:.1em}
@media (max-width:900px){
  .about{grid-template-columns:1fr!important;gap:32px!important}
  .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{filter:none!important;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{opacity:1;color:var(--red)}
html.blueprint .bp-switch[aria-checked="true"] .sw-on{color:#fff}
.sw-plate{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  width:24px;height:40px;padding:4px 0;border:var(--rule);border-radius:3px;background:var(--paper)}
.sw-screw{width:4px;height:4px;border:var(--rule);border-radius:50%;position:relative}
.sw-screw::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:var(--rule);transform:rotate(-30deg)}
.sw-slot{position:relative;width:10px;height:18px;border:var(--rule);overflow:hidden}
.sw-lever{position:absolute;left:0;right:0;height:50%;top:50%;background:var(--ink);
  transition:top 180ms cubic-bezier(.34,1.56,.64,1)}
.bp-switch[aria-checked="true"] .sw-lever{top:0}
.bp-switch:hover .sw-plate{border-color:var(--red)}
.bp-switch:active .sw-plate{transform:scale(.96)}
.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;align-items:flex-start}
.tb-sheet{grid-column:8!important}
.tb-mode .bp-switch{margin-top:0}
@media (max-width:1100px){
  #footer-sections .footer-inner{grid-template-columns:1.2fr 2fr 1fr 1fr!important}
  .tb-contact{grid-column:1 / 3!important;grid-row:2!important}
  .tb-mode{grid-column:3;grid-row:2;border-top:var(--rule);justify-content:space-between}
  .tb-sheet{grid-column:4!important;grid-row:2!important}
}
@media (max-width:767px){
  #footer-sections .footer-inner{grid-template-columns:1fr 1fr!important}
  .tb-contact{grid-column:1 / -1!important;grid-row:4!important}
  .tb-mode{grid-column:1 / -1;grid-row:5;border-left:0;min-height:0}
  .tb-sheet{grid-column:2!important;grid-row:3!important}
  .tb-copy{grid-row:6!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)}
.tb-label{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
@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;inset:0;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;gap:48px!important}
.about-sticky{position:sticky;top:calc(var(--frame) + 56px + var(--gap))}
.about-text{columns:2 260px;column-gap:40px;column-rule:var(--rule)}
.about-text .about-tag{column-span:all}
.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;padding:8px 12px;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;justify-content:space-evenly;gap:0;margin:0}
.tb-mode .bp-switch{justify-content:center!important;gap:14px!important;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.
========================================================= */
html{background:var(--tail-lines,none),var(--paper)!important}
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;left:calc(var(--frame) + 14px);bottom:calc(var(--frame) + 14px);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}
html.hjj-intro-active #hjj-view{opacity:0}
#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{left:calc(var(--frame) + 10px);bottom:calc(var(--frame) + 10px);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;white-space:nowrap}
@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;grid-row:7!important}
  .tb-size{grid-column:1 / -1;grid-row:6;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)}
}

/* blueprint: progress marker in a pale blueprint cyan instead of red */
html.blueprint .sb-fill::after{background:#8fc4ff!important}

/* =========================================================
   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;
    border-top:var(--rule);
    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}
  html.menu-lock,html.menu-lock body{overflow:hidden}
  .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}
}
@media (max-width:767px){#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{height:auto!important;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}
html.has-safe{--sheet-rad:34px}
#sheet-frame{inset:var(--sh-t) var(--sh-r) var(--sh-b) var(--sh-l)!important}
#sheet-frame::before{border-radius:var(--sheet-rad)}
#sheet-frame::after{border-radius:calc(var(--sheet-rad) + var(--frame) - 8px)}
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}
#page{padding-top:calc(var(--frame) + var(--sh-t) + 56px + var(--gap))!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){
  #page{padding-top:calc(var(--frame) + var(--sh-t) + 52px + var(--gap))!important}
  #sheet-frame::after{border-radius:calc(var(--sheet-rad) + var(--frame) - 4px)}
  #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}