/* ============================================================
   CONCEPT: STUDIO — an independent studio signature.
   Oversized grotesk type, warm white with deep cobalt,
   a portrait cropped into the headline, staggered curation.
   Expressive, but everything is placed on purpose.
   ============================================================ */
html[data-concept="studio"]{
  --cx-bg:#f7f3ec; --cx-surface:#fffdf8; --cx-ink:#191713; --cx-mute:#6f6a5e;
  --cx-rule:#e0d9cb; --cx-accent:#2438d8; --cx-accent-ink:#f7f3ec; --cx-accent-soft:#dfe3fb;
  --cx-head:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --cx-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cx-mono:"JetBrains Mono",SFMono-Regular,Consolas,monospace;
}
html[data-concept="studio"][data-mode="dark"]{
  --cx-bg:#121317; --cx-surface:#191b20; --cx-ink:#f1eee6; --cx-mute:#a39d90;
  --cx-rule:#2b2d33; --cx-accent:#8fa2ff; --cx-accent-ink:#101223; --cx-accent-soft:#232946;
}
@media (prefers-color-scheme:dark){
  html[data-concept="studio"][data-mode="auto"]{
    --cx-bg:#121317; --cx-surface:#191b20; --cx-ink:#f1eee6; --cx-mute:#a39d90;
    --cx-rule:#2b2d33; --cx-accent:#8fa2ff; --cx-accent-ink:#101223; --cx-accent-soft:#232946;
  }
}
html[data-concept="studio"] body{ background:var(--cx-bg); color:var(--cx-ink); font-family:var(--cx-body); }
html[data-concept="studio"] .wrap{ max-width:1280px; }
html[data-concept="studio"] ::selection{ background:var(--cx-accent); color:var(--cx-accent-ink); }
html[data-concept="studio"] a:focus-visible,
html[data-concept="studio"] button:focus-visible{ outline:2px solid var(--cx-accent); outline-offset:3px; }

/* ---- navigation: low, personal, offset brand ---- */
html[data-concept="studio"] header.top{ background:transparent; border-bottom:0; }
html[data-concept="studio"] .bar{ height:72px; border-bottom:1px solid var(--cx-ink); }
html[data-concept="studio"] .brand{ font-family:var(--cx-head); font-weight:700; font-size:20px; letter-spacing:-.02em; }
html[data-concept="studio"] nav{ gap:30px; }
html[data-concept="studio"] nav a{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--cx-ink); }
html[data-concept="studio"] nav a:hover{ color:var(--cx-accent); }
html[data-concept="studio"] nav a[aria-current]{ border-bottom:3px solid var(--cx-accent); }

/* ---- type ---- */
html[data-concept="studio"] h1, html[data-concept="studio"] h2, html[data-concept="studio"] h3{ font-family:var(--cx-head); }
html[data-concept="studio"] .eyebrow{
  font-family:var(--cx-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cx-accent);
}
html[data-concept="studio"] .head h2{ font-size:clamp(30px,3.6vw,46px); font-weight:700; letter-spacing:-.025em; line-height:1.02; }
html[data-concept="studio"] section.block{ border-top:1px solid var(--cx-rule); padding:72px 0 64px; }
html[data-concept="studio"] #projects{ border-top:0; }
html[data-concept="studio"] .btn{ border-radius:999px; border-color:var(--cx-ink); font-weight:600; }
html[data-concept="studio"] .btn.primary{ background:var(--cx-accent); border-color:var(--cx-accent); color:var(--cx-accent-ink); }
html[data-concept="studio"] .btn:hover{ background:var(--cx-ink); border-color:var(--cx-ink); color:var(--cx-bg); }
html[data-concept="studio"] .tags li{ border-radius:999px; background:var(--cx-accent-soft); color:var(--cx-ink); font-size:11.5px; font-weight:500; }

