:root{
  --paper:#f4f3ef;--ink:#11110f;--muted:#77756f;--line:#d9d7d0;
  --sidebar:300px;--sidebar-pad:30px;--content-pad:46px;--menu-gap:24px;--compact-gap:13px;
  --base-size:13px;--meta-width:315px;--project-gap:34px;--image-max:72vh;--image-bg:#e9e7e1;
  --title-size:20px;--statement-size:18px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Helvetica Neue",Helvetica,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-size:var(--base-size);line-height:1.35;letter-spacing:-.01em}
button,a{font:inherit;color:inherit}button{background:none;border:0;padding:0;cursor:pointer}a{text-decoration:none}.skip{position:fixed;left:10px;top:-40px;z-index:1000;background:#111;color:#fff;padding:8px 10px}.skip:focus{top:10px}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);border-right:1px solid var(--line);background:var(--paper);z-index:20}.sidebar-inner{height:100%;padding:28px var(--sidebar-pad) 25px;display:flex;flex-direction:column}.brand{display:flex;gap:9px;align-items:baseline;font-size:17px;font-weight:600;letter-spacing:-.035em;margin-bottom:68px}.brand-ko{font-size:13px;font-weight:500}.menu{display:flex;flex-direction:column}.menu-block{margin:0 0 var(--menu-gap)}.menu-block-spaced{margin-top:22px;margin-bottom:39px}.menu-block.compact{margin:0 0 var(--compact-gap)}.menu-title{font-size:13px;font-weight:600;letter-spacing:.01em;text-align:left;opacity:.44;transition:opacity .2s}.menu-title:hover,.menu-title.active{opacity:1}.submenu{display:flex;flex-direction:column;gap:7px;margin-top:12px}.submenu button{text-align:left;font-size:12px;color:var(--muted);transition:color .2s}.submenu button:hover{color:var(--ink)}.sidebar-footer{margin-top:auto;color:#8c8981;font-size:11px}
.main{margin-left:var(--sidebar);min-height:100vh}.page{display:none;min-height:100vh;padding:29px var(--content-pad) 28px}.page.active{display:block}.page-header{height:82px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:19px}.page-header h1{margin:0;font-size:13px;letter-spacing:.02em;font-weight:600}.page-header p{margin:0;color:var(--muted);font-size:11px}
.project-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px;padding:31px 0 38px;border-bottom:1px solid var(--line);align-items:start}.project-card{display:block;min-width:0;margin:0;color:inherit;scroll-margin-top:20px}.project-image-wrap,.media-frame{position:relative;display:block;background:transparent;overflow:visible;min-width:0;width:100%}.project-image{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:unset;filter:saturate(.92);transition:transform .45s cubic-bezier(.2,.6,.2,1),opacity .2s}.project-card:hover .project-image{transform:scale(1.008);opacity:.94}.project-index{position:absolute;right:8px;bottom:8px;background:rgba(244,243,239,.86);padding:3px 5px;font-size:9px}.project-meta{display:block;margin-top:9px;min-height:0}.project-meta h2{font-size:14px;font-weight:500;letter-spacing:-.035em;margin:0 0 4px}.project-meta p{font-size:10px;color:var(--muted);margin:0;line-height:1.35}.page-tail{display:flex;justify-content:space-between;padding-top:9px;color:#8d8a84;font-size:10px}
.commercial-canvas{padding:31px 0 38px;border-bottom:1px solid var(--line)}.commercial-canvas.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--commercial-gap,24px);align-items:center}.commercial-canvas.freeCanvas{display:block;position:relative;min-height:var(--commercial-min-height,400px);overflow:visible;padding-bottom:0}.commercial-item{margin:0;min-width:0}.commercial-canvas.freeCanvas .commercial-item{position:absolute;left:var(--commercial-x,0%);top:var(--commercial-y-px,0px);width:var(--commercial-width,29%);z-index:var(--commercial-z,1)}.commercial-canvas .media-frame{min-height:0}.commercial-canvas img{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:unset}.commercial-canvas figcaption{display:flex;justify-content:space-between;margin-top:8px;color:#62605b;font-size:10px;gap:20px}.commercial-canvas figcaption span:last-child{text-align:right}.text-page{max-width:none}.text-page .page-header{margin-bottom:58px}.cv-grid{width:min(980px,100%)}.cv-section{display:grid;grid-template-columns:225px 1fr;border-top:1px solid var(--line);padding:17px 0 29px}.cv-section:first-child{border-top:0}.cv-section h2{font-size:12px;margin:0;font-weight:600}.cv-section p{margin:0 0 8px;font-size:12px;max-width:640px}.cv-section p span{display:inline-block;width:47px;color:var(--muted)}.statement{width:min(760px,74%);font-size:var(--statement-size);line-height:1.72;letter-spacing:-.04em}.statement p{margin:0 0 28px}.contact-wrap{width:min(700px,100%)}.contact-item{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--line);padding:17px 0 28px}.contact-item span{font-size:11px;color:var(--muted)}.contact-item a,.contact-item .contact-value{font-size:18px;letter-spacing:-.03em;width:max-content;padding-bottom:1px}.contact-item a{border-bottom:0;text-decoration:none}
.project-overlay{position:fixed;inset:0;background:var(--paper);z-index:100;display:none;overflow:auto}.project-overlay.open{display:block}.overlay-close{position:fixed;top:27px;right:32px;font-size:11px;z-index:102;border-bottom:1px solid}.overlay-content{padding:95px var(--content-pad) 70px calc(var(--sidebar) + var(--content-pad))}.overlay-head{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin-bottom:52px}.overlay-head h2{font-size:28px;margin:0;font-weight:500;letter-spacing:-.05em}.overlay-head p{margin:5px 0 0;color:var(--muted)}.overlay-gallery{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.overlay-gallery .media-frame{min-height:0}.overlay-gallery img{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:unset}.overlay-gallery .wide{grid-column:1 / -1}.overlay-note{width:min(680px,100%);font-size:15px;line-height:1.65;margin:60px 0 0}

html[data-image-fit="fitViewport"] .project-image-wrap,html[data-image-fit="fitViewport"] .media-frame{display:grid;place-items:center;background:var(--image-bg);overflow:hidden}
html[data-image-fit="fitViewport"] .project-image,html[data-image-fit="fitViewport"] .commercial-canvas img,html[data-image-fit="fitViewport"] .overlay-gallery img{width:auto;height:auto;max-width:100%;max-height:var(--image-max);object-fit:contain}
html[data-image-fit="fitViewport"] .commercial-canvas .media-frame{min-height:240px}
html[data-image-fit="fitViewport"] .overlay-gallery .media-frame{min-height:180px}
.empty{padding:50px 0;color:var(--muted);font-size:12px}

/* HOME — first screen. No menu item is selected here. */
.home-page{padding:0 var(--content-pad);min-height:100vh}
.home-feed{padding-top:var(--home-top,30px);padding-bottom:var(--home-bottom,60px);min-height:100vh}
.home-feed.curated{display:flex;flex-direction:column;gap:var(--home-gap,34px)}
.home-feed.curated .home-item{width:var(--item-width,100%)}
.home-feed.curated .home-item[data-align="left"]{align-self:flex-start}
.home-feed.curated .home-item[data-align="center"]{align-self:center}
.home-feed.curated .home-item[data-align="right"]{align-self:flex-end}
.home-feed.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--home-gap,34px);align-items:start}
.home-feed.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--home-gap,34px);align-items:start}
.home-item{margin:0;min-width:0}.home-item img{display:block;width:100%;height:auto;max-width:100%;object-fit:unset}
.home-link{display:block;min-width:0}.home-caption{display:flex;justify-content:space-between;gap:18px;margin-top:8px;color:var(--muted);font-size:10px}.home-caption span:last-child{text-align:right}

