
:root{
  --cream:#f4efe5;
  --ink:#171713;
  --forest:#071b12;
  --forest2:#0b2418;
  --sage:#9ba99a;
  --white:#fffdf8;
  --line:rgba(23,23,19,.18);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.45}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.site-header{
  position:absolute;z-index:100;top:0;left:0;right:0;
  padding:22px 0;pointer-events:none;
}
.site-header .inner{width:min(var(--max),calc(100% - 48px));margin:auto;display:flex;align-items:center;justify-content:space-between}
.brand,.menu-toggle{pointer-events:auto}
.brand{font-weight:800;letter-spacing:.11em;font-size:13px;text-transform:uppercase}
.menu-toggle{border:0;background:transparent;color:inherit !important;-webkit-appearance:none;appearance:none;width:42px;height:42px;padding:8px;display:grid;gap:5px;align-content:center;cursor:pointer}
.menu-toggle span{height:2px;background:currentColor;display:block;border-radius:2px}
.site-header.light{color:var(--white)}
.site-header.dark{color:var(--ink)}
.menu{
  position:fixed;z-index:110;inset:0;background:rgba(244,239,229,.98);
  display:none;padding:100px 28px 40px;
}
.menu.open{display:block}
.menu a{display:block;font-family:Georgia,'Times New Roman',serif;font-size:40px;margin:18px 0}
.menu .close{position:absolute;right:28px;top:28px;border:0;background:none;font-size:38px}
.page{min-height:100svh;position:relative;display:flex;align-items:center}
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:28px}
h1,h2,h3,p{margin-top:0}
.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em;line-height:.98}
.italic{font-style:italic}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;
  border-radius:6px;background:var(--forest);color:white;border:1px solid var(--forest);
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.btn.light{background:white;color:var(--ink);border-color:white}
.btn.sage{background:var(--sage);border-color:var(--sage)}
.meta{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}

/* 1 */
.hero{
  color:white;background-image:linear-gradient(rgba(10,17,17,.23),rgba(5,12,12,.44)),url('images/hero.jpg');
  background-size:cover;background-position:center center;align-items:flex-start;
}
.hero .wrap{padding-top:180px;padding-bottom:60px}
.hero h1{font-size:clamp(58px,8vw,104px);max-width:760px;margin-bottom:42px}
.hero .lead{font-size:clamp(18px,2.2vw,24px);max-width:700px}
.hero .services{margin-top:62px;font-size:12px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}

/* 2 */
.rooms{background:var(--cream);padding:120px 0 80px;align-items:flex-start}
.rooms .photo{max-width:880px;margin:0 auto 48px}
.rooms .photo img{aspect-ratio:16/10;object-fit:cover}
.rooms h2{font-size:clamp(42px,6vw,72px);max-width:840px;margin-bottom:34px}
.rooms p{font-size:clamp(18px,2vw,22px);max-width:820px}
.rooms .words{margin-top:90px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
/* no buttons on page 2 by design */

/* 3 */
.leadership{padding:110px 0 70px;align-items:flex-start}
.leadership h2{font-size:clamp(44px,6vw,74px);max-width:880px}
.collage{display:grid;grid-template-columns:1.9fr .9fr;gap:14px;margin:38px 0 32px}
.collage .big img{height:100%;object-fit:cover}
.collage .side{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.collage .side img{height:100%;object-fit:cover}
.leadership h3{font-size:clamp(28px,4vw,42px);margin-bottom:22px}
.leadership p{font-size:18px;max-width:780px}
.leadership .bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:75px}

/* 4 */
.leadership-deep{
  color:white;background-image:linear-gradient(rgba(5,15,12,.53),rgba(5,15,12,.58)),url('images/lake.jpg');
  background-size:cover;background-position:center;
}
.leadership-deep h2{font-size:clamp(42px,5.8vw,72px);max-width:950px}
.leadership-deep h3{font-size:clamp(38px,5vw,62px);max-width:850px;margin:28px 0 40px}
.leadership-deep p{font-size:18px;max-width:800px}
.leadership-deep .trust{font-size:20px;font-weight:800;margin:55px 0 80px}

/* 5 */
.story-one{background:var(--forest);color:white;padding:112px 0 70px;align-items:flex-start}
.story-one h2{font-size:clamp(48px,6vw,78px);max-width:800px}
.story-one .books{margin:36px 0 34px}
.story-one .books img{aspect-ratio:16/10;object-fit:cover;object-position:center}
.story-one h3{font-size:clamp(34px,5vw,54px);max-width:780px;margin-bottom:35px}
.story-one p{font-size:17px;max-width:820px}
.story-one .bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:60px}

