:root{
  --paper:#fcfaf6;
  --brown:#3b2c22;
  --brown-lt:#6a5648;
  --teal:#2f6b6a;
  --teal-lt:#e0ecea;
  --stone:#e7e0d6;
  --rule:#d8d0c4;
  --serif:'Lora',Georgia,serif;
  --sans:'Karla',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;color:var(--brown);background:var(--paper);line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1200px,100% - 3rem);margin-inline:auto}

/* teal bar */
.tealbar{background:var(--teal);color:#e6f0ef;font-size:.82rem}
.tb{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 0}
.tb a{font-weight:500;border-bottom:1px solid rgba(255,255,255,.45)}
.tb i{margin-right:.45rem}

/* header */
.hdr{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:70;transition:padding .25s,box-shadow .25s}
.hdr.lift{box-shadow:0 6px 22px rgba(59,44,34,.08)}
.hdr-in{display:flex;align-items:center;gap:2rem;padding:1.3rem 0}
.wordmark{font-family:var(--serif);font-size:1.85rem;font-weight:600;letter-spacing:-.02em;line-height:1;margin-right:auto}
.wordmark em{display:block;font-style:normal;font-family:var(--sans);font-weight:500;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);margin-top:.4rem}
.nav{display:flex;gap:1.8rem;font-size:.9rem;color:var(--brown-lt)}
.nav a{padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.nav a:hover,.nav a.on{border-color:var(--teal);color:var(--teal)}
.num{font-family:var(--serif);font-size:1.15rem;color:var(--brown);white-space:nowrap}
.num:hover{color:var(--teal)}
.burger{display:none;width:42px;height:38px;background:none;border:1px solid var(--brown);flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{width:18px;height:1.5px;background:var(--brown);transition:transform .25s}
.burger.on span:first-child{transform:translateY(6.5px) rotate(45deg)}
.burger.on span:last-child{transform:translateY(-6.5px) rotate(-45deg)}

/* hero */
.hero{display:grid;grid-template-columns:1.12fr .88fr;align-items:stretch}
.hero-fig{position:relative;overflow:hidden;min-height:520px}
.hero-fig img{width:100%;height:100%;object-fit:cover}
.vlab{position:absolute;left:1.6rem;bottom:1.6rem;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:#fff;background:rgba(59,44,34,.62);padding:.8rem .5rem}
.hero-panel{background:var(--stone);padding:4.5rem 3.5rem;display:flex;flex-direction:column;justify-content:center;position:relative}
.kicker{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
.hero-panel h1{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:600;line-height:1.14;letter-spacing:-.02em}
.sub{margin-top:1.3rem;color:var(--brown-lt)}
.sub2{margin-top:.8rem;color:var(--brown-lt);font-size:.95rem}
.hcall{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.95rem}
.hcall a{font-family:var(--serif);font-size:1.3rem;color:var(--teal);border-bottom:1px solid var(--teal)}
.hcall a:hover{color:var(--brown);border-color:var(--brown)}

/* section head */
.sh{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;line-height:1.24;margin-bottom:2.2rem;padding-bottom:.8rem;border-bottom:2px solid var(--brown);max-width:26ch}
.sh.big{max-width:22ch;font-size:clamp(1.7rem,3.2vw,2.6rem)}

/* columns */
.columns{padding:5rem 0}
.col-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule)}
.col{padding:1.8rem 1.6rem 2rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background .3s}
.col:last-child{border-right:0}
.col:hover{background:var(--teal-lt)}
.cn{display:block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:.8rem}
.col h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;margin-bottom:.5rem}
.col p{font-size:.93rem;color:var(--brown-lt)}

/* about */
.about{padding:5rem 0;background:var(--stone)}
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:2.8rem;max-width:1000px;margin-top:2.2rem}
.duo p{color:var(--brown-lt)}

/* notes */
.notes{padding:5rem 0}
.n-list{list-style:none;counter-reset:n;border-top:1px solid var(--rule)}
.n-list li{display:grid;grid-template-columns:52px 190px 1fr;gap:1.4rem;padding:1.05rem 0;border-bottom:1px solid var(--rule);font-size:.95rem;color:var(--brown-lt)}
.n-list li::before{content:counter(n,decimal-leading-zero);counter-increment:n;font-family:var(--serif);font-size:.9rem;color:var(--teal)}
.n-list b{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--brown)}

/* guide */
.guide{padding:5rem 0;background:var(--teal-lt)}
.g-fig{margin-bottom:2.4rem;border-bottom:1px solid var(--rule);padding-bottom:2rem}
.g-fig img{width:100%;height:340px;object-fit:cover}
.g-fig figcaption{margin-top:.8rem;font-size:.84rem;color:var(--brown-lt)}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}
.g i{font-size:1.3rem;color:var(--teal);margin-bottom:.9rem;display:block}
.g h4{font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-bottom:.45rem}
.g p{font-size:.93rem;color:var(--brown-lt)}

/* close */
.close{background:var(--brown);color:#efe7de;padding:4.5rem 0}
.close-in{display:flex;justify-content:space-between;align-items:center;gap:2.5rem;flex-wrap:wrap}
.close h2{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:600;line-height:1.2}
.close p{margin-top:.6rem;color:#c3b3a5}
.close-num{font-family:var(--serif);font-size:clamp(1.8rem,3.2vw,2.6rem);color:#7fb9b7;border-bottom:2px solid rgba(127,185,183,.5);padding-bottom:.15rem;white-space:nowrap;transition:color .25s,border-color .25s}
.close-num:hover{color:#fff;border-color:#fff}

/* directory */
.directory{padding:3.4rem 0;background:var(--stone)}
.dir-in{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem}
.dir h4{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);margin-bottom:.8rem}
.dir p{font-size:1rem;color:var(--brown-lt);line-height:1.8}
.dir a{color:var(--brown);border-bottom:1px solid var(--teal);transition:color .25s}
.dir a:hover{color:var(--teal)}

/* footer */
.ftr{background:#2b2019;color:#a3928a;font-size:.84rem;padding:2.2rem 0}
.ftr-in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].in{opacity:1;transform:none}

@media(max-width:1024px){
  .hero{grid-template-columns:1fr}
  .hero-fig{min-height:340px}
  .col-grid{grid-template-columns:repeat(2,1fr)}
  .col{border-right:1px solid var(--rule)}
  .g-grid{grid-template-columns:repeat(2,1fr)}
  .g-fig img{height:240px}
}
@media(max-width:760px){
  .wrap{width:min(1200px,100% - 2rem)}
  .tb{flex-direction:column;gap:.2rem;text-align:center;font-size:.76rem}
  .burger{display:flex}
  .num{display:none}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease;border-bottom:1px solid var(--rule)}
  .nav.open{max-height:290px}
  .nav a{padding:.9rem 1.5rem;border-bottom:1px solid var(--rule);font-size:1rem}
  .col-grid,.duo,.g-grid{grid-template-columns:1fr}
  .col{border-right:0}
  .n-list li{grid-template-columns:38px 1fr;gap:.6rem 1rem}
  .n-list b{grid-column:2}
  .hero-panel{padding:3rem 1.6rem}
  .dir-in{grid-template-columns:1fr;gap:1.8rem}
}