/* HOME / FREE CANVAS — scattered index images, no crop */
.home-feed.freeCanvas{position:relative;height:100vh;min-height:var(--home-min-height,760px);padding:0;overflow:hidden}
.home-feed.freeCanvas .home-item{position:absolute;left:var(--item-x,0%);top:var(--item-y,0%);width:var(--item-width,28%);z-index:var(--item-z,1);margin:0}
.home-feed.freeCanvas .home-item img{display:block;width:100%;height:auto;max-width:100%;object-fit:unset}
.home-feed.freeCanvas .home-caption{margin-top:6px;font-size:9px;opacity:.72}
.home-image-link{display:block}
@media(max-width:900px){.home-feed.freeCanvas .home-item{width:min(var(--item-width,28%),44%)}}
@media(max-width:640px){.home-feed.freeCanvas{height:auto;min-height:0;padding:18px 0 36px;display:flex;flex-direction:column;gap:22px;overflow:visible}.home-feed.freeCanvas .home-item{position:relative;left:auto;top:auto;width:100%!important;z-index:auto}.home-feed.freeCanvas .home-caption{font-size:10px}}
@media(max-width:900px){:root{--sidebar:210px}.sidebar-inner{padding-left:22px;padding-right:20px}.page{padding-left:28px;padding-right:26px}.project-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}.commercial-canvas.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.statement{width:100%}.overlay-content{padding-left:calc(var(--sidebar) + 28px)}.home-feed.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){:root{--sidebar:0px}.sidebar{position:relative;width:100%;height:auto;border-right:0;border-bottom:1px solid var(--line)}.sidebar-inner{padding:19px 18px 16px}.brand{margin-bottom:22px}.menu{display:grid;grid-template-columns:repeat(5,max-content);gap:16px;overflow-x:auto}.menu-block,.menu-block-spaced,.menu-block.compact{margin:0}.submenu,.sidebar-footer{display:none}.main{margin-left:0}.page{padding:20px 18px 28px}.page-header{height:62px}.project-list{grid-template-columns:1fr;padding-top:22px;gap:30px}.commercial-canvas{padding-top:22px}.commercial-canvas.grid3{grid-template-columns:1fr}.commercial-canvas.freeCanvas{min-height:0;display:flex;flex-direction:column;gap:24px}.commercial-canvas.freeCanvas .commercial-item{position:relative;left:auto;top:auto;width:100%!important;z-index:auto}.cv-section{grid-template-columns:1fr;gap:14px}.statement{font-size:16px}.contact-item{grid-template-columns:100px 1fr}.overlay-content{padding:78px 18px 45px}.overlay-close{top:18px;right:18px}.overlay-gallery{grid-template-columns:1fr}.overlay-gallery .wide{grid-column:auto}.home-page{padding-left:18px;padding-right:18px}.home-feed.grid2,.home-feed.grid3{grid-template-columns:1fr}.home-feed.curated .home-item{width:100%!important}}


/* V9 — PROJECT GALLERY captions + free canvas */
.overlay-gallery.freeCanvas{display:block;position:relative;height:auto;min-height:var(--gallery-min-height,400px);overflow:visible;margin:0;padding:0}
.overlay-gallery.freeCanvas .project-gallery-item{position:absolute;left:var(--gallery-x,0%);top:var(--gallery-y-px,0px);width:var(--gallery-width,32%);z-index:var(--gallery-z,1);margin:0;min-width:0}
.overlay-gallery.freeCanvas .project-gallery-item img{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:unset}
.project-gallery-caption{display:flex;justify-content:space-between;gap:16px;margin-top:7px;color:var(--muted);font-size:10px;line-height:1.35}
.project-gallery-caption span:last-child{text-align:right}
.overlay-gallery.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.overlay-gallery.grid .project-gallery-item{margin:0;min-width:0}
.overlay-gallery.grid .project-gallery-item img{display:block;width:100%;height:auto;max-width:100%}
@media(max-width:640px){.overlay-gallery.freeCanvas{height:auto;min-height:0;display:flex;flex-direction:column;gap:24px;overflow:visible}.overlay-gallery.freeCanvas .project-gallery-item{position:relative;left:auto;top:auto;width:100%!important;z-index:auto}.overlay-gallery.grid{grid-template-columns:1fr}}


