@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap");

/* ============================================================
   LBM CORPORATION
   Ground is dark. Cream is paper — used as inset placards, never
   as the page. From the brand's own mood board: 밀도 높은,
   Brick & Wood. Density, not whitespace.
   ============================================================ */



:root {
  /* Cozy brick — the LBM room itself: warm brick, wood, lamplight.
     Not black, not ivory. Cream is the inset, used sparingly. */
  --bg:      #3B2417;
  --bg-2:    #492E1D;
  --paper:   #F2E7D2;
  --accent:  #D29B5D;   /* lamplight */
  --deep:    #5C3A22;
  --mark:    #7B1A2B;   /* oxblood */

  --txt:     #F4E8D3;
  --txt-2:   rgba(244,232,211,.8);
  --txt-3:   rgba(244,232,211,.74);
  --rule:    rgba(244,232,211,.24);

  --pk:      #3A2214;
  --pk-2:    rgba(58,34,20,.78);
  --pk-3:    rgba(58,34,20,.52);
  --pr:      rgba(58,34,20,.22);

  --f-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
            "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-disp: "Cormorant Garamond", "Apple SD Gothic Neo", Georgia, serif;

  --pad:  clamp(18px, 4vw, 72px);
  --max:  1560px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.65,.02,.18,1);
}

[data-brand="london-bagel-museum"]{--bg:#3B2417;--bg-2:#492E1D;--paper:#F2E7D2;--accent:#D29B5D;--deep:#5C3A22;--mark:#7B1A2B;
  --txt:#F4E8D3;--txt-2:rgba(244,232,211,.8);--txt-3:rgba(244,232,211,.74);--rule:rgba(244,232,211,.24);
  --pk:#3A2214;--pk-2:rgba(58,34,20,.78);--pk-3:rgba(58,34,20,.52);--pr:rgba(58,34,20,.22)}
[data-brand="cafe-layered"]{--bg:#46280F;--bg-2:#573316;--paper:#FDF3DF;--accent:#E5A83A;--deep:#723D1E;--mark:#9A5B25;
  --txt:#F8ECD5;--txt-2:rgba(248,236,213,.8);--txt-3:rgba(248,236,213,.74);--rule:rgba(248,236,213,.24);
  --pk:#3A2109;--pk-2:rgba(58,33,9,.78);--pk-3:rgba(58,33,9,.52);--pr:rgba(58,33,9,.22)}
[data-brand="cafe-highwaist"]{--bg:#4A3A2E;--bg-2:#5A4839;--paper:#FDF6EA;--accent:#DDAFAF;--deep:#6E5340;--mark:#E5D19F;
  --txt:#F7EBDD;--txt-2:rgba(247,235,221,.82);--txt-3:rgba(247,235,221,.74);--rule:rgba(247,235,221,.24);
  --pk:#3A2C22;--pk-2:rgba(58,44,34,.78);--pk-3:rgba(58,44,34,.52);--pr:rgba(58,44,34,.22)}
[data-brand="artist-bakery"]{--bg:#161616;--bg-2:#212121;--paper:#FFFFFF;--accent:#A9BCE8;--deep:#19254B;--mark:#8E2231;
  --txt:#F2F2F2;--txt-2:rgba(242,242,242,.78);--txt-3:rgba(242,242,242,.74);--rule:rgba(242,242,242,.2);
  --pk:#0A0A0A;--pk-2:rgba(10,10,10,.76);--pk-3:rgba(10,10,10,.5);--pr:rgba(10,10,10,.18)}
[data-brand="esg"]{--bg:#F4F0E4;--bg-2:#EBE5D5;--paper:#1D1913;--accent:#7B1A2B;--deep:#3A2A1E;--mark:#7B1A2B;
  --txt:#1D1913;--txt-2:rgba(29,25,19,.74);--txt-3:rgba(29,25,19,.70);--rule:rgba(29,25,19,.2);
  --pk:#F4F0E4;--pk-2:rgba(244,240,228,.78);--pk-3:rgba(244,240,228,.5);--pr:rgba(244,240,228,.22)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--f-sans);font-size:16px;line-height:1.75;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--bg)}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--accent);margin:0 0 16px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.16}
.h-xl{font-size:clamp(38px,6.6vw,104px);line-height:1.02;letter-spacing:-.045em}
.h-lg{font-size:clamp(30px,4.6vw,72px);line-height:1.08;letter-spacing:-.042em}
.h-md{font-size:clamp(22px,2.7vw,40px);line-height:1.14;letter-spacing:-.035em}
.disp{font-family:var(--f-disp);font-weight:400;letter-spacing:-.005em}
.em{color:var(--accent)}
.lede{font-size:clamp(15px,1.15vw,17.5px);color:var(--txt-2);max-width:60ch;line-height:1.9}
.small{font-size:12.5px;color:var(--txt-3);line-height:1.75}

/* ============================================================ HEADER */
.hdr{
  position:fixed;inset:0 0 auto;z-index:120;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:0 var(--pad);height:74px;
  border-bottom:1px solid transparent;color:var(--txt);
  transition:background .5s var(--ease),border-color .5s var(--ease),height .4s var(--ease);
}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));transition:opacity .5s var(--ease)}
.hdr.is-stuck{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);height:62px}
.hdr.is-stuck::before{opacity:0}
.hdr__mark{display:flex;align-items:baseline;gap:10px}
.hdr__mark b{font-size:15px;font-weight:700;letter-spacing:.05em}
.hdr__mark span{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-3)}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,32px)}
.nav a{font-size:12.5px;letter-spacing:.04em;font-weight:500;position:relative;padding:6px 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .45s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav__cta{border:1px solid var(--rule);border-radius:999px;padding:7px 16px!important;
  font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase;transition:.4s var(--ease)}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.burger{display:none;width:34px;height:34px;position:relative}
.burger i{position:absolute;left:6px;right:6px;height:1.4px;background:currentColor;transition:.35s var(--ease)}
.burger i:nth-child(1){top:12px}.burger i:nth-child(2){bottom:12px}
body.nav-open .burger i:nth-child(1){top:16px;transform:rotate(45deg)}
body.nav-open .burger i:nth-child(2){bottom:16px;transform:rotate(-45deg)}
@media(max-width:940px){
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:4px;
    transform:translateY(-101%);transition:transform .6s var(--slow);z-index:-1}
  .nav a{font-size:26px;padding:11px 0;font-weight:500;letter-spacing:-.03em;font-family:var(--f-disp)}
  .nav a::after{display:none}
  .nav__cta{margin-top:16px;font-size:11px!important;font-family:var(--f-sans)}
  body.nav-open .nav{transform:none}
  body.nav-open .hdr::before{opacity:0}
}

/* ============================================================ HERO */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#000}
.hero__grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
.hero__panel{position:relative;overflow:hidden;background:#000;display:block}
.hero__panel::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(8,5,3,0);transition:background .5s var(--ease)}
.hero__panel:hover::before{background:rgba(8,5,3,.22)}
.hero__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);transition:opacity 3.6s var(--ease),transform 15s linear;
  filter:saturate(.92) contrast(1.05)}
.hero__panel img.is-on{opacity:1;transform:scale(1)}
.hero__cap{position:absolute;left:0;top:82px;z-index:3;padding:0 18px;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.58);
  transition:opacity .8s var(--ease);display:flex;align-items:center;gap:10px}
.hero__cap::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,5,3,.62) 0%,rgba(8,5,3,.2) 30%,rgba(8,5,3,.5) 62%,rgba(8,5,3,.95) 100%)}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}.hero__panel:nth-child(n+2){display:none}}

.hero__body{position:absolute;inset:auto 0 0;z-index:4;padding:0 var(--pad) clamp(38px,6vh,72px)}
.hero__inner{max-width:var(--max);margin:0 auto}
.hero__eyebrow{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.62);
  margin-bottom:22px;display:flex;align-items:center;gap:14px}
.hero__eyebrow::before{content:"";width:38px;height:1px;background:currentColor}
.hero__title{font-size:clamp(30px,4.4vw,64px);font-weight:700;letter-spacing:-.042em;line-height:1.14;
  color:#fff;max-width:20ch;text-wrap:balance}
.hero__title .nb{white-space:nowrap}
.hero__sub{margin-top:18px;font-size:clamp(13.5px,1.05vw,16px);color:rgba(255,255,255,.76);max-width:48ch;line-height:1.85}
.hero__meta{margin-top:clamp(26px,4.4vh,46px);padding-top:18px;border-top:1px solid rgba(255,255,255,.2);
  display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,40px);align-items:center}
.hero__brand{font-family:var(--f-disp);font-size:clamp(15px,1.5vw,21px);color:rgba(255,255,255,.8);
  letter-spacing:-.01em;transition:color .4s var(--ease)}
.hero__brand:hover{color:var(--accent)}
.hero__scroll{margin-left:auto;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.5);display:flex;align-items:center;gap:10px}
.hero__scroll i{width:1px;height:32px;background:currentColor;display:block;transform-origin:top;
  animation:drop 2.8s var(--ease) infinite}
@keyframes drop{0%,100%{transform:scaleY(.22);opacity:.3}50%{transform:scaleY(1);opacity:1}}
@media(max-width:760px){.hero__scroll{display:none}}

/* ============================================================ SECTIONS */
.sec{position:relative;padding-block:clamp(72px,9vw,150px)}
.sec--tight{padding-block:clamp(40px,5vw,76px)}
.sec--raised{background:var(--bg-2)}
.sec--paper{background:var(--paper);color:var(--pk)}
.sec--paper .sec__body{color:var(--pk)}
.sec--paper .eyebrow{color:var(--mark)}
.sec--paper .lede{color:var(--pk-2)}
.sec--paper .small{color:var(--pk-3)}

.sec--paper .sec__label{color:var(--pk-3)}
.sec--paper .sec__rail hr{background:var(--pr)}
.sec--paper .em{color:var(--accent)}

.sec__grid{display:block}
@media(max-width:900px){.sec__grid{grid-template-columns:1fr;gap:22px}}
.sec__rail{position:sticky;top:100px;align-self:start}
.sec__num{font-family:var(--f-disp);font-size:76px;line-height:.9;color:var(--accent);opacity:.28;display:block;margin-bottom:14px;letter-spacing:-.02em}
.sec__label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3)}
.sec__rail hr{margin:14px 0 0;height:1px;background:var(--rule);border:0}
@media(max-width:900px){.sec__rail{position:static;display:flex;align-items:baseline;gap:12px}
  .sec__num{font-size:24px;margin:0}.sec__rail hr{display:none}}

.dex{position:fixed;left:var(--pad);top:50%;transform:translateY(-50%);z-index:60;display:none;
  flex-direction:column;gap:12px;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
@media(min-width:1400px){.dex{display:flex}}
.dex.is-on{opacity:1;pointer-events:auto}
.dex a{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
.dex i{width:12px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.dex a:hover,.dex a.is-on{color:var(--accent)}
.dex a.is-on i{width:30px}

/* ============================================================ PLACARD */
.placs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:820px){.placs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.placs{grid-template-columns:1fr}}
.plac__i{background:var(--bg);padding:clamp(18px,2vw,26px)}
.sec--paper .plac__i{background:var(--paper)}
.sec--raised .plac__i{background:var(--bg-2)}
.plac__k{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px}
.sec--paper .plac__k{color:var(--mark)}
.plac__v{font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.55}

/* ============================================================ QUOTE */
.quote{position:relative;padding-block:clamp(8px,1.6vw,22px)}
.quote blockquote{margin:0;font-family:var(--f-disp);font-weight:300;font-style:italic;
  font-size:clamp(23px,3.2vw,46px);line-height:1.36;letter-spacing:-.015em;
  white-space:pre-line;color:var(--txt);text-wrap:balance}
.sec--paper .quote blockquote{color:var(--pk)}
.quote blockquote::before{content:"\201C";color:var(--accent);margin-right:.05em}
.quote blockquote::after{content:"\201D";color:var(--accent);margin-left:.03em}
.quote figcaption{margin-top:clamp(16px,2vw,26px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
.sec--paper .quote figcaption{color:var(--pk-3)}
.quote figcaption i{width:30px;height:1px;background:var(--accent);display:block}
.quote figcaption b{font-weight:600;color:var(--accent);letter-spacing:.14em}
.quote--lead blockquote{font-size:clamp(28px,4.8vw,74px);line-height:1.24}

/* ============================================================ BRAND CARDS */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,.9vw,14px)}
@media(max-width:1080px){.brands{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.brands{grid-template-columns:1fr}}
.bcard{position:relative;display:block;overflow:hidden;background:#000;isolation:isolate}
.bcard__img{position:relative;aspect-ratio:3/4.8;overflow:hidden}
.bcard__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.86);
  transition:transform 1.8s var(--ease),filter .8s var(--ease)}
.bcard:hover .bcard__img img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.bcard__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,5,3,.96) 0%,rgba(8,5,3,.78) 20%,rgba(8,5,3,.3) 46%,rgba(8,5,3,.04) 100%)}
.bcard__tint{position:absolute;inset:0;opacity:.16;mix-blend-mode:multiply;transition:opacity .7s var(--ease)}
.bcard:hover .bcard__tint{opacity:0}
.bcard__body{position:absolute;inset:auto 0 0;padding:clamp(20px,1.9vw,30px);color:#fff;z-index:2}
.bcard__cat{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bcard__logo{max-height:104px;max-width:78%;width:auto;height:auto;object-fit:contain;object-position:left bottom}
.bcard__mark{height:104px;display:flex;align-items:flex-end;margin:16px 0 10px}
.bcard__name{font-family:var(--f-disp);font-size:17px;color:rgba(255,255,255,.9)}
.bcard__desc{font-size:12.5px;line-height:1.72;opacity:0;max-height:0;overflow:hidden;margin-top:0;
  color:rgba(255,255,255,.8);transition:opacity .55s var(--ease),max-height .65s var(--ease),margin .65s var(--ease)}
.bcard:hover .bcard__desc{opacity:1;max-height:9em;margin-top:12px}
.bcard__go{margin-top:14px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.bcard__go i{width:14px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.bcard:hover .bcard__go i{width:30px}

/* ============================================================ MOOD */
.mood{text-align:center}
.mood__words{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2vw,40px);margin:clamp(26px,3.6vw,48px) 0}
.mood__w{font-family:var(--f-disp);font-size:clamp(24px,4vw,58px);font-weight:300;line-height:1.26;
  color:var(--txt);white-space:nowrap;position:relative;display:inline-block}
.mood__w i{visibility:hidden;font-style:normal}          /* sizer: holds the line steady while it resolves */
.mood__w b{position:absolute;inset:0;font-weight:inherit;display:flex;align-items:center;justify-content:center}
.sec--paper .mood__w{color:var(--pk)}
.mood__w b.is-idle{color:var(--txt-3)}
.sec--paper .mood__w b.is-idle{color:var(--pk-3)}
.mood__core{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.8vw,56px);margin-top:6px}
.mood__c b{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}

.mood__c span{display:block;margin-top:6px;font-size:12.5px;color:var(--txt-3)}
.sec--paper .mood__c span{color:var(--pk-3)}
.mood__visual{margin-top:30px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-3)}
.sec--paper .mood__visual{color:var(--pk-3)}

/* ============================================================ VALUES */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:1080px){.vals{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vals{grid-template-columns:1fr}}
.val{background:var(--bg);padding:clamp(22px,2.4vw,34px)}
.sec--raised .val{background:var(--bg-2)}
.sec--paper .val{background:var(--paper)}
.val b{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:block}
.sec--paper .val b{color:var(--mark)}
.val h3{margin:14px 0 12px;font-size:clamp(17px,1.6vw,21px)}
.val p{margin:0;font-size:13.5px;color:var(--txt-2);line-height:1.85}
.sec--paper .val p{color:var(--pk-2)}

/* ============================================================ TIMELINE */
.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--rule)}
@media(max-width:1080px){.tl{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.tl{grid-template-columns:repeat(2,1fr)}}
.tl__i{padding:24px clamp(10px,1.3vw,20px) 28px 0;position:relative}
.tl__i::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tl__i b{font-family:var(--f-disp);font-size:clamp(23px,2.3vw,32px);font-weight:500;display:block}
.tl__i strong{display:block;margin:9px 0 7px;font-size:12.5px;font-weight:600}
.tl__i p{margin:0;font-size:12px;color:var(--txt-3);line-height:1.75}
.sec--paper .tl{border-top-color:var(--pr)}
.sec--paper .tl__i p{color:var(--pk-3)}

/* ============================================================ CHARACTERS */
.chars{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:900px){.chars{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.chars{grid-template-columns:repeat(2,1fr)}}
.char{background:var(--bg-2);padding:clamp(14px,1.6vw,22px);text-align:center;transition:background .5s var(--ease)}
.sec--paper .char{background:var(--paper)}
.char:hover{background:var(--deep)}
.sec--paper .char:hover{background:color-mix(in srgb,var(--accent) 18%,var(--paper))}
.char__i{aspect-ratio:1;overflow:hidden;margin-bottom:14px;background:#fff}
.char__i img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.char:hover .char__i img{transform:scale(1.06)}
.char b{display:block;font-family:var(--f-disp);font-size:17px;font-weight:500}
.char span{display:block;margin-top:4px;font-size:10px;letter-spacing:.1em;color:var(--txt-3)}
.sec--paper .char span{color:var(--pk-3)}

/* ============================================================ LOCATIONS */
.locs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,30px) clamp(10px,1.3vw,22px)}
@media(max-width:1080px){.locs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.locs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.locs{grid-template-columns:1fr}}
@media(min-width:1081px){.locs--few{grid-template-columns:repeat(3,1fr)}}
.loc__name{font-family:var(--f-disp);font-size:clamp(19px,1.7vw,26px);font-weight:500;
  display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.loc__name em{font-style:normal;font-family:var(--f-sans);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--txt-3)}
.sec--paper .loc__name em{color:var(--pk-3)}
.loc__cube{position:relative;aspect-ratio:1;overflow:hidden;background:#000}
.loc__cube img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);transition:transform 1.6s var(--ease)}
.loc:hover .loc__cube img,.loc:focus-within .loc__cube img{transform:scale(1.06)}
.loc__veil{position:absolute;inset:0;background:rgba(20,12,7,.84);opacity:0;transition:opacity .5s var(--ease);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,1.4vw,20px);color:#fff}
.loc:hover .loc__veil,.loc:focus-within .loc__veil{opacity:1}
.loc__veil p{margin:0 0 auto;font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.9)}
.loc__rows{display:grid;gap:5px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.24)}
.loc__row{display:flex;gap:10px;font-size:11px;line-height:1.6}
.loc__row b{flex:0 0 44px;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:.1em;font-size:9.5px;
  text-transform:uppercase;padding-top:2px}
