:root{
  --paper:#fff;
  --off:#f5f5f2;
  --ink:#111;
  --muted:#757575;
  --pad:clamp(22px,3.3vw,58px);
  --header-h:138px;
  --gap:clamp(16px,1.65vw,28px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}

.site-header{
  height:var(--header-h);
  padding:0 var(--pad);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:30;
}
.brand{
  font-size:clamp(28px,2.55vw,45px);
  font-weight:400;
  letter-spacing:-.045em;
}
.nav{
  display:flex;
  gap:30px;
  font-size:11px;
  letter-spacing:.115em;
  text-transform:uppercase;
}

.hero{
  height:calc(100svh - var(--header-h));
  min-height:560px;
  position:relative;
  overflow:hidden;
  background:#111;
}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.05s ease;
}
.hero-slide img{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.hero-slide.is-active{opacity:1}

.work{
  padding:100px var(--pad) 130px;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:35px;
}
.section-head h1{
  margin:0;
  font-size:14px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.section-note{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.project-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:58px;
}
.project-card{
  display:block;
}
.project-frame{
  aspect-ratio:4/5;
  overflow:hidden;
  background:#e8e8e5;
}
.project-frame img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:
    transform .38s cubic-bezier(.2,.72,.2,1),
    filter .38s ease;
}
.project-card:hover .project-frame img{
  transform:scale(1.04);
  filter:brightness(1.10);
}
.project-title{
  margin-top:11px;
  font-size:12px;
  letter-spacing:.02em;
}

.project-page{
  background:#fff;
}
.project-top{
  padding:38px var(--pad) 32px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
.project-top h1{
  margin:0;
  font-size:clamp(28px,3.1vw,50px);
  font-weight:400;
  letter-spacing:-.04em;
}
.back{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.project-overview{
  padding:56px var(--pad) 110px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
}
.thumb{
  border:0;
  padding:0;
  margin:0;
  background:none;
  cursor:pointer;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#e9e9e6;
}
.thumb img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:
    transform .35s cubic-bezier(.2,.72,.2,1),
    filter .35s ease;
}
.thumb:hover img{
  transform:scale(1.04);
  filter:brightness(1.10);
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(245,245,242,.985);
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.open{display:flex}
.lightbox-stage{
  width:min(84vw,1580px);
  height:84vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-stage img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 14px 48px rgba(0,0,0,.075);
}
.lb-nav{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:100px;
  border:0;
  padding:0;
  background:transparent;
  color:#111;
  font-size:42px;
  font-weight:200;
  cursor:pointer;
  opacity:.56;
  transition:opacity .2s;
}
.lb-nav:hover{opacity:1}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-close{
  position:fixed;
  top:20px;
  right:25px;
  border:0;
  background:transparent;
  color:#111;
  font-size:31px;
  font-weight:200;
  cursor:pointer;
}
.lb-count{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:.1em;
  color:#666;
}
footer{
  padding:28px var(--pad) 48px;
  font-size:10px;
  color:#777;
  letter-spacing:.06em;
}

@media(max-width:1020px){
  :root{--header-h:110px}
  .project-grid,.project-overview{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  :root{--header-h:92px}
  .brand{font-size:22px}
  .nav{gap:14px;font-size:9px}
  .hero{min-height:470px}
  .work{padding-top:70px}
  .project-grid{grid-template-columns:1fr;row-gap:44px}
  .project-overview{grid-template-columns:repeat(2,1fr);padding-top:30px}
  .project-top{align-items:flex-start;flex-direction:column;gap:20px}
  .lb-nav{width:42px;font-size:30px}
  .lb-prev{left:1px}.lb-next{right:1px}
  .lightbox-stage{width:88vw;height:80vh}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .hero-slide,.project-frame img,.thumb img{transition:none!important}
}


/* ===== V05: persistent identity + journal/about ===== */

@font-face{
  font-family:"Clan Pro Local";
  src:
    local("Clan Pro"),
    local("ClanPro"),
    local("Clan Pro Book"),
    local("ClanPro-Book");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --identity-font:"Clan Pro Local","Helvetica Neue",Helvetica,Arial,sans-serif;
  --header-v05-h:146px;
}

body{
  font-family:var(--identity-font);
}

.site-header{
  min-height:var(--header-v05-h);
  height:auto;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.identity{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.brand{
  font-family:var(--identity-font);
  font-size:clamp(31px,3vw,52px);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.055em;
  text-transform:lowercase;
}

.tagline{
  font-size:10px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#6d6d6d;
}

.nav{
  display:none;
}

.menu-button{
  border:0;
  background:none;
  width:46px;
  height:42px;
  padding:8px 5px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  position:relative;
  z-index:102;
}

.menu-button span{
  width:30px;
  height:1.5px;
  background:#111;
  display:block;
  transition:transform .3s ease,opacity .3s ease;
  transform-origin:center;
}

.menu-button.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-button.open span:nth-child(2){opacity:0}
.menu-button.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.menu-panel{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.985);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}

.menu-panel.open{
  opacity:1;
  visibility:visible;
}

.menu-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.menu-links a{
  font-size:clamp(29px,5vw,68px);
  line-height:1;
  letter-spacing:-.045em;
  text-transform:lowercase;
  transition:opacity .2s ease;
}
.menu-links a:hover{opacity:.45}

.hero{
  height:calc(100svh - var(--header-v05-h));
}

.editorial-page{
  background:#fff;
}

.editorial-hero{
  padding:100px var(--pad) 70px;
  border-bottom:1px solid #e9e9e6;
}

.editorial-kicker{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:#777;
  margin-bottom:20px;
}

.editorial-title{
  font-size:clamp(46px,8vw,130px);
  line-height:.88;
  font-weight:400;
  letter-spacing:-.065em;
  margin:0;
  max-width:1200px;
}

.editorial-intro{
  max-width:760px;
  margin-top:34px;
  font-size:clamp(16px,1.35vw,21px);
  line-height:1.55;
  color:#363636;
}

.about-grid{
  padding:82px var(--pad) 120px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,520px);
  gap:clamp(50px,8vw,150px);
  align-items:start;
}

.about-copy{
  max-width:830px;
}

.about-copy h2{
  font-size:clamp(27px,3.3vw,50px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.045em;
  margin:0 0 34px;
}

.about-copy p{
  margin:0 0 24px;
  font-size:clamp(16px,1.3vw,20px);
  line-height:1.68;
  color:#2e2e2e;
}

.about-copy .lead{
  font-size:clamp(22px,2vw,31px);
  line-height:1.42;
  letter-spacing:-.025em;
  color:#111;
}

.about-aside{
  position:sticky;
  top:calc(var(--header-v05-h) + 28px);
  font-size:11px;
  line-height:1.7;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6b6b6b;
  border-top:1px solid #cfcfca;
  padding-top:16px;
}

.journal-list{
  padding:70px var(--pad) 120px;
}

.journal-entry{
  display:grid;
  grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);
  gap:clamp(34px,6vw,100px);
  padding:58px 0;
  border-top:1px solid #dcdcd8;
  align-items:start;
}

.journal-entry:first-child{
  border-top:0;
  padding-top:0;
}

.journal-image{
  overflow:hidden;
  background:#eee;
}

.journal-image img{
  width:100%;
  height:auto;
  display:block;
}

.journal-meta{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#747474;
  margin-bottom:18px;
}

.journal-copy h2{
  font-size:clamp(31px,4vw,62px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.055em;
  margin:0 0 26px;
}

.journal-copy p{
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.65;
  margin:0 0 20px;
  max-width:700px;
}

.read-more{
  display:inline-block;
  margin-top:10px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  border-bottom:1px solid #111;
  padding-bottom:3px;
}

@media(max-width:820px){
  :root{--header-v05-h:108px}
  .brand{font-size:28px}
  .tagline{font-size:8px}
  .site-header{padding-top:20px;padding-bottom:20px}
  .hero{height:calc(100svh - var(--header-v05-h))}
  .about-grid,
  .journal-entry{grid-template-columns:1fr}
  .about-aside{position:relative;top:auto}
  .editorial-hero{padding-top:70px}
}


/* ===== V06 refinements ===== */

.identity{
  width:clamp(190px,20vw,340px);
  display:block;
}

.brand{
  display:block;
  width:100%;
  white-space:nowrap;
  font-size:clamp(30px,3vw,52px);
}

.tagline{
  width:100%;
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:clamp(10px,.92vw,14px);
  line-height:1;
  letter-spacing:.02em;
  text-transform:lowercase;
  color:#555;
}
.tagline .tag-word{display:block}

/* Work titles stronger and larger */
.project-title{
  margin-top:13px;
  font-size:clamp(14px,1.05vw,17px);
  line-height:1.2;
  font-weight:600;
  letter-spacing:.005em;
}

/* Legal page */
.legal-page{
  background:#fff;
}
.legal-wrap{
  max-width:1120px;
  margin:0 auto;
  padding:90px var(--pad) 130px;
}
.legal-kicker{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#777;
  margin-bottom:18px;
}
.legal-wrap > h1{
  font-size:clamp(48px,8vw,116px);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.065em;
  margin:0 0 72px;
}
.legal-section{
  display:grid;
  grid-template-columns:minmax(160px,260px) minmax(0,720px);
  gap:clamp(28px,5vw,90px);
  padding:42px 0;
  border-top:1px solid #deded9;
}
.legal-section h2{
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  margin:0;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.legal-copy h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:600;
}
.legal-copy p,
.legal-copy li{
  font-size:15px;
  line-height:1.68;
  color:#2d2d2d;
}
.legal-copy p{margin:0 0 18px}
.legal-copy ul{padding-left:20px;margin:0 0 18px}
.legal-copy a{text-decoration:underline;text-underline-offset:3px}
.legal-note{
  padding:18px 20px;
  background:#f3f3ef;
  font-size:13px;
  line-height:1.55;
  margin:22px 0;
}

/* Cookie/privacy notice */
.privacy-banner{
  position:fixed;
  inset:auto 18px 18px 18px;
  z-index:3000;
  background:#111;
  color:#fff;
  padding:22px 24px;
  display:none;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end;
  box-shadow:0 16px 48px rgba(0,0,0,.22);
}
.privacy-banner.visible{display:grid}
.privacy-title{
  font-size:15px;
  font-weight:600;
  margin:0 0 7px;
}
.privacy-text{
  max-width:850px;
  font-size:12px;
  line-height:1.55;
  color:#d1d1d1;
  margin:0;
}
.privacy-text a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.privacy-actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.privacy-btn{
  border:1px solid #fff;
  background:#fff;
  color:#111;
  padding:11px 15px;
  cursor:pointer;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.privacy-btn.secondary{
  background:transparent;
  color:#fff;
  border-color:#666;
}

.privacy-settings-btn{
  border:0;
  padding:0;
  background:none;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  font:inherit;
}

@media(max-width:760px){
  .privacy-banner{
    grid-template-columns:1fr;
    align-items:start;
  }
  .privacy-actions{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .legal-section{
    grid-template-columns:1fr;
    gap:18px;
  }
}


/* ===== V08 corrections ===== */

/* Header: name determines the actual width. JS matches tagline to it exactly. */
.identity{
  display:inline-block;
  width:auto;
  min-width:0;
}

.brand{
  display:inline-block;
  width:auto;
  white-space:nowrap;
  text-transform:lowercase;
}

.tagline{
  display:block;
  width:auto;
  margin-top:8px;
  white-space:nowrap;
  text-align:left;
  text-transform:lowercase;
  font-size:clamp(11px,.92vw,14px);
  line-height:1;
  font-weight:400;
  letter-spacing:0;
  color:#555;
}

/* V08 uses a single text node, not split words. */
.tagline .tag-word{display:inline}

/* Make project text beneath work covers stronger. */
.project-title{
  margin-top:13px;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.2;
  font-weight:650;
  letter-spacing:0;
}

/* Keep Work on the homepage as in V05/V06. */
#work{
  scroll-margin-top:var(--header-v05-h,146px);
}


/* ===== V09: repaired project pages + hardened click layers ===== */
.menu-panel{pointer-events:none !important}
.menu-panel.open{pointer-events:auto !important}

.project-card{
  position:relative;
  z-index:3;
  cursor:pointer;
  pointer-events:auto;
}
.project-card *{pointer-events:none}

.project-overview{
  position:relative;
  z-index:2;
}
.thumb{
  position:relative;
  z-index:3;
  cursor:pointer;
  pointer-events:auto;
  touch-action:manipulation;
}
.thumb img{pointer-events:none}

.privacy-banner:not(.visible){pointer-events:none}
.privacy-banner.visible{pointer-events:auto}


/* ===== V10 refinements ===== */

/* identity about 10% larger */
.brand{
  font-size:clamp(34px,3.3vw,57px) !important;
}

.tagline{
  font-size:clamp(12px,1.02vw,15.5px) !important;
}

/* slightly stronger floating print effect in large gallery */
.lightbox-stage img{
  box-shadow:
    0 18px 42px rgba(0,0,0,.10),
    0 4px 12px rgba(0,0,0,.055) !important;
}

/* Larger lightbox close symbol */
.lb-close{
  font-size:40px !important;
  top:16px !important;
  right:22px !important;
}

/* Make hamburger / its X state larger and more legible */
.menu-button{
  width:54px !important;
  height:50px !important;
}
.menu-button span{
  width:36px !important;
  height:2px !important;
}
.menu-button.open span:nth-child(1){
  transform:translateY(8px) rotate(45deg) !important;
}
.menu-button.open span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg) !important;
}

/* Kollodium subline */
.project-subline{
  max-width:760px;
  margin:12px 0 0;
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.5;
  color:#666;
  letter-spacing:.005em;
}


/* ===== V11 refinements ===== */

/* More visible floating print effect in the large gallery view */
.lightbox-stage img{
  box-shadow:
    0 28px 70px rgba(0,0,0,.14),
    0 10px 24px rgba(0,0,0,.08),
    0 2px 6px rgba(0,0,0,.045) !important;
}

/* Kollodium editorial text beneath the image overview */
.project-editorial{
  padding:0 var(--pad) 120px;
}
.project-editorial-inner{
  max-width:920px;
  margin:0 auto;
  padding-top:48px;
  border-top:1px solid #dcdcd7;
}
.project-editorial-kicker{
  margin:0 0 18px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#777;
}
.project-editorial h2{
  margin:0 0 26px;
  font-size:clamp(30px,3.7vw,56px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-.045em;
}
.project-editorial p{
  margin:0 0 20px;
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.68;
  color:#303030;
}
.project-editorial .lead{
  font-size:clamp(20px,1.8vw,28px);
  line-height:1.48;
  letter-spacing:-.02em;
  color:#111;
}


/* ===== V12: clearly visible floating-gallery treatment ===== */

.lightbox{
  background:rgba(239,239,235,.985) !important;
}

.lightbox-stage{
  padding:34px !important;
}

.lightbox-stage img{
  box-shadow:
    0 42px 95px rgba(0,0,0,.24),
    0 16px 34px rgba(0,0,0,.15),
    0 5px 12px rgba(0,0,0,.08),
    0 0 0 1px rgba(0,0,0,.035) !important;
}


/* ===== V14 readability adjustments ===== */

/* Gallery previous/next controls: about twice as large */
.lb-nav{
  width:96px !important;
  height:150px !important;
  font-size:78px !important;
  line-height:1 !important;
  opacity:.72 !important;
}
.lb-prev{left:14px !important}
.lb-next{right:14px !important}

/* Project names beneath Work covers: clearly larger */
.project-title{
  margin-top:15px !important;
  font-size:clamp(24px,2vw,32px) !important;
  line-height:1.05 !important;
  font-weight:650 !important;
  letter-spacing:-.02em !important;
}

@media(max-width:640px){
  .lb-nav{
    width:58px !important;
    height:110px !important;
    font-size:52px !important;
  }
  .project-title{
    font-size:24px !important;
  }
}


/* ===== V15 legal/content refinement ===== */
.legal-copy .operator-name{
  font-size:20px;
  font-weight:600;
  margin-bottom:6px;
}
.legal-copy .small{
  font-size:13px;
  color:#666;
}


/* ===== V16: larger gallery images + stronger Journal heading ===== */

/* Gallery stage uses more of the viewport */
.lightbox-stage{
  width:min(92vw,1800px) !important;
  height:91vh !important;
  padding:20px !important;
}

/* Keep full aspect ratio, but allow a noticeably larger display */
.lightbox-stage img{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
}

/* Journal page: make the small "journal" label at least 200% larger */
body.editorial-page .editorial-kicker{
  font-size:22px !important;
  line-height:1.1 !important;
  letter-spacing:.10em !important;
  margin-bottom:24px !important;
}

/* On smaller screens, still noticeably larger */
@media(max-width:640px){
  .lightbox-stage{
    width:94vw !important;
    height:88vh !important;
    padding:12px !important;
  }

  body.editorial-page .editorial-kicker{
    font-size:18px !important;
  }
}


/* ===== V17: three-column image grids ===== */

.project-grid,
.project-overview{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

@media(max-width:1020px){
  .project-grid,
  .project-overview{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:640px){
  .project-grid{
    grid-template-columns:1fr !important;
  }

  .project-overview{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* ===== V21: targeted preview scaling for Tokyo 004 and Porthaus 003 ===== */

/* Work overview */
.project-frame img[src*="tokyo-004-preview"],
.thumb img[src*="tokyo-004-preview"]{
  width:85% !important;
  height:85% !important;
  object-fit:contain !important;
  margin:7.5% auto 0 !important;
  transform:none !important;
}

.project-frame img[src*="porthaus-003-preview"],
.thumb img[src*="porthaus-003-preview"]{
  width:82% !important;
  height:82% !important;
  object-fit:contain !important;
  margin:9% auto 0 !important;
  transform:none !important;
}

/* Keep hover subtle without re-enlarging too much */
.project-card:hover .project-frame img[src*="tokyo-004-preview"],
.thumb:hover img[src*="tokyo-004-preview"]{
  transform:scale(1.015) !important;
  filter:brightness(1.08);
}

.project-card:hover .project-frame img[src*="porthaus-003-preview"],
.thumb:hover img[src*="porthaus-003-preview"]{
  transform:scale(1.015) !important;
  filter:brightness(1.08);
}


/* ===== V29: direct HTML/CSS implementation ===== */

.site-header{
  position:sticky;
}

.before-light{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(16px,1.45vw,23px);
  line-height:1;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:lowercase;
  white-space:nowrap;
  color:#1a1a1a;
}

.about-philosophy{
  padding:0 var(--pad) 130px;
}
.about-philosophy-inner{
  max-width:980px;
  margin:0 auto;
  padding-top:58px;
  border-top:1px solid #d8d8d3;
}
.about-philosophy .eyebrow{
  font-size:10px;
  line-height:1;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#777;
  margin-bottom:24px;
}
.about-philosophy h2{
  margin:0 0 36px;
  font-size:clamp(42px,6vw,88px);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.055em;
}
.about-philosophy .lead{
  margin:0 0 34px;
  font-size:clamp(23px,2.2vw,34px);
  line-height:1.42;
  letter-spacing:-.025em;
  color:#111;
}
.about-philosophy p{
  max-width:830px;
  margin:0 0 24px;
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.72;
  color:#303030;
}
.about-philosophy .statement{
  margin:52px 0;
  padding:36px 0;
  border-top:1px solid #bfbfba;
  border-bottom:1px solid #bfbfba;
  font-size:clamp(30px,4vw,58px);
  line-height:1.05;
  letter-spacing:-.045em;
  color:#111;
}
.about-philosophy .timeline{
  margin-top:58px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  border-top:1px solid #d8d8d3;
  padding-top:22px;
}
.about-philosophy .timeline div{
  font-size:11px;
  line-height:1.5;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#666;
}

@media(max-width:900px){
  .before-light{
    font-size:14px;
    letter-spacing:.09em;
  }
  .about-philosophy .timeline{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:640px){
  .before-light{display:none}
  .about-philosophy{padding-bottom:90px}
  .about-philosophy .timeline{grid-template-columns:1fr}
}


/* ===== V30: integrated identity + refined About typography ===== */
.before-light{display:none !important;}

.brand::after{
  content:" vor dem licht";
  font:inherit;
  font-weight:300;
  letter-spacing:-.04em;
  color:#555;
  margin-left:.18em;
}

.about-hero-v30 .editorial-title{
  max-width:1100px;
}

.about-grid-v30{
  padding-top:72px;
}

.about-grid-v30 .about-copy h2{
  margin-top:56px;
}

.about-statement-v30{
  margin:54px 0 62px;
  padding:32px 0 36px;
  border-top:1px solid #bfbfba;
  border-bottom:1px solid #bfbfba;
  font-size:clamp(32px,4vw,60px);
  line-height:1.03;
  font-weight:400;
  letter-spacing:-.045em;
}

.about-final-v30{
  margin-top:46px !important;
  font-size:clamp(22px,2vw,31px) !important;
  line-height:1.42 !important;
  letter-spacing:-.025em;
  color:#111 !important;
}

.about-timeline-v30{
  margin:0 var(--pad) 120px;
  padding-top:22px;
  border-top:1px solid #d8d8d3;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}

.about-timeline-v30 div{
  font-size:11px;
  line-height:1.5;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#666;
}

/* preserve final approved preview scaling */
.project-frame img[src*="tokyo-004-preview"],
.thumb img[src*="tokyo-004-preview"]{
  width:140% !important;
  height:140% !important;
  max-width:none !important;
  object-fit:cover !important;
  margin:-20% 0 0 -20% !important;
  transform:none !important;
}

.project-frame img[src*="porthaus-003-preview"],
.thumb img[src*="porthaus-003-preview"]{
  width:139% !important;
  height:139% !important;
  max-width:none !important;
  object-fit:cover !important;
  margin:-19.5% 0 0 -19.5% !important;
  transform:none !important;
}

.project-card:hover .project-frame img[src*="tokyo-004-preview"],
.thumb:hover img[src*="tokyo-004-preview"],
.project-card:hover .project-frame img[src*="porthaus-003-preview"],
.thumb:hover img[src*="porthaus-003-preview"]{
  transform:scale(1.015) !important;
  filter:brightness(1.08) !important;
}

@media(max-width:900px){
  .brand::after{font-size:.86em;}
  .about-timeline-v30{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:640px){
  .brand::after{
    display:block;
    margin-left:0;
    margin-top:4px;
    font-size:.62em;
    letter-spacing:-.02em;
  }
  .about-timeline-v30{grid-template-columns:1fr;}
}


/* ===== V31: unified section labels =====
   about / journal use the same typographic scale as "vor dem licht". */

body.editorial-page .editorial-kicker,
.about-philosophy .eyebrow{
  font-size:clamp(34px,3.3vw,57px) !important;
  line-height:.95 !important;
  font-weight:300 !important;
  letter-spacing:-.04em !important;
  text-transform:lowercase !important;
  color:#555 !important;
  margin-bottom:34px !important;
}

/* Keep the labels visually quiet despite their larger size. */
body.editorial-page .editorial-kicker{
  max-width:none !important;
}

/* Mobile: same hierarchy, scaled down consistently. */
@media(max-width:640px){
  body.editorial-page .editorial-kicker,
  .about-philosophy .eyebrow{
    font-size:28px !important;
    letter-spacing:-.035em !important;
    margin-bottom:24px !important;
  }
}


/* ===== V32: unified work + project typography =====
   work and all project names follow the same quiet typographic language
   as "vor dem licht". */

/* Work section label */
.section-head h1{
  font-size:clamp(34px,3.3vw,57px) !important;
  line-height:.95 !important;
  font-weight:300 !important;
  letter-spacing:-.04em !important;
  text-transform:lowercase !important;
  color:#555 !important;
}

/* Project names below Work cover images */
.project-title{
  margin-top:15px !important;
  font-size:clamp(34px,3.3vw,57px) !important;
  line-height:.95 !important;
  font-weight:300 !important;
  letter-spacing:-.04em !important;
  text-transform:lowercase !important;
  color:#555 !important;
}

/* Project title on each individual project page */
.project-top h1{
  font-size:clamp(34px,3.3vw,57px) !important;
  line-height:.95 !important;
  font-weight:300 !important;
  letter-spacing:-.04em !important;
  text-transform:lowercase !important;
  color:#555 !important;
}

/* Keep supporting labels understated */
.section-note,
.back{
  text-transform:lowercase !important;
  letter-spacing:.08em !important;
}

@media(max-width:640px){
  .section-head h1,
  .project-title,
  .project-top h1{
    font-size:28px !important;
    letter-spacing:-.035em !important;
  }
}


/* ===== V33: unify About main heading ===== */

.about-philosophy h2{
  font-size:clamp(34px,3.3vw,57px) !important;
  line-height:.95 !important;
  font-weight:300 !important;
  letter-spacing:-.04em !important;
  color:#555 !important;
}

@media(max-width:640px){
  .about-philosophy h2{
    font-size:28px !important;
    letter-spacing:-.035em !important;
  }
}


/* ===== V34: correct About headline selector ===== */

body.editorial-page .editorial-title{
  font-size:clamp(34px,3.3vw,57px) !important;
  line-height:.95 !important;
  font-weight:300 !important;
  letter-spacing:-.04em !important;
  text-transform:lowercase !important;
  color:#555 !important;
}

@media(max-width:640px){
  body.editorial-page .editorial-title{
    font-size:28px !important;
    letter-spacing:-.035em !important;
  }
}


/* ===== V35: header contrast + more space in About ===== */

/* "vor dem licht" in pure black */
.before-light{
  color:#000 !important;
}

/* more breathing room between "about" and the main About headline */
body.editorial-page .editorial-kicker{
  margin-bottom:72px !important;
}

@media(max-width:640px){
  body.editorial-page .editorial-kicker{
    margin-bottom:52px !important;
  }
}


/* ===== V36: About headline same visual weight as brand ===== */

body.editorial-page .editorial-title{
  color:#000 !important;
  font-weight:400 !important;
}


/* ===== V39: About closing statement ===== */

body.editorial-page .about-final-v30{
  margin-top:72px !important;
  margin-bottom:0 !important;
  font-size:clamp(34px,3.3vw,57px) !important;
  line-height:.95 !important;
  font-weight:400 !important;
  letter-spacing:-.04em !important;
  text-transform:lowercase !important;
  color:#000 !important;
}

body.editorial-page .about-final-v30 strong{
  font:inherit !important;
  color:inherit !important;
}

@media(max-width:640px){
  body.editorial-page .about-final-v30{
    margin-top:52px !important;
    font-size:28px !important;
    letter-spacing:-.035em !important;
  }
}


/* ===== V45: About lead exactly matches editorial intro =====
   "fotografie bedeutet wörtlich..." now uses exactly the same
   typography as "bevor licht auf film, sensor, glas, aluminium oder papier trifft..." */

body.editorial-page .about-copy .lead{
  max-width:760px !important;
  font-size:clamp(16px,1.35vw,21px) !important;
  line-height:1.55 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  color:#363636 !important;
}


/* ===== V46 FINAL: clearer separation between WORK heading and first project ===== */

#work .section-head{
  margin-bottom:72px !important;
}

@media(max-width:640px){
  #work .section-head{
    margin-bottom:48px !important;
  }
}


/* ===== V47: selected projects / all projects labels =====
   Double the existing label size while preserving the current type system. */

.section-note,
.back{
  font-size:150% !important;
}