@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600&family=Noto+Serif+KR:wght@400;500;600&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f4ef;color:#181816;font-family:'Noto Sans KR',sans-serif;font-weight:300}.rail{position:fixed;inset:0 auto 0 0;width:150px;border-right:1px solid #d7d3ca;padding:38px 28px;display:flex;flex-direction:column;z-index:3;background:rgba(246,244,239,.94)}.name{color:inherit;text-decoration:none}.name b{font:500 27px/1.28 'Noto Serif KR';letter-spacing:.08em}.name span{display:block;font-size:10px;margin-top:13px;letter-spacing:.15em}.rail nav{margin:auto 0;display:grid;gap:15px}.rail nav a,.social a{color:inherit;text-decoration:none;font-size:12px}.rail nav a:hover,.social a:hover{text-decoration:underline}.social{display:grid;gap:7px}main{margin-left:150px}.hero{min-height:740px;display:grid;grid-template-columns:44% 56%;border-bottom:1px solid #d7d3ca}.hero-copy{padding:150px 7vw 80px}.eyebrow{font-size:10px;letter-spacing:.18em}.hero h1{font:500 clamp(34px,4vw,62px)/1.42 'Noto Serif KR';margin:42px 0 28px;letter-spacing:-.04em}.hero-copy>p:not(.eyebrow){font:300 15px/2 'Noto Serif KR';color:#514e48}.textlink{display:inline-block;margin-top:42px;color:inherit;text-decoration:none;font-size:12px;border-bottom:1px solid #777;padding-bottom:5px}.hero-art{position:relative;background:#e8e4dc;display:grid;place-items:center;overflow:hidden}.hero-art:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:#dad4c8;filter:blur(2px)}.hero-art img{position:relative;max-height:560px;max-width:72%;object-fit:contain;mix-blend-mode:multiply;filter:drop-shadow(0 24px 20px rgba(0,0,0,.14))}.hero-art span{position:absolute;right:35px;bottom:28px;font-size:10px;letter-spacing:.18em}.section{padding:90px 6vw;border-bottom:1px solid #d7d3ca}.section>header{display:grid;grid-template-columns:50px 220px 1fr;align-items:end;margin-bottom:60px}.section header p{font:12px 'Noto Serif KR';margin:0}.section h2{font:500 31px 'Noto Serif KR';margin:0}.section header span{font-size:11px;color:#777}.books{display:grid;grid-template-columns:repeat(4,1fr);gap:42px}.book img{width:100%;aspect-ratio:2/3;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,0,0,.08))}.book div{padding-top:20px}.book em,.workgrid small{font-style:normal;font-size:9px;letter-spacing:.12em;color:#777}.book h3,.workgrid h3{font:500 17px 'Noto Serif KR';margin:10px 0}.book p,.workgrid p{font-size:11px;line-height:1.8;color:#666}.works{background:#ece9e2}.workgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:45px}.workgrid img{width:100%;height:390px;object-fit:cover;filter:grayscale(20%)}.workgrid article:nth-child(2) img,.workgrid article:nth-child(3) img{object-position:top}.years{margin-left:270px}.years div{display:grid;grid-template-columns:130px 1fr;border-top:1px solid #d7d3ca;padding:28px 0}.years b{font:500 22px 'Noto Serif KR'}.years p{margin:0;font:300 13px/1.9 'Noto Serif KR'}.about{padding:120px 10vw;background:#292825;color:#f3f0e9;display:grid;grid-template-columns:1fr 1fr;gap:12vw}.about h2{font:400 clamp(27px,3vw,45px)/1.55 'Noto Serif KR';margin-top:30px}.about>p{font:300 14px/2.15 'Noto Serif KR';align-self:end;color:#d8d3ca}.newsrows{margin-left:270px}.newsrows p{display:grid;grid-template-columns:150px 1fr;border-top:1px solid #d7d3ca;margin:0;padding:23px 0}.newsrows time{font-size:11px;color:#777}.newsrows b{font:400 14px 'Noto Serif KR'}footer{padding:70px 6vw;display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:40px;background:#f6f4ef}footer strong{font:500 22px 'Noto Serif KR'}footer span{display:block;font-size:9px;letter-spacing:.17em;margin-top:7px}footer p,footer a,footer small{font-size:11px;line-height:1.9;color:#555}footer a{color:inherit}footer small{align-self:end}@media(max-width:900px){.rail{position:relative;width:100%;height:auto;border-right:0;border-bottom:1px solid #d7d3ca;padding:20px;flex-direction:row;align-items:center}.name b{font-size:18px}.name b br,.name span{display:none}.rail nav{margin:0 0 0 auto;display:flex;gap:13px}.rail nav a:nth-child(n+4){display:none}.social{display:none}main{margin:0}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:80px 8vw}.hero-art{min-height:480px}.section{padding:70px 7vw}.section>header{grid-template-columns:35px 1fr}.section header span{display:none}.books{grid-template-columns:repeat(2,1fr);gap:40px 22px}.workgrid{grid-template-columns:1fr}.workgrid img{height:auto;max-height:560px}.years,.newsrows{margin-left:0}.about{grid-template-columns:1fr;gap:30px;padding:80px 8vw}footer{grid-template-columns:1fr 1fr}}@media(max-width:560px){.rail nav a:nth-child(n+3){display:none}.hero h1{font-size:34px}.hero-art{min-height:390px}.hero-art img{max-width:82%;max-height:350px}.books{grid-template-columns:1fr 1fr}.years div{grid-template-columns:90px 1fr}.newsrows p{grid-template-columns:100px 1fr}footer{grid-template-columns:1fr}}
.lang{display:flex;gap:8px;margin-bottom:18px;align-items:center}.lang button{border:0;background:transparent;padding:0 0 3px;color:#8a867e;font:500 10px/1 'Noto Sans KR',sans-serif;letter-spacing:.12em;cursor:pointer;border-bottom:1px solid transparent}.lang button:hover,.lang button.active{color:#181816;border-bottom-color:#181816}@media(max-width:900px){.lang{margin:0 0 0 16px}.lang button{font-size:9px}.social{display:none}}@media(max-width:560px){.lang{gap:6px;margin-left:10px}}

/* v5 sidebar refinements */
.name .portfolio-vertical{display:block;width:1em;margin-top:13px;font-size:10px;line-height:1.55;letter-spacing:0;word-break:break-all;text-align:center;}
.lang{margin-top:auto;margin-bottom:38px;}
.social{display:flex;gap:13px;align-items:center;}
.social a{display:grid;place-items:center;width:21px;height:21px;}
.social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.social svg .fill-dot{fill:currentColor;stroke:none;}
.social svg path:first-child{fill:none;}
.social svg .fill-play{fill:currentColor;stroke:none;}
@media(max-width:900px){.name .portfolio-vertical{display:none}.lang{margin:0 0 0 16px}.social{display:none}}


/* v6: language utility + breezy window hero */
.top-lang{position:fixed;top:28px;right:34px;z-index:20;margin:0;padding:9px 12px;background:rgba(246,244,239,.78);backdrop-filter:blur(8px);border:1px solid rgba(80,76,68,.12);}
.top-lang.lang{display:flex;gap:12px;align-items:center}
.top-lang.lang button{font-size:9px;letter-spacing:.16em}
.window-scene{position:relative;background:linear-gradient(145deg,#e9e4da 0%,#f5f0e7 44%,#d9d3c7 100%);isolation:isolate;}
.hero-art:before{display:none}
.window-light{position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.88) 0 22%,rgba(255,255,255,.2) 22.5% 24%,rgba(255,255,255,.62) 24.5% 61%,rgba(255,255,255,.12) 61.5% 63%,rgba(255,255,255,.46) 63.5% 100%);opacity:.78;}
.window-light:after{content:"";position:absolute;left:21%;top:0;width:3px;height:72%;background:rgba(112,104,91,.13);box-shadow:265px 0 0 rgba(112,104,91,.12);}
.curtain{position:absolute;top:-5%;height:92%;width:27%;background:linear-gradient(90deg,rgba(241,236,225,.95),rgba(255,253,248,.74) 48%,rgba(214,207,193,.72));filter:drop-shadow(0 10px 20px rgba(80,70,55,.08));transform-origin:top center;z-index:1;}
.curtain-left{left:-9%;clip-path:polygon(0 0,100% 0,78% 100%,0 92%);animation:curtainBreeze 7s ease-in-out infinite alternate;}
.curtain-right{right:-11%;clip-path:polygon(0 0,100% 0,100% 94%,20% 100%);animation:curtainBreeze 8.5s ease-in-out 1s infinite alternate-reverse;}
.leaf-shadow{position:absolute;right:5%;top:9%;width:230px;height:300px;opacity:.12;filter:blur(5px);background:radial-gradient(ellipse at 30% 30%,#58634d 0 8%,transparent 9%),radial-gradient(ellipse at 60% 18%,#58634d 0 7%,transparent 8%),radial-gradient(ellipse at 75% 43%,#58634d 0 9%,transparent 10%),radial-gradient(ellipse at 40% 58%,#58634d 0 8%,transparent 9%),radial-gradient(ellipse at 67% 76%,#58634d 0 7%,transparent 8%);transform:rotate(-12deg);animation:leafBreeze 6s ease-in-out infinite alternate;}
.sill{position:absolute;left:0;right:0;bottom:13%;height:16%;background:linear-gradient(#d8d0c2,#cfc5b5);box-shadow:0 -8px 25px rgba(255,255,255,.48),0 18px 28px rgba(72,61,47,.12);z-index:2;}
.window-scene img{z-index:4;max-height:520px;max-width:66%;mix-blend-mode:normal;transform:translateY(32px) rotate(-1.2deg);filter:drop-shadow(0 28px 18px rgba(45,39,31,.22));}
.window-scene>span{z-index:5;color:#5c574f}
@keyframes curtainBreeze{from{transform:translateX(0) skewX(0deg)}to{transform:translateX(10px) skewX(-1.2deg)}}
@keyframes leafBreeze{from{transform:rotate(-12deg) translate(0,0)}to{transform:rotate(-9deg) translate(-7px,5px)}}
@media(prefers-reduced-motion:reduce){.curtain,.leaf-shadow{animation:none}}
@media(max-width:900px){.top-lang{position:absolute;top:22px;right:18px}.window-scene img{max-width:74%;max-height:420px;transform:translateY(22px) rotate(-1deg)}.sill{bottom:11%}}
@media(max-width:560px){.top-lang{top:18px;right:14px;padding:7px 9px}.top-lang.lang{gap:9px}.window-scene img{max-width:76%;max-height:330px}.curtain{width:34%}.leaf-shadow{width:170px;height:220px}}

/* v7 — hero rebuilt to match the approved sunlit-window direction */
.hero{grid-template-columns:44% 56%;background:#f7f4ed}
.hero-copy{position:relative;z-index:2;background:linear-gradient(90deg,#f7f4ed 0%,#f7f4ed 88%,rgba(247,244,237,.92) 100%)}
.hero-copy h1{max-width:620px;text-wrap:balance}
.window-scene{background:linear-gradient(90deg,#f1eee6 0 12%,#d9d1c3 12.3% 13%,#e8e2d7 13.3% 100%);place-items:unset;}
.window-light{inset:0;background:linear-gradient(105deg,rgba(255,255,255,.96) 0 17%,rgba(255,252,242,.66) 35%,rgba(238,226,205,.18) 70%),radial-gradient(circle at 76% 20%,rgba(255,247,217,.72),transparent 30%);opacity:1}
.window-light:after{left:12%;top:0;width:4px;height:70%;background:rgba(117,104,84,.12);box-shadow:none}
.curtain{z-index:2;top:-4%;height:83%;width:25%;background:linear-gradient(90deg,rgba(255,255,252,.97),rgba(248,245,237,.82) 48%,rgba(221,215,202,.52));filter:drop-shadow(8px 12px 18px rgba(76,67,52,.08));}
.curtain-left{left:-5%;clip-path:polygon(0 0,100% 0,83% 100%,0 94%);animation:curtainBreeze 8s ease-in-out infinite alternate}
.curtain-right{display:none}
.leaf-shadow{z-index:1;right:4%;top:6%;width:260px;height:310px;opacity:.13;filter:blur(7px);transform:rotate(-12deg);background:radial-gradient(ellipse at 52% 16%,#4d513b 0 6%,transparent 7%),radial-gradient(ellipse at 68% 29%,#4d513b 0 7%,transparent 8%),radial-gradient(ellipse at 42% 36%,#4d513b 0 8%,transparent 9%),radial-gradient(ellipse at 72% 48%,#4d513b 0 7%,transparent 8%),radial-gradient(ellipse at 36% 58%,#4d513b 0 8%,transparent 9%),linear-gradient(75deg,transparent 48%,#4d513b 49% 50%,transparent 51%);animation:shadowBreeze 9s ease-in-out infinite alternate}
.tabletop{position:absolute;z-index:2;left:0;right:0;bottom:0;height:24%;background:linear-gradient(176deg,#b69064 0%,#c7a477 35%,#9f7952 100%);box-shadow:inset 0 18px 28px rgba(255,239,206,.28)}
.tabletop:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(2deg,transparent 0 19px,rgba(83,55,31,.08) 20px,transparent 22px);opacity:.65}
.window-scene img{position:absolute;z-index:5;left:39%;bottom:15%;width:42%;height:auto;max-width:none;max-height:63%;object-fit:contain;transform:none;mix-blend-mode:normal;filter:drop-shadow(0 20px 13px rgba(55,43,29,.28))}
.vase{position:absolute;z-index:4;right:9%;bottom:13%;width:82px;height:92px;border-radius:46% 46% 42% 42% / 30% 30% 58% 58%;background:radial-gradient(circle at 35% 28%,#d9d0bf,#9f927d 68%,#7c715f);box-shadow:0 13px 14px rgba(58,45,31,.18)}
.vase:before{content:"";position:absolute;left:31px;top:-16px;width:24px;height:22px;border-radius:5px 5px 45% 45%;background:#9c907c}
.vase i{position:absolute;display:block;width:2px;background:#50513b;transform-origin:bottom;bottom:72px;left:43px;border-radius:2px}
.vase i:nth-child(1){height:135px;transform:rotate(-23deg)}.vase i:nth-child(2){height:155px;transform:rotate(8deg)}.vase i:nth-child(3){height:118px;transform:rotate(28deg)}
.vase i:after{content:"";position:absolute;top:18px;left:-14px;width:30px;height:12px;border-radius:100% 0 100% 0;background:#777b52;box-shadow:18px 28px 0 -2px #777b52,-15px 54px 0 -1px #777b52,14px 78px 0 -2px #777b52}
.window-scene>span{right:30px;bottom:22px;z-index:7;color:#514b42;text-shadow:0 1px 10px rgba(255,255,255,.7)}
@media(max-width:1100px) and (min-width:901px){.hero{grid-template-columns:48% 52%}.hero-copy{padding-left:6vw;padding-right:5vw}.hero h1{font-size:clamp(36px,4vw,52px)}.window-scene img{left:31%;width:50%}.vase{right:5%}}
@media(max-width:900px){.hero-copy{background:#f7f4ed}.window-scene{min-height:520px}.window-scene img{left:32%;bottom:14%;width:45%;max-width:none;max-height:62%}.vase{right:8%;bottom:13%;transform:scale(.85)}.tabletop{height:25%}}
@media(max-width:560px){.window-scene{min-height:420px}.window-scene img{left:26%;width:52%;bottom:15%}.vase{right:5%;transform:scale(.66);transform-origin:bottom right}.leaf-shadow{right:-12%;width:190px;height:230px}}

/* v8 — approved photographic hero atmosphere + the user's real transparent Pungjang mockup */
.window-scene{
  position:relative;
  display:block;
  background-image:url('assets/hero-window-bg.jpg');
  background-size:cover;
  background-position:center center;
  isolation:isolate;
}
.window-scene .window-light,
.window-scene .curtain,
.window-scene .leaf-shadow,
.window-scene .tabletop,
.window-scene .vase{display:none !important}
.window-scene:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(250,247,240,.12),transparent 32% 100%);
  pointer-events:none;
  z-index:1;
}
.window-scene img{
  position:absolute;
  z-index:3;
  left:23%;
  bottom:2.8%;
  width:58%;
  max-width:none;
  max-height:none;
  height:auto;
  object-fit:contain;
  transform:none;
  mix-blend-mode:normal;
  filter:drop-shadow(0 20px 15px rgba(48,38,27,.24));
}
.window-scene>span{
  position:absolute;
  right:28px;
  bottom:20px;
  z-index:4;
  color:#575046;
  text-shadow:0 1px 12px rgba(255,255,255,.9);
}
@media(max-width:1100px) and (min-width:901px){
  .window-scene img{left:18%;width:64%;bottom:3%}
}
@media(max-width:900px){
  .window-scene{min-height:520px;background-position:center center}
  .window-scene img{left:22%;width:58%;bottom:3%}
}
@media(max-width:560px){
  .window-scene{min-height:420px;background-position:54% center}
  .window-scene img{left:18%;width:66%;bottom:3%}
}

/* v9 — single photographic hero with editable HTML copy overlaid on top */
.hero.hero-photo{
  position:relative;
  display:block;
  min-height:740px;
  background-image:
    linear-gradient(90deg,
      rgba(247,244,237,.96) 0%,
      rgba(247,244,237,.90) 20%,
      rgba(247,244,237,.72) 34%,
      rgba(247,244,237,.22) 49%,
      rgba(247,244,237,0) 62%),
    url('assets/hero.png');
  background-size:cover;
  background-position:center center;
  border-bottom:1px solid #d7d3ca;
  overflow:hidden;
}
.hero.hero-photo .hero-copy{
  position:relative;
  z-index:2;
  width:min(48%,680px);
  min-height:740px;
  padding:150px 5.8vw 80px 7vw;
  background:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.hero.hero-photo .hero-copy h1{
  max-width:580px;
  margin:38px 0 26px;
  text-wrap:balance;
}
.hero.hero-photo .hero-copy>p:not(.eyebrow){
  color:#37342f;
  text-shadow:0 1px 14px rgba(255,255,255,.38);
}
.hero.hero-photo .textlink{
  margin-top:36px;
}
.hero-new{
  position:absolute;
  right:30px;
  bottom:22px;
  z-index:2;
  font-size:10px;
  letter-spacing:.18em;
  color:#514b42;
  text-shadow:0 1px 12px rgba(255,255,255,.92);
}
@media(max-width:1100px) and (min-width:901px){
  .hero.hero-photo{background-position:56% center}
  .hero.hero-photo .hero-copy{width:52%;padding-left:6vw;padding-right:4vw}
}
@media(max-width:900px){
  .hero.hero-photo{
    min-height:760px;
    background-position:58% center;
    background-image:
      linear-gradient(180deg,
        rgba(247,244,237,.94) 0%,
        rgba(247,244,237,.82) 42%,
        rgba(247,244,237,.18) 68%,
        rgba(247,244,237,0) 100%),
      url('assets/hero.png');
  }
  .hero.hero-photo .hero-copy{
    width:100%;
    min-height:520px;
    padding:110px 8vw 50px;
    justify-content:flex-start;
  }
  .hero-new{right:18px;bottom:18px}
}
@media(max-width:560px){
  .hero.hero-photo{
    min-height:690px;
    background-position:61% center;
  }
  .hero.hero-photo .hero-copy{
    min-height:470px;
    padding:95px 7vw 40px;
  }
  .hero.hero-photo .hero-copy h1{font-size:34px;line-height:1.45}
  .hero.hero-photo .hero-copy>p:not(.eyebrow){font-size:13px;line-height:1.9}
}

/* v10 — clickable book cards + editable activities page */
a.book{display:block;color:inherit;text-decoration:none}.book{transition:transform .2s ease,opacity .2s ease}.book:hover{transform:translateY(-4px)}.book .buy{display:inline-block;margin-top:8px;font-size:9px;letter-spacing:.12em;color:#777;border-bottom:1px solid #aaa;padding-bottom:2px}.activities-more{display:block;width:max-content;margin:-35px 0 38px auto;color:inherit;text-decoration:none;font-size:11px;border-bottom:1px solid #888;padding-bottom:4px}.activities-page{padding:90px 7vw 120px;min-height:100vh}.activities-page .page-head{max-width:760px;margin-bottom:70px}.activities-page h1{font:500 clamp(38px,5vw,68px)/1.25 'Noto Serif KR';margin:20px 0}.activities-page .intro{font:300 14px/2 'Noto Serif KR';color:#666}.activity-list{max-width:980px}.activity-year{display:grid;grid-template-columns:130px 1fr;border-top:1px solid #d7d3ca;padding:34px 0}.activity-year h2{font:500 24px 'Noto Serif KR';margin:0}.activity-items{display:grid;gap:18px}.activity-item{display:grid;grid-template-columns:120px 1fr;gap:20px}.activity-item time{font-size:10px;letter-spacing:.08em;color:#888;padding-top:3px}.activity-item p{margin:0;font:300 13px/1.85 'Noto Serif KR'}.activity-item strong{font-weight:500}.back-home{display:inline-block;margin-top:55px;color:inherit;text-decoration:none;font-size:11px;border-bottom:1px solid #888;padding-bottom:4px}@media(max-width:700px){.activity-year{grid-template-columns:1fr;gap:22px}.activity-item{grid-template-columns:90px 1fr}.activities-page{padding:70px 7vw 100px}.activities-more{margin-top:-25px}}

/* v11 — mobile-first presentation matching the approved mobile mockup */
.mobile-menu{display:none}
@media(max-width:700px){
  body{background:#f8f5ef}
  .rail{position:absolute;top:0;left:0;right:0;width:100%;height:92px;padding:22px 24px;border:0;background:transparent;z-index:30;display:flex;align-items:flex-start;pointer-events:none}
  .rail .name{pointer-events:auto}.rail .name b{font:500 21px/1.2 'Noto Serif KR';letter-spacing:0}.rail .name b br{display:none}.rail .name b:after{content:'Jeong Yorang';display:block;margin-top:7px;font:400 12px/1 'Noto Serif KR';letter-spacing:0}
  .rail .name .portfolio-vertical,.rail nav,.rail .social{display:none!important}
  .top-lang{position:absolute;top:28px;right:68px;background:transparent;border:0;backdrop-filter:none;padding:0;z-index:31}.top-lang.lang{gap:10px}.top-lang.lang button{font-size:10px}
  .mobile-menu{display:block;position:absolute;top:23px;right:22px;width:30px;height:24px;border:0;background:linear-gradient(#181816,#181816) 0 3px/30px 1px no-repeat,linear-gradient(#181816,#181816) 0 11px/30px 1px no-repeat,linear-gradient(#181816,#181816) 0 19px/30px 1px no-repeat;z-index:32}
  main{margin:0}
  .hero.hero-photo{min-height:610px;background-image:linear-gradient(90deg,rgba(248,245,239,.22),rgba(248,245,239,0) 60%),url('assets/hero.png');background-position:center center;background-size:cover}
  .hero.hero-photo .hero-copy{width:100%;min-height:610px;padding:178px 24px 48px;justify-content:flex-start}
  .hero.hero-photo .hero-copy .eyebrow{display:none}.hero.hero-photo .hero-copy h1{font-size:31px;line-height:1.48;max-width:86%;margin:0 0 22px;text-shadow:0 1px 12px rgba(255,255,255,.72)}
  .hero.hero-photo .hero-copy>p:not(.eyebrow){font-size:13px;line-height:1.85;max-width:82%;color:#282620;text-shadow:0 1px 12px rgba(255,255,255,.85)}
  .hero.hero-photo .textlink{margin-top:24px;padding:10px 15px;border:1px solid #4e4a43;border-radius:4px;background:rgba(248,245,239,.46);font-size:11px}
  .hero-new{display:none}
  .section{padding:48px 24px}.section>header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:30px}.section>header p{display:none}.section h2{font-size:25px}.section header span{display:block;font-size:10px}
  .books{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}.book.feature{grid-column:auto}.book img{height:190px;aspect-ratio:auto;object-fit:contain}.book div{text-align:center;padding-top:10px}.book em{font-size:8px}.book h3{font-size:14px;margin:7px 0}.book p{display:none}.book .buy{font-size:8px;margin-top:2px}
  .works{display:none}
  .timeline{background:#f4f0e8}.timeline .activities-more{margin:-52px 0 34px auto;font-size:10px}.years{margin:0}.years div{grid-template-columns:74px 1fr;padding:19px 0}.years b{font-size:15px}.years p{font-size:11px;line-height:1.7}
  .about{padding:58px 24px;grid-template-columns:1fr;gap:24px}.about h2{font-size:27px}.about>p{font-size:12px}
  .newsrows{margin:0}.newsrows p{grid-template-columns:82px 1fr;padding:18px 0}.newsrows time{font-size:9px}.newsrows b{font-size:12px}
  footer{padding:42px 24px;grid-template-columns:1fr 1fr;gap:26px}footer small{grid-column:1/-1}
}
@media(max-width:420px){
  .hero.hero-photo{min-height:570px;background-position:58% center}.hero.hero-photo .hero-copy{min-height:570px;padding-top:158px}.hero.hero-photo .hero-copy h1{font-size:28px}.book img{height:165px}
}

/* v12 — mobile polish after real-device review */
@media(max-width:700px){
  /* Hero: keep the real photograph, move the book to the right and protect the copy */
  .hero.hero-photo{
    min-height:585px;
    background-position:68% center;
    background-size:cover;
  }
  .hero.hero-photo::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,
      rgba(248,245,239,.94) 0%,
      rgba(248,245,239,.84) 30%,
      rgba(248,245,239,.54) 49%,
      rgba(248,245,239,.12) 68%,
      rgba(248,245,239,0) 82%);
  }
  .hero.hero-photo .hero-copy{
    position:relative;
    z-index:2;
    min-height:585px;
    padding:190px 24px 44px;
    width:100%;
    justify-content:flex-start;
  }
  .hero.hero-photo .hero-copy h1{
    max-width:64%;
    font-size:30px;
    line-height:1.48;
    margin:0 0 24px;
    text-shadow:none;
  }
  .hero.hero-photo .hero-copy>p:not(.eyebrow){
    max-width:60%;
    font-size:12px;
    line-height:1.95;
    color:#37342f;
    text-shadow:none;
  }
  .hero.hero-photo .textlink{
    margin-top:22px;
    padding:10px 14px;
    background:rgba(248,245,239,.74);
    backdrop-filter:blur(2px);
  }

  /* Section rhythm */
  .section{padding:52px 24px}
  .section>header{margin-bottom:34px}

  /* Selected activities: no more header collision */
  .timeline .section-title,
  .timeline>header{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;row-gap:8px;align-items:end}
  .timeline>header h2{grid-column:1;grid-row:1;font-size:27px;line-height:1.15;white-space:nowrap}
  .timeline>header span{grid-column:1;grid-row:2;font-size:9px;letter-spacing:.04em;color:#89847b}
  .timeline .activities-more{
    grid-column:2;
    grid-row:1;
    align-self:end;
    justify-self:end;
    margin:0 0 2px 0;
    font-size:9px;
    white-space:nowrap;
  }
  .years{margin-top:26px}
  .years div{grid-template-columns:58px minmax(0,1fr);gap:18px;padding:22px 0}
  .years b{font-size:15px;line-height:1.4}
  .years p{font-size:11px;line-height:1.85}

  /* About: slightly tighter and easier to read */
  .about{padding:62px 24px 66px;gap:28px}
  .about h2{font-size:26px;line-height:1.58;margin-top:24px}
  .about>p{font-size:11.5px;line-height:2.05;max-width:36em}

  /* Recent stays airy but not oversized */
  #news.section{padding-top:58px;padding-bottom:58px}
  #news .newsrows p{grid-template-columns:78px minmax(0,1fr);gap:16px;padding:20px 0}
  #news .newsrows b{font-size:11.5px;line-height:1.65}

  /* Footer: stack content cleanly on phones */
  footer{padding:50px 24px 58px;grid-template-columns:1fr;gap:22px}
  footer>div{margin-bottom:4px}
  footer strong{font-size:24px}
  footer p{margin:0}
  footer p:nth-of-type(2){display:flex;gap:18px;align-items:center;flex-wrap:wrap}
  footer p:nth-of-type(2) br{display:none}
  footer small{grid-column:auto;margin-top:22px}

  /* Activities detail page */
  .activities-page{padding:92px 24px 86px}
  .activities-page .page-head{margin-bottom:48px}
  .activities-page h1{font-size:36px}
  .activity-year{grid-template-columns:1fr;gap:18px;padding:28px 0}
  .activity-year h2{font-size:21px}
  .activity-item{grid-template-columns:72px minmax(0,1fr);gap:14px}
  .activity-item p{font-size:11.5px;line-height:1.8}
}

@media(max-width:420px){
  .hero.hero-photo{min-height:560px;background-position:70% center}
  .hero.hero-photo .hero-copy{min-height:560px;padding-top:176px}
  .hero.hero-photo .hero-copy h1{max-width:67%;font-size:27px;line-height:1.48}
  .hero.hero-photo .hero-copy>p:not(.eyebrow){max-width:64%;font-size:11.5px}
  .timeline>header h2{font-size:25px}
  .years div{grid-template-columns:52px minmax(0,1fr);gap:14px}
}

/* v13 — requested mobile hero adjustment only: 15% shorter, book smaller/right */
@media(max-width:700px){
  .hero.hero-photo{
    min-height:497px;
    background-position:76% center;
  }
  .hero.hero-photo .hero-copy{
    min-height:497px;
    padding-top:156px;
    padding-bottom:36px;
  }
}
@media(max-width:420px){
  .hero.hero-photo{
    min-height:476px;
    background-position:80% center;
  }
  .hero.hero-photo .hero-copy{
    min-height:476px;
    padding-top:148px;
    padding-bottom:32px;
  }
}

/* v14 — correct mobile hero direction; keep 15% shorter height */
@media(max-width:700px){
  .hero.hero-photo{
    min-height:497px;
    background-position:58% center;
  }
  .hero.hero-photo .hero-copy{
    min-height:497px;
    padding-top:156px;
    padding-bottom:36px;
  }
}
@media(max-width:420px){
  .hero.hero-photo{
    min-height:476px;
    background-position:54% center;
  }
  .hero.hero-photo .hero-copy{
    min-height:476px;
    padding-top:148px;
    padding-bottom:32px;
  }
}

/* v15 — mobile-specific hero artwork supplied by user */
@media (max-width: 900px){
  .hero.hero-photo{
    background-image:
      linear-gradient(90deg,rgba(248,245,239,.16),rgba(248,245,239,0) 58%),
      url('assets/hero-mobile.png');
    background-size:cover;
    background-position:center center;
  }
}
@media (max-width: 560px){
  .hero.hero-photo{
    background-image:
      linear-gradient(90deg,rgba(248,245,239,.12),rgba(248,245,239,0) 56%),
      url('assets/hero-mobile.png');
    background-size:cover;
    background-position:center center;
  }
}

/* v16 — keep mobile hero body copy clear of the book */
@media (max-width: 560px){
  .hero.hero-photo .hero-copy>p:not(.eyebrow){
    max-width:52%;
  }
}