:root{
  --visual-w: 1115px;
  --content-w: 645px;
  --side-w: 160px;
  --ink:#333333;
  --paper:#ffffff;
  --gray:#eeeeee;
  --side:#aa9f94;
  --dark:#333333;
  --line:#e6e6e6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#cfcfcf;
  font-family:"Noto Sans TC","Source Han Sans TC","思源黑體",sans-serif;
  font-size:18px;
  line-height:1.75;
  letter-spacing:.055em;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.icon{display:block;width:24px;height:24px;stroke:currentColor;fill:none}
.site-shell{min-height:100vh}

/* Desktop fixed layout */
.fixed-visual{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--visual-w);
  height:100vh;
  background:#cfcfcf;
  overflow:hidden;
  z-index:1;
}
.visual-artwork{
  width:1115px;
  height:1115px;
  max-width:none;
  background:#555;
}
.content-panel{
  position:fixed;
  left:var(--visual-w);
  top:0;
  width:var(--content-w);
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--paper);
  z-index:2;
  scrollbar-width:thin;
}
.side-nav{
  position:fixed;
  top:0;
  right:0;
  width:var(--side-w);
  height:100vh;
  background:var(--side);
  z-index:3;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:42px;
}

/* Sidebar */
.menu-toggle{
  width:28px;height:28px;border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;margin-bottom:16px;padding:0;color:#fff;
}
.menu-toggle .icon{width:24px;height:24px;stroke-width:1.9}
.menu-toggle.is-open .icon{opacity:.62}
.side-icons{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    margin-bottom:296px;
}

.side-icons a{
    display:flex;
    justify-content:center;
    align-items:center;

    width:32px;
    height:32px;
}
.side-icons a.instagram{
    scale:1.08;
}
.side-icons{
    align-items:center;
}
.side-icons a.instagram .icon{
    width:28px;
    height:28px;
    stroke-width:1.7;
}
.menu-panel a{transition:.25s}.menu-panel a:hover{opacity:.55}

/* Typography */
section{position:relative}
.section-light{background:#fff}.section-gray{background:var(--gray)}
.section-inner{width:min(100% - 72px, 520px); margin-inline:auto; position:relative; z-index:2}
.centered{text-align:center}
h1,h2{
  font-family:"Playfair Display",serif;
  font-weight:500;
  font-size:40px;
  letter-spacing:.12em;
  line-height:1.08;
  margin:0;
  color:#333;
}
.zh-title{
  font-family:"Noto Sans TC","Source Han Sans TC","思源黑體",sans-serif;
  font-size:26px;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.45;
  margin:8px 0 0;
}
.copy-block{
  font-family:"Noto Sans TC","Source Han Sans TC","思源黑體",sans-serif;
  font-size: 16px;
  color: #7b7b7b;
  text-align: justify;  line-height:1.78;
  letter-spacing:.055em;
  font-weight:400;
}
.copy-block p{margin:0 0 20px}.copy-block p:last-child{margin-bottom:0}

/* About / hero */
.hero-section{padding-bottom:70px}.tablet-artwork{display:none}
.hero-brand{
  height:190px;
  position:relative;
  overflow:hidden;
}
.hero-title-bg{
  position:absolute;
  width:430px;
  max-width:80%;
  right:34px;
  top:16px;
  opacity:.9;
  display:block;
}
.hero-circle-img{
  position:absolute;
  left:54px;
  top:70px;
  width:92px;
  height:92px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  z-index:2;
}
.about-inner{margin-top:-2px}.about-inner .copy-block{margin-top:26px}

/* Fixed square image placeholders */
.image-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 0}
.image-placeholder,.link-thumb{background:var(--dark);display:block;min-height:180px}
img.image-placeholder{width:100%;height:180px;object-fit:cover}

