*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F5F0E8;color:#3B3129;font-family:'Instrument Sans',sans-serif;font-weight:400;font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.65;letter-spacing:0.01em;overflow-x:hidden}

.folio-header{min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(24px,6vw,80px) 15vh calc(15vw + clamp(24px,4vw,48px))}
.header-bg{position:absolute;inset:0;background:linear-gradient(145deg,#EDE6D8 0%,#F5F0E8 100%);z-index:0}
.site-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.4rem,6vw,5.6rem);letter-spacing:0.02em;line-height:1.08;color:#3B3129;position:relative;z-index:1}
.site-tagline{font-family:'Cormorant',serif;font-weight:300;font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);color:#7A7062;margin-top:0.5em;position:relative;z-index:1}

.horizon-line{width:100%;padding:clamp(48px,8vh,80px) clamp(24px,6vw,80px);text-align:center}
.horizon-line span{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:0.8rem;letter-spacing:0.15em;text-transform:uppercase;color:#5B6B78;position:relative;display:inline-block;padding:0 1em}
.horizon-line span::before,.horizon-line span::after{content:'';position:absolute;top:50%;width:clamp(40px,10vw,120px);height:1px;background:#5B6B78;opacity:0.3}
.horizon-line span::before{right:100%}
.horizon-line span::after{left:100%}

.portfolio{display:flex;max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.reading-margin{width:15%;flex-shrink:0}
.pin-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.panel{background:#EDE6D8;border-radius:4px;padding:clamp(20px,3vw,36px);position:relative;box-shadow:0 2px 8px rgba(46,37,29,0.06)}
.feature-panel{grid-column:span 2}
.square-panel{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center}
.portrait-panel{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}

.panel h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:0.02em;line-height:1.12;color:#3B3129;margin-bottom:0.6em}
.panel h3{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(1.1rem,2vw,1.5rem);color:#5B6B78;margin-bottom:0.5em}
.panel p{color:#7A7062;max-width:42ch;margin-bottom:0.8em}
.pull-quote{font-family:'Cormorant',serif;font-weight:300;font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);color:#3B3129;text-align:center;line-height:1.4}

.panel:hover{box-shadow:0 4px 16px rgba(46,37,29,0.1)}
.panel::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:#E8A87C;transform:scaleX(0);transition:transform 0.3s ease;transform-origin:left}
.panel:hover::after{transform:scaleX(1)}

.notes-section{max-width:640px;margin:0 auto;padding:clamp(24px,6vw,80px)}
.note{font-family:'Cormorant',serif;font-weight:300;font-style:italic;font-size:clamp(1.1rem,2vw,1.4rem);color:#7A7062;text-align:center;line-height:1.6}

.site-footer{text-align:center;padding:clamp(32px,6vh,60px);font-size:0.8rem;color:#7A7062;opacity:0.5}

[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 0.5s ease,transform 0.5s ease}
[data-reveal].visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  .reading-margin{display:none}
  .pin-grid{grid-template-columns:1fr 1fr}
  .feature-panel{grid-column:span 2}
  .folio-header{padding-left:clamp(16px,4vw,32px)}
}
@media(max-width:480px){
  .pin-grid{grid-template-columns:1fr}
  .feature-panel{grid-column:span 1}
  .square-panel{aspect-ratio:auto}
  .portrait-panel{aspect-ratio:auto}
}