@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;450;500;550;600;650;700&family=Noto+Serif+KR:wght@400;500;600&display=swap');


:root{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
color:#283d33;
background:#fafbf8;
font-synthesis:none;
--green:#365348;
--muted:#718078;
--border:#dfe5dc;
--serif:'Noto Serif KR',Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;
scroll-padding-top:102px}
body{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;
text-decoration:none}
button{font:inherit;
color:inherit;
cursor:pointer}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #6c8c64;
outline-offset:5px}
svg{width:20px;
height:20px;
flex-shrink:0}
h1,h2,h3,h4,p,figure{margin:0}
.skip-link{position:fixed;
top:-100px;
left:20px;
padding:14px;
background:var(--green);
color:white;
z-index:10}
.skip-link:focus{top:10px}
.site-header{height:94px;
border-bottom:1px solid var(--border);
background:#fafbf8ef;
position:sticky;
top:0;
z-index:5;
backdrop-filter:blur(12px)}
.header-inner{max-width:1120px;
height:100%;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center}
.brand{display:flex;
gap:11px;
align-items:center}
.brand>svg{width:34px;
height:41px}
.brand>span{font-family:var(--serif);
font-size:25px;
font-weight:600;
letter-spacing:2px}
.brand small{display:block;
font-family:'Noto Sans KR',sans-serif;
font-size:9px;
letter-spacing:2px;
font-weight:500;
margin-top:3px}
nav{display:flex;
align-items:center;
gap:32px;
height:100%;
font-size:14px;
color:#6a766e}
nav a{height:100%;
display:flex;
align-items:center;
position:relative}
nav a:hover{color:var(--green)}
nav .nav-active{color:var(--green);
font-weight:600}
nav .nav-active:after{content:'';
position:absolute;
height:2px;
bottom:0;
left:0;
right:0;
background:var(--green)}
.page-shell{max-width:1120px;
margin:0 auto}
.introduction{margin:38px 0 57px;
display:grid;
grid-template-columns:1fr 1fr;
min-height:308px;
overflow:hidden;
border-radius:10px;
background:#eef2e9}
.intro-copy{padding:34px 40px}
.eyebrow{display:block;
font-size:11px;
font-weight:600;
letter-spacing:2.2px;
color:#6e8069}
.intro-copy h1{font-family:var(--serif);
font-size:35px;
font-weight:400;
letter-spacing:-1.7px;
line-height:1.6;
margin:14px 0 13px}
.intro-copy h1 span{font-weight:600}
.intro-copy>p{font-size:14px;
line-height:1.95;
color:#657163}
.garden-note{display:flex;
align-items:center;
gap:6px;
font-size:12px;
color:#67735f;
margin-top:23px}
.garden-note svg{width:14px;
height:14px}
.sample-tag{font-size:10px;
padding:2px 6px;
margin-left:4px;
background:#e2e8dc;
border-radius:3px}
.intro-image{position:relative;
min-height:100%}
.intro-image:after{content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg,#283d3300,#1f392012)}
.intro-image>img{position:absolute;
width:100%;
height:100%;
object-fit:cover;
filter:saturate(.67)}
.photo-label{position:absolute;
bottom:22px;
right:25px;
color:#fff;
font-family:var(--serif);
font-size:13px;
letter-spacing:1px;
text-shadow:0 1px 8px #000;
z-index:1}
.section-heading{display:flex;
justify-content:space-between;
align-items:flex-end;
padding-bottom:25px;
border-bottom:1px solid var(--border)}
.section-heading h2{font-size:25px;
letter-spacing:-1px;
font-weight:600;
margin-top:8px}
.section-heading h2>span{font-size:14px;
font-weight:400;
color:#7b8d72;
vertical-align:middle;
letter-spacing:0;
margin-left:8px}
.swipe-hint{display:flex;
align-items:center;
gap:7px;
font-size:12px;
color:#758075;
padding-bottom:2px}
.swipe-hint svg{width:17px;
height:17px}
.plant-card{display:grid;
grid-template-columns:1.05fr 1fr;
gap:45px;
padding:34px 0 38px;
border-bottom:1px solid var(--border);
scroll-margin-top:10px}
.photo-viewport{position:relative;
border-radius:9px;
overflow:hidden;
background:#e5eadf;
isolation:isolate}
.photo-track{display:flex;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
overscroll-behavior-x:contain}
.photo-track::-webkit-scrollbar{display:none}
.photo-slide{flex:0 0 100%;
min-width:0;
scroll-snap-align:start;
position:relative;
aspect-ratio:1.29;
scroll-snap-stop:always}
.photo-slide:after{content:'';
position:absolute;
inset:55% 0 0;
background:linear-gradient(transparent,#10241666);
pointer-events:none}
.photo-slide img{width:100%;
height:100%;
display:block;
object-fit:cover;
filter:saturate(.78)}
.photo-slide figcaption{position:absolute;
bottom:22px;
left:22px;
font-size:13px;
color:#fff;
z-index:1}
.image-index{position:absolute;
left:18px;
top:18px;
background:#fafbf8e8;
padding:7px 10px;
border-radius:4px;
font-size:13px;
pointer-events:none}
.image-index>span{font-size:9px;
letter-spacing:1px;
color:#6b7864;
margin-left:3px}
.photo-count{position:absolute;
bottom:18px;
right:18px;
font-size:11px;
color:#eef2e8;
background:#142b3066;
padding:5px 10px;
border-radius:20px;
pointer-events:none}
.photo-count b{font-weight:500}
.gallery-controls{display:flex;
align-items:center;
justify-content:space-between;
position:relative;
height:54px}
.gallery-label{font-family:Georgia,serif;
font-size:13px;
font-style:italic;
color:#7f887c}
.photo-dots{display:flex;
align-items:center;
position:absolute;
left:50%;
transform:translateX(-50%)}
.photo-dot{width:28px;
height:38px;
padding:0;
border:0;
background:transparent;
position:relative}
.photo-dot:after{content:'';
width:5px;
height:5px;
border-radius:50%;
position:absolute;
top:16px;
left:11px;
background:#c4cdc0;
transition:width .2s}
.photo-dot.is-active:after{width:17px;
border-radius:5px;
left:5px;
background:#526c47}
.gallery-arrows{display:flex;
gap:4px}
.gallery-arrows button{width:36px;
height:36px;
border:1px solid #dce2d7;
border-radius:50%;
background:transparent;
display:grid;
place-items:center}
.gallery-arrows button:not(:disabled):hover{background:#e7ece0}
.gallery-arrows button:disabled{opacity:.35}
.gallery-arrows svg{width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:1.5}
.plant-meta{display:flex;
justify-content:space-between;
align-items:center;
margin:1px 0 11px;
font-size:11px}
.plant-type{display:flex;
align-items:center;
gap:5px;
background:#eaf0e3;
color:#617353;
padding:5px 9px;
border-radius:4px}
.plant-type svg{width:13px;
height:13px}
.plant-location{display:flex;
align-items:center;
gap:4px;
color:#74806f}
.plant-location svg{width:13px;
height:13px}
.plant-info h3{font-family:var(--serif);
font-weight:600;
font-size:32px;
letter-spacing:-1px;
line-height:1.5}
.scientific-name{font-family:Georgia,serif;
font-style:italic;
font-size:14px;
color:#7b8976;
margin-top:2px}
.plant-info h4{font-size:16px;
letter-spacing:-.45px;
font-weight:550;
margin:22px 0 9px}
.plant-description{font-size:14px;
color:#6a7368;
line-height:1.95;
word-break:keep-all}
.plant-facts{display:grid;
grid-template-columns:1fr 1.2fr;
margin:19px 0;
gap:20px}
.plant-facts>div+div{border-left:1px solid var(--border);
padding-left:23px}
.plant-facts dt{font-size:11px;
color:#7d8976;
margin-bottom:5px}
.plant-facts dd{font-size:13px;
margin:0;
color:#475b41}
.observation{background:#edf1e7;
border-radius:6px;
padding:15px 18px}
.observation>span{display:flex;
align-items:center;
gap:7px;
font-size:12px;
font-weight:550;
color:#536949}
.observation svg{width:16px;
height:16px}
.observation p{font-size:12px;
line-height:1.9;
color:#6a7760;
margin-top:6px;
word-break:keep-all}
.plant-details{margin-top:13px;
font-size:13px}
.plant-details summary,.credits summary{display:flex;
align-items:center;
justify-content:space-between;
list-style:none;
cursor:pointer;
min-height:44px}
.plant-details summary::-webkit-details-marker,.credits summary::-webkit-details-marker{display:none}
.plant-details summary>span,.credits summary>span{font-size:20px;
font-weight:400;
transition:transform .2s}
.plant-details[open] summary>span,.credits[open] summary>span{transform:rotate(45deg)}
.plant-details>div{color:#6a7368;
font-size:14px;
line-height:1.9;
padding:4px 0 14px}
.plant-details a{display:inline-block;
color:#536949;
text-decoration:underline;
text-underline-offset:3px;
font-size:12px;
margin-top:12px}
.visit-section{display:grid;
grid-template-columns:1fr 1.6fr;
background:#eef2e9;
border:1px solid #e3e8dc;
border-radius:9px;
padding:35px 38px;
gap:35px;
margin-top:40px}
.visit-title h2{font-family:var(--serif);
font-size:25px;
font-weight:500;
letter-spacing:-.8px;
margin:9px 0}
.visit-title p{font-size:13px;
line-height:1.9;
color:#77816f}
.visit-notes{display:flex;
flex-direction:column;
justify-content:center;
gap:24px}
.visit-notes>div{display:flex;
gap:14px}
.note-number{font-family:Georgia,serif;
color:#86967d;
font-size:15px;
padding-top:2px}
.visit-notes h3{font-size:14px;
font-weight:500}
.visit-notes p{font-size:13px;
color:#74806b;
margin-top:7px;
line-height:1.8}
.credits{padding:12px 0;
color:#7a8373;
font-size:12px}
.credits summary{justify-content:flex-end;
gap:13px}
.credits>div{padding:14px 20px;
background:#f0f3ec;
line-height:1.9}
.credits a{text-decoration:underline;
text-underline-offset:3px}
.credits p+p{margin-top:10px}
.site-footer{max-width:1120px;
border-top:1px solid var(--border);
margin:22px auto 0;
padding:27px 0 36px;
display:flex;
align-items:center;
justify-content:space-between;
color:#7c8676;
font-size:11px}
.footer-brand{font-family:var(--serif);
color:#5b6a52;
font-size:18px;
letter-spacing:1px}
.footer-brand span{font-family:sans-serif;
font-size:9px;
letter-spacing:1.7px;
margin-left:10px}
.site-footer>a:last-child{display:flex;
gap:13px;
align-items:center}
.site-footer>a:last-child span{font-size:18px}

@media(min-width:1400px){.page-shell,.header-inner,.site-footer{max-width:1160px}
.intro-copy{padding:39px 44px}
.introduction{min-height:330px}
.plant-card{gap:52px}
}

@media(max-width:1199px){.page-shell,.header-inner,.site-footer{margin-left:40px;
margin-right:40px}
.plant-card{gap:30px}
.intro-copy{padding:28px 30px}
.intro-copy h1{font-size:32px}
}

@media(max-width:760px){html{scroll-padding-top:88px}
.site-header{height:77px}
.header-inner,.page-shell,.site-footer{margin-left:22px;
margin-right:22px}
.brand{gap:7px}
.brand>svg{width:27px;
height:33px}
.brand>span{font-size:21px}
.brand small{font-size:8px;
letter-spacing:1.5px}
nav{gap:20px;
font-size:12px}
.introduction{grid-template-columns:1fr;
margin-top:23px;
margin-bottom:36px}
.intro-copy{padding:27px 27px 28px}
.intro-copy h1{font-size:31px;
line-height:1.55;
margin:12px 0}
.intro-copy>p{font-size:14px}
.garden-note{margin-top:18px}
.intro-image{min-height:176px}
.intro-image img{object-position:50% 55%}
.photo-label{bottom:18px;
font-size:12px}
.eyebrow{font-size:10px;
letter-spacing:1.8px}
.section-heading{align-items:flex-start;
gap:12px;
flex-direction:column;
padding-bottom:19px}
.section-heading h2{font-size:23px;
margin-top:6px}
.section-heading h2>span{font-size:13px}
.swipe-hint{font-size:11px;
gap:5px}
.plant-card{grid-template-columns:1fr;
gap:10px;
padding:24px 0 31px}
.photo-slide{aspect-ratio:1.25}
.gallery-controls{height:47px}
.plant-meta{margin-top:8px;
font-size:12px}
.plant-info h3{font-size:31px}
.scientific-name{font-size:14px}
.plant-info h4{font-size:16px;
margin-top:19px}
.plant-description{font-size:15px;
line-height:1.95}
.plant-facts{margin:20px 0}
.plant-facts dt{font-size:12px}
.plant-facts dd{font-size:14px}
.observation{padding:17px}
.observation>span{font-size:13px}
.observation p{font-size:13px}
.plant-details{font-size:14px;
margin-top:10px}
.visit-section{grid-template-columns:1fr;
gap:24px;
padding:27px 24px;
margin-top:29px}
.visit-title h2{font-size:24px}
.visit-title p br{display:none}
.visit-notes{gap:21px}
.visit-notes h3{font-size:14px}
.visit-notes p{font-size:13px}
.site-footer{flex-wrap:wrap;
gap:17px;
padding:24px 0 30px;
margin-top:14px}
.site-footer>span{order:3;
width:100%;
font-size:11px}
.site-footer>a:last-child{font-size:12px}
.footer-brand{font-size:17px}
.credits summary{font-size:12px}
.credits>div{overflow-wrap:anywhere}
}

@media(max-width:360px){.header-inner,.page-shell,.site-footer{margin-left:16px;
margin-right:16px}
nav{gap:13px;
font-size:11px}
.intro-copy{padding:24px 21px}
.intro-copy h1{font-size:28px}
.plant-info h4{font-size:15px}
.plant-facts{gap:12px}
.plant-facts>div+div{padding-left:14px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important}
}


/* Readability and touch targets across screen sizes. */
.plant-gallery, .plant-info { min-width: 0;
 }

.intro-copy > p, .plant-description, .plant-details > div { font-size: 1rem;
 }

.observation p, .visit-title p, .visit-notes p { font-size: .875rem;
 }

.observation > span, .plant-facts dd, .plant-details, .visit-notes h3, nav { font-size: .875rem;
 }

.eyebrow, .plant-meta, .plant-facts dt, .swipe-hint, .garden-note { font-size: .75rem;
 }

.gallery-arrows button { width: 44px;
 height: 44px;
 }

.gallery-controls { min-height: 54px;
 }

.photo-dot { width: 32px;
 height: 44px;
 }

.photo-dot:after { top: 20px;
 left: 13px;
 }

.photo-dot.is-active:after { left: 7px;
 }

#plant-hydrangea .photo-slide:nth-child(2) img { object-position: center 65%;
 }

@media (max-width: 760px) {
  .intro-copy { padding: 24px 25px;
 }

  .intro-copy h1 { font-size: 1.875rem;
 line-height: 1.5;
 }

  .intro-image { min-height: 150px;
 }

  nav { font-size: .75rem;
 }

}

.gallery-label {
  max-width: calc(50% - 36px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}