/* V17 — unified WORKS covers + persistent navigation on project detail */
.project-list .project-image-wrap{
  width:var(--works-cover-size,86%);
  aspect-ratio:4 / 5;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:transparent;
}
.project-list .project-image{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain !important;
}
.project-list .project-meta{width:var(--works-cover-size,86%)}
.project-overlay{
  left:var(--sidebar);
  right:0;
  top:0;
  bottom:0;
  z-index:15;
}
.overlay-content{padding:95px var(--content-pad) 70px}
.overlay-close{display:none !important}
.submenu button.active{color:var(--ink);font-weight:500}
@media(max-width:900px){.overlay-content{padding-left:28px;padding-right:26px}}
@media(max-width:640px){
  .project-list .project-image-wrap,.project-list .project-meta{width:100%}
  .project-overlay{left:0;z-index:15}
  .sidebar{z-index:30}
  .overlay-content{padding:110px 18px 45px}
}


/* V23 — full typography controls */
:root{--font-brand:17px;--font-brand-ko:13px;--font-menu:13px;--font-submenu:12px;--font-footer:11px;--font-page-title:13px;--font-page-subtitle:11px;--font-works-index:9px;--font-works-title:14px;--font-works-meta:10px;--font-page-tail:10px;--font-home-caption:10px;--font-home-free-caption:9px;--font-commercial-caption:10px;--font-cv-heading:12px;--font-cv-year:12px;--font-cv-text:12px;--font-contact-label:11px;--font-contact-value:18px;--font-text-list-type:13px;--font-text-list-author:13px;--font-text-list-title:13px;--font-text-list-source:13px;--font-text-detail-title:28px;--font-text-detail-meta:12px;--font-text-detail-body:16px;--font-detail-title:28px;--font-detail-subtitle:13px;--font-detail-meta:13px;--font-gallery-caption:10px;--font-project-description:15px;--font-empty:12px}
.brand{font-size:var(--font-brand)}.brand-ko{font-size:var(--font-brand-ko)}.menu-title{font-size:var(--font-menu)}.submenu button{font-size:var(--font-submenu)}.sidebar-footer{font-size:var(--font-footer)}.page-header h1{font-size:var(--font-page-title)}.page-header p{font-size:var(--font-page-subtitle)}.project-index{font-size:var(--font-works-index)}.project-meta h2{font-size:var(--font-works-title)}.project-meta p{font-size:var(--font-works-meta)}.page-tail{font-size:var(--font-page-tail)}.home-caption{font-size:var(--font-home-caption)}.home-feed.freeCanvas .home-caption{font-size:var(--font-home-free-caption)}.commercial-canvas figcaption{font-size:var(--font-commercial-caption)}.cv-section h2{font-size:var(--font-cv-heading)}.cv-section p{font-size:var(--font-cv-text)}.cv-section p span{font-size:var(--font-cv-year)}.statement{font-size:var(--statement-size)}.contact-item span{font-size:var(--font-contact-label)}.contact-item a,.contact-item .contact-value{font-size:var(--font-contact-value)}.overlay-head h2{font-size:var(--font-detail-title)}.overlay-head p{font-size:var(--font-detail-subtitle)}.overlay-head>span{font-size:var(--font-detail-meta)}.project-gallery-caption{font-size:var(--font-gallery-caption)}.overlay-note{font-size:var(--font-project-description)}.empty{font-size:var(--font-empty)}


/* V24 — image zoom, CONTACT typography controls, TEXTS library/detail */
.project-gallery-item img,.commercial-item img,.home-item img{cursor:zoom-in}
.image-lightbox{position:fixed;inset:0;z-index:500;background:rgba(8,8,8,.94);display:none;pointer-events:none;align-items:center;justify-content:center;padding:34px 42px 54px}
.image-lightbox.open{display:flex;pointer-events:auto}
.image-lightbox img{display:block;max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.lightbox-close{position:fixed;right:26px;top:20px;color:#fff;background:transparent;border:0;font:300 30px/1 Arial,sans-serif;cursor:pointer;z-index:502}
.lightbox-caption{position:fixed;left:42px;right:42px;bottom:19px;color:rgba(255,255,255,.68);font-size:10px;letter-spacing:.01em;text-align:center}
body.lightbox-open{overflow:hidden}
.text-index{width:100%;border-bottom:1px solid var(--line)}
.text-row{width:100%;display:grid;grid-template-columns:minmax(100px,.75fr) minmax(170px,1.15fr) minmax(260px,1.8fr) minmax(260px,1.9fr);align-items:center;gap:26px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);padding:19px 0 22px;text-align:left;cursor:pointer}
.text-row:hover{opacity:.58}
.text-row-type{font-size:var(--font-text-list-type)}
.text-row-author{font-size:var(--font-text-list-author)}
.text-row-title{font-size:var(--font-text-list-title)}
.text-row-source{font-size:var(--font-text-list-source)}
.text-detail{width:min(980px,100%);padding-bottom:80px}
.text-back{border:0;background:transparent;color:var(--muted);font-size:11px;padding:0 0 18px;cursor:pointer}
.text-detail-head{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0 26px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px}
.text-detail-kicker{color:var(--muted);font-size:var(--font-text-detail-meta);margin-bottom:9px}
.text-detail-head h2{font-size:var(--font-text-detail-title);font-weight:500;letter-spacing:-.045em;margin:0}
.text-detail-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:var(--muted);font-size:var(--font-text-detail-meta)}
.text-detail-meta a{border-bottom:1px solid var(--line)}
.text-detail-body{width:min(760px,100%);font-size:var(--font-text-detail-body);line-height:1.82;letter-spacing:-.02em;padding-top:42px}
.text-detail-body p{margin:0 0 1.5em}
@media(max-width:900px){.text-row{grid-template-columns:100px 150px 1fr;gap:18px}.text-row-source{grid-column:3}}
@media(max-width:640px){.image-lightbox{padding:24px 14px 46px}.image-lightbox img{max-width:96vw;max-height:84vh}.lightbox-close{right:14px;top:12px}.lightbox-caption{left:16px;right:16px}.text-row{grid-template-columns:1fr;gap:5px;padding:17px 0}.text-row-source{grid-column:auto;color:var(--muted)}.text-row-type{color:var(--muted)}.text-detail-head{grid-template-columns:1fr;gap:18px}.text-detail-body{padding-top:28px}}