/* ---- hero: oversized name, cobalt block, cropped overlapping portrait ---- */
html[data-concept="studio"] .cx-hero-studio{ position:relative; padding-top:clamp(36px,6vh,64px); padding-bottom:clamp(44px,7vh,80px); }
html[data-concept="studio"] .cx-st-block{
  position:absolute; top:clamp(120px,22vh,210px); right:0; width:min(430px,38%); height:300px;
  background:var(--cx-accent); z-index:0;
}
html[data-concept="studio"] .cx-st-eyebrow{ position:relative; z-index:2; }
html[data-concept="studio"] .cx-st-name{
  position:relative; z-index:2; font-size:clamp(64px,9.2vw,132px); font-weight:800;
  letter-spacing:-.035em; line-height:.92; margin:16px 0 8px; text-transform:none;
}
html[data-concept="studio"] .cx-st-line{ display:block; }
html[data-concept="studio"] .cx-st-line:last-child{ margin-left:clamp(30px,10vw,160px); }
html[data-concept="studio"] .cx-st-mono{ width:.62em; height:.62em; color:var(--cx-accent); margin-left:.18em; vertical-align:baseline; }
html[data-concept="studio"] .cx-st-row{
  position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr);
  gap:clamp(28px,4vw,60px); align-items:start; margin-top:clamp(20px,4vh,44px);
}
html[data-concept="studio"] .cx-lead{ font-size:clamp(17px,1.5vw,20px); line-height:1.62; color:var(--cx-ink); max-width:32em; }
html[data-concept="studio"] .cx-st-meta{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px 30px; margin-top:34px;
  padding-top:18px; border-top:1px solid var(--cx-ink);
  font-family:var(--cx-mono); font-size:12px; color:var(--cx-mute);
}
html[data-concept="studio"] .cx-st-photo{
  margin:0; margin-top:-96px; justify-self:end; width:min(330px,100%);
  border:1px solid var(--cx-ink); background:var(--cx-surface);
}
html[data-concept="studio"] .cx-st-photo img{
  display:block; width:100%; height:400px; object-fit:cover; object-position:56% 28%;
}

/* ---- projects: one showcase, then a staggered pair of columns ---- */
html[data-concept="studio"] .cx-st-show{
  display:block; text-decoration:none; color:var(--cx-ink); margin-bottom:26px;
  border:1px solid var(--cx-ink); background:var(--cx-surface);
  transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s;
}
html[data-concept="studio"] .cx-st-show:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--cx-accent); }
html[data-concept="studio"] .cx-st-show-cover{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:3px;
  min-height:320px; padding:28px 32px; color:#f2f1ec; background:var(--c1,#1a1c20);
}
html[data-concept="studio"] .cx-st-show-cover b{ font-family:var(--cx-head); font-size:clamp(34px,4.4vw,58px); font-weight:700; letter-spacing:-.025em; line-height:1; }
html[data-concept="studio"] .cx-st-show-cover small{ color:rgba(242,241,237,.7); font-size:14px; }
html[data-concept="studio"] .cx-st-show-body{ display:flex; align-items:baseline; gap:28px; padding:22px 32px 26px; flex-wrap:wrap; }
html[data-concept="studio"] .cx-st-show-desc{ font-size:16.5px; line-height:1.6; color:var(--cx-mute); max-width:56ch; }
html[data-concept="studio"] .cx-st-cols{ columns:2; column-gap:26px; }
html[data-concept="studio"] .cx-st-item{
  display:block; break-inside:avoid; text-decoration:none; color:var(--cx-ink);
  border:1px solid var(--cx-rule); background:var(--cx-surface); margin-bottom:26px;
  transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s, border-color .3s;
}
html[data-concept="studio"] .cx-st-cols .cx-st-item:nth-child(even){ transform:translateY(34px); margin-bottom:60px; }
html[data-concept="studio"] .cx-st-item:hover{ border-color:var(--cx-ink); box-shadow:5px 5px 0 var(--cx-accent-soft); }
html[data-concept="studio"] .cx-st-cover{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:180px; padding:20px 22px; color:#f2f1ec; background:var(--c1,#1a1c20);
}
html[data-concept="studio"] .cx-st-cover b{ font-family:var(--cx-head); font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.08; }
html[data-concept="studio"] .cx-st-body{ display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; }
html[data-concept="studio"] .cx-st-ititle{ font-family:var(--cx-head); font-size:20px; font-weight:700; letter-spacing:-.015em; }
html[data-concept="studio"] .cx-st-idesc{ color:var(--cx-mute); font-size:14.5px; line-height:1.6; }

/* ---- research / skills / gallery under this concept ---- */
html[data-concept="studio"] .research-title{ font-family:var(--cx-head); font-weight:600; letter-spacing:-.015em; }
html[data-concept="studio"] .research-link{ color:var(--cx-accent); font-weight:600; }
html[data-concept="studio"] .skills h3{ font-size:18px; font-weight:700; }
html[data-concept="studio"] .info h3{ font-family:var(--cx-head); font-size:19px; font-weight:700; }
html[data-concept="studio"] #gallery .gal-tags{ font-family:var(--cx-mono); font-size:12px; color:var(--cx-accent); }
html[data-concept="studio"] footer .foot{ border-top:1px solid var(--cx-ink); }