.loc__map{margin-top:13px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;border:1px solid rgba(255,255,255,.45);
  border-radius:999px;padding:7px 14px;transition:.4s var(--ease)}
.loc__map:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.loc__strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px}
.loc__strip button{padding:0;display:block;aspect-ratio:1;overflow:hidden;background:#000;position:relative}
.loc__strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.72);
  transition:filter .45s var(--ease),transform 1.1s var(--ease)}
.loc__strip button:hover img,.loc__strip button[aria-current] img{filter:saturate(1) brightness(1);transform:scale(1.06)}
.loc__strip button[aria-current]::after{content:"";position:absolute;inset:0;border:1.5px solid var(--accent)}
.loc__meta{margin-top:10px;display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--txt-3)}
.sec--paper .loc__meta{color:var(--pk-3)}
/* Hover overlays are unusable on touch AND at phone widths — show the info inline. */
@media(hover:none),(max-width:760px){
  .loc__veil{position:static;opacity:1;background:none;padding:13px 0 0;color:var(--txt)}
  .loc__veil p{color:var(--txt-2)}
  .loc__rows{border-top-color:var(--rule)}
  .loc__row b{color:var(--txt-3)}
  .loc__map{border-color:var(--rule);color:var(--txt)}
  .sec--paper .loc__veil{color:var(--pk)}
  .sec--paper .loc__veil p{color:var(--pk-2)}
  .sec--paper .loc__rows{border-top-color:var(--pr)}
  .sec--paper .loc__row b{color:var(--pk-3)}
  .sec--paper .loc__map{color:var(--pk);border-color:var(--pr)}
}

/* ============================================================ ESG */
.esg{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
.esg__i{background:var(--bg);display:grid;grid-template-columns:280px minmax(0,1fr) auto;
  gap:clamp(16px,2.6vw,44px);align-items:center;padding:clamp(16px,1.8vw,26px) 0;
  transition:background .45s var(--ease),padding-inline .45s var(--ease)}
.sec--raised .esg__i{background:var(--bg-2)}
.sec--paper .esg__i{background:var(--paper)}
.esg__i:hover{background:var(--deep);color:var(--txt);padding-inline:18px}
@media(max-width:880px){.esg__i{grid-template-columns:1fr;gap:14px}}
.esg__thumb{aspect-ratio:3/2;overflow:hidden;background:#000}
.esg__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.esg__i:hover .esg__thumb img{transform:scale(1.06)}
.esg__tag{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.esg__i h3{margin:11px 0 9px;font-size:clamp(18px,1.8vw,26px)}
.esg__i p{margin:0;font-size:13.5px;color:var(--txt-2);max-width:54ch}
.sec--paper .esg__i p{color:var(--pk-2)}
.sec--paper .esg__i:hover p,.sec--paper .esg__i:hover h3{color:var(--txt)}
.esg__date{font-family:var(--f-disp);font-size:26px;color:var(--txt-3);white-space:nowrap}
.esg__draft{display:inline-block;margin-left:10px;vertical-align:3px;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--rule);border-radius:999px;padding:3px 9px;color:var(--txt-3)}
.empty{border:1px dashed var(--rule);padding:clamp(30px,4.5vw,64px);text-align:center}
.empty b{display:block;font-size:16px;margin-bottom:9px}

/* ============================================================ INSTAGRAM */
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule)}
@media(max-width:1080px){.ig{grid-template-columns:repeat(3,1fr)}}
.ig__i{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-2);display:block}
.ig__i img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ig__i:hover img{transform:scale(1.07)}
.ig__pin{position:absolute;top:9px;left:9px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:var(--bg);padding:4px 8px;border-radius:999px}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border:1px solid var(--rule);
  border-radius:999px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;transition:.4s var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn--solid{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn--solid:hover{background:var(--mark);border-color:var(--mark);color:#fff}
.sec--paper .btn{border-color:var(--pr)}
.sec--paper .btn:hover{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.btns{display:flex;flex-wrap:wrap;gap:11px}
.arrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.arrow i{width:20px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.arrow:hover i{width:38px}

/* ============================================================ BRAND PAGE */
.bhero{position:relative;height:80svh;min-height:500px;overflow:hidden;background:#000}
.bhero__panel{position:absolute;inset:0}
.bhero__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.08);transition:opacity 3.4s var(--ease),transform 16s linear;filter:saturate(.92)}
.bhero__panel img.is-on{opacity:1;transform:scale(1)}
.bhero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(6,4,2,.6),rgba(6,4,2,.16) 34%,rgba(6,4,2,.56) 68%,rgba(6,4,2,.96))}
.bhero__body{position:absolute;inset:auto 0 0;z-index:2;color:#fff;padding:0 var(--pad) clamp(34px,5.5vh,62px)}
.bhero__logo{max-height:clamp(90px,11vw,160px);max-width:min(420px,42vw);width:auto;height:auto;object-fit:contain;object-position:left bottom;margin-bottom:24px}
.bhero__tag{font-size:clamp(14px,1.4vw,20px);max-width:44ch;line-height:1.75;color:rgba(255,255,255,.88)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(24px,4vw,76px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.figframe img{width:100%;aspect-ratio:3/2;object-fit:cover}
.figframe figcaption{margin-top:11px;font-size:11px;color:var(--txt-3);letter-spacing:.06em}
.sec--paper .figframe figcaption{color:var(--pk-3)}
.plate{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.plate img{width:100%;aspect-ratio:1;object-fit:cover}

/* ============================================================ FOOTER */
.ft{background:var(--paper);color:var(--txt-2);padding-top:clamp(44px,5.5vw,72px);position:relative;z-index:1}
.ft a{color:inherit}
.ft__top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.7fr));
  gap:clamp(24px,3.6vw,56px);padding-bottom:clamp(34px,4.5vw,58px)}
@media(max-width:880px){.ft__top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft__top{grid-template-columns:1fr}}
.ft__mark b{color:var(--pk);font-size:15px;letter-spacing:.05em;display:block}
.ft__mark span{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.4);display:block;margin-top:7px}
.ft__addr{margin-top:20px;font-size:12.5px;line-height:2.05;white-space:pre-line;color:rgba(255,255,255,.66)}
.ft h4{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:14px;font-weight:600}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft ul a{font-size:12.5px;color:rgba(255,255,255,.72);transition:color .3s}
.ft ul a:hover{color:var(--accent)}
.ft__bar{border-top:1px solid rgba(255,255,255,.12);padding-block:18px;display:flex;flex-wrap:wrap;
  gap:14px;align-items:center;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.44)}
.ft__policy{display:flex;flex-wrap:wrap;gap:18px}
.ft__social{display:flex;gap:12px;margin-left:auto}
.ft__social a{width:31px;height:31px;border:1px solid rgba(255,255,255,.2);border-radius:50%;
  display:grid;place-items:center;font-size:9.5px;transition:.35s var(--ease)}
.ft__social a:hover{background:var(--accent);border-color:var(--accent);color:#0D0906}
.totop{position:fixed;right:var(--pad);bottom:26px;z-index:110;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--rule);background:var(--bg);color:var(--txt);display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:.45s var(--ease)}
.totop.is-on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}

body.flat{padding-top:74px}
body.flat .hdr{background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
body.flat .hdr::before{opacity:0}

/* Rules are drawn in the dark-ground colour; on paper insets they'd vanish.
   Re-point every hairline surface to the paper rule colour. */
.sec--paper :is(.placs,.vals,.brands,.chars,.esg,.ig,.plate){background:var(--pr);border-color:var(--pr)}
.sec--paper :is(.pres,.pres__i,.stores,.strow){border-color:var(--pr)}
.sec--paper .esg{border-block-color:var(--pr)}
.sec--paper .empty{border-color:var(--pr)}
.sec--paper .esg__draft{border-color:var(--pr);color:var(--pk-3)}
.sec--paper .tl{border-top-color:var(--pr)}
.sec--paper .figframe,.sec--paper article[id]{border-color:var(--pr)!important}

/* ============================================================ REVEAL */
.js [data-rise]{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-rise].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js [data-rise]{opacity:1;transform:none}
  .hero__panel img:first-child,.bhero__panel img:first-child{opacity:1}
}


/* ============================================================
   BRAND MARKS
   LBM's supplied logo kit is monochrome only — there is no coloured
   wordmark in any PNG or .ai. Each mark is therefore tinted to its own
   brand colour so the four read as four brands, not one.
   Heights below equalise INK AREA, not box height: the four lockups have
   very different proportions (7.5:1 to 1.5:1), so a shared height made
   Layered and highwaist look half the size of the other two.
   ============================================================ */
[data-card="lbm"]{--card-logo-h:19.6px}
[data-card="ab"]{--card-logo-h:13.1px}
[data-card="cl"]{--card-logo-h:45.8px}
[data-card="hw"]{--card-logo-h:68.4px}

/* ============================================================
   LAPTOP LOCK  ·  delete this whole block to re-enable phone/tablet
   Presentation build: the site holds its desktop layout at every width
   rather than reflowing. Nothing above this block was removed.
   ============================================================ */
@media (min-width:1240px){
  body{min-width:1240px}
  .hero__grid{grid-template-columns:repeat(4,1fr)!important}
  .hero__panel:nth-child(n+2){display:block!important}
  .sec__grid{grid-template-columns:var(--rail) minmax(0,1fr)!important;gap:48px!important}
  .sec__rail{position:sticky!important;display:block!important}
  .sec__num{font-size:38px!important;margin-bottom:8px!important}
  .sec__rail hr{display:block!important}
  .burger{display:none!important}
  .nav{position:static!important;inset:auto!important;background:none!important;flex-direction:row!important;
    transform:none!important;z-index:auto!important;gap:32px!important;justify-content:flex-end!important}
  .nav a{font-size:12.5px!important;padding:6px 0!important;font-family:var(--f-sans)!important;font-weight:500!important;letter-spacing:.04em!important}
  .nav a::after{display:block!important}
  .nav__cta{margin-top:0!important;font-size:11px!important}
  .brands{grid-template-columns:repeat(4,1fr)!important}
  .vals{grid-template-columns:repeat(4,1fr)!important}
  .chars{grid-template-columns:repeat(6,1fr)!important}
  .placs{grid-template-columns:repeat(3,1fr)!important}
  .locs{grid-template-columns:repeat(4,1fr)!important}
  .locs--few{grid-template-columns:repeat(3,1fr)!important}
  .esg__i{grid-template-columns:280px minmax(0,1fr) auto!important}
  .ig{grid-template-columns:repeat(6,1fr)!important}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,.82fr)!important}
  .ft__top{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.7fr))!important}
  .loc__veil{position:absolute!important;opacity:0!important;background:rgba(20,12,7,.84)!important;
    padding:20px!important;color:#fff!important}
  .loc:hover .loc__veil,.loc:focus-within .loc__veil{opacity:1!important}
  .loc__veil p{color:rgba(255,255,255,.9)!important}
  .loc__rows{border-top-color:rgba(255,255,255,.24)!important}
  .loc__row b{color:rgba(255,255,255,.55)!important}
  .loc__map{border-color:rgba(255,255,255,.45)!important;color:#fff!important}
}


/* ============================================================
   ESG NEWSROOM
   Deliberately not the museum. ESG is read by reporters, so it is set
   as a press page: newsprint ground, a masthead, ruled columns, dated
   entries. Same company, different room.
   ============================================================ */
[data-brand="esg"] body::after{opacity:.22;mix-blend-mode:multiply}

.mast{padding-top:26px}
.mast__rule{height:3px;background:var(--txt);margin-bottom:0}
.mast__rule--thin{height:1px;background:var(--txt);opacity:.5;margin-top:3px}
.mast__row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:22px 0 18px}
.mast__name{font-family:var(--f-disp);font-size:clamp(40px,5.2vw,74px);font-weight:500;
  letter-spacing:-.02em;line-height:.98}
.mast__name em{font-style:italic;font-weight:400;color:var(--accent)}
.mast__meta{text-align:right;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-3);line-height:2;white-space:nowrap}
.mast__lede{padding:22px 0 26px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:48px;border-bottom:1px solid var(--rule)}
.mast__lede h1{font-family:var(--f-disp);font-size:clamp(28px,3.6vw,52px);font-weight:500;
  letter-spacing:-.02em;line-height:1.18}