/* 6 */
.story-two{background:var(--cream);padding:110px 0 70px;align-items:flex-start}
.story-two .book-close{max-width:880px;margin:0 auto 42px}
.story-two .book-close img{aspect-ratio:16/8.5;object-fit:cover}
.story-two h2{font-size:clamp(44px,6vw,70px);max-width:820px}
.story-two h3{font-size:clamp(32px,5vw,52px);max-width:920px;margin:30px 0 42px}
.story-two p{font-size:18px;max-width:820px}
.story-two .emph{font-weight:800;margin-top:75px}
.story-two .btn{margin-top:28px}

/* 7 */
.keynote{
  color:white;background-image:linear-gradient(rgba(3,6,12,.34),rgba(2,4,8,.58)),url('images/stage.jpg');
  background-size:cover;background-position:center;
}
.keynote h2{font-size:clamp(52px,7vw,88px)}
.keynote h3{font-size:clamp(38px,5.4vw,64px);max-width:740px;margin:35px 0}
.keynote p{font-size:18px;max-width:750px}
.keynote .tag{font-family:Georgia,'Times New Roman',serif;font-size:30px;margin:80px 0 28px}

/* 8 */
.about-hof{padding:110px 0 80px;align-items:flex-start}
.about-hof h2{font-size:clamp(48px,6vw,76px);max-width:800px}
.about-hof .hofimg{margin:36px 0 35px}
.about-hof .hofimg img{aspect-ratio:16/7;object-fit:cover}
.about-hof p{font-size:18px;max-width:820px}
.about-hof h3{font-size:clamp(30px,4.2vw,48px);margin:48px 0 24px}

/* 9 */
.world{
  color:white;background-image:linear-gradient(rgba(12,15,13,.47),rgba(8,12,10,.49)),url('images/volcano.jpg');
  background-size:cover;
  /* approved: slightly more of person visible while remaining right-cropped */
  background-position:56% center;
}
.world h2{font-size:clamp(48px,6vw,76px);max-width:860px}
.world h3{font-size:clamp(38px,5vw,60px);margin:30px 0 45px}
.world p{font-size:18px;max-width:760px}
.world .meta{margin-top:100px;color:white;line-height:1.8}

/* 10 */
.krabat{background:var(--forest);color:white;padding:110px 0 80px;align-items:flex-start}
.krabat .image{margin:10px 0 38px}
.krabat .image img{aspect-ratio:16/7.5;object-fit:cover}
.krabat h2{font-size:clamp(44px,6vw,72px);max-width:800px}
.krabat p{font-size:17px;max-width:850px}

/* 11 */
.today{padding:110px 0 80px;align-items:flex-start}
.today .image{margin:10px 0 38px}
.today .image img{aspect-ratio:16/7.5;object-fit:cover;object-position:center 38%}
.today h2{font-size:clamp(44px,6vw,70px);max-width:780px}
.today p{font-size:18px;max-width:850px}