/* V30 mobile project navigation — visible return control + browser history support */
.mobile-project-back{display:none}
@media(max-width:640px){
  .overlay-content{padding:18px 18px 45px}
  .mobile-project-back{
    display:block;
    position:sticky;
    top:0;
    z-index:24;
    width:100%;
    margin:0 0 24px;
    padding:14px 0 13px;
    background:var(--paper);
    color:var(--ink);
    text-align:left;
    font-size:11px;
    font-weight:500;
    letter-spacing:.04em;
  }
  .overlay-head{margin-bottom:38px}
}

/* V31 — MOBILE KEEPS DESKTOP-LIKE COMPOSITION
   Preserve multi-column grids and free-canvas placement instead of collapsing to one column. */
@media(max-width:640px){
  body{overflow-x:hidden}

  /* WORKS index: keep the three-column rhythm on phone */
  .project-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px 9px;
    padding-top:22px;
  }
  .project-list .project-image-wrap,.project-list .project-meta{width:100%}
  .project-meta{margin-top:6px}
  .project-meta h2{font-size:10px;line-height:1.2}
  .project-meta p{font-size:8px;line-height:1.25}
  .project-index{right:4px;bottom:4px;font-size:7px}

  /* COMMERCIAL: retain the same 3-column grid */
  .commercial-canvas.grid3{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    align-items:center;
  }
  .commercial-canvas figcaption{
    margin-top:5px;
    gap:4px;
    font-size:7px;
    line-height:1.2;
  }

  /* COMMERCIAL free canvas: preserve X/width and scale Y positions to phone width */
  .commercial-canvas.freeCanvas{
    display:block;
    position:relative;
    min-height:var(--commercial-min-height-mobile,420px);
    padding-bottom:0;
    gap:0;
    overflow:visible;
  }
  .commercial-canvas.freeCanvas .commercial-item{
    position:absolute;
    left:var(--commercial-x,0%);
    top:var(--commercial-y-mobile,var(--commercial-y-px,0px));
    width:var(--commercial-width,29%) !important;
    z-index:var(--commercial-z,1);
  }

  /* Project details: keep two-column grid, rather than one full-width image */
  .overlay-gallery.grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
    align-items:start;
  }
  .overlay-gallery.grid .wide{grid-column:1 / -1}
  .project-gallery-caption{
    margin-top:5px;
    gap:4px;
    font-size:7px;
    line-height:1.22;
  }

  /* Project free canvas: retain the desktop composition and scale vertical coordinates */
  .overlay-gallery.freeCanvas{
    display:block;
    position:relative;
    height:auto;
    min-height:var(--gallery-min-height-mobile,420px);
    overflow:visible;
    margin:0;
    padding:0;
  }
  .overlay-gallery.freeCanvas .project-gallery-item{
    position:absolute;
    left:var(--gallery-x,0%);
    top:var(--gallery-y-mobile,var(--gallery-y-px,0px));
    width:var(--gallery-width,32%) !important;
    z-index:var(--gallery-z,1);
    margin:0;
  }

  /* HOME grid modes keep their desktop column counts */
  .home-feed.grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .home-feed.grid3{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}

  /* HOME free canvas: keep the scattered composition */
  .home-feed.freeCanvas{
    display:block;
    position:relative;
    height:145vw;
    min-height:520px;
    max-height:720px;
    padding:0;
    overflow:visible;
  }
  .home-feed.freeCanvas .home-item{
    position:absolute;
    left:var(--item-x,0%);
    top:var(--item-y,0%);
    width:var(--item-width,28%) !important;
    z-index:var(--item-z,1);
    margin:0;
  }
  .home-feed.freeCanvas .home-caption{
    margin-top:4px;
    font-size:7px;
    line-height:1.2;
  }
}

/* V32 — MOBILE CLEAN EDITORIAL LAYOUT
   Inspired by the supplied mobile references:
   persistent compact index navigation for normal pages + a clean two-column project view.
   Desktop/tablet layout remains unchanged. */