/* ---- internal pages ---- */
html[data-concept="studio"] .article-head h1{ font-size:clamp(38px,5vw,64px); font-weight:700; letter-spacing:-.03em; line-height:.98; }
html[data-concept="studio"] main .section h1{ font-size:clamp(36px,4.6vw,58px); font-weight:700; letter-spacing:-.03em; line-height:1; }
html[data-concept="studio"] .content{ font-size:17px; line-height:1.7; }
html[data-concept="studio"] .breadcrumbs{ font-family:var(--cx-mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--cx-accent); }

/* ---- responsive ---- */
@media (max-width:1020px){
  html[data-concept="studio"] .cx-st-block{ width:44%; height:240px; top:150px; }
  html[data-concept="studio"] .cx-st-photo{ margin-top:-40px; width:min(280px,90%); }
  html[data-concept="studio"] .cx-st-photo img{ height:320px; }
  html[data-concept="studio"] .cx-st-cols{ columns:1; }
  html[data-concept="studio"] .cx-st-cols .cx-st-item:nth-child(even){ transform:none; margin-bottom:26px; }
}
@media (max-width:640px){
  html[data-concept="studio"] section.block{ padding:48px 0 44px; }
  html[data-concept="studio"] .cx-st-name{ font-size:clamp(52px,15.5vw,76px); }
  html[data-concept="studio"] .cx-st-line:last-child{ margin-left:14px; }
  html[data-concept="studio"] .cx-st-block{ display:none; }
  html[data-concept="studio"] .cx-st-row{ grid-template-columns:minmax(0,1fr); }
  html[data-concept="studio"] .cx-st-photo{ margin-top:0; justify-self:start; width:min(300px,100%); }
  html[data-concept="studio"] .cx-st-photo img{ height:300px; }
  html[data-concept="studio"] .cx-st-show-cover{ min-height:230px; padding:22px; }
  html[data-concept="studio"] .cx-st-show-body{ padding:18px 22px 20px; }
}
@media (prefers-reduced-motion: reduce){
  html[data-concept="studio"] .cx-st-show, html[data-concept="studio"] .cx-st-item{ transition:none; }
  html[data-concept="studio"] .cx-st-show:hover{ transform:none; }
}