/* 12/contact */
.contact{background:var(--cream);padding:110px 0 80px;align-items:flex-start}
.contact h2{font-size:clamp(50px,7vw,84px);max-width:800px}
.contact .intro{font-size:19px;max-width:700px;margin-bottom:40px}
.form{
  max-width:760px;background:#fffaf3;border:1px solid var(--line);padding:28px;border-radius:12px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
input,textarea{
  width:100%;border:1px solid #bdb7aa;border-radius:6px;background:white;color:var(--ink);
  padding:14px 15px;outline:none
}
input:focus,textarea:focus{border-color:var(--forest)}
textarea{min-height:130px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.check input{width:auto;margin-top:3px}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.form-note{font-size:12px;color:#5a564e;margin-top:12px}
.status{padding:13px 15px;border-radius:6px;margin-bottom:18px;font-size:14px}
.status.ok{background:#e4f2e7;color:#184c25}
.status.err{background:#fae6e2;color:#7c2119}

footer{background:var(--forest);color:#d8ded6;padding:36px 0}
footer .inner{width:min(var(--max),calc(100% - 48px));margin:auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .links{display:flex;gap:18px;flex-wrap:wrap;font-size:12px}
footer .copy{font-size:12px}

.legal{padding:120px 0 80px;min-height:100vh}
.legal h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(48px,7vw,78px);font-weight:400}
.legal h2{font-family:Georgia,'Times New Roman',serif;font-size:28px;margin-top:45px}
.legal p,.legal li{max-width:850px;line-height:1.65}
.legal a{text-decoration:underline}

@media(max-width:760px){
  .site-header{padding:16px 0}
  .site-header .inner{width:calc(100% - 38px)}
  .brand{font-size:11px}
  .page{min-height:100svh}
  .wrap{width:calc(100% - 48px)}
  .hero .wrap{padding-top:150px;padding-bottom:42px}
  .hero h1{font-size:62px}
  .hero .lead{font-size:17px}
  .hero .services{margin-top:55px;font-size:10px}
  .rooms{padding-top:90px}
  .rooms .photo{margin-top:35px}
  .rooms .photo img{aspect-ratio:4/3}
  .rooms .words{margin-top:110px}
  .leadership{padding-top:90px}
  .leadership h2{font-size:34px;line-height:1.02}
  .collage{grid-template-columns:1.9fr .9fr;gap:8px;height:143px;margin:26px 0 20px;overflow:hidden}
  .collage .big,.collage .side{min-width:0;min-height:0;overflow:hidden}
  .collage .big img{width:100%;height:143px;object-fit:cover;object-position:center center}
  .collage .side{display:grid;grid-template-rows:1fr 1fr;gap:7px;height:143px}
  .collage .side img{width:100%;height:68px;min-height:0;object-fit:cover}
  .collage .side img:first-child{object-position:center 74%}
  .collage .side img:last-child{object-position:center 52%}
  .leadership h3{font-size:27px;line-height:1.05;margin-bottom:18px}
  .leadership p{font-size:13px;line-height:1.5;max-width:none}
  .leadership .bottom{margin-top:125px}
  .leadership .bottom,.story-one .bottom{display:block}
  .leadership .bottom .btn,.story-one .bottom .btn{width:100%;margin-top:20px}
  .leadership-deep .wrap{padding-top:80px;padding-bottom:40px}
  .story-one,.story-two,.about-hof,.krabat,.today,.contact{padding-top:90px}
  .story-one .books img{aspect-ratio:1/1}
  .story-two .book-close img{aspect-ratio:16/9}
  .about-hof .hofimg img,.krabat .image img,.today .image img{aspect-ratio:16/9}
  .world{background-position:55% center}
  .world .wrap{padding-top:90px;padding-bottom:40px}
  .world .meta{margin-top:65px}
  .grid2{grid-template-columns:1fr}
  .form{padding:20px}
}

.socials{display:flex;gap:14px;flex-wrap:wrap}
.socials a{font-weight:700}
@media(max-width:760px){.socials{width:100%;margin-top:8px}}