/* About horizontal image marquee rows (v3 behavior) */
.image-marquee{
  width:100%;
  overflow:hidden;
  margin:34px 0;
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:12px;
  will-change:transform;
}
.image-marquee img{
  width:317px;
  min-width:317px;
  height:248px;
  display:block;
  object-fit:cover;
  background:#333;
}
.image-marquee.move-left .marquee-track{animation:marqueeLeft 92s linear infinite}
.image-marquee.move-right .marquee-track{animation:marqueeRight 92s linear infinite}
@keyframes marqueeLeft{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
@keyframes marqueeRight{from{transform:translateX(calc(-50% - 6px))}to{transform:translateX(0)}}

/* Values */
.values-section{padding:86px 0 70px}
.values-copy{font-size:18px;line-height:1.5;margin:22px 0 0;letter-spacing:.08em}

/* Shapes - circle tabs */
.shapes-section{padding:62px 0 72px;overflow:hidden}
.shapes-title{margin-bottom:30px}
.shape-tabs{height:150px;display:flex;justify-content:center;align-items:flex-end;position:relative;margin-bottom:0;z-index:3}
.shape-tab{
  width:220px;height:220px;border:1px solid var(--line);border-radius:50%;background:transparent;
  margin:0 -13px -64px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  cursor:pointer;transition:.25s;padding-bottom:54px;color:#333;
}
.shape-tab.is-active{background:#e9e9e9;border-color:#e9e9e9}
.shape-tab strong{font-family:"Noto Sans TC","Source Han Sans TC","思源黑體",sans-serif;font-size:22px;font-weight:500;letter-spacing:.16em;line-height:1.25}
.shape-tab em{font-family:"Playfair Display",serif;font-style:normal;font-size:18px;letter-spacing:.05em;line-height:1.2}
.shape-tab .arrow{color:#b0b0b0;margin-bottom:4px;display:flex}
.shape-tab .arrow .icon{width:22px;height:22px;stroke-width:1.45}
.tab-content-wrap{position:relative;z-index:4;background:var(--gray);padding-top:32px}
.tab-content{animation:fadeIn .32s ease}
.tab-images{margin:26px 36px}.tab-images .image-placeholder{min-height:160px;height:160px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Find me / Contact arcs */
.findme-section{
  background:var(--gray);
  overflow:hidden;
  padding:0;
}
.findme-oval{
  position:relative;
  width:760px;
  max-width:132%;
  margin:0 0 0 50%;
  transform:translateX(-50%);
  background:#fff;
  border-radius:50% / 8%;
  padding:106px 0 88px;
}

.link-list{margin-top:46px}
.link-card{display:grid;grid-template-columns:112px 1fr;gap:26px;align-items:center;margin-bottom:22px}
.link-thumb{width:112px;min-height:90px}
.link-text strong{display:flex;align-items:center;gap:6px;font-family:"Playfair Display",serif;font-size:21px;letter-spacing:.08em;margin-bottom:4px}
.link-arrow{display:inline-flex;color:#b0b0b0;flex:0 0 auto}
.link-arrow .icon{width:18px;height:18px;stroke-width:1.4}
.link-text small{display:block;font-size:14px;line-height:1.75;color:#979797;letter-spacing:.04em}

.contact-section{
  padding:78px 0 96px;
  overflow:hidden;
  background:var(--gray);
}
.contact-section::before{
  content:"";
  position:absolute;
  left:50%;
  top:260px;
  transform:translateX(-50%);
  width:820px;
  max-width:150%;
  height:280px;
  background:#fff;
  border-radius:50% 50% 0 0;
  z-index:0;
}
.contact-section > *{position:relative;z-index:2}
.contact-info{font-size:14px;line-height:1.8;margin-top:22px}
.contact-image{width:180px;height:220px;min-height:auto;margin:48px auto 54px}
.contact-copy{padding-bottom:20px}
.site-footer{height:220px;background:#303030;overflow:hidden}
.site-footer img{width:100%;height:100%;object-fit:cover;display:block}
body.menu-open{overflow:hidden}

/* Left fixed slideshow */
.fixed-slideshow{position:relative;overflow:hidden;background:#555}
.fixed-slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity 1.8s ease}
.fixed-slideshow img.is-active{opacity:1;animation:slowZoomOut 10s linear forwards}
@keyframes slowZoomOut{from{transform:scale(1.12)}to{transform:scale(1)}}

/* Tablet: square image above About, sidebar becomes hamburger menu */
@media (max-width: 1180px){
  :root{--content-w:645px;--side-w:0px}
  body{background:#fff;font-size:18px}
  .fixed-visual{display:none}
  .content-panel{position:relative;left:0;width:min(100%,645px);height:auto;min-height:100vh;overflow:visible;margin:0 auto;background:#fff}
  .side-nav{width:72px;background:transparent;color:#333;right:0;pointer-events:none;padding-top:22px}
  .side-nav .menu-toggle,.side-nav .side-icons{pointer-events:auto}
  .side-icons{display:none}
  .menu-panel{position:fixed;right:18px;top:72px;background:rgba(170,157,145,.96);color:#fff;padding:24px 28px;min-width:150px;opacity:0;visibility:hidden;transform:translateX(12px);transition:.28s;pointer-events:auto}
  .menu-panel.is-open{opacity:1;visibility:visible;transform:none}
  .tablet-artwork{display:block;aspect-ratio:1/1;width:100%;background:#555}
  .section-inner{width:min(100% - 56px, 560px)}

  .image-marquee{margin-left:28px;margin-right:28px;width:auto}
  .image-marquee img{width:317px;min-width:317px;height:248px}
  .values-section{padding-top:88px}
  .shape-tab{width:31vw;height:31vw;min-width:155px;min-height:155px;margin-left:-8px;margin-right:-8px;padding-bottom:42px}
  .shape-tabs{height:116px}.shape-tab strong{font-size:20px}.shape-tab em{font-size:16px}.tab-content-wrap{padding-top:28px}
}
@media (max-width: 640px){
  .content-panel{width:100%}
  .section-inner{width:min(100% - 42px, 520px)}
  .hero-brand{height:170px}
  .hero-circle-img{top:62px;left:30px;width:68px;height:68px}
  .hero-title-bg{top: 26px;right: 15px;width: 275px;max-width: 100%;height: 125px;}
  .image-marquee{margin:26px 21px}
  .image-marquee img{width:min(calc(100vw - 42px), 420px);min-width:min(calc(100vw - 42px), 420px);height:auto;aspect-ratio:317 / 248}
  .image-grid{grid-template-columns:1fr;gap:10px;margin:26px 21px}
  .image-placeholder{min-height:180px}
  h1,h2{font-size:35px;letter-spacing: .04em;}
  .zh-title{font-size:24px}
  .copy-block{font-size:15px;line-height:1.7;letter-spacing: 0.02em;}
  .values-copy{font-size:16px}
  .shape-tabs{height:98px}
  .shape-tab{width:36vw;height:36vw;min-width:126px;min-height:126px;margin:0 -8px -44px;padding-bottom:34px}
  .shape-tab strong{font-size:16px}
  .shape-tab em{font-size:12px}
  .shape-tab .arrow{font-size:16px}
  .tab-content-wrap{padding-top:24px}
  .link-card{grid-template-columns:84px 1fr;gap:18px;margin-left:0;margin-right:0}
  .link-list{width:min(100% - 42px, 520px)}
  .link-thumb{width:84px;min-height:76px}
  .link-text{min-width:0}
  .contact-image{width:160px;height:200px}
  .side-nav{width:54px}
  .menu-panel{right:12px}
  .menu-toggle{width:32px;height:32px}
  .findme-oval{width:100%;max-width:100%;margin:0 auto;transform:none;padding:86px 0 76px;border-radius:50% / 5%}
  .contact-section::before{width:150%;height:170px}
}

/* AEO / accessibility helpers */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Slow reveal animation */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity 1.15s cubic-bezier(.22,1,.36,1),
    transform 1.15s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.14s}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .fixed-slideshow img.is-active{animation:none}
  .image-marquee .marquee-track{animation:none!important}
}

/* v8: Full-height glass menu overlay. Keeps the fixed left artwork visible. */
.menu-icon{display:flex;align-items:center;justify-content:center}
.menu-icon-close{display:none}
.menu-toggle.is-open .menu-icon-open{display:none}
.menu-toggle.is-open .menu-icon-close{display:flex}
.menu-toggle.is-open .icon{opacity:1}
.menu-overlay{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:var(--visual-w);
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(113,92,81,.9);
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(36px);
  transition:
    opacity .8s cubic-bezier(.22,1,.36,1),
    visibility .8s cubic-bezier(.22,1,.36,1),
    transform .8s cubic-bezier(.22,1,.36,1);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.menu-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
}
.menu-overlay-inner{
  width:min(72%, 560px);
  transform:translateY(18px);
  opacity:0;
  transition:
    opacity .95s cubic-bezier(.22,1,.36,1) .12s,
    transform .95s cubic-bezier(.22,1,.36,1) .12s;
}
.menu-overlay.is-open .menu-overlay-inner{opacity:1;transform:translateY(0)}
.menu-overlay-label{
  margin:0 0 42px;
  font-family:"Playfair Display",serif;
  font-size:18px;
  letter-spacing:.12em;
  opacity:.7;
}
.menu-overlay-nav{
  display:flex;
  flex-direction:column;
  gap:20px;
  font-family:"Playfair Display",serif;
  font-size:40px;
  line-height:1;
  letter-spacing:.08em;
}
.menu-overlay-nav a,
.menu-overlay-links a{
  transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}
.menu-overlay-nav a:hover,
.menu-overlay-links a:hover{opacity:.62;transform:translateX(6px)}
.menu-overlay-links{
  display:flex;
  gap:22px;
  margin-top:54px;
  font-family:"Playfair Display",serif;
  font-size:18px;
  letter-spacing:.08em;
}
body.menu-open .side-nav{background:transparent;z-index:7}
body.menu-open .side-icons,
body.menu-open .menu-panel{opacity:.45}
body.menu-open .menu-toggle{position:relative;z-index:8;color:#fff}

@media (max-width:1180px){
  .menu-overlay{left:0;background:rgba(113,92,81,.92)}
  .menu-overlay-inner{width:min(76%, 420px)}
  .menu-overlay-nav{font-size:34px;gap:22px}
  body.menu-open .side-nav{background:transparent}
}
@media (max-width:640px){
  .menu-overlay-inner{width:min(78%, 340px)}
  .menu-overlay-nav{font-size:30px;gap:20px}
  .menu-overlay-label{margin-bottom:34px}
  .menu-overlay-links{margin-top:46px}
}

/* v10 refinements */
/* Desktop side anchors moved into the glass menu only to avoid duplicated navigation. */
.menu-panel{display:none!important}
.side-menu-word{
  font-family:"Playfair Display",serif;
  font-size:18px;
  line-height:1;
  letter-spacing:.12em;
  writing-mode:vertical-rl;
  color:#fff;
  margin-bottom:30px;
  opacity:.95;
}
/* Chinese section titles: Source Han Serif / Noto Serif TC SemiBold */
.zh-title{
  font-family:"Noto Serif TC","Source Han Serif TC","思源宋體","Songti TC",serif;
  font-weight:600;
}
/* Keep tab Chinese labels sans-serif as in the original circle tab design. */
.shape-tab strong{
  font-family:"Noto Sans TC","Source Han Sans TC","思源黑體",sans-serif;
}
/* Find Me uses the same arrow style as What Shapes Me. */
.link-arrow .icon{
  width:22px;
  height:22px;
  stroke-width:1.45;
}
.link-text strong{gap:8px}

/* Values to What Shapes Me spacing/transition adjustment based on the cropped design note. */
.values-section{
  padding:108px 0 104px;
}
.values-copy{
  margin-top:22px;
}
.shapes-section{
  padding-top:74px;
}
.shapes-title{
  margin-bottom:34px;
}

@media (max-width:1180px){
  .side-menu-word{display:none}
}

/* v11 corrections -------------------------------------------------- */
/* Expanded side rail: no MENU text, only X / mail / IG. */
.side-menu-word{display:none!important}
body.menu-open .side-icons{opacity:.78}

/* What Shapes Me: title remains on white; gray starts from the half-circle tab area. */
.shapes-section{
  background:#fff;
  padding:86px 0 0;
  overflow:hidden;
}
.shapes-title{
  position:relative;
  background:#fff;
  z-index:3;
  margin-bottom:0;
  padding-bottom:42px;
}
.shape-tabs{
  background:var(--gray);
  height:105px;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin-bottom:0;
  z-index:2;
}
.shape-tab{
  position:relative;
  width:222px;
  height:222px;
  margin:0 -15px 0;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  padding:42px 0 0;
  color:#333;
  cursor:pointer;
  display:grid;
  grid-template-columns:22px auto;
  grid-template-rows:auto auto;
  column-gap:7px;
  row-gap:0;
  align-content:start;
  justify-content:center;
  transition:background .28s cubic-bezier(.22,1,.36,1), border-color .28s cubic-bezier(.22,1,.36,1);
}
.shape-tab.is-active{
  background:#e9e9e9;
  border-color:#e9e9e9;
}
.shape-tab .arrow{
  grid-column:1;
  grid-row:1;
  margin:2px 0 0;
  color:#b0b0b0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.shape-tab .arrow .icon{
  width:20px;
  height:20px;
  stroke-width:1.45;
}
.shape-tab strong{
  grid-column:2;
  grid-row:1;
  font-family:"Noto Sans TC","Source Han Sans TC","思源黑體",sans-serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.2;
  text-align:left;
}
.shape-tab em{
  grid-column:2;
  grid-row:2;
  font-family:"Playfair Display",serif;
  font-style:normal;
  font-size:18px;
  letter-spacing:.05em;
  line-height:1.2;
  text-align:left;
  margin-top:2px;
}
.tab-content-wrap{
  background:var(--gray);
  padding-top:30px;
  padding-bottom:72px;
}

@media (max-width:1180px){
  .shapes-section{padding-top:78px}
  .shapes-title{padding-bottom:36px}
  .shape-tabs{height:108px}
  .shape-tab{
    width:31vw;
    height:31vw;
    min-width:155px;
    min-height:155px;
    margin:0 -8px;
    padding-top:32px;
    grid-template-columns:19px auto;
    column-gap:5px;
  }
  .shape-tab strong{font-size:20px}
  .shape-tab em{font-size:16px}
  .shape-tab .arrow .icon{width:18px;height:18px}
}
@media (max-width:640px){
  .shapes-section{padding-top:68px}
  .shapes-title{padding-bottom:32px}
  .shape-tabs{height:75px}
  .shape-tab{
    width:36vw;
    height:36vw;
    min-width:126px;
    min-height:126px;
    margin:0 -8px;
    padding-top:25px;
    grid-template-columns:16px auto;
  }
  .shape-tab strong{font-size:16px;letter-spacing:.12em}
  .shape-tab em{font-size:12px}
  .shape-tab .arrow .icon{width:16px;height:16px}
}


/* v12 corrections -------------------------------------------------- */
/* Contact anti-spam display: keep ✦ visually, but link to real mailto. */
.contact-info,
.contact-info a,
.mail-code{
  font-family:"Iosevka Charon","Iosevka","Cascadia Mono","Consolas",monospace;
  color:#333;
  text-decoration:none;
  letter-spacing:.04em;
}
.contact-info a:hover{opacity:.65}

/* What Shapes Me: tab area must stay white; gray begins only under the half circles. */
.shapes-section{
  background:#fff;
}
.shapes-title{
  background:#fff;
  z-index:5;
}
.shape-tabs{
  background:#fff!important;
  position:relative;
  z-index:4;
  overflow:hidden;
}
.tab-content-wrap{
  background:var(--gray);
  position:relative;
  z-index:1;
}
/* The half-circle tabs sit above the gray content; only the content panel is gray. */
.shape-tab{
  z-index:4;
}

/* v13 refinements -------------------------------------------------- */
/* Values and What Shapes Me should feel like one connected group. */
.values-section{
  padding:0 0 48px;
}
.shapes-section{
  padding-top:42px;
}
.shapes-title{
  padding-bottom:20px;
}

/* Use one shared gray for the active half-circle and the content area. */
.shape-tab.is-active{
  background:var(--gray)!important;
  border-color:var(--gray)!important;
}
.tab-content-wrap{
  background:var(--gray)!important;
}

/* Center arrow + Chinese label and the English label as one visual group. */
.shape-tab{
  grid-template-columns:auto auto;
  justify-content:center;
  justify-items:center;
  align-items:start;
  column-gap:7px;
}
.shape-tab .arrow{
  grid-column:1;
  grid-row:1;
  align-self:center;
  margin:0;
}
.shape-tab strong{
  grid-column:2;
  grid-row:1;
  text-align:center;
}
.shape-tab em{
  grid-column:1 / -1;
  grid-row:2;
  text-align:center;
  margin-top:2px;
}

/* Contact: the white arc cuts through the middle of the image; copy sits on white. */
.contact-section{
  padding:78px 0 0;
  background:var(--gray);
  overflow:hidden;
}
.contact-section::before{
  top:360px;
  width:850px;
  max-width:154%;
  height:260px;
  background:#fff;
  border-radius:50% 50% 0 0;
  z-index:0;
}
.contact-section::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:486px;
  bottom:0;
  background:#fff;
  z-index:0;
}
.contact-image{
  position:relative;
  z-index:3;
  margin:44px auto 70px;
}
.contact-copy{
  position:relative;
  z-index:2;
  padding:0 0 88px;
}


@media (max-width:1180px){
  .values-section{padding:88px 0 46px}
  .shapes-section{padding-top:38px}
  .contact-section::before{top:340px;width:150%;height:238px}
  .contact-section::after{top:456px}
}
@media (max-width:640px){
  .values-section{padding:0 0 38px}
  .shapes-section{padding-top:32px}
  .contact-section::before{top:318px;width:160%;height:190px}
  .contact-section::after{top:410px}
  .contact-image{margin-bottom:56px}
}


/* v15.4: Production-size image template scaling */
.link-thumb{overflow:hidden}
.link-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.contact-image{display:block;object-fit:cover;background:#333}


/* v15.6.1: Desktop right-bottom anchor navigation */
.side-anchor-nav{
  position:absolute;
  left:34px;
  bottom:48px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  font-family:"Playfair Display",serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:.05em;
  color:#fff;
  opacity:.96;
  transition:opacity .35s cubic-bezier(.22,1,.36,1), visibility .35s cubic-bezier(.22,1,.36,1);
}
.side-anchor-nav a{
  display:block;
  transition:opacity .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
.side-anchor-nav a:hover{
  opacity:.55;
  transform:translateY(-2px);
}
body.menu-open .side-anchor-nav{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
@media (max-width:1180px){
  .side-anchor-nav{display:none}
}


/* v15.6.4: Correct Values and footer cover image ratio + mobile hamburger visibility */
.tab-images{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 260px));
  justify-content:center;
  gap:16px;
  margin:26px auto;
}
.tab-images .image-placeholder,
img.image-placeholder{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:260 / 185;
  object-fit:cover;
}
.site-footer{
  height:auto;
  min-height:130px;
  background:#303030;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.site-footer img{
  width:min(100%, 645px);
  height:auto;
  aspect-ratio:645 / 130;
  object-fit:cover;
  display:block;
}
@media (max-width:1180px){
  .menu-toggle{
    width:44px;
    height:44px;
    border-radius:999px;
    background:#B3A69B;
    color:#fff;
    box-shadow:0 8px 22px rgba(80,70,62,.18);
  }
  .menu-toggle .icon{width:24px;height:24px}
}
@media (max-width:640px){
  .tab-images{
    grid-template-columns:minmax(0, 260px);
    gap:12px;
    margin:24px auto;
  }
  .site-footer{min-height:130px}
}


/* v15.6.6: About marquee remains non-clickable; no lightbox interaction. */
.image-marquee img{
  cursor:default;
  user-select:none;
}


/* v15.6.7: Marquee keeps moving on hover. */
.image-marquee:hover .marquee-track{
  animation-play-state:running;
}


/* v15.6.9: Mobile Find Me cards alignment refinement. */
@media (max-width:640px){
  .link-list{
    width:min(100% - 42px, 520px);
    margin:42px auto 0;
  }

  .link-card{
    grid-template-columns:84px minmax(0, 1fr);
    gap:18px;
    align-items:start;
    margin-left:0;
    margin-right:0;
    margin-bottom:34px;
  }

  .link-thumb,
  .link-thumb img{
    width:84px;
    height:84px;
    min-height:84px;
    display:block;
    object-fit:cover;
  }

  .link-text{
    min-width:0;
    padding-top:0;
  }

  .link-text strong{
    display:grid;
    grid-template-columns:22px minmax(0, 1fr);
    align-items:center;
    gap:8px;
    margin:0 0 8px;
    font-size:22px;
    line-height:1.25;
  }

  .link-arrow{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .link-text small{
    display:block;
    font-size:14px;
    line-height:1.85;
    letter-spacing:.04em;
  }
}


/* v15.7.0: Larger Find Me thumbnails on mobile */
@media (max-width:640px){
  .link-card{
    grid-template-columns:100px minmax(0,1fr) !important;
    gap:20px !important;
  }

  .link-thumb,
  .link-thumb img{
    width:100px !important;
    height:100px !important;
    min-height:100px !important;
  }
}


/* v15.7.1: Mobile Find Me editorial card layout.
   First row: small logo + title.
   Second row: description uses full card width. */
@media (max-width:640px){
  .link-list{
    width:min(100% - 42px, 520px);
    margin:42px auto 0;
  }

  .link-card{
    display:grid;
    grid-template-columns:80px minmax(0, 1fr) !important;
    grid-template-rows:auto auto;
    column-gap:18px !important;
    row-gap:14px;
    align-items:center;
    margin:0 0 46px !important;
  }

  .link-thumb{
    grid-column:1;
    grid-row:1;
    width:80px !important;
    height:80px !important;
    min-height:80px !important;
    display:block;
  }

  .link-thumb img{
    width:80px !important;
    height:80px !important;
    min-height:80px !important;
    display:block;
    object-fit:cover;
  }

  .link-text{
    display:contents;
  }

  .link-text strong{
    grid-column:2;
    grid-row:1;
    display:grid;
    grid-template-columns:22px minmax(0, 1fr);
    align-items:center;
    gap:8px;
    margin:0;
    font-size:23px;
    line-height:1.25;
  }

  .link-arrow{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .link-text small{
    grid-column:1 / -1;
    grid-row:2;
    display:block;
    font-size:14px;
    line-height:1.5;
    letter-spacing:.04em;
    color:#979797;
    padding-top:0;
  }
}


/* v15.7.4: Desktop / large-screen RWD guardrails.
   Prevent the fixed artwork from becoming visually overwhelming on wide screens
   and keep the reading panel at a stable, comfortable width. */
@media (min-width:1181px){
  :root{
    --content-w:645px;
    --side-w:160px;
    --visual-w:calc(100vw - var(--content-w) - var(--side-w));
  }

  .fixed-visual{
    width:var(--visual-w);
  }

  .visual-artwork{
    width:100%;
    height:100vh;
  }

  .content-panel{
    left:var(--visual-w);
    width:var(--content-w);
  }

  .menu-overlay{
    left:var(--visual-w);
  }
}

/* Keep the fixed artwork from stretching too far on very wide monitors. */
@media (min-width:1920px){
  :root{
    --visual-w:min(1115px, calc(100vw - var(--content-w) - var(--side-w)));
  }

  .site-shell::before{
    content:"";
    position:fixed;
    inset:0;
    background:#cfcfcf;
    z-index:0;
  }
}

/* Better behavior when the browser / OS scaling makes the usable viewport narrower. */
@media (min-width:1181px) and (max-width:1540px){
  :root{
    --content-w:620px;
    --side-w:132px;
    --visual-w:calc(100vw - var(--content-w) - var(--side-w));
  }

  .side-nav{
    width:var(--side-w);
  }

  .side-anchor-nav{
    left:28px;
  }

  .section-inner{
    width:min(100% - 64px, 500px);
  }

  h1,h2{
    font-size:38px;
  }
}

/* Emergency desktop guard: if the viewport becomes too narrow for the fixed layout,
   switch earlier to the tablet/mobile flow instead of squeezing the content panel. */
@media (min-width:1181px) and (max-width:1320px){
  :root{
    --content-w:645px;
    --side-w:0px;
  }

  body{
    background:#fff;
  }

  .fixed-visual{
    display:none;
  }

  .content-panel{
    position:relative;
    left:0;
    width:min(100%,645px);
    height:auto;
    min-height:100vh;
    overflow:visible;
    margin:0 auto;
    background:#fff;
  }

  .side-nav{
    width:72px;
    background:transparent;
    color:#333;
    right:0;
    pointer-events:none;
    padding-top:22px;
  }

  .side-nav .menu-toggle,
  .side-nav .side-icons{
    pointer-events:auto;
  }

  .side-icons,
  .side-anchor-nav{
    display:none;
  }

  .tablet-artwork{
    display:block;
    aspect-ratio:1/1;
    width:100%;
    background:#555;
  }

  .menu-overlay{
    left:0;
    background:rgba(113,92,81,.92);
  }
}


/* v15.7.5: Anchor navigation active state and gentle scroll feedback. */
.side-anchor-nav a,
.menu-overlay-nav a{
  position:relative;
}

.side-anchor-nav a.is-active{
  opacity:.62;
  transform:translateX(4px);
}

.side-anchor-nav a.is-active::before{
  content:"";
  position:absolute;
  left:-14px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  transform:translateY(-50%);
  opacity:.9;
}

.menu-overlay-nav a.is-active{
  opacity:.68;
  transform:translateX(6px);
}

section.anchor-highlight .section-title,
section.anchor-highlight .shapes-title,
section.anchor-highlight .about-inner{
  animation:anchorPulse 1.15s cubic-bezier(.22,1,.36,1);
}

@keyframes anchorPulse{
  0%{opacity:.55;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}


/* v15.7.6: Mobile/tablet anchor safety patch.
   Disable anchor arrival pulse on non-desktop widths to avoid layout jumps and blank gaps. */
@media (max-width:1180px){
  section.anchor-highlight .section-title,
  section.anchor-highlight .shapes-title,
  section.anchor-highlight .about-inner{
    animation:none !important;
  }

  .menu-overlay-nav a.is-active{
    transform:none;
  }
}


/* v15.7.7: Mobile reveal and footer safety patch. */
@media (max-width:1180px){
  /* If IntersectionObserver root calculation fails on mobile/tablet,
     content must remain visible instead of leaving large blank gaps. */
  .reveal{
    opacity:1;
    transform:none;
  }
}

/* Remove footer-cover dark background bars on mobile/tablet. */
@media (max-width:1180px){
  .site-footer{
    min-height:0;
    height:auto;
    background:#fff;
    display:block;
  }

  .site-footer img{
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:645 / 130;
    object-fit:cover;
    display:block;
  }
}


/* v15.7.8: Mobile What Shapes Me image alignment.
   Align tab images with the same inner width as text blocks. */
@media (max-width:640px){
  .tab-images{
    width:min(100% - 42px, 520px);
    margin:26px auto;
    grid-template-columns:1fr;
    gap:12px;
  }

  .tab-images .image-placeholder,
  .tab-images img.image-placeholder{
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:260 / 185;
    object-fit:cover;
  }
}