.mast__lede p{margin:0;font-size:14px;color:var(--txt-2);line-height:1.95;
  column-count:2;column-gap:30px;column-rule:1px solid var(--rule)}

.press{border-top:1px solid var(--rule);margin-top:0}
.press__i{display:grid;grid-template-columns:150px minmax(0,1fr);gap:44px;
  padding:40px 0;border-bottom:1px solid var(--rule)}
.press__date{font-family:var(--f-disp);font-size:34px;line-height:1;color:var(--accent)}
.press__date span{display:block;margin-top:10px;font-family:var(--f-sans);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3)}
.press__head{font-family:var(--f-disp);font-size:clamp(26px,3vw,42px);font-weight:500;
  letter-spacing:-.02em;line-height:1.18;margin:0 0 14px}
.press__body{font-size:14px;color:var(--txt-2);line-height:1.95;max-width:62ch;margin:0}
.press__shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
.press__shots img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.96)}
.press__tag{display:inline-block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--rule);padding:4px 10px;margin-bottom:14px}
.press__pending{border:1px dashed var(--rule);padding:16px 18px;margin-top:16px;
  font-size:12.5px;color:var(--txt-3);line-height:1.8}
.press__pending b{color:var(--accent);font-weight:600}

.press__foot{display:grid;grid-template-columns:150px minmax(0,1fr);gap:44px;padding:44px 0 8px}
.press__foot h2{font-family:var(--f-disp);font-size:clamp(24px,2.6vw,36px);font-weight:500;letter-spacing:-.02em}




/* ============================================================
   FULL-BLEED BAND
   The page needed moments where an image is allowed to be big.
   ============================================================ */
.band{position:relative;height:clamp(420px,58vw,760px);overflow:hidden;background:#000;isolation:isolate}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) brightness(.66);transform:scale(1.04)}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(6,4,2,.86) 0%,rgba(6,4,2,.5) 46%,rgba(6,4,2,.28) 100%)}
.band__in{position:relative;z-index:2;height:100%;display:flex;align-items:center;
  max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.band__in>div{max-width:26ch}
.band .eyebrow{color:rgba(255,255,255,.62)}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.8);font-size:clamp(14px,1.1vw,16.5px);line-height:1.9;max-width:46ch;margin:20px 0 0;white-space:pre-line}
.band--quote::after{background:linear-gradient(to bottom,rgba(6,4,2,.62),rgba(6,4,2,.46) 50%,rgba(6,4,2,.78))}
.band--quote .band__in{justify-content:center;text-align:center}
.band--quote .band__in>div{max-width:none}
.band--quote blockquote{margin:0;font-family:var(--f-disp);font-style:italic;font-weight:300;
  color:#fff;font-size:clamp(30px,5.2vw,82px);line-height:1.2;letter-spacing:-.02em;white-space:pre-line}
.band--quote blockquote::before{content:"\201C";color:var(--accent)}
.band--quote blockquote::after{content:"\201D";color:var(--accent)}
.band--quote figcaption{margin-top:26px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.56)}
.band--quote figcaption b{color:var(--accent);font-weight:600}

/* ============================================================
   STORE INDEX  ·  editorial rows, not a card grid
   ============================================================ */
.stores{border-top:1px solid var(--rule)}
.strow{display:grid;grid-template-columns:78px minmax(0,.72fr) minmax(0,1fr);
  grid-template-areas:"n t m";
  gap:clamp(24px,3.4vw,60px);align-items:start;padding:clamp(30px,3.4vw,54px) 0;
  border-bottom:1px solid var(--rule);transition:background .5s var(--ease),padding-inline .5s var(--ease)}
.strow__n{grid-area:n;align-self:start}.strow__body{grid-area:t;align-self:center}.strow__media{grid-area:m}
/* alternate the image side; reversing the TRACKS keeps each part in its own column */
.strow--flip{grid-template-columns:minmax(0,1fr) minmax(0,.72fr) 78px;grid-template-areas:"m t n"}
.strow--flip .strow__n{text-align:right}
.strow:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);padding-inline:20px}
.sec--paper .strow:hover{background:color-mix(in srgb,var(--deep) 6%,transparent)}
.strow__n{font-family:var(--f-disp);font-size:clamp(30px,2.6vw,44px);color:var(--accent);
  opacity:.45;line-height:1;letter-spacing:-.02em;padding-top:6px}
.strow__name{font-family:var(--f-disp);font-size:clamp(28px,3.2vw,50px);font-weight:500;
  letter-spacing:-.02em;line-height:1.1;display:block}
.strow__en{display:block;margin-top:8px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--txt-3)}
.sec--paper .strow__en{color:var(--pk-3)}
.strow__note{margin:18px 0 0;font-size:13.5px;line-height:1.85;color:var(--txt-2);max-width:38ch}
.sec--paper .strow__note{color:var(--pk-2)}
.strow__rows{margin-top:18px;display:grid;gap:6px;padding-top:16px;border-top:1px solid var(--rule)}
.sec--paper .strow__rows{border-top-color:var(--pr)}
.strow__r{display:flex;gap:14px;font-size:12px;line-height:1.6}
.strow__r b{flex:0 0 62px;font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-3);padding-top:3px}
.sec--paper .strow__r b{color:var(--pk-3)}
.strow__map{margin-top:20px;display:inline-flex;align-items:center;gap:10px;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.strow__map i{width:20px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.strow__map:hover i{width:40px}
.strow__media{display:grid;grid-template-columns:1fr;gap:6px}
.strow__hero{position:relative;aspect-ratio:3/2;overflow:hidden;background:#000}
.strow__hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);
  transition:transform 1.8s var(--ease)}
.strow:hover .strow__hero img{transform:scale(1.05)}
.strow__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.strow__thumbs button{padding:0;aspect-ratio:3/2;overflow:hidden;background:#000;position:relative;display:block}
.strow__thumbs img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) brightness(.68);
  transition:filter .45s var(--ease),transform 1.1s var(--ease)}
.strow__thumbs button:hover img,.strow__thumbs button[aria-current] img{filter:none;transform:scale(1.05)}
.strow__thumbs button[aria-current]::after{content:"";position:absolute;inset:0;border:1.5px solid var(--accent)}

/* ============================================================
   CRAFT  ·  the studio plates
   ============================================================ */
.craft{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,20px)}
.craft figure{margin:0}
.craft img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform 1.5s var(--ease)}
.craft figure:hover img{transform:scale(1.04)}
.craft figcaption{margin-top:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3)}
.sec--paper .craft figcaption{color:var(--pk-3)}
.kinds{margin-top:26px;font-family:var(--f-disp);font-size:clamp(18px,1.9vw,28px);
  color:var(--accent);letter-spacing:-.01em}

/* ============================================================
   SPACES GALLERY
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px)}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.94);transition:transform 1.6s var(--ease)}
.gal a:hover img,.gal figure:hover img{transform:scale(1.04)}

/* ============================================================
   PRESENCE
   ============================================================ */
.pres{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule)}
.pres__i{padding:clamp(24px,2.6vw,40px) 0;border-right:1px solid var(--rule);padding-inline:clamp(14px,1.6vw,26px)}
.pres__i:first-child{padding-left:0}
.pres__i:last-child{border-right:0}
.pres__n{font-family:var(--f-disp);font-size:clamp(44px,5.4vw,86px);line-height:.9;letter-spacing:-.03em;display:block}
.pres__ko{display:block;margin-top:16px;font-size:15px;font-weight:600}
.pres__en{display:block;margin-top:5px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3)}
.sec--paper .pres__en{color:var(--pk-3)}


/* ============================================================
   BRAND MEGA PANEL
   브랜드 and 매장 were two nav items for one idea. Now one item
   opens the four official marks — equal optical size — and each
   brand page carries its own store index.
   ============================================================ */
.nav__has{position:relative;display:flex;align-items:center}
.nav__brands{font-size:12.5px;letter-spacing:.04em;font-weight:500;position:relative;padding:6px 0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px}
.nav__brands::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);
  transition:right .45s var(--ease)}
.nav__brands:hover::after,.nav__brands[aria-current]::after,.nav__brands[aria-expanded="true"]::after{right:0}
.nav__brands::before{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);order:2;transition:transform .4s var(--ease);opacity:.7}
.nav__brands[aria-expanded="true"]::before{transform:rotate(-135deg) translateY(-2px)}

.mega{position:fixed;top:74px;left:0;right:0;z-index:115;
  background:color-mix(in srgb,var(--bg-2) 96%,transparent);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--rule);border-top:1px solid var(--rule);
  padding:clamp(26px,3vw,44px) 0 clamp(18px,2vw,26px);
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .38s var(--ease),transform .38s var(--ease)}
.hdr.is-stuck ~ .mega{top:62px}
.mega.is-open{opacity:1;transform:none;pointer-events:auto}
.mega__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.mega__i{display:block;background:var(--bg-2);padding:clamp(22px,2.2vw,32px) clamp(18px,1.8vw,26px);
  transition:background .45s var(--ease)}
.mega__i:hover{background:var(--deep)}
.mega__mark{height:92px;display:flex;align-items:center;justify-content:flex-start}
.mega__mark img{max-height:92px;max-width:82%;width:auto;height:auto;object-fit:contain;object-position:left center}
.mega__cat{display:block;margin-top:6px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3)}
.mega__name{display:block;margin-top:10px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.mega__go{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.mega__go i{width:16px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.mega__i:hover .mega__go i{width:32px}
.mega__note{margin:14px 0 0;font-size:11px;letter-spacing:.06em;color:var(--txt-3)}

/* ============================================================
   BRAND PAGE SUB-NAV  ·  매장 lives inside the brand
   ============================================================ */
.subnav{position:sticky;top:74px;z-index:80;background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.subnav__in{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);height:56px;overflow:auto}
.subnav__brand{font-family:var(--f-disp);font-size:19px;font-weight:500;letter-spacing:-.01em;
  margin-right:auto;white-space:nowrap}
.subnav a{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
  white-space:nowrap;position:relative;padding:4px 0;transition:color .35s var(--ease)}
.subnav a:hover,.subnav a.is-on{color:var(--accent)}
.subnav a.is-store{color:var(--txt);border:1px solid var(--rule);border-radius:999px;padding:7px 16px}
.subnav a.is-store:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}


/* ============================================================ CORPORATE PROFILE */
.prof{margin:clamp(26px,3vw,40px) 0 0;display:grid;border-top:1px solid var(--rule)}
.prof__r{display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.prof dt{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);padding-top:3px}
.prof dd{margin:0;font-size:14px;font-weight:500;line-height:1.65}
.sec--paper .prof,.sec--paper .prof__r{border-color:var(--pr)}
.sec--paper .prof dt{color:var(--pk-3)}
.scale{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(18px,2vw,26px)}
.scale__i{background:var(--bg);padding:clamp(18px,2vw,26px)}
.sec--raised .scale__i{background:var(--bg-2)}
.scale__i b{display:block;font-family:var(--f-disp);font-size:clamp(34px,3.6vw,54px);
  font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--accent)}
.scale__i span{display:block;margin-top:12px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-3)}

/* the numbered side rail is gone — content runs full measure */
.sec__rail{display:none!important}
.sec__grid{grid-template-columns:none!important;display:block!important}

/* ---- hero brand row: official marks, equal presence ---- */
.hero__brand{display:flex;align-items:center;height:38px}
.hero__brand img{max-height:38px;max-width:150px;width:auto;height:auto;object-fit:contain;object-position:left center;
  opacity:.9;transition:opacity .4s var(--ease)}
.hero__brand:hover img{opacity:1}