@media (max-width:640px){
  :root{
    --mobile-sidebar:94px;
  }

  html,body{overflow-x:hidden}
  body{font-size:10px}

  /* Compact fixed left index, similar to reference 1 */
  .sidebar{
    position:fixed !important;
    inset:0 auto 0 0 !important;
    width:var(--mobile-sidebar) !important;
    height:100svh !important;
    border-right:1px solid var(--line) !important;
    border-bottom:0 !important;
    background:var(--paper);
    overflow-y:auto;
    overflow-x:hidden;
    z-index:20;
  }
  .sidebar-inner{
    height:100%;
    min-height:100svh;
    padding:24px 10px 17px !important;
  }
  .brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
    margin:0 0 44px !important;
    font-size:11px !important;
    line-height:1.12;
    letter-spacing:-.025em;
  }
  .brand-ko{font-size:7.5px !important;font-weight:500;line-height:1.2}
  .menu{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    overflow:visible !important;
  }
  .menu-block{margin:0 0 19px !important}
  .menu-block-spaced{margin:4px 0 23px !important}
  .menu-block.compact{margin:0 0 10px !important}
  .menu-title{
    font-size:8px !important;
    line-height:1.2;
    letter-spacing:.015em;
    white-space:normal;
  }
  .submenu{
    display:flex !important;
    flex-direction:column;
    gap:5px;
    margin-top:8px;
  }
  .submenu button{
    font-size:7px !important;
    line-height:1.2;
    white-space:normal;
  }
  .sidebar-footer{
    display:block !important;
    font-size:6.5px !important;
    line-height:1.25;
    margin-top:auto;
  }

  .main{margin-left:var(--mobile-sidebar) !important}
  .page{padding:22px 9px 28px !important;min-height:100svh}
  .home-page{padding:0 9px !important}
  .page-header{
    height:auto !important;
    min-height:46px;
    padding:0 0 11px !important;
    margin:0 0 14px;
    align-items:flex-start;
  }
  .page-header h1{font-size:8px !important}
  .page-header p{font-size:6.5px !important}
  .page-tail{font-size:6px !important;padding-top:7px}

  /* HOME: abandon absolute free-canvas placement on phone.
     Two-column editorial grid, natural ratios, no crop, no overlap. */
  .home-feed.freeCanvas,
  .home-feed.grid2,
  .home-feed.grid3,
  .home-feed.curated{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:start !important;
    column-gap:7px !important;
    row-gap:17px !important;
    position:relative !important;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:18px 0 34px !important;
    overflow:visible !important;
  }
  .home-feed.freeCanvas .home-item,
  .home-feed.grid2 .home-item,
  .home-feed.grid3 .home-item,
  .home-feed.curated .home-item{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    align-self:start !important;
    z-index:auto !important;
    margin:0 !important;
    min-width:0;
  }
  .home-item img{width:100% !important;height:auto !important;object-fit:contain !important}
  .home-caption,
  .home-feed.freeCanvas .home-caption{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:1px !important;
    margin-top:4px !important;
    font-size:6.5px !important;
    line-height:1.2 !important;
    opacity:.72;
    min-width:0;
  }
  .home-caption span{
    display:block;
    min-width:0;
    max-width:100%;
    text-align:left !important;
    overflow-wrap:anywhere;
  }

  /* WORKS index: clean two columns instead of three tiny cards. */
  .project-list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 7px !important;
    padding:5px 0 26px !important;
    align-items:start !important;
  }
  .project-meta{margin-top:5px !important}
  .project-meta h2{font-size:7.5px !important;line-height:1.22 !important;margin-bottom:2px}
  .project-meta p{font-size:6.3px !important;line-height:1.2 !important}
  .project-index{right:3px !important;bottom:3px !important;font-size:6px !important;padding:2px 3px}

  /* COMMERCIAL: reference-1 style compact three-column catalogue.
     Free-canvas is deliberately normalized into the same grid on phone. */
  .commercial-canvas,
  .commercial-canvas.grid3,
  .commercial-canvas.freeCanvas{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:start !important;
    gap:13px 6px !important;
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    padding:4px 0 27px !important;
    overflow:visible !important;
  }
  .commercial-canvas.freeCanvas .commercial-item,
  .commercial-canvas.grid3 .commercial-item,
  .commercial-item{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    z-index:auto !important;
    align-self:start;
    min-width:0;
    margin:0 !important;
  }
  .commercial-canvas img{width:100% !important;height:auto !important;object-fit:contain !important}
  .commercial-canvas figcaption{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:1px !important;
    margin-top:3px !important;
    font-size:6px !important;
    line-height:1.18 !important;
    min-width:0;
    color:var(--muted);
  }
  .commercial-canvas figcaption span{
    display:block;
    min-width:0;
    width:100%;
    text-align:left !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* CV / TEXT / CONTACT remain readable inside the narrow content column. */
  .cv-section{grid-template-columns:1fr !important;gap:7px;padding:11px 0 17px}
  .cv-section h2{font-size:7px !important}
  .cv-section p{font-size:7px !important;line-height:1.35;margin-bottom:5px}
  .cv-section p span{font-size:6.5px !important;width:34px}
  .statement{font-size:11px !important;line-height:1.6}
  .contact-item{grid-template-columns:54px minmax(0,1fr) !important;padding:11px 0 16px}
  .contact-item span{font-size:6.5px !important}
  .contact-item a,.contact-item .contact-value{font-size:9px !important;width:auto;overflow-wrap:anywhere}
  .text-row{padding:11px 0 !important;gap:3px !important}
  .text-row-type,.text-row-author,.text-row-title,.text-row-source{font-size:7px !important;line-height:1.25}

  /* PROJECT DETAIL: reference-2 style, full-width and strictly two-column.
     All free-canvas coordinates are ignored on phone, so captions can never collide. */
  .project-overlay{inset:0 !important;background:var(--paper)}
  .overlay-content{
    position:relative;
    padding:16px 7px 42px !important;
    width:100%;
    max-width:none;
  }
  .mobile-project-back{
    display:block !important;
    position:relative !important;
    top:auto !important;
    width:max-content !important;
    margin:0 0 12px auto !important;
    padding:0 !important;
    background:transparent !important;
    text-align:right !important;
    font-size:8px !important;
    line-height:1.2;
    letter-spacing:.02em !important;
  }
  .overlay-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:start;
    border-top:1px solid var(--line);
    padding-top:8px !important;
    margin:0 0 18px !important;
  }
  .overlay-head h2{font-size:18px !important;line-height:1.05;letter-spacing:-.045em}
  .overlay-head p{font-size:8px !important;margin-top:4px !important}
  .overlay-head>span{font-size:7px !important;white-space:nowrap;padding-top:2px}

  .overlay-gallery,
  .overlay-gallery.grid,
  .overlay-gallery.freeCanvas{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:start !important;
    gap:12px 6px !important;
    position:relative !important;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    margin:0 !important;
    padding:0 !important;
  }
  .overlay-gallery.freeCanvas .project-gallery-item,
  .overlay-gallery.grid .project-gallery-item,
  .overlay-gallery .project-gallery-item{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    z-index:auto !important;
    grid-column:auto !important;
    align-self:start;
    min-width:0;
    margin:0 !important;
  }
  .overlay-gallery .project-gallery-item.wide{grid-column:1 / -1 !important}
  .overlay-gallery img{
    display:block;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
  }
  .project-gallery-caption{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:1px !important;
    margin-top:4px !important;
    min-width:0;
    font-size:6.6px !important;
    line-height:1.23 !important;
    color:var(--muted);
  }
  .project-gallery-caption span{
    display:block;
    min-width:0;
    width:100%;
    text-align:left !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .overlay-note{font-size:9px !important;line-height:1.55;margin-top:28px}

  /* Avoid fit-viewport wrappers creating artificial empty boxes on mobile. */
  html[data-image-fit="fitViewport"] .project-image-wrap,
  html[data-image-fit="fitViewport"] .media-frame{
    display:block !important;
    min-height:0 !important;
    background:transparent !important;
    overflow:visible !important;
  }
  html[data-image-fit="fitViewport"] .project-image,
  html[data-image-fit="fitViewport"] .commercial-canvas img,
  html[data-image-fit="fitViewport"] .overlay-gallery img{
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}

/* V33 — MOBILE PROJECT DETAIL FIX
   On phones the project detail becomes a true full-screen layer, like the supplied reference.
   This prevents the fixed sidebar from covering the project title, first column and captions. */
@media (max-width:640px){
  .project-overlay,
  .project-overlay.open{
    position:fixed !important;
    inset:0 !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:100dvh !important;
    z-index:80 !important;
    background:var(--paper) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }

  .project-overlay .overlay-content{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:18px 10px 48px !important;
    overflow:visible !important;
  }

  .project-overlay .mobile-project-back{
    display:block !important;
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:max-content !important;
    margin:0 0 14px auto !important;
    padding:0 !important;
    background:transparent !important;
    color:var(--ink) !important;
    text-align:right !important;
    font-size:9px !important;
    line-height:1.2 !important;
    letter-spacing:.01em !important;
    z-index:2;
  }

  .project-overlay .overlay-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:12px !important;
    align-items:start !important;
    width:100% !important;
    box-sizing:border-box !important;
    border-top:1px solid var(--line) !important;
    padding:9px 0 0 !important;
    margin:0 0 22px !important;
  }
  .project-overlay .overlay-head > div{min-width:0 !important}
  .project-overlay .overlay-head h2{
    max-width:100% !important;
    margin:0 !important;
    font-size:20px !important;
    line-height:1.03 !important;
    letter-spacing:-.045em !important;
    overflow-wrap:anywhere;
  }
  .project-overlay .overlay-head p{
    margin:5px 0 0 !important;
    font-size:9px !important;
    line-height:1.2 !important;
  }
  .project-overlay .overlay-head > span{
    padding-top:2px !important;
    font-size:8px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  .project-overlay .overlay-gallery,
  .project-overlay .overlay-gallery.grid,
  .project-overlay .overlay-gallery.freeCanvas{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    align-items:start !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    gap:16px 8px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .project-overlay .project-gallery-item,
  .project-overlay .overlay-gallery.grid .project-gallery-item,
  .project-overlay .overlay-gallery.freeCanvas .project-gallery-item{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    z-index:auto !important;
    grid-column:auto !important;
    align-self:start !important;
    overflow:visible !important;
  }
  .project-overlay .project-gallery-item.wide{grid-column:1 / -1 !important}

  .project-overlay .project-gallery-item img,
  .project-overlay .overlay-gallery img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  .project-overlay .project-gallery-caption{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:5px 0 0 !important;
    padding:0 !important;
    font-size:7.2px !important;
    line-height:1.28 !important;
    color:var(--muted) !important;
    overflow:visible !important;
  }
  .project-overlay .project-gallery-caption span{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    text-align:left !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  .project-overlay .overlay-note{
    width:100% !important;
    margin:30px 0 0 !important;
    font-size:9px !important;
    line-height:1.55 !important;
  }
}

/* V34 — HOME HORIZONTAL FILMSTRIP
   The HOME source order becomes a horizontally scrollable visual index.
   Images keep their natural aspect ratio; no crop or stretching. */
.home-page{
  padding:0 !important;
  min-height:100vh;
  overflow:hidden;
}
.home-filmstrip-shell{
  position:relative;
  box-sizing:border-box;
  width:100%;
  min-height:100vh;
  padding:76px var(--content-pad) 54px;
}
.home-filmstrip-controls{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:9px;
  margin:2px 0 0;
}
.home-filmstrip-controls button{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:var(--home-filmstrip-arrow-size,11px);
  line-height:1;
  min-width:calc(var(--home-filmstrip-arrow-size,11px) + 3px);
  padding:2px 0;
  cursor:pointer;
  transition:color .14s ease,opacity .14s ease;
}
.home-filmstrip-controls button:hover{color:var(--ink)}
.home-filmstrip-controls button:disabled{opacity:.24;cursor:default;color:var(--muted)}
.home-filmstrip-track{
  display:flex;
  align-items:flex-start;
  gap:14px;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 8px;
  margin:0;
  scroll-snap-type:x proximity;
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.home-filmstrip-track::-webkit-scrollbar{display:none}
.home-filmstrip-track:focus{outline:none}
.home-filmstrip-track .home-item,
.home-filmstrip-track .home-feed.freeCanvas .home-item{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto;
  margin:0 !important;
  z-index:auto !important;
  scroll-snap-align:start;
}
.home-filmstrip-track .home-image-link{display:block}
.home-filmstrip-track .home-item img{
  display:block;
  width:auto !important;
  height:260px !important;
  max-width:none !important;
  max-height:260px !important;
  object-fit:contain !important;
  object-position:center;
}
.home-filmstrip-track .home-caption,
.home-filmstrip-track .home-feed.freeCanvas .home-caption{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:2px !important;
  width:100%;
  max-width:100%;
  margin-top:7px !important;
  color:var(--muted);
  font-size:var(--font-home-free-caption) !important;
  line-height:1.25 !important;
  opacity:.8;
}
.home-filmstrip-track .home-caption span{
  display:block;
  width:100%;
  max-width:100%;
  text-align:left !important;
  white-space:normal;
  overflow-wrap:anywhere;
}
@media(max-width:900px){
  .home-filmstrip-shell{padding:58px 28px 44px}
  .home-filmstrip-track{gap:11px}
  .home-filmstrip-track .home-item img{height:220px !important;max-height:220px !important}
}
@media(max-width:640px){
  .home-page{padding:0 !important;min-height:100svh !important}
  .home-filmstrip-shell{
    min-height:100svh;
    padding:30px 9px 34px !important;
  }
  .home-filmstrip-controls{display:none}
  .home-filmstrip-track{
    display:flex !important;
    grid-template-columns:none !important;
    gap:8px !important;
    width:100%;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 0 14px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
  }
  .home-filmstrip-track .home-item{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    max-width:none !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
  .home-filmstrip-track .home-item img{
    width:auto !important;
    height:154px !important;
    max-width:none !important;
    max-height:154px !important;
    object-fit:contain !important;
  }
  .home-filmstrip-track .home-caption{
    margin-top:4px !important;
    font-size:6.5px !important;
    line-height:1.15 !important;
  }
}


/* V35 — HOME LAYOUT FIX + RESPONSIVE MOBILE SHOWCASE
   Desktop HOME obeys the selected layout. Mobile HOME uses a separate compact swipe layout. */
@media (min-width:641px){
  .home-mobile-showcase{display:none!important}
  .home-page:not(.home-layout-freeCanvas){padding:0 var(--content-pad)!important;overflow:visible!important;min-height:100vh!important}
  .home-page:not(.home-layout-freeCanvas) .home-feed{padding-top:30px;padding-bottom:60px}
  .home-page:not(.home-layout-freeCanvas) .home-feed.curated{display:flex!important;flex-direction:column!important;gap:var(--home-gap,34px)!important;min-height:var(--home-min-height,760px)}
  .home-page:not(.home-layout-freeCanvas) .home-feed.curated .home-item{width:var(--item-width,100%)!important}
  .home-page:not(.home-layout-freeCanvas) .home-feed.grid2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--home-gap,34px)!important;align-items:start!important}
  .home-page:not(.home-layout-freeCanvas) .home-feed.grid3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:var(--home-gap,34px)!important;align-items:start!important}
  .home-page:not(.home-layout-freeCanvas) .home-feed.grid2 .home-item,
  .home-page:not(.home-layout-freeCanvas) .home-feed.grid3 .home-item{position:relative!important;inset:auto!important;width:auto!important;margin:0!important;z-index:auto!important}
  .home-filmstrip-track{gap:var(--home-filmstrip-gap,14px)!important}
  .home-filmstrip-track .home-item img{height:var(--home-filmstrip-height,260px)!important;max-height:var(--home-filmstrip-height,260px)!important}
}

.mobile-menu-toggle{display:none}
.home-mobile-showcase{display:none}

@media (max-width:640px){
  :root{--mobile-header-h:64px}
  html,body{overflow-x:hidden}
  .sidebar{
    position:fixed!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;
    width:100%!important;height:var(--mobile-header-h)!important;min-height:0!important;
    border-right:0!important;border-bottom:1px solid var(--line)!important;background:var(--paper)!important;
    overflow:visible!important;z-index:60!important;
  }
  .sidebar-inner{
    height:var(--mobile-header-h)!important;min-height:0!important;padding:0 18px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px;
  }
  .brand{
    display:flex!important;flex-direction:row!important;align-items:baseline!important;gap:8px!important;
    margin:0!important;font-size:17px!important;line-height:1!important;white-space:nowrap;
  }
  .brand-ko{font-size:12px!important;line-height:1!important}
  .mobile-menu-toggle{
    display:block!important;appearance:none;border:0;background:transparent;color:var(--ink);padding:4px 0;
    font:500 12px/1.1 Arial,sans-serif;letter-spacing:.04em;cursor:pointer;
  }
  .menu{
    display:none!important;position:fixed!important;left:0!important;right:0!important;top:var(--mobile-header-h)!important;bottom:0!important;
    padding:26px 18px 38px!important;background:var(--paper)!important;border-top:1px solid var(--line);z-index:59!important;
    overflow-y:auto!important;flex-direction:column!important;gap:0!important;
  }
  body.mobile-menu-open{overflow:hidden!important}
  body.mobile-menu-open .menu{display:flex!important}
  body.mobile-menu-open .menu-block{margin:0 0 28px!important}
  body.mobile-menu-open .menu-block-spaced{margin:0 0 28px!important}
  body.mobile-menu-open .menu-block.compact{margin:0 0 18px!important}
  body.mobile-menu-open .menu-title{font-size:20px!important;line-height:1.15!important;font-weight:400!important}
  body.mobile-menu-open .submenu{display:flex!important;gap:7px!important;margin-top:11px!important}
  body.mobile-menu-open .submenu button{font-size:12px!important;line-height:1.3!important}
  .sidebar-footer{display:none!important}
  .main{margin-left:0!important;padding-top:var(--mobile-header-h)!important}
  .page{min-height:calc(100svh - var(--mobile-header-h))!important;padding-left:18px!important;padding-right:18px!important}

  /* HOME mobile is independent from desktop layout. */
  .home-page{padding:0!important;overflow:visible!important;min-height:auto!important}
  .home-desktop-only{display:none!important}
  .home-mobile-showcase{display:block!important;padding:22px 0 30px!important;min-height:0!important}
  .home-mobile-intro{padding:0 18px 18px}
  .home-mobile-intro>span{display:block;color:var(--muted);font-size:9px;letter-spacing:.18em;margin-bottom:9px}
  .home-mobile-intro h1{margin:0;font-size:27px;line-height:1.05;font-weight:400;letter-spacing:-.03em}
  .home-mobile-track{
    display:flex!important;align-items:flex-start!important;gap:12px!important;width:100%!important;
    overflow-x:auto!important;overflow-y:hidden!important;padding:0 18px 12px!important;margin:0!important;
    scroll-snap-type:x mandatory!important;scroll-padding-left:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .home-mobile-track::-webkit-scrollbar{display:none}
  .home-mobile-track .home-item{
    position:relative!important;inset:auto!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    width:var(--home-filmstrip-mobile-width,78vw)!important;max-width:var(--home-filmstrip-mobile-width,78vw)!important;
    min-width:var(--home-filmstrip-mobile-width,78vw)!important;flex:0 0 var(--home-filmstrip-mobile-width,78vw)!important;
    margin:0!important;z-index:auto!important;scroll-snap-align:start!important;
  }
  .home-mobile-track .home-image-link{display:block!important;width:100%!important}
  .home-mobile-track .home-item img{
    display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;
    object-fit:contain!important;object-position:center!important;
  }
  .home-mobile-track .home-caption{
    display:grid!important;grid-template-columns:1fr!important;gap:2px!important;margin:7px 0 0!important;
    padding:0!important;color:var(--muted)!important;font-size:9px!important;line-height:1.28!important;opacity:.82!important;
  }
  .home-mobile-track .home-caption span{display:block!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .home-mobile-strip-meta{display:flex;align-items:center;justify-content:space-between;padding:4px 18px 22px;color:var(--muted);font-size:8px;letter-spacing:.14em}
  .home-mobile-dots{display:flex;gap:7px;align-items:center}
  .home-mobile-dot{width:5px;height:5px;border-radius:50%;background:var(--line);display:block;transition:background .18s ease}
  .home-mobile-dot.active{background:var(--ink)}
  .home-mobile-nav{
    margin:0 18px;padding:18px 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:1.45fr 1.45fr .55fr .55fr .8fr;gap:10px;align-items:start;
  }
  .home-mobile-nav>button,.home-mobile-nav-block>button{appearance:none;border:0;background:transparent;color:var(--ink);padding:0;text-align:left;font:500 10px/1.25 Arial,sans-serif;letter-spacing:.08em}
  .home-mobile-nav-block>div{display:flex;flex-direction:column;gap:4px;margin-top:9px}
  .home-mobile-nav-block>div button{appearance:none;border:0;background:transparent;color:var(--muted);padding:0;text-align:left;font:9px/1.2 Arial,sans-serif}
  .home-mobile-footer{padding:16px 18px 0;color:var(--muted);font-size:9px}

  /* Normal pages use the full phone width below the compact top header. */
  .page-header h1{font-size:11px!important}.page-header p{font-size:9px!important}
  .project-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 10px!important}
  .commercial-canvas,.commercial-canvas.grid3,.commercial-canvas.freeCanvas{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .project-overlay{z-index:80!important}
}


/* V36 — MOBILE HEADER CONTROLS + CENTERED HOME CARDS + CONTACT CLEANUP */
.mobile-header-controls,.mobile-close-action{display:none}
@media (max-width:640px){
  :root{--mobile-header-h:118px}
  .sidebar{height:var(--mobile-header-h)!important}
  .sidebar-inner{
    height:var(--mobile-header-h)!important;
    padding:0 18px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:62px 56px!important;
    align-items:center!important;
    gap:0!important;
  }
  .brand{
    grid-row:1!important;
    justify-self:center!important;
    align-self:end!important;
    margin:0 0 15px!important;
  }
  .mobile-header-controls{
    grid-row:2!important;
    display:flex!important;
    width:100%!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  .mobile-menu-toggle,.mobile-close-action{
    display:block!important;
    appearance:none!important;
    border:0!important;
    background:transparent!important;
    color:var(--ink)!important;
    padding:0!important;
    font:500 12px/1.1 Arial,sans-serif!important;
    letter-spacing:.04em!important;
    cursor:pointer!important;
  }
  .mobile-menu-toggle{text-align:left!important}
  .mobile-close-action{text-align:right!important}
  .menu{top:var(--mobile-header-h)!important}
  .main{padding-top:var(--mobile-header-h)!important}
  .page{min-height:calc(100svh - var(--mobile-header-h))!important}

  /* Mixed portrait/landscape HOME cards are vertically centered against each other. */
  .home-mobile-track{align-items:center!important}

  /* CONTACT: remove only the lone header divider marked in the mobile screenshot. */
  [data-page-section="contact"] .page-header{border-bottom:0!important}
}

/* V38 — deployed HOME filmstrip: mouse wheel + drag navigation */
@media (min-width:641px){
  .home-filmstrip-track{cursor:grab}
  .home-filmstrip-track.is-dragging{cursor:grabbing;user-select:none}
  .home-filmstrip-track.is-dragging img{pointer-events:none}
}

/* V39 — robust desktop filmstrip wheel / trackpad / mouse-drag input */
@media (min-width:641px){
  .home-filmstrip-track{cursor:grab;scroll-behavior:auto!important;user-select:none;-webkit-user-select:none}
  .home-filmstrip-track img{-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none}
  .home-filmstrip-track.is-dragging{cursor:grabbing!important}
  .home-filmstrip-track.is-dragging *{pointer-events:none}
}
/* CONTACT desktop cleanup — remove the divider beneath CONTACT header */
[data-page-section="contact"] .page-header{border-bottom:0!important}