/* ---- studio, part 2: blog, pages, gallery, shared furniture ---- */
html[data-concept="studio"] .section{ padding-top:52px; padding-bottom:56px; }
html[data-concept="studio"] .section h1{ font-family:var(--cx-head); }
html[data-concept="studio"] .filter{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 10px; }
html[data-concept="studio"] .filter a{
  font-size:12px; font-weight:600; letter-spacing:.05em; padding:8px 16px; border-radius:999px;
  border:1px solid var(--cx-ink); color:var(--cx-ink); background:transparent;
}
html[data-concept="studio"] .filter a:hover{ border-color:var(--cx-accent); color:var(--cx-accent); }
html[data-concept="studio"] .filter a.active{ background:var(--cx-accent); border-color:var(--cx-accent); color:var(--cx-accent-ink); }
html[data-concept="studio"] .search input{
  border:1px solid var(--cx-ink); border-radius:999px; background:var(--cx-surface); color:var(--cx-ink);
  padding:11px 18px; font-family:var(--cx-body);
}
html[data-concept="studio"] .search input:focus{ outline:2px solid var(--cx-accent); outline-offset:2px; }
html[data-concept="studio"] .grid{ gap:24px; }
html[data-concept="studio"] .article{
  background:var(--cx-surface); border:1px solid var(--cx-rule); border-radius:14px; padding:24px;
  transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s, border-color .3s;
}
html[data-concept="studio"] .article:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--cx-accent-soft); border-color:var(--cx-ink); }
html[data-concept="studio"] .article h3{ font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.12; }
html[data-concept="studio"] .article h3 a:hover{ color:var(--cx-accent); }
html[data-concept="studio"] .article-meta{ font-family:var(--cx-mono); font-size:11.5px; color:var(--cx-accent); letter-spacing:.05em; }
html[data-concept="studio"] .article-body{ color:var(--cx-mute); font-size:15px; line-height:1.62; }
html[data-concept="studio"] .pager{ font-weight:600; font-size:14.5px; }
html[data-concept="studio"] .pager a{ border:1px solid var(--cx-ink); border-radius:999px; padding:8px 16px; }
html[data-concept="studio"] .pager a:hover{ background:var(--cx-accent); border-color:var(--cx-accent); color:var(--cx-accent-ink); }
html[data-concept="studio"] .featured{ border:1px solid var(--cx-ink); border-radius:14px; overflow:hidden; }
html[data-concept="studio"] .related .item{ border-top:1px solid var(--cx-rule); padding-top:16px; }
html[data-concept="studio"] .related h3{ font-size:21px; font-weight:700; }
html[data-concept="studio"] .share a{
  font-size:12px; font-weight:600; border:1px solid var(--cx-ink); border-radius:999px; padding:7px 14px;
}
html[data-concept="studio"] .share a:hover{ background:var(--cx-ink); color:var(--cx-bg); }
html[data-concept="studio"] .content a{ color:var(--cx-accent); }
html[data-concept="studio"] .content blockquote{
  font-family:var(--cx-head); font-size:21px; font-weight:600; line-height:1.4; letter-spacing:-.015em;
  border-left:4px solid var(--cx-accent); padding-left:20px; color:var(--cx-ink);
}
html[data-concept="studio"] .content code{ font-family:var(--cx-mono); font-size:.87em; background:var(--cx-accent-soft); padding:1px 6px; border-radius:5px; }
html[data-concept="studio"] .content pre{ background:var(--cx-ink); color:var(--cx-bg); padding:18px 20px; overflow-x:auto; border-radius:10px; }
html[data-concept="studio"] .content pre code{ background:transparent; color:inherit; }
html[data-concept="studio"] .content table{ border-collapse:collapse; width:100%; font-size:14.5px; }
html[data-concept="studio"] .content th, html[data-concept="studio"] .content td{ border-bottom:1px solid var(--cx-rule); padding:9px 12px; text-align:left; }
html[data-concept="studio"] .content th{ font-family:var(--cx-head); font-weight:700; border-bottom:2px solid var(--cx-ink); }
html[data-concept="studio"] .block-quote{ font-family:var(--cx-head); font-weight:600; border-left:4px solid var(--cx-accent); }
html[data-concept="studio"] .block-btn{ border-radius:999px; border-color:var(--cx-ink); font-weight:600; }
html[data-concept="studio"] .block-btn:hover{ background:var(--cx-accent); border-color:var(--cx-accent); color:var(--cx-accent-ink); }
/* gallery: the personal strip, treated warmly */
html[data-concept="studio"] .gal{ gap:14px; }
html[data-concept="studio"] .g{ border-radius:10px; }
html[data-concept="studio"] .lb{ background:rgba(18,19,23,.95); }
html[data-concept="studio"] .gal-all{ font-weight:700; font-family:var(--cx-head); font-size:15px; }
html[data-concept="studio"] .gal-all:hover{ color:var(--cx-accent); }
/* custom sections + layout variants under this concept */
html[data-concept="studio"] .custom-sec .custom-body{ font-size:17px; max-width:62ch; }
html[data-concept="studio"] .secwrap.sec-boxed .wrap{ border-radius:16px; }
html[data-concept="studio"] .secwrap.sec-band{ background:var(--cx-accent-soft); }
/* page templates (page.php body classes) tuned to the concept */
html[data-concept="studio"] body.template-wide .wrap{ max-width:1360px; }
html[data-concept="studio"] body.template-minimal .content{ max-width:700px; }
html[data-concept="studio"] body.template-editorial .content{ max-width:800px; font-size:17.5px; }
html[data-concept="studio"] body.template-magazine .section h1{ font-size:clamp(44px,5.8vw,72px); line-height:.98; }
html[data-concept="studio"] body.template-resume .content{ max-width:840px; }
html[data-concept="studio"] body.template-landing .section{ padding-top:72px; }
/* anchor + scroll behaviour */
html[data-concept="studio"] section.block{ scroll-margin-top:92px; }
html[data-concept="studio"] .empty{ color:var(--cx-mute); border:1px dashed var(--cx-rule); border-radius:12px; padding:22px; background:var(--cx-surface); }
@media (max-width:1020px){
  html[data-concept="studio"] .section{ padding-top:40px; }
}
@media (max-width:640px){
  html[data-concept="studio"] .article{ padding:20px; }
  html[data-concept="studio"] .article:hover{ transform:none; box-shadow:none; }
  html[data-concept="studio"] .content blockquote{ font-size:18.5px; }
}
@media (prefers-reduced-motion: reduce){
  html[data-concept="studio"] .article{ transition:none; }
  html[data-concept="studio"] .article:hover{ transform:none; }
}