/* over hero photography the chrome is cream; on the page ground it inverts */
.hdr{color:#F7F0E0}
.hdr .hdr__mark span{color:rgba(247,240,224,.6)}
.hdr .nav__cta{border-color:rgba(247,240,224,.42)}
.hdr.is-stuck{color:var(--txt)}
.hdr.is-stuck .hdr__mark span{color:var(--txt-3)}
.hdr.is-stuck .nav__cta{border-color:var(--rule)}
body.flat .hdr{color:var(--txt)}
body.flat .hdr .hdr__mark span{color:var(--txt-3)}
body.flat .hdr .nav__cta{border-color:var(--rule)}
.totop{background:var(--bg);color:var(--txt);border-color:var(--rule)}
.mega{background:color-mix(in srgb,var(--bg) 97%,transparent)}
.mega__i{background:var(--bg-2)}
.mega__i:hover{background:color-mix(in srgb,var(--accent) 12%,var(--bg-2))}
.subnav{background:color-mix(in srgb,var(--bg) 94%,transparent)}
.char{background:var(--bg-2)}
.char:hover{background:color-mix(in srgb,var(--accent) 14%,var(--bg-2))}
.esg__i{background:var(--bg)}
.esg__i:hover{background:color-mix(in srgb,var(--accent) 9%,var(--bg));color:var(--txt)}
.strow:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.bcard{background:var(--paper)}
.band__in .eyebrow{color:rgba(255,255,255,.66)}

.bcard__img::after{background:linear-gradient(to top,rgba(24,14,7,.95) 0%,rgba(24,14,7,.82) 24%,
  rgba(24,14,7,.34) 52%,rgba(24,14,7,.04) 100%)}
.bcard__img img{filter:saturate(.98) brightness(.92)}
.bcard:hover .bcard__img img{filter:none}
.bcard__tint{opacity:.1}

/* chrome sits on the brick ground */
.hdr,.hdr.is-stuck{color:var(--txt)}
.hdr.is-stuck .hdr__mark span,.hdr .hdr__mark span{color:var(--txt-3)}
.hdr.is-stuck .nav__cta,.hdr .nav__cta{border-color:var(--rule)}
body.flat .hdr{color:var(--txt)}
[data-brand="esg"] .hdr,[data-brand="esg"] body.flat .hdr{color:var(--txt)}
.totop{background:var(--bg-2);color:var(--txt);border-color:var(--rule)}
.ft{background:#2A1810}
.ft__mark b{color:#F4E8D3}
.mega{background:color-mix(in srgb,var(--bg) 96%,transparent)}
.mega__i{background:var(--bg-2)}
.mega__i:hover{background:var(--deep)}
.subnav{background:color-mix(in srgb,var(--bg) 94%,transparent)}
.char{background:var(--bg-2)}
.char:hover{background:var(--deep)}
.esg__i{background:var(--bg)}
.esg__i:hover{background:var(--deep)}
.strow:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.bcard{background:#241509}
.bcard__img img{filter:saturate(1) brightness(.94)}
.bcard:hover .bcard__img img{filter:saturate(1.04) brightness(1)}
.bcard__tint{opacity:.08}
.bcard__img::after{background:linear-gradient(to top,rgba(28,16,8,.95) 0%,rgba(28,16,8,.8) 24%,
  rgba(28,16,8,.3) 54%,rgba(28,16,8,.02) 100%)}
.sec--paper .quote blockquote,.sec--paper h2,.sec--paper h3{color:var(--pk)}

.hero__panel img{object-position:50% 62%}
.bcard__img img{object-position:50% 55%}

/* the room, not a catalogue: warm, low-key grade so nothing reads cheerful */
.hero__panel img{filter:saturate(.96) brightness(.82) contrast(1.06);object-position:50% 55%}
.hero::after{background:linear-gradient(to bottom,rgba(20,11,5,.58) 0%,rgba(20,11,5,.26) 30%,
  rgba(20,11,5,.5) 62%,rgba(20,11,5,.94) 100%)}
.bhero__panel img{filter:saturate(.96) brightness(.8) contrast(1.06)}
.bhero::after{background:linear-gradient(to bottom,rgba(20,11,5,.55),rgba(20,11,5,.2) 34%,
  rgba(20,11,5,.55) 68%,rgba(20,11,5,.95))}
.band img{filter:saturate(.96) brightness(.6) contrast(1.05)}
.bcard__img img{filter:saturate(.97) brightness(.86) contrast(1.04);object-position:50% 52%}
.bcard:hover .bcard__img img{filter:saturate(1) brightness(.98) contrast(1.02)}
.strow__hero img,.gal img,.loc__cube img{filter:saturate(.97) brightness(.94)}

/* ---- brand panel: cream marks on a deep ground, not brown-on-brown ---- */
.mega{background:rgba(24,14,8,.97)}
.mega__in{background:rgba(244,232,211,.14);border-color:rgba(244,232,211,.14)}
.mega__i{background:#1E1109}
.mega__i:hover{background:#2E1B0F}
.mega__mark img{filter:brightness(0) invert(1);opacity:.94}
.mega__i:hover .mega__mark img{opacity:1}
.mega__cat{color:rgba(244,232,211,.5)}
.mega__name{color:#F4E8D3}
.mega__note{color:rgba(244,232,211,.45)}
/* the flat brown behind a card only shows while its photo loads */
.bcard{background:#1E1109}

/* every mark fits the same box, so the four read at one size */
.mega__mark{height:96px;display:flex;align-items:center}
.mega__mark img{width:100%;height:96px;max-width:none;max-height:none;
  object-fit:contain;object-position:left center}
.bcard__mark{height:104px;display:flex;align-items:flex-end}
.bcard__logo{width:100%;height:104px;max-width:none;max-height:none;
  object-fit:contain;object-position:left bottom}
.hero__brand{height:44px}
.hero__brand img{width:100%;height:44px;max-width:none;max-height:none;
  object-fit:contain;object-position:left center}
.hero__meta{gap:clamp(20px,3vw,52px)}

/* ============================================================
   SCROLL PERFORMANCE
   The fixed full-viewport grain layer with mix-blend-mode was
   repainting the whole page on every scroll frame. Gone.
   ============================================================ */
body::after{display:none!important}
.subnav{backdrop-filter:none!important;background:var(--bg)!important}
.hdr.is-stuck{backdrop-filter:none!important;background:var(--bg)!important}
.sec,.band,.stores{content-visibility:auto;contain-intrinsic-size:auto 700px}
.hero__panel img,.bhero__panel img{will-change:opacity}

/* ============================================================
   STORE INDEX — two per row
   ============================================================ */
.stores{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,56px);border-top:1px solid var(--rule)}
.strow{grid-template-columns:1fr!important;grid-template-areas:"m" "t"!important;
  gap:18px!important;padding:clamp(22px,2.4vw,34px) 0!important;align-items:start!important}
.strow--flip .strow__media{order:0}
.strow__n{display:none}
.strow__body{align-self:start!important}
.strow__name{font-size:clamp(22px,2.2vw,32px)}
.strow__note{max-width:46ch;font-size:13px}
.strow:hover{padding-inline:0!important;background:transparent!important}
.strow__hero{aspect-ratio:3/2}
@media(max-width:1080px){.stores{grid-template-columns:1fr}}

/* per-brand grounds pushed apart so the four pages don't read the same */
[data-brand="cafe-layered"]{--bg:#5A3410;--bg-2:#6B4118}
[data-brand="cafe-highwaist"]{--bg:#6B564A;--bg-2:#7B6557}
[data-brand="artist-bakery"]{--bg:#0D0D0D;--bg-2:#191919}

/* a line from a brochure is a statement, not something a person said */
.band--stmt blockquote::before,.band--stmt blockquote::after,
.quote--stmt blockquote::before,.quote--stmt blockquote::after{content:""}
.band--stmt blockquote,.quote--stmt blockquote{font-style:normal}

/* content-visibility was clipping bands mid-section — remove it */
.sec,.band,.stores{content-visibility:visible!important;contain-intrinsic-size:none!important}
/* header: no size transition, nothing to reflow on scroll */
.hdr{transition:background .35s var(--ease),border-color .35s var(--ease)!important;height:74px!important;
  will-change:auto;transform:translateZ(0)}
.hdr.is-stuck{height:74px!important}
.hdr__logo{height:26px;width:auto;object-fit:contain;object-position:left center;display:block}
.hdr__mark{gap:12px;align-items:center}

/* ============================================================
   BRAND GROUNDS
   Three of four grounds were colours I mixed by eye. These are the
   board's own swatches. Highwaist has no dark tone on the board, so
   it runs light — that is the brand, not an inconsistency.
   ============================================================ */
:root,[data-brand="london-bagel-museum"]{
  --bg:#542B15;--bg-2:#63351B;--paper:#FDF7E9;--accent:#C08B4A;--deep:#8E5625;--mark:#641218;
  --txt:#FDF7E9;--txt-2:rgba(253,247,233,.82);--txt-3:rgba(253,247,233,.58);--rule:rgba(253,247,233,.26);
  --pk:#3A2214;--pk-2:rgba(58,34,20,.8);--pk-3:rgba(58,34,20,.55);--pr:rgba(58,34,20,.22)}
[data-brand="cafe-layered"]{
  --bg:#723D1E;--bg-2:#834826;--paper:#FDF7E9;--accent:#E59B14;--deep:#9A5B25;--mark:#E59B14;
  --txt:#FDF7E9;--txt-2:rgba(253,247,233,.84);--txt-3:rgba(253,247,233,.6);--rule:rgba(253,247,233,.26);
  --pk:#3A2109;--pk-2:rgba(58,33,9,.8);--pk-3:rgba(58,33,9,.55);--pr:rgba(58,33,9,.22)}
[data-brand="cafe-highwaist"]{
  --bg:#FDF6EA;--bg-2:#F6EBD8;--paper:#3A2C22;--accent:#B07E7E;--deep:#8C6A4A;--mark:#D6A6A6;
  --txt:#3A2C22;--txt-2:rgba(58,44,34,.8);--txt-3:rgba(58,44,34,.55);--rule:rgba(58,44,34,.22);
  --pk:#FDF6EA;--pk-2:rgba(253,246,234,.82);--pk-3:rgba(253,246,234,.58);--pr:rgba(253,246,234,.24)}
[data-brand="artist-bakery"]{
  --bg:#000000;--bg-2:#121212;--paper:#FFFFFF;--accent:#8FA2D4;--deep:#19254B;--mark:#641218;
  --txt:#FFFFFF;--txt-2:rgba(255,255,255,.8);--txt-3:rgba(255,255,255,.52);--rule:rgba(255,255,255,.2);
  --pk:#0A0A0A;--pk-2:rgba(10,10,10,.78);--pk-3:rgba(10,10,10,.5);--pr:rgba(10,10,10,.18)}
/* store count: was oxblood on brown — unreadable. Now the page accent. */
.mega__go,.strow__map,.arrow{color:var(--accent)}
/* Highwaist runs light, so its chrome inverts */
[data-brand="cafe-highwaist"] .hdr:not(.is-stuck){color:#fff}
[data-brand="cafe-highwaist"] .hdr.is-stuck,[data-brand="cafe-highwaist"] body.flat .hdr{color:var(--txt)}
[data-brand="cafe-highwaist"] .hdr.is-stuck .hdr__logo{filter:brightness(0) saturate(0) invert(18%) sepia(9%) saturate(900%) hue-rotate(350deg)}
[data-brand="cafe-highwaist"] .mega{background:rgba(58,44,34,.97)}
[data-brand="cafe-highwaist"] .ft{background:#3A2C22}

/* ============================================================
   CHARACTERS — a slow idle drift, staggered so the row never
   moves in unison. CSS only; no JS, no repaint of the page.
   ============================================================ */
@keyframes charFloat{0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-9px) rotate(-1.1deg)}}
.char__i img{animation:charFloat 5.6s ease-in-out infinite;transform-origin:50% 90%;
  will-change:transform}
.char:nth-child(2) .char__i img{animation-duration:6.4s;animation-delay:-.9s}
.char:nth-child(3) .char__i img{animation-duration:5.1s;animation-delay:-1.9s}
.char:nth-child(4) .char__i img{animation-duration:6.9s;animation-delay:-.4s}
.char:nth-child(5) .char__i img{animation-duration:5.9s;animation-delay:-2.6s}
.char:nth-child(6) .char__i img{animation-duration:6.1s;animation-delay:-1.4s}
.char:hover .char__i img{animation-play-state:paused;
  transform:translateY(-14px) scale(1.07) rotate(2deg);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.char__i{overflow:visible}
.char{transition:background .45s var(--ease)}
@media(prefers-reduced-motion:reduce){.char__i img{animation:none}}

/* ---- quote words assemble ---- */
.quote blockquote .wd,.band--quote blockquote .wd{display:inline-block;overflow:hidden;vertical-align:top}
.quote blockquote .wd i,.band--quote blockquote .wd i{display:inline-block;font-style:inherit;
  transform:translateY(.9em) rotate(2deg);opacity:0;filter:blur(6px);
  transition:transform 1.1s cubic-bezier(.2,.7,.25,1),opacity .9s ease,filter .9s ease}
.quote.is-set blockquote .wd i,.band--quote blockquote.is-set .wd i,
.is-set .wd i{transform:none;opacity:1;filter:blur(0)}
/* characters: more travel, slight scale so it reads as motion not jitter */
@keyframes charFloat{0%,100%{transform:translateY(0) rotate(0) scale(1)}
  50%{transform:translateY(-18px) rotate(-2.2deg) scale(1.03)}}

/* ============================================================
   ESG stays a newsprint page. This must come last: the colour-board
   block re-declares :root, which otherwise outranks it on <html>.
   ============================================================ */
[data-brand="esg"]{
  --bg:#F4F0E4;--bg-2:#EBE5D5;--paper:#1D1913;--accent:#7B1A2B;--deep:#3A2A1E;--mark:#7B1A2B;
  --txt:#1D1913;--txt-2:rgba(29,25,19,.76);--txt-3:rgba(29,25,19,.70);--rule:rgba(29,25,19,.22);
  --pk:#F4F0E4;--pk-2:rgba(244,240,228,.8);--pk-3:rgba(244,240,228,.55);--pr:rgba(244,240,228,.24)}
[data-brand="esg"] .hdr,[data-brand="esg"] .hdr.is-stuck{color:var(--txt);background:var(--bg)}
[data-brand="esg"] .hdr__logo{filter:brightness(0)}
[data-brand="esg"] .hdr .hdr__mark span,[data-brand="esg"] .hdr .nav a{color:var(--txt)}
[data-brand="esg"] .ft{background:#1D1913}
[data-brand="esg"] .mega{background:rgba(244,240,228,.98)}
[data-brand="esg"] .mega__i{background:#EBE5D5}
[data-brand="esg"] .mega__mark img{filter:brightness(0)}
[data-brand="esg"] .mega__name,[data-brand="esg"] .mega__cat{color:var(--txt)}
/* the lede was clipping: let the columns size to their content */
.mast__lede p{column-count:2;column-gap:34px;column-fill:balance;overflow:visible}
.mast__lede{align-items:start}

/* ============================================================
   TYPOGRAPHY — Korean display in a serif, not a geometric sans.
   Pretendard is right for body and UI, but as a headline face it
   reads like an interface. Noto Serif KR carries the editorial
   weight the brand's own printed material has.
   ============================================================ */
:root{--f-disp:"Cormorant Garamond","Pretendard Variable",Pretendard,sans-serif;
      --f-head:"Cormorant Garamond","Pretendard Variable",Pretendard,sans-serif}

.h-xl,.h-lg,.hero__title,.mast__lede h1,.press__head,.band h2{
  font-family:var(--f-head);font-weight:600;letter-spacing:-.03em;line-height:1.24;
  word-break:keep-all;text-wrap:balance}
.h-xl{font-size:clamp(34px,5.4vw,86px);line-height:1.16}
.h-lg{font-size:clamp(28px,4vw,60px);line-height:1.22}
.hero__title{font-size:clamp(28px,3.9vw,58px);line-height:1.26;font-weight:600;letter-spacing:-.028em}
.h-md{font-family:var(--f-head);font-weight:600;letter-spacing:-.025em;line-height:1.3;
  font-size:clamp(21px,2.4vw,34px)}
.strow__name,.loc__name,.mega__name{font-family:var(--f-head);font-weight:500;letter-spacing:-.02em}

/* body and UI stay Pretendard, set a little more open for Korean */
.lede{line-height:2.0;letter-spacing:-.005em}
.strow__note,.val p,.esg__i p,.press__body,.band p{line-height:1.95;letter-spacing:-.004em}
/* labels: smaller, wider, quieter — the contrast that reads as considered */
.eyebrow,.sec__label,.hero__eyebrow,.bcard__cat,.mega__cat,.esg__tag,.press__tag,
.strow__en,.strow__r b,.scale__i span,.prof dt{font-family:var(--f-sans);font-weight:600}
.eyebrow{font-size:10px;letter-spacing:.34em}
.nav a,.nav__brands{font-family:var(--f-sans);font-weight:500;letter-spacing:.02em}
.hdr__mark span{letter-spacing:.28em}
/* quotes keep the italic Latin serif, with Korean falling to the serif too */
.quote blockquote,.band--quote blockquote{font-family:var(--f-disp);font-weight:300}


/* ============================================================
   TYPE LEGIBILITY OVER PHOTOGRAPHY
   Korean has no true italic; Cormorant's italic on Hangul is a
   synthesised oblique, which is what made the quotes look broken.
   Latin stays italic, Korean is set upright in the serif.
   ============================================================ */
.quote blockquote,.band--quote blockquote{
  font-family:var(--f-head);font-style:normal;font-weight:500;
  letter-spacing:-.02em;line-height:1.5;color:#FFF8EC}
.quote blockquote{font-size:clamp(22px,2.6vw,40px)}
.quote--lead blockquote{font-size:clamp(24px,3.1vw,50px)}
.band--quote blockquote{font-size:clamp(24px,3.2vw,52px);max-width:22ch;margin-inline:auto}

/* a focused scrim behind the words, not a flat wash over the whole photo */
.band--quote::after{background:
  radial-gradient(120% 78% at 50% 52%, rgba(18,10,4,.88) 0%, rgba(18,10,4,.7) 42%,
  rgba(18,10,4,.42) 68%, rgba(18,10,4,.28) 100%)}
.band--quote img{filter:saturate(.9) brightness(.42)}
.band--quote figcaption{color:rgba(255,248,236,.72);letter-spacing:.2em}
.band--quote figcaption b{color:var(--accent)}

/* ============================================================
   Remove the per-section eyebrow. One kicker above every block is
   AI grammar, not voice — the section headings carry the meaning.
   ============================================================ */
.sec .eyebrow,.split .eyebrow{display:none}
.band .eyebrow{display:none}
.sec__body>h2:first-child,.sec__body>.split h2{margin-top:0}
/* the two places a label genuinely orients the reader stay */
.press__tag,.esg__tag{display:inline-block}
.bcard__cat,.mega__cat,.hero__eyebrow{display:block}

/* LBM Corporation is the parent company, not a brand — it carries a
   wordmark, not London Bagel Museum's logo. No corporate mark exists
   in the supplied assets, so it is set as type. */
.hdr__logo{display:none}
.hdr__mark{display:flex;align-items:baseline;gap:11px}
.hdr__mark b{font-family:var(--f-sans);font-size:17px;font-weight:700;
  letter-spacing:.06em;line-height:1;color:currentColor}
.hdr__mark span{font-family:var(--f-sans);font-size:9.5px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;opacity:.62}

/* ============================================================
   ESG on the main page reads as a different room: newsprint ground,
   masthead rules, dark ink. It previews the page it links to.
   ============================================================ */
.esgroom{background:#F4F0E4;color:#1D1913}
.esgroom__mast{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:16px;border-bottom:2px solid #1D1913;margin-bottom:clamp(26px,3vw,44px)}
.esgroom__name{font-family:var(--f-disp);font-size:clamp(26px,3vw,44px);font-weight:500;letter-spacing:-.02em}
.esgroom__name em{font-style:italic;font-weight:400;color:#7B1A2B}
.esgroom__meta{font-family:var(--f-sans);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(29,25,19,.55);white-space:nowrap}
.esgroom .esgroom__head,.esgroom .lede{color:#1D1913}
.esgroom .lede{color:rgba(29,25,19,.78)}
.esgroom .esg{background:rgba(29,25,19,.2);border-block-color:rgba(29,25,19,.2)}
.esgroom .esg__i{background:#F4F0E4;color:#1D1913}
.esgroom .esg__i:hover{background:#EBE5D5}
.esgroom .esg__i h3{color:#1D1913}
.esgroom .esg__i p{color:rgba(29,25,19,.72)}
.esgroom .esg__tag{color:#7B1A2B}
.esgroom .esg__date{color:rgba(29,25,19,.45)}
.esgroom .esg__draft{border-color:rgba(29,25,19,.28);color:rgba(29,25,19,.6)}
.esgroom .arrow{color:#7B1A2B}

/* ---- Instagram: a link, not an empty grid ---- */
.iglink{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transition:padding-inline .45s var(--ease),background .45s var(--ease)}
.iglink:hover{padding-inline:18px;background:color-mix(in srgb,var(--accent) 9%,transparent)}
.iglink__at{font-family:var(--f-disp);font-size:clamp(22px,2.4vw,36px);font-weight:500;letter-spacing:-.02em}
.iglink__go{font-family:var(--f-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:10px}
.iglink__go i{width:20px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.iglink:hover .iglink__go i{width:40px}

/* hero is a display surface, not navigation */
.hero__panel{cursor:default;pointer-events:none}
.hero__panel::before{display:none}
/* brand pictures in the dropdown */
.mega__shot{display:block;aspect-ratio:16/10;overflow:hidden;background:#1E1109;margin-bottom:18px}
.mega__shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) brightness(.86);
  transition:transform 1.3s var(--ease),filter .5s var(--ease)}
.mega__i:hover .mega__shot img{transform:scale(1.05);filter:none}
.mega__i{padding:0 0 clamp(20px,2vw,28px)}
.mega__mark,.mega__cat,.mega__name,.mega__go{padding-inline:clamp(18px,1.8vw,24px)}
.mega__mark{height:74px}
.mega__mark img{height:74px}

/* Korean headings: modern sans, tighter — matches the rest of the site's voice */
:root{--f-head:"Cormorant Garamond","Pretendard Variable",Pretendard,sans-serif}
.h-xl,.h-lg,.h-md,.hero__title,.mast__lede h1,.press__head,.band h2,
.strow__name,.loc__name,.mega__name{font-family:var(--f-head);font-weight:700;letter-spacing:-.035em}
.quote blockquote,.band--quote blockquote{font-family:var(--f-head);font-weight:600;letter-spacing:-.03em}
.mast__name,.esgroom__name,.igp__at,.sec__num{font-family:"Cormorant Garamond",serif;font-weight:500}

/* brand hero mark reads cream over photography */
.bhero__logo{filter:brightness(0) invert(1);opacity:.96}

/* ============================================================
   INSTAGRAM — a profile, not a link
   ============================================================ */
.igp{border:1px solid var(--rule);background:var(--bg);max-width:760px}
.sec--raised .igp{background:var(--bg)}
.igp__head{display:flex;gap:clamp(16px,2vw,26px);padding:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--rule)}
.igp__av{flex:none;width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--deep);
  display:grid;place-items:center;padding:12px}
.igp__av img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.igp__at{display:block;font-size:clamp(17px,1.7vw,22px);letter-spacing:-.01em}
.igp__name{display:block;margin-top:4px;font-size:13px;font-weight:600}
.igp__bio{margin:8px 0 0;font-size:12.5px;line-height:1.7;color:var(--txt-2);max-width:46ch}
.igp__cta{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:var(--bg);padding:8px 18px;border-radius:6px;font-weight:600;
  transition:background .35s var(--ease)}
.igp__cta:hover{background:var(--mark);color:#fff}
.igp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;background:var(--rule)}
.igp__tile{aspect-ratio:1;overflow:hidden;background:var(--bg-2);display:block}
.igp__tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.igp__tile:hover img{transform:scale(1.06)}
.igp__all{display:flex;align-items:center;gap:10px;padding:16px clamp(20px,2.4vw,30px);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  border-top:1px solid var(--rule)}
.igp__all i{width:20px;height:1px;background:currentColor;transition:width .45s var(--ease)}
.igp__all:hover i{width:40px}

/* ============================================================
   ESG — carry the oxblood through the whole newsroom
   ============================================================ */
[data-brand="esg"]{--accent:#7B1A2B;--mark:#7B1A2B;--deep:#5C1420}
[data-brand="esg"] .mast__rule{background:#7B1A2B}
[data-brand="esg"] .mast__name em{color:#7B1A2B}
[data-brand="esg"] .mast__lede h1{color:#5C1420}
[data-brand="esg"] .press__date{color:#7B1A2B}
[data-brand="esg"] .press__tag{color:#7B1A2B;border-color:rgba(123,26,43,.4)}
[data-brand="esg"] .press__head{color:#1D1913}
[data-brand="esg"] .press__pending b{color:#7B1A2B}
[data-brand="esg"] .press__pending{border-color:rgba(123,26,43,.38)}
[data-brand="esg"] .press__i{border-bottom-color:rgba(123,26,43,.22)}
[data-brand="esg"] .press{border-top-color:#7B1A2B}
[data-brand="esg"] .btn--solid{background:#7B1A2B;border-color:#7B1A2B;color:#F4F0E4}
[data-brand="esg"] .btn--solid:hover{background:#5C1420;border-color:#5C1420}
[data-brand="esg"] .mast__lede p{column-rule:1px solid rgba(123,26,43,.3)}
.igp__stat{display:block;margin-top:6px;font-size:12px;color:var(--txt-2)}
.igp__stat b{font-weight:700;color:var(--txt)}
.igp__bio{white-space:pre-line}
.igp__link{display:inline-block;margin-top:8px;font-size:12px;color:var(--accent);word-break:break-all}
.strow__links{display:flex;flex-wrap:wrap;gap:24px;align-items:center}

/* ============================================================
   CHARACTERS — a picture wall, not a row of tiles
   The drawings are pieces of paper. Treat them as paper: pinned at
   slight angles, at different sizes, with real shadow, hung on a
   wall that has depth rather than one flat fill. This is the same
   move their own stores make — framed work at mixed sizes.
   ============================================================ */
.sec:has(.chars){position:relative;isolation:isolate}
.sec:has(.chars)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(255,228,186,.14) 0%, transparent 58%),
    radial-gradient(90% 80% at 88% 100%, rgba(0,0,0,.34) 0%, transparent 62%),
    linear-gradient(178deg, rgba(0,0,0,.16) 0%, transparent 26%, rgba(0,0,0,.22) 100%)}
/* picture rail */
.sec:has(.chars)::after{
  content:"";position:absolute;left:0;right:0;top:clamp(180px,20vw,260px);height:1px;z-index:-1;
  background:linear-gradient(to right,transparent,rgba(244,232,211,.22) 12%,rgba(244,232,211,.22) 88%,transparent)}

.chars{background:none;border:0;display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:center;gap:clamp(18px,3vw,58px);padding-top:clamp(24px,4vw,54px)}
.char{background:none!important;padding:0;text-align:center;position:relative;
  flex:0 0 auto;width:clamp(130px,13vw,190px)}
.char:hover{background:none!important}

/* the paper itself */
.char__i{aspect-ratio:auto;background:#FBF6EA;padding:10px 10px 34px;margin-bottom:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
             0 14px 26px -10px rgba(0,0,0,.55),
             0 3px 8px -3px rgba(0,0,0,.4);
  transition:transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s var(--ease)}
.char__i img{aspect-ratio:1;object-fit:cover;background:#fff}

/* pinned, each at its own angle and height — no two alike */
.char:nth-child(1) .char__i{transform:rotate(-3.2deg)}
.char:nth-child(2){margin-bottom:clamp(20px,3vw,44px);width:clamp(112px,11vw,158px)}
.char:nth-child(2) .char__i{transform:rotate(2.4deg)}
.char:nth-child(3){margin-bottom:clamp(34px,5vw,74px)}
.char:nth-child(3) .char__i{transform:rotate(-1.4deg)}
.char:nth-child(4){width:clamp(150px,15vw,214px)}
.char:nth-child(4) .char__i{transform:rotate(3deg)}
.char:nth-child(5){margin-bottom:clamp(16px,2.4vw,36px);width:clamp(140px,14vw,200px)}
.char:nth-child(5) .char__i{transform:rotate(-2.2deg)}
.char:nth-child(6){width:clamp(118px,12vw,166px)}
.char:nth-child(6) .char__i{transform:rotate(1.8deg)}
.char:hover .char__i{transform:rotate(0) translateY(-10px) scale(1.04);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,
             0 26px 44px -14px rgba(0,0,0,.62),
             0 6px 14px -4px rgba(0,0,0,.45)}
/* the pin */
.char__i::before{content:"";position:absolute;top:-7px;left:50%;width:11px;height:11px;
  border-radius:50%;background:radial-gradient(circle at 34% 30%, #F0DDBC, #8E6A3C 62%, #4A3319);
  box-shadow:0 3px 5px rgba(0,0,0,.5);transform:translateX(-50%);z-index:2}
.char__i{position:relative}
.char__i img{animation:none}   /* the paper moves, not the drawing inside it */

.char b{font-family:var(--f-head);font-size:clamp(14px,1.3vw,18px);font-weight:700;
  letter-spacing:-.02em;color:var(--txt)}
.char span{margin-top:5px;font-size:10px;letter-spacing:.14em;color:var(--txt-3)}
@media(prefers-reduced-motion:reduce){.char__i,.char:hover .char__i{transition:none}}
/* all six hang on one wall — no orphan on a second row */
.chars{flex-wrap:nowrap;gap:clamp(10px,1.6vw,30px)}
.char{width:auto;flex:1 1 0;min-width:0}
.char__i{padding:8px 8px 26px}
.char:nth-child(2),.char:nth-child(4),.char:nth-child(5),.char:nth-child(6){width:auto}
.char:nth-child(2){transform:translateY(-16px)}
.char:nth-child(3){transform:translateY(14px)}
.char:nth-child(5){transform:translateY(-10px)}
.char:nth-child(6){transform:translateY(8px)}
.char:nth-child(2),.char:nth-child(3),.char:nth-child(5),.char:nth-child(6){margin-bottom:0}

/* Layered's rooms are bright by design — don't grade them down to LBM's level */
[data-brand="cafe-layered"] .bhero__panel img{filter:saturate(1) brightness(.92) contrast(1.02)}
[data-brand="cafe-layered"] .bhero::after{background:linear-gradient(to bottom,
  rgba(30,16,6,.5),rgba(30,16,6,.06) 34%,rgba(30,16,6,.3) 64%,rgba(30,16,6,.88))}

/* ============================================================
   ONE HEADING VOICE
   Latin was resolving to Cormorant while Korean fell to Pretendard,
   so "LBM Corporation" and "브랜드가 아니라" read as two different
   websites. Headings are Pretendard in both scripts. Cormorant is
   reserved for the two places it means something: the Newsroom
   masthead and the Instagram handle.
   ============================================================ */
.h-xl,.h-lg,.h-md,.hero__title,.press__head,.band h2,.mast__lede h1,
.strow__name,.loc__name,.mega__name,.char b,.esgroom__head,
.quote blockquote,.band--quote blockquote{
  font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif!important;
  font-weight:700;letter-spacing:-.035em}
.quote blockquote,.band--quote blockquote{font-weight:600;letter-spacing:-.03em}
.mast__name,.esgroom__name,.igp__at{font-family:"Cormorant Garamond",serif!important;font-weight:500}


/* typography refinements */
.subnav{background:var(--bg)!important;backdrop-filter:none!important;
  border-bottom:1px solid var(--rule);border-top:0;box-shadow:none;top:74px!important;z-index:90}
.subnav__brand{display:flex;align-items:center;height:26px;margin-right:auto}
.subnav__brand img{height:26px;width:auto;max-width:190px;object-fit:contain;
  object-position:left center;filter:brightness(0) invert(1);opacity:.92}
.hdr{z-index:120}

/* ============================================================
   HEADER — scrolls away instead of following
   ============================================================ */
.hdr{position:absolute!important;background:transparent!important;
  backdrop-filter:none!important;border-bottom:0!important;height:74px!important}
.hdr::before{opacity:1!important}
.hdr.is-stuck{background:transparent!important;border-bottom-color:transparent!important}
.totop{display:none}
/* the brand bar takes over at the top once the header has gone */
.subnav{top:0!important}
body.flat{padding-top:0}
body.flat .hdr{position:absolute!important;background:transparent!important}
body.flat .hdr,body.flat .hdr a{color:var(--txt)}
.mega{top:74px}

/* ============================================================
   CAFÉ LAYERED — its own ground, warmer and more amber than LBM
   ============================================================ */
[data-brand="cafe-layered"]{--bg:#5C3312;--bg-2:#6B3E18;--paper:#FDF7E9;
  --accent:#E5A83A;--deep:#9A5B25;--mark:#E59B14;
  --txt:#FBF1DC;--txt-2:rgba(251,241,220,.8);--txt-3:rgba(251,241,220,.55);
  --rule:rgba(251,241,220,.18)}
html[data-brand="cafe-layered"]{background:#5C3312}

/* ============================================================
   CAFÉ HIGHWAIST — a light brand, so the photography and the
   quote are graded for a light ground instead of a dark one
   ============================================================ */
[data-brand="cafe-highwaist"] .bhero__panel img{filter:saturate(1.02) brightness(1) contrast(1.01)}
[data-brand="cafe-highwaist"] .bhero::after{
  background:linear-gradient(to bottom,rgba(58,44,34,.34) 0%,rgba(58,44,34,.04) 30%,
    rgba(253,246,234,.34) 66%,rgba(253,246,234,.9) 100%)}
[data-brand="cafe-highwaist"] .bhero__tag{color:#3A2C22;text-shadow:0 1px 12px rgba(253,246,234,.8)}
[data-brand="cafe-highwaist"] .bhero__logo{filter:none;opacity:1}
[data-brand="cafe-highwaist"] .hero__eyebrow{color:rgba(58,44,34,.7)}
[data-brand="cafe-highwaist"] .band--quote img{filter:saturate(1.02) brightness(1.02)}
[data-brand="cafe-highwaist"] .band--quote::after{
  background:radial-gradient(120% 78% at 50% 52%,rgba(253,246,234,.9) 0%,
    rgba(253,246,234,.76) 44%,rgba(253,246,234,.5) 72%,rgba(253,246,234,.34) 100%)}
[data-brand="cafe-highwaist"] .band--quote blockquote{color:#3A2C22}
[data-brand="cafe-highwaist"] .band--quote figcaption{color:rgba(58,44,34,.62)}
[data-brand="cafe-highwaist"] .band--quote figcaption b{color:#B07E7E}
[data-brand="cafe-highwaist"] .band img{filter:saturate(1) brightness(.92)}
[data-brand="cafe-highwaist"] .strow__hero img,
[data-brand="cafe-highwaist"] .gal img{filter:saturate(1.02) brightness(1.01)}
/* Highwaist runs light, so its marks and labels invert to dark */
[data-brand="cafe-highwaist"] .bhero__logo{filter:brightness(0) saturate(0) invert(16%) sepia(12%)
  saturate(700%) hue-rotate(345deg)!important;opacity:.92}
[data-brand="cafe-highwaist"] .subnav__brand img{filter:brightness(0) saturate(0) invert(16%)
  sepia(12%) saturate(700%) hue-rotate(345deg)!important;opacity:.9}
[data-brand="cafe-highwaist"] .hero__eyebrow{color:rgba(58,44,34,.62)}
[data-brand="cafe-highwaist"] .hero__eyebrow::before{background:rgba(58,44,34,.45)}
[data-brand="cafe-highwaist"] .hdr,[data-brand="cafe-highwaist"] .hdr a{color:#3A2C22}
[data-brand="cafe-highwaist"] .hdr::before{background:linear-gradient(to bottom,
  rgba(253,246,234,.75),rgba(253,246,234,0))}
[data-brand="cafe-highwaist"] .btn--solid{background:#B07E7E;border-color:#B07E7E;color:#FDF6EA}

/* ============================================================
   HERO CAPTIONS — present on the first frame, then gone
   ============================================================ */
.hero__cap{animation:capFade 7s ease forwards}
@keyframes capFade{0%,58%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__cap{animation:none;opacity:0}}

/* ============================================================
   STORE MAP CARD — hover a store's map link to see where it is
   Live Naver tiles need a Naver Cloud client ID bound to the
   deployed domain; until then this carries the destination detail
   and opens the real map.
   ============================================================ */
.strow__map-wrap{position:relative;display:inline-block}
.mapcard{position:absolute;left:0;bottom:calc(100% + 12px);z-index:70;width:290px;
  background:var(--paper);color:var(--pk);padding:16px 18px 14px;
  border:1px solid rgba(0,0,0,.14);box-shadow:0 18px 44px -16px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.strow__map-wrap:hover .mapcard,.strow__map-wrap:focus-within .mapcard{
  opacity:1;visibility:visible;transform:none}
.mapcard::after{content:"";position:absolute;left:26px;top:100%;
  border:7px solid transparent;border-top-color:var(--paper)}
.mapcard__pin{display:block;width:26px;height:26px;border-radius:50%;
  background:var(--mark);position:relative;margin-bottom:11px}
.mapcard__pin::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  border-radius:50%;background:var(--paper);transform:translate(-50%,-50%)}
.mapcard__name{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em;
  color:var(--pk);line-height:1.35}
.mapcard__addr{display:block;margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--pk-2)}
.mapcard__row{display:flex;gap:9px;margin-top:7px;font-size:12px;color:var(--pk-2);line-height:1.55}
.mapcard__row i{flex:0 0 32px;font-style:normal;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pk-3);padding-top:2px}
.mapcard__go{display:block;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.12);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mark);font-weight:600}
/* Highwaist runs light, so its card inverts */
[data-brand="cafe-highwaist"] .mapcard{background:#3A2C22;color:#FDF6EA;border-color:rgba(255,255,255,.16)}
[data-brand="cafe-highwaist"] .mapcard::after{border-top-color:#3A2C22}
[data-brand="cafe-highwaist"] .mapcard__name{color:#FDF6EA}
[data-brand="cafe-highwaist"] .mapcard__addr,[data-brand="cafe-highwaist"] .mapcard__row{color:rgba(253,246,234,.78)}
[data-brand="cafe-highwaist"] .mapcard__row i{color:rgba(253,246,234,.5)}
[data-brand="cafe-highwaist"] .mapcard__go{color:#DDAFAF;border-top-color:rgba(255,255,255,.16)}

/* map preview inside the hover card */
.mapcard{width:320px;padding:0;overflow:hidden}
.mapcard__map{display:block;position:relative;height:150px;overflow:hidden;background:#E8E0D2}
.mapcard__map img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.02)}
.mapcard__map::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.14))}
.mapcard__pin{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-24px 0 0 -11px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--mark);z-index:2;
  box-shadow:0 4px 10px rgba(0,0,0,.45)}
.mapcard__pin::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-radius:50%;background:var(--paper);transform:translate(-50%,-50%)}
.mapcard__body{padding:15px 18px 14px}
[data-brand="cafe-highwaist"] .mapcard__pin::after{background:#3A2C22}

/* ---- Newsroom: per-article labels ------------------------------------
   One shape, five treatments. Filled reads official, outlined reads
   informational. No second accent colour is introduced. */
.plabel{display:inline-block;font-size:9.5px;letter-spacing:.18em;
  padding:5px 10px 4px;border:1px solid currentColor;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.plabel--notice{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.plabel--esg{background:var(--txt);border-color:var(--txt);color:var(--bg)}
.plabel--store{color:var(--accent)}
.plabel--press{color:var(--txt)}
.plabel--brand{color:var(--txt-2)}

/* ---- Newsroom: index -------------------------------------------------- */
.ix{margin-top:clamp(26px,3vw,44px)}
.ix__t8{width:100%;border-collapse:collapse;table-layout:fixed}
.ix__t8 th{font-size:10px;letter-spacing:.14em;color:var(--txt-2);font-weight:500;
  text-align:left;padding:12px 10px;border-top:2px solid var(--txt);
  border-bottom:1px solid var(--rule);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ix__t8 td{padding:17px 10px;border-bottom:1px solid var(--rule);font-size:14px;
  vertical-align:middle}
.ix__t8 th:first-child,.ix__t8 td:first-child{padding-left:0;width:64px}
.ix__t8 th:last-child,.ix__t8 td:last-child{padding-right:0;text-align:right;width:112px}
.ix__t8 th:nth-child(2),.ix__t8 td:nth-child(2){width:118px}
.ix__no,.ix__d{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--txt-2)}
.ix__d{white-space:nowrap}
.ix__t{letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ix__t a{color:inherit;text-decoration:none}
.ix__t8 tbody tr{transition:background .25s var(--ease);cursor:pointer}
.ix__t8 tbody tr:hover{background:var(--bg-2)}
.ix__t8 tbody tr:hover .ix__t a{color:var(--accent)}
.ix__wait{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--accent);
  border:1px solid currentColor;padding:3px 6px 2px;margin-left:10px;white-space:nowrap}
.ix__none{color:var(--txt-2);text-align:center;padding:44px 0}

/* ---- Newsroom: photographs ------------------------------------------- */
.gal2{margin-top:clamp(46px,5.5vw,84px);padding-top:clamp(30px,3.4vw,48px);
  border-top:2px solid var(--txt)}
.gal2__h{font-family:var(--f-sans);font-weight:600;font-size:clamp(17px,1.7vw,21px);
  letter-spacing:-.02em;margin:0 0 clamp(22px,2.4vw,32px)}
.gal2__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:clamp(22px,2.4vw,34px)}
.gal2__i{display:block;text-decoration:none;color:inherit}
.gal2__shot{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);
  border:1px solid var(--rule)}
.gal2__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.gal2__i:hover .gal2__shot img{transform:scale(1.05)}
.gal2__set{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  font-family:var(--f-disp);font-size:19px;color:var(--txt-2);opacity:.45}
.gal2__cat{display:block;margin-top:13px;font-family:ui-monospace,Menlo,monospace;
  font-size:10px;letter-spacing:.16em;color:var(--accent)}
.gal2__t{display:block;margin-top:7px;font-size:14px;font-weight:600;
  letter-spacing:-.02em;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gal2__d{display:block;margin-top:7px;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:var(--txt-2)}
.gal2__i:hover .gal2__t{color:var(--accent)}

/* ---- Article page ---------------------------------------------------- */
.wrap--art{max-width:820px}
[data-brand="esg"] .wrap--art{padding-top:104px}
.art__back{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:11px;
  letter-spacing:.14em;color:var(--txt-2);text-decoration:none;padding-bottom:26px}
.art__back:hover{color:var(--accent)}
.art{border-top:2px solid var(--txt);padding-top:clamp(26px,3vw,40px)}
.art__meta{display:flex;align-items:center;gap:14px}
.art__date{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--txt-2)}
.art__head{font-family:var(--f-sans);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(27px,3.2vw,42px);line-height:1.28;margin:18px 0 0}
.art__shot{margin:clamp(28px,3vw,42px) 0 0;overflow:hidden}
.art__shot img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.art__body{margin-top:clamp(26px,3vw,38px)}
.art__body p{font-size:15px;line-height:2.05;color:var(--txt-2);margin:0 0 1.2em}
.art__wait{margin-top:clamp(26px,3vw,38px);border:1px dashed var(--rule);
  padding:20px 22px;font-size:13.5px;line-height:1.9;color:var(--txt-2)}
.art__wait b{color:var(--accent);font-weight:600;margin-right:6px}
.art__src{margin-top:22px;font-size:12.5px;color:var(--txt-2);opacity:.85}
.art__nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:clamp(38px,4vw,60px);border-top:1px solid var(--rule);padding-top:22px}
.art__near{text-decoration:none;color:inherit;padding:16px 18px;background:var(--bg-2)}
.art__near:last-child{text-align:right}
.art__near span{display:block;font-family:ui-monospace,Menlo,monospace;font-size:10px;
  letter-spacing:.16em;color:var(--txt-2)}
.art__near b{display:block;margin-top:7px;font-size:13.5px;font-weight:600;
  letter-spacing:-.02em;line-height:1.5}
.art__near:hover b{color:var(--accent)}

/* ---- Map card: the whole preview is the link -------------------------
   tabindex=-1 keeps it out of the tab order; the 네이버 지도 text link
   beside it remains the keyboard path to the same place. */
a.mapcard{display:block;text-decoration:none;cursor:pointer}
a.mapcard:hover .mapcard__map img{transform:scale(1.06)}
.mapcard__map img{transition:transform .9s var(--ease)}

/* ---- Brands panel: the cards ARE the panel --------------------------
   No apron: the surrounding surface, side gutters and vertical padding
   are gone. The dropdown is four glass cards edge to edge, each carrying
   its own blur. */
.mega{padding:0;background:transparent;border-top:0;border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.mega .wrap{max-width:none;padding:0;margin:0}
.mega__in{border:0;gap:0;background:transparent}
.mega__i{background:color-mix(in srgb, var(--bg-2) 55%, transparent);
  backdrop-filter:blur(26px) saturate(1.15);
  -webkit-backdrop-filter:blur(26px) saturate(1.15);
  border-right:1px solid var(--rule)}
.mega__i:last-child{border-right:0}
.mega__i:hover{background:color-mix(in srgb, var(--deep) 62%, transparent)}
.mega__note{display:none}
@media (prefers-reduced-transparency:reduce){
  .mega__i{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ---- Newsroom: section headers (Korean title, English shoulder) ------ */
.sechd{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  border-bottom:2px solid var(--txt);padding-bottom:11px;
  margin:clamp(56px,6vw,92px) 0 clamp(26px,2.8vw,38px)}
.sechd__t{font-family:var(--f-sans);font-weight:600;font-size:clamp(16px,1.6vw,19px);
  letter-spacing:-.02em;margin:0}
.sechd__n{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.2em;
  color:var(--txt-2);text-transform:uppercase}
.latest .sechd{margin-top:clamp(34px,3.6vw,52px)}
.ix .sechd{margin-bottom:0}
.gal2{border-top:0;padding-top:0}
.gal2 .sechd{margin-bottom:clamp(22px,2.4vw,32px)}

/* ---- Newsroom: featured lead ----------------------------------------- */
.lead{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  gap:clamp(28px,3.2vw,52px);align-items:center;text-decoration:none;color:inherit}
.lead__shot{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.lead__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.lead:hover .lead__shot img{transform:scale(1.04)}
.lead__cat{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
  letter-spacing:.1em;color:var(--accent)}
.lead__head{font-family:var(--f-sans);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(26px,3vw,42px);line-height:1.26;margin:14px 0 0;max-width:16ch}
.lead__date{display:block;margin-top:22px;font-family:ui-monospace,Menlo,monospace;
  font-size:12.5px;color:var(--txt-2)}
.lead:hover .lead__head{color:var(--accent)}

/* ---- Newsroom: filter bar (33: air) ---------------------------------- */
.ix__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:4px 0 15px}
.ix__count{font-size:12.5px;color:var(--txt-2);
  font-family:ui-monospace,Menlo,monospace}
.ix__count b{color:var(--accent);font-weight:600}
.ix__filter{font-size:12.5px;color:var(--txt-2);display:flex;align-items:center;gap:9px;
  font-family:ui-monospace,Menlo,monospace}
.ix__filter select{font:inherit;font-size:13px;padding:7px 11px;color:var(--txt);
  background:var(--bg);border:1px solid var(--rule);border-radius:2px}
.ix__t8 td{padding:19px 12px}
.ix__t8 th{padding:13px 12px}
.ix__t8 tr[hidden]{display:none}

/* ---- Instagram: live posts + centering (50, 51) ---------------------- */
a.igp__tile{position:relative;text-decoration:none;cursor:pointer}
a.igp__tile::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);
  opacity:0;transition:opacity .45s var(--ease)}
a.igp__tile:hover::after{opacity:1}
.igp__tile.is-pin::before,.igp__tile.is-vid::before{
  content:"";position:absolute;top:9px;right:9px;width:17px;height:17px;z-index:2;
  background:rgba(255,255,255,.94);border-radius:50%;
  box-shadow:0 1px 5px rgba(0,0,0,.3);
  background-repeat:no-repeat;background-position:50%;background-size:10px}
.igp__tile.is-pin::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'><path d='M14 2l8 8-3 1-3.5 3.5L15 20l-2 2-4.5-4.5L3 23l-1-1 5.5-5.5L3 12l2-2 5.5.5L14 7l1-3z'/></svg>")}
.igp__tile.is-vid::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'><path d='M8 5v14l11-7z'/></svg>")}
.igp{margin-left:auto;margin-right:auto}
#feed .btns{justify-content:center}

/* ---- First view on a brand page: hero + subnav fill the screen -------
   The hero held 80svh, so a strip of the next section peeked below the
   subnav on landing. Hero now takes exactly the viewport minus the
   subnav (56px + 1px rule), so the first view is the photograph and the
   brand bar, nothing else. All four brands. */
.bhero{height:calc(100svh - 57px);min-height:560px}

/* ---- Separation between parts, one mechanism -------------------------
   A hairline at every section boundary, so parts are marked even where
   the ground grades. The panels' own edge lines retire in favour of
   this single system. The newsroom teaser keeps its clean cut. */
body:not(.flat) section + section{border-top:1px solid var(--rule)}
body:not(.flat) section + .esgroom{border-top:0}
.sec--raised::before,.sec--raised::after{content:none}

/* ---- café Layered: the small bar mark, readable ----------------------
   The script logotype dies at 26px. Larger on Layered's own bar only. */
[data-brand="cafe-layered"] .subnav__brand img{height:42px;max-width:260px}


/* ================================================================
   FINAL COLOUR SYSTEM v2 -- "stage and gallery", reviewed
   Fixes from adversarial review: gallery quartet re-spaced to min
   pairwise dE 5.6; LBM brand darks graded bordeaux-black so the two
   LBM pages differ on two axes; stage<->gallery seams are hard cuts
   with hairlines, not fades. Newsroom cut untouched (15.8:1).
   ================================================================ */
:root{--roomramp:clamp(160px,18vw,280px)}

/* -- stages: quiet whisper cast on each page's own ground -- */
body:not(.flat){background:
  linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 8%, transparent) 0%,
    transparent 40%,
    color-mix(in srgb, #000 12%, transparent) 100%),
  linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 88%, #000) 0%,
    var(--bg) 22%,
    var(--bg) 78%,
    color-mix(in srgb, var(--bg) 84%, #000) 100%)}
/* LBM brand page: bordeaux-black ground grade (second axis vs main) */
[data-brand="london-bagel-museum"] body:not(:has(.hero)){background:
  linear-gradient(90deg,
    color-mix(in srgb, var(--mark) 10%, transparent) 0%,
    transparent 42%,
    color-mix(in srgb, #000 12%, transparent) 100%),
  linear-gradient(180deg,
    #2E1310 0%,
    var(--bg) 24%,
    var(--bg) 76%,
    #2A1112 100%)}

/* -- galleries: four distinct paper temperatures, hard-edged -- */
.sec--caramel,.sec--umber,
[data-brand="cafe-layered"] #space,
[data-brand="artist-bakery"] #space{color:var(--pk)}
.sec--caramel .sec__body,.sec--umber .sec__body,
[data-brand="cafe-layered"] #space .sec__body,
[data-brand="artist-bakery"] #space .sec__body{color:var(--pk)}
.sec--caramel .eyebrow,.sec--umber .eyebrow,
[data-brand="cafe-layered"] #space .eyebrow{color:var(--mark)}
.sec--caramel .lede,.sec--umber .lede,
[data-brand="cafe-layered"] #space .lede,
[data-brand="artist-bakery"] #space .lede{color:var(--pk-2)}
.sec--caramel .em{color:var(--mark)}
.sec--caramel,.sec--umber,
[data-brand="cafe-layered"] #space{border-top:1px solid #C9BCA6;border-bottom:1px solid #C9BCA6}
[data-brand="artist-bakery"] #space{border-top:1px solid #C9CBC6;border-bottom:1px solid #C9CBC6}

/* MAIN: rosy linen gallery, tobacco stage, stark paper cut */
.sec--caramel{background:linear-gradient(180deg,
  #ECDCD0 0, #F1E3D8 46%, #E6D5C6 100%)}
.sec--wine{background:linear-gradient(180deg,
  #241208 0, #2E1809 46%, #241208 100%);color:var(--txt)}
.sec--wine .sec__body{color:var(--txt)}
.sec--wine .eyebrow{color:var(--accent)}
.sec--wine .lede{color:var(--txt-2)}
.sec--wine .em{color:var(--accent)}

/* LBM BRAND: toasted amber-crust gallery, bordeaux-black stage */
.sec--umber{background:linear-gradient(180deg,
  #EBD8B8 0, #F0E0C4 50%, #E4CFA9 100%)}
.sec--russet{background:linear-gradient(180deg,
  #2A1112 0, #311316 52%, #26100E 100%);color:var(--txt)}
.sec--russet .sec__body{color:var(--txt)}
.sec--russet .eyebrow{color:var(--accent)}
.sec--russet .lede{color:var(--txt-2)}

/* LAYERED: grey-oat gallery, cocoa stage */
[data-brand="cafe-layered"] #space{background:linear-gradient(180deg,
  #E8E3D0 0, #EDE8D6 50%, #E1DBC5 100%)}
[data-brand="cafe-layered"] #space .eyebrow{color:#9A5B25}
[data-brand="cafe-layered"] #stores{background:linear-gradient(180deg,
  #2B1408 0, #33190A 50%, #2B1408 100%);color:#FBF1DC}
[data-brand="cafe-layered"] #stores .sec__body{color:#FBF1DC}

/* ARTIST BAKERY: porcelain gallery, ink stage (blue chroma clamped) */
[data-brand="artist-bakery"] #space{background:linear-gradient(180deg,
  #EBEBE7 0, #F1F1EE 50%, #E3E3DE 100%)}
[data-brand="artist-bakery"] #space .eyebrow{color:#3D4C7C}
[data-brand="artist-bakery"] #space,
[data-brand="artist-bakery"] #space .sec__body{color:#1A1A1E}
[data-brand="artist-bakery"] #stores{background:linear-gradient(180deg,
  #0B0B0E 0, #191C26 52%, #0B0B0E 100%);color:#fff}
/* Gallery hairlines must beat the generic section rule. */
body:not(.flat) section + section.sec--caramel,
body:not(.flat) section + section.sec--umber,
[data-brand="cafe-layered"] body:not(.flat) section + section#space{
  border-top:1px solid #C9BCA6}
[data-brand="artist-bakery"] body:not(.flat) section + section#space{
  border-top:1px solid #C9CBC6}
/* highwaist is FROZEN: reproduce its approved ground verbatim, immune to
   the final-system generic above. */
[data-brand="cafe-highwaist"] body:not(.flat){background:
  linear-gradient(90deg,
    color-mix(in srgb, var(--deep) 18%, transparent) 0%,
    transparent 40%,
    color-mix(in srgb, #000 16%, transparent) 100%),
  linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 88%, var(--bg-2)) 0%,
    var(--bg) 20%,
    color-mix(in srgb, var(--bg) 78%, var(--deep)) 55%,
    color-mix(in srgb, var(--bg) 62%, var(--deep)) 80%,
    color-mix(in srgb, var(--bg) 86%, #000) 100%)}

/* ================================================================
   EDITORIAL LAYER
   The banding paradigm is retired entirely. The site becomes what
   its two loved pages already are: light. One warm-paper family
   across pages (the Aesop model), photography as the only rich
   colour, dark reserved for cinematic islands: heroes, photo bands,
   the burgundy newsroom block, the footer. Identity per brand comes
   from accent + photography, not painted grounds.
   ================================================================ */

/* -- token inversion (highwaist already lives here; untouched) -- */

[data-brand="cafe-layered"]{
  --bg:#FBF6ED;--bg-2:#F2EADA;
  --txt:#301D0C;--txt-2:rgba(48,29,12,.78);--txt-3:rgba(48,29,12,.52);
  --rule:rgba(48,29,12,.16)}


/* the two LBM pages diverge by accent register + ground toast */

/* -- retire the banding classes completely -- */
.sec--caramel,.sec--wine,.sec--umber,.sec--russet,
[data-brand="cafe-layered"] #space,[data-brand="cafe-layered"] #stores,
[data-brand="artist-bakery"] #space,[data-brand="artist-bakery"] #stores{
  background:none;border-top:0;border-bottom:0;color:inherit}
.sec--caramel .sec__body,.sec--wine .sec__body,.sec--umber .sec__body,.sec--russet .sec__body,
[data-brand="cafe-layered"] #space .sec__body,[data-brand="cafe-layered"] #stores .sec__body,
[data-brand="artist-bakery"] #space .sec__body{color:inherit}
.sec--caramel .eyebrow,.sec--umber .eyebrow{color:var(--mark)}
.sec--caramel .lede,.sec--wine .lede,.sec--umber .lede,.sec--russet .lede{color:var(--txt-2)}
.sec--wine .sec__body,.sec--russet .sec__body{color:inherit}
.sec--wine .eyebrow,.sec--russet .eyebrow{color:var(--mark)}
.sec--caramel .em,.sec--wine .em{color:var(--mark)}

/* -- quiet paper ground with the faintest warm cast -- */
body:not(.flat){background:
  linear-gradient(90deg,
    color-mix(in srgb, var(--deep) 5%, transparent) 0%,
    transparent 42%,
    color-mix(in srgb, #000 4%, transparent) 100%),
  linear-gradient(180deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 96%, var(--deep)) 55%,
    color-mix(in srgb, var(--bg) 93%, #000) 100%)}

/* -- dark islands keep their light type -- */
.band__in{color:#F6EFDF}
.hdr{color:#F7F0E0}
[data-brand] .hdr.is-stuck{color:var(--txt)}
[data-brand] .hdr.is-stuck .hdr__mark span{color:var(--txt-3)}

/* bar logos read dark on the light bar (highwaist has its own rule) */
[data-brand="cafe-layered"] .subnav__brand img{
  filter:brightness(0) saturate(0) invert(12%);opacity:.9}

/* polaroids need shadow on paper */
.char__i{box-shadow:0 14px 30px -14px rgba(46,27,16,.35)}



/* Artist Bakery: the ink stage returns -- darker with the blue tint, now
   sitting on the cream base. */

/* ---- LBM brand page: bourbon and wine, faded ------------------------
   Not one brown: two washed stains breathe over the espresso, bourbon
   from the upper left, wine from the right, both faded out. */
[data-brand="london-bagel-museum"] body:not(:has(.hero)){background:
  linear-gradient(115deg,
    color-mix(in srgb, var(--accent) 22%, transparent) 0%,
    transparent 38%),
  linear-gradient(268deg,
    color-mix(in srgb, var(--mark) 20%, transparent) 0%,
    transparent 44%),
  linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 80%, #000) 0%,
    var(--bg) 18%,
    color-mix(in srgb, var(--bg) 84%, var(--deep)) 50%,
    color-mix(in srgb, var(--bg) 82%, var(--mark)) 78%,
    color-mix(in srgb, var(--bg) 76%, #000) 100%)}

/* ---- Point colours shine on the numerals ----------------------------
   The small counting voice of the site -- store numbers, row numerals,
   counts -- carries each brand's accent at full strength. */
.strow__n{color:var(--accent);font-weight:700}
.subnav a.is-store{color:var(--accent);font-weight:600}
.bcard__go{color:var(--accent)}
.mega__go{color:var(--accent)}

/* ================================================================
   BRAND COLOUR LAYER
   Main: dark terracotta flow, slamming into the ivory newsroom.
   LBM brand: bourbon-and-wine, strengthened until the washes
   actually read. Layered: light with butter-and-blush flows.
   AB: uniform cream with a blue tint. highwaist frozen.
   Newsroom untouched. Numerals carry the point colour.
   ================================================================ */

/* MAIN PAGE -- the chosen flow, visible: espresso -> clay -> burnt
   apricot -> sienna -> darkest umber, then the stark ivory cut. */
html[data-brand="london-bagel-museum"]:has(.hero) body{background:
  linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 14%, transparent) 0%,
    transparent 42%,
    color-mix(in srgb, #000 22%, transparent) 100%),
  linear-gradient(180deg,
    #3A1D0E 0%,
    #542B15 16%,
    #8A4527 38%,
    #9A5730 50%,
    #7A3B20 64%,
    #4A2413 84%,
    #2E1409 100%)}

/* LBM BRAND -- bourbon and wine, faded but present. */
[data-brand="london-bagel-museum"] body:not(:has(.hero)){background:
  linear-gradient(115deg,
    color-mix(in srgb, var(--accent) 34%, transparent) 0%,
    transparent 42%),
  linear-gradient(268deg,
    color-mix(in srgb, var(--mark) 30%, transparent) 0%,
    transparent 48%),
  linear-gradient(180deg,
    #40200F 0%,
    var(--bg) 16%,
    color-mix(in srgb, var(--bg) 62%, var(--accent)) 44%,
    color-mix(in srgb, var(--bg) 64%, var(--mark)) 72%,
    #331808 100%)}

/* LAYERED -- light, with butter and blush moving through the cream. */
[data-brand="cafe-layered"] body:not(.flat){background:
  linear-gradient(105deg,
    color-mix(in srgb, #E5A83A 16%, transparent) 0%,
    transparent 40%),
  linear-gradient(255deg,
    color-mix(in srgb, #C96A5A 10%, transparent) 0%,
    transparent 44%),
  linear-gradient(180deg,
    #FBF6ED 0%,
    #F6ECD8 34%,
    #FBF6ED 56%,
    #F2E6CC 82%,
    #F7F1E4 100%)}

/* glass panels ride the flows -- layering, not paint */
.sec--raised{background:color-mix(in srgb, var(--bg-2) 55%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (prefers-reduced-transparency:reduce){
  .sec--raised{background:var(--bg-2);backdrop-filter:none;-webkit-backdrop-filter:none}}



/* Artist Bakery: cream ground */
[data-brand="artist-bakery"]{
  --bg:#F8F4EB;--bg-2:#EFE9DB;
  --txt:#16161A;--txt-2:rgba(22,22,26,.78);--txt-3:rgba(22,22,26,.52);
  --rule:rgba(22,22,26,.15);--accent:#46578C}
[data-brand="artist-bakery"] body:not(.flat){background:
  linear-gradient(112deg,
    color-mix(in srgb, #8FA2D4 14%, transparent) 0%,
    transparent 40%),
  linear-gradient(180deg,
    #F8F4EB 0%,
    #EFEEE9 36%,
    #F8F4EB 58%,
    #EAEAE4 84%,
    #F4F1E8 100%)}
[data-brand="artist-bakery"] #space,
[data-brand="artist-bakery"] #space .sec__body{color:#16161A}
[data-brand="artist-bakery"] #space .lede{color:rgba(22,22,26,.78)}
[data-brand="artist-bakery"] .strow__n,
[data-brand="artist-bakery"] .subnav a.is-store{color:#46578C}
[data-brand="artist-bakery"] .subnav__brand img{filter:brightness(0) saturate(0) invert(12%);opacity:.9}

/* ---- Press article anatomy (ksilbo reference) ------------------------ */
.art .plabel{margin-bottom:16px}
.art__head{margin-top:14px}
.art__metaline{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;
  padding:13px 0;border-top:2px solid var(--txt);border-bottom:1px solid var(--rule)}
.art__meta-i{font-size:12.5px;color:var(--txt-2);
  font-family:ui-monospace,Menlo,monospace}
.art__meta-i i{font-style:normal;font-size:10px;letter-spacing:.14em;
  color:var(--txt-3);margin-right:8px}
.art__shot figcaption{margin-top:10px;font-size:12px;color:var(--txt-3);
  line-height:1.6}
.art__byline{margin-top:clamp(30px,3.4vw,44px);padding-top:18px;
  border-top:1px solid var(--rule);display:flex;gap:14px;align-items:baseline}
.art__byline b{font-size:14px}
.art__byline a{font-size:12.5px;color:var(--txt-2);text-decoration:none}
.art__byline a:hover{color:var(--accent)}
.art__copy{margin-top:10px;font-size:11.5px;color:var(--txt-3)}
.art__relhead{margin-top:clamp(34px,4vw,54px);padding-bottom:10px;
  border-bottom:2px solid var(--txt);font-weight:600;font-size:15px}
.art__nav{border-top:0;margin-top:14px;padding-top:0}

/* ================================================================
   COLOUR SYSTEM — LANTERN LIGHT
   Derived by measurement from the site's own photography and the
   warm-bakery aesthetic boards: a glowing cream canvas, an amber
   bloom like an open oven door, one deep-roast band holding the
   characters, and the ivory newsroom cutting against that roast.
   Main = lantern noon. LBM brand page = lantern dusk (deeper amber,
   never mirrors main). Layered/AB keep their light schemes;
   highwaist frozen; newsroom untouched.
   ================================================================ */
html[data-brand="london-bagel-museum"]:has(.hero){
  --bg:#FBF0DA;--bg-2:#F3E3C2;
  --txt:#3C2315;--txt-2:rgba(60,35,21,.80);--txt-3:rgba(60,35,21,.70);
  --rule:rgba(60,35,21,.18);--accent:#8A5B3C}
html[data-brand="london-bagel-museum"]:has(.hero) body{background:
  linear-gradient(115deg,
    color-mix(in srgb, #E4B15E 34%, transparent) 0%,
    transparent 46%),
  linear-gradient(180deg,
    #FBF0DA 0%,
    #F6E4C4 30%,
    #EFD3A8 50%,
    #F6E4C4 64%,
    #FBF0DA 100%)}
/* the roast band: characters live in the oven-dark */
html[data-brand="london-bagel-museum"]:has(.hero) #faces{
  background:linear-gradient(180deg,#4A2B18 0,#2B1810 40%,#241309 100%);
  color:#F6E8D2}
html[data-brand="london-bagel-museum"]:has(.hero) #faces .sec__body{color:#F6E8D2}
html[data-brand="london-bagel-museum"]:has(.hero) #faces .lede{color:rgba(246,232,210,.78)}
html[data-brand="london-bagel-museum"]:has(.hero) #faces .eyebrow{color:#E4B15E}

/* LBM brand page: lantern dusk */
html[data-brand="london-bagel-museum"]:not(:has(.hero)){
  --bg:#F2DFB9;--bg-2:#E9D0A0;
  --txt:#3A200F;--txt-2:rgba(58,32,15,.80);--txt-3:rgba(58,32,15,.55);
  --rule:rgba(58,32,15,.18);--accent:#7E4A1F}
[data-brand="london-bagel-museum"] body:not(:has(.hero)){background:
  linear-gradient(115deg,
    color-mix(in srgb, #C88C32 40%, transparent) 0%,
    transparent 48%),
  linear-gradient(180deg,
    #F2DFB9 0%,
    #E9CD97 34%,
    #E2C084 52%,
    #EBD3A4 72%,
    #F2DFB9 100%)}
/* dusk: the stores section is the roast room */
[data-brand="london-bagel-museum"] #stores:not(.sec--raised){
  background:linear-gradient(180deg,#43260F 0,#2B1810 45%,#241309 100%);
  color:#F6E8D2}
[data-brand="london-bagel-museum"] #stores .sec__body{color:#F6E8D2}
[data-brand="london-bagel-museum"] #stores .lede{color:rgba(246,232,210,.78)}
[data-brand="london-bagel-museum"] #stores .eyebrow{color:#E4B15E}
[data-brand="london-bagel-museum"] #stores .strow__n{color:#E4B15E}
/* bar logo dark on the light dusk bar */
[data-brand="london-bagel-museum"] .subnav__brand img{
  filter:brightness(0) saturate(0) invert(14%);opacity:.9}

/* ---- Final polish pass ----------------------------------------------
   Layered's gold numerals measured 2.0:1 on its cream -- deep gold now,
   same voice, legible. Headings balance their line breaks; long prose
   avoids orphans. */
[data-brand="cafe-layered"] .strow__n,
[data-brand="cafe-layered"] .subnav a.is-store,
[data-brand="cafe-layered"] .bcard__go{color:#9A6210}
h1,h2,h3,.hero__title,.art__head{text-wrap:balance}
.art__body p,.lede,.press__body{text-wrap:pretty}
/* hero fades in over its own dark stage, not the lantern cream */
.hero{background:#20150C}

/* ---- Main page ground ----------------------------------------------
   The company panel alone runs a darker ground.
   The lantern glow now falls on the tabletop; the roast band and the
   ivory newsroom cut stay exactly as approved. Main page only. */
html[data-brand="london-bagel-museum"]:has(.hero){
  --bg:#3A2412;--bg-2:#4A2F17;
  --txt:#F4E8D3;--txt-2:rgba(244,232,211,.82);--txt-3:rgba(244,232,211,.74);
  --rule:rgba(244,232,211,.20);--accent:#C08B4A}
html[data-brand="london-bagel-museum"]:has(.hero) body{background:
  linear-gradient(115deg,
    color-mix(in srgb, #E4B15E 22%, transparent) 0%,
    transparent 46%),
  linear-gradient(180deg,
    #241509 0%,
    #3A2412 30%,
    #4E3118 50%,
    #3A2412 64%,
    #201207 100%)}

/* ---- Company panel and brand-page ground ----------------------------
   The dark panel belongs to the LBM Corporation panel alone. The
   rest of the main page returns to lantern cream. The brand page drops
   its dusk cream entirely for a wine ground. */
/* main page: lantern tokens and ground restored */
html[data-brand="london-bagel-museum"]:has(.hero){
  --bg:#FBF0DA;--bg-2:#F3E3C2;
  --txt:#3C2315;--txt-2:rgba(60,35,21,.80);--txt-3:rgba(60,35,21,.70);
  --rule:rgba(60,35,21,.18);--accent:#8A5B3C}
html[data-brand="london-bagel-museum"]:has(.hero) body{background:
  linear-gradient(115deg,
    color-mix(in srgb, #E4B15E 34%, transparent) 0%,
    transparent 46%),
  linear-gradient(180deg,
    #FBF0DA 0%,
    #F6E4C4 30%,
    #EFD3A8 50%,
    #F6E4C4 64%,
    #FBF0DA 100%)}
/* the resin tabletop: #company only */
html[data-brand="london-bagel-museum"]:has(.hero) #company{
  background:linear-gradient(115deg,
    color-mix(in srgb, #E4B15E 18%, transparent) 0%,
    transparent 52%),
  linear-gradient(180deg,
    #241509 0%,
    #3A2412 26%,
    #4E3118 52%,
    #3A2412 78%,
    #241509 100%);
  color:#F4E8D3}
html[data-brand="london-bagel-museum"]:has(.hero) #company .sec__body{color:#F4E8D3}
html[data-brand="london-bagel-museum"]:has(.hero) #company .lede{color:rgba(244,232,211,.82)}
html[data-brand="london-bagel-museum"]:has(.hero) #company .eyebrow{color:#E4B15E}

/* LBM brand page: wine ground, cream retired */
html[data-brand="london-bagel-museum"]:not(:has(.hero)){
  --bg:#3F131B;--bg-2:#4E1822;
  --txt:#F4E8D3;--txt-2:rgba(244,232,211,.82);--txt-3:rgba(244,232,211,.74);
  --rule:rgba(244,232,211,.20);--accent:#D3A15E}
[data-brand="london-bagel-museum"] body:not(:has(.hero)){background:
  linear-gradient(115deg,
    color-mix(in srgb, #D3A15E 16%, transparent) 0%,
    transparent 44%),
  linear-gradient(180deg,
    #260C10 0%,
    #3F131B 28%,
    #561B26 52%,
    #3F131B 72%,
    #200A0D 100%)}
/* the stores room deepens into the wine dark */
[data-brand="london-bagel-museum"] #stores:not(.x){
  background:linear-gradient(180deg,#43141D 0,#380F1A 50%,#2F0C15 100%);
  color:#F4E8D3}
[data-brand="london-bagel-museum"] #stores .strow__n{color:#D3A15E}
/* bar logo back to white on the wine bar */
[data-brand="london-bagel-museum"] .subnav__brand img{
  filter:brightness(0) invert(1);opacity:.92}

/* ---- Company panel: chestnut; characters band ------------------------
   Chestnut: unambiguously brown, cream text
   >=8:1 everywhere, one register between panel and band so the page
   steps anchor-dark -> band-mid. Main page only. */
html[data-brand="london-bagel-museum"]:has(.hero) #company{
  background:linear-gradient(115deg,
    color-mix(in srgb, #E4B15E 16%, transparent) 0%,
    transparent 52%),
  linear-gradient(180deg,
    #4A2C14 0%,
    #66401F 52%,
    #4A2C14 100%);
  color:#F4E8D3}
html[data-brand="london-bagel-museum"]:has(.hero) #faces{
  background:linear-gradient(180deg,
    #55321A 0%,
    #703F1C 50%,
    #55321A 100%);
  color:#FBF0DA}
html[data-brand="london-bagel-museum"]:has(.hero) #faces .sec__body{color:#FBF0DA}
html[data-brand="london-bagel-museum"]:has(.hero) #faces .lede{color:rgba(251,240,218,.82)}
html[data-brand="london-bagel-museum"]:has(.hero) #faces .eyebrow{color:#E4B15E}
html[data-brand="london-bagel-museum"]:has(.hero) #faces .char b{color:#F3E2C4}
html[data-brand="london-bagel-museum"]:has(.hero) #faces .char span{color:#FBF0DA;opacity:.92}

/* ---- Brands and characters: visuals lead -----------------------------
   Goal, measured at 1440-1500px: cards > 334x534 rendered, polaroids
   > 178px, text block subordinate. The rows escape the default wrap
   padding (--pad up to 72px/side) and run near edge-to-edge; the type
   compacts and centres above them. Main page only. */
html[data-brand="london-bagel-museum"]:has(.hero) #brands,
html[data-brand="london-bagel-museum"]:has(.hero) #faces{
  padding-block:clamp(44px,4.6vw,68px)}
html[data-brand="london-bagel-museum"]:has(.hero) #brands .wrap,
html[data-brand="london-bagel-museum"]:has(.hero) #faces .wrap{
  max-width:none;padding-inline:clamp(20px,2.4vw,40px)}
html[data-brand="london-bagel-museum"]:has(.hero) #brands .sec__body,
html[data-brand="london-bagel-museum"]:has(.hero) #faces .sec__body{
  text-align:center}
html[data-brand="london-bagel-museum"]:has(.hero) #brands .h-lg,
html[data-brand="london-bagel-museum"]:has(.hero) #faces .h-md{
  font-size:clamp(21px,1.9vw,27px);margin-bottom:0}
html[data-brand="london-bagel-museum"]:has(.hero) #brands .lede,
html[data-brand="london-bagel-museum"]:has(.hero) #faces .lede{
  font-size:13px;max-width:none;
  margin:7px auto clamp(20px,2.2vw,30px)!important}
html[data-brand="london-bagel-museum"]:has(.hero) #brands .eyebrow,
html[data-brand="london-bagel-museum"]:has(.hero) #faces .eyebrow{
  margin-bottom:10px}
/* cards: near full-bleed row, taller than original — the row is the
   section. 4-across at 1440px caps width at ~340px, so presence comes
   from height: 3/5 puts the row at ~550px, one full-screen moment with
   the compact text head. */
html[data-brand="london-bagel-museum"]:has(.hero) .brands{
  gap:clamp(12px,1.1vw,18px)}
html[data-brand="london-bagel-museum"]:has(.hero) .bcard__img{
  aspect-ratio:3/5}
/* polaroids: fill the wide row evenly, modest gaps */
html[data-brand="london-bagel-museum"]:has(.hero) .chars{
  gap:clamp(12px,1.3vw,20px)}

/* newsroom: masthead clears the fixed 74px header instead of running
   its rules through the nav row  */
[data-brand="esg"] .mast{padding-top:88px}
/* caps section labels: keep on one line and optically flush right
   (trailing tracking made them look clipped at the rule's end) */
.sechd__n{white-space:nowrap;margin-right:-.2em}
/* semantic h1 wrapper around the brand hero logo — zero visual delta */
.bhero__h{margin:0;font-size:0;line-height:0}

/* ============================================================
   PHONE & TABLET
   Portrait screens get their own proportions, not a squeezed
   desktop: cards go wide-and-short, the character wall wraps to
   a readable grid, type steps down with the viewport.
   ============================================================ */
@media (max-width:1239px){

  /* 가로 스크롤 차단 — 어떤 요소도 화면을 넘지 않는다 */
  html,body{max-width:100%;overflow-x:hidden}
  img,video,table{max-width:100%}

  /* 히어로: 한 장면만, 확대 애니메이션이 넘치지 않게 */
  .hero{height:88svh;min-height:520px}
  .hero__grid{grid-template-columns:1fr}
  .hero__panel{overflow:hidden}
  .hero__panel:nth-child(n+2){display:none}
  .hero__cap{display:none}

  /* 뉴스룸 티저 메타 줄바꿈 */
  .esgroom__mast{flex-wrap:wrap;gap:8px}
  .esgroom__meta{max-width:100%;white-space:normal}

  /* 브랜드 카드: 세로로 길지 않게, 가로로 시원하게 */
  .brands{grid-template-columns:1fr;gap:14px}
  .bcard__img{aspect-ratio:3/2.6}
  .bcard__mark img{max-height:52px}

  /* 캐릭터: 격자로 되돌려 읽히는 크기 확보 */
  .chars{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
    gap:14px!important;justify-content:stretch!important}
  .char{flex:none!important;width:auto!important;min-width:0}

  /* 매장 목록: 한 줄에 하나 */
  .stores,.locs{grid-template-columns:1fr!important}
  .strow{grid-template-columns:1fr!important;gap:12px}
  .strow__thumbs{grid-template-columns:repeat(3,1fr)}

  /* 브랜드 메뉴 패널 */
  .mega__in{grid-template-columns:repeat(2,1fr);gap:10px}
  .mega__shot{aspect-ratio:3/2}

  /* 뉴스룸 표: 좁은 화면에서 분류·번호는 생략 */
  .ix__t8 th:nth-child(1),.ix__t8 td:nth-child(1),
  .ix__t8 th:nth-child(2),.ix__t8 td:nth-child(2){display:none}
  .ix__bar{flex-wrap:wrap;gap:10px}
  .gal2__grid{grid-template-columns:1fr}

  /* 본문 여백과 활자 */
  .sec{padding-block:clamp(44px,9vw,72px)}
  .wrap{padding-inline:20px}
  .h-lg{font-size:clamp(24px,6.4vw,34px)}
  .h-md{font-size:clamp(20px,5.4vw,28px)}
  .lede{font-size:14.5px;line-height:1.75}
  .mast__name{font-size:clamp(30px,8.6vw,46px)}
  .mast__row{flex-wrap:wrap;gap:10px}

  /* 기사 페이지 */
  .art__metaline{flex-wrap:wrap;gap:6px 14px}
  .art__nav{grid-template-columns:1fr}

  /* 푸터 */
  .ft__top{grid-template-columns:1fr;gap:26px}
  .ft__bar{flex-wrap:wrap;gap:12px}
}

/* 세로 폰: 캐릭터 2열, 여백 더 좁게 */
@media (max-width:520px){
  .chars{grid-template-columns:repeat(2,1fr)!important}
  .wrap{padding-inline:16px}
  .mega__in{grid-template-columns:1fr}
  .bcard__img{aspect-ratio:3/2.4}
}

/* 카드·격자 비율 확정 — v5.4b 데스크톱 규칙보다 높은 우선순위로 지정 */
@media (max-width:1239px){
  /* 태블릿: 2열 */
  html[data-brand] .brands{grid-template-columns:repeat(2,1fr)!important;gap:14px!important}
  html[data-brand] .bcard__img{aspect-ratio:3/3.4!important}
  html[data-brand]:has(.hero) #brands .wrap,
  html[data-brand]:has(.hero) #faces .wrap{max-width:none;padding-inline:20px}
}
@media (max-width:640px){
  /* 폰: 1열, 가로로 넓은 비율 */
  html[data-brand] .brands{grid-template-columns:1fr!important;gap:12px!important}
  html[data-brand] .bcard__img{aspect-ratio:3/2.2!important}
}

/* 짧아진 모바일 카드에서는 어둡게 덮는 그라데이션을 완화해 사진이 읽히게 한다 */
@media (max-width:1239px){
  html[data-brand] .bcard__img::after{
    background:linear-gradient(to top,rgba(24,14,7,.88) 0%,rgba(24,14,7,.58) 34%,
      rgba(24,14,7,.16) 66%,rgba(24,14,7,0) 100%)!important}
  html[data-brand] .bcard__img img{filter:saturate(1) brightness(1)!important}
}