@font-face{font-family:'Denim';src:url('assets/Denim-Light.ttf');font-weight:300;font-display:swap}
@font-face{font-family:'Denim';src:url('assets/Denim-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'Denim';src:url('assets/Denim-Medium.ttf');font-weight:500;font-display:swap}
@font-face{font-family:'Season Mix';src:url('assets/SeasonMix-Light.ttf');font-weight:300;font-display:swap}
@font-face{font-family:'Season Mix';src:url('assets/SeasonMix-LightItalic.ttf');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Season Mix';src:url('assets/SeasonMix-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'Season Mix';src:url('assets/SeasonMix-RegularItalic.ttf');font-weight:400;font-style:italic;font-display:swap}
:root{--green:#152c22;--plum:#6f4449;--sage:#f3f4dc}
*{box-sizing:border-box}
html{height:100%}
html,body{margin:0;padding:0;background:var(--sage)}
body{height:100vh;height:100dvh;overflow:hidden;padding:clamp(12px,2.2vh,28px);font-family:'Denim',Helvetica,Arial,sans-serif;color:var(--green)}
a{color:var(--green);text-decoration:none;transition:color .15s}
a:hover{color:var(--plum)}
.frame{height:100%;border:1.5px solid var(--green);display:grid;grid-template-rows:auto 1fr auto;padding:clamp(22px,5.5vh,56px) clamp(20px,5vw,48px) clamp(18px,4vh,40px);gap:clamp(14px,3.5vh,48px);overflow:hidden}
header{display:flex;flex-direction:column;align-items:center}
.word{width:340px;max-width:100%;display:block;height:auto}
main{display:flex;flex-direction:column;align-items:center;text-align:center}
main.stack{display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;padding:0 0 clamp(8px,2.5vh,32px);gap:clamp(16px,4vh,72px);min-height:0}
main.center{justify-content:center;gap:clamp(18px,3.5vh,40px);min-height:0}
.mark{height:clamp(64px,20vh,180px);width:auto;max-width:38vw;display:block}
.group{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.6vh,32px)}
.caps{font-size:clamp(9px,1.25vh,11px);letter-spacing:.28em;text-transform:uppercase;line-height:1.6}
.contact{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,22px)}
.contact .lines{display:flex;flex-direction:column;gap:clamp(4px,.8vh,6px)}
h1{margin:0;font-family:'Season Mix',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(26px,6vh,60px);line-height:1.05}
.lede{margin:0;max-width:52ch;font-family:'Season Mix',Georgia,serif;font-weight:300;font-size:clamp(12.5px,1.85vh,16px);line-height:1.6;text-wrap:pretty}
.btn{display:inline-block;margin-top:clamp(0px,.8vh,8px);padding:clamp(9px,1.5vh,12px) clamp(18px,4vw,24px);border:1.5px solid var(--green);transition:all .15s}
.btn:hover{background:var(--plum);border-color:var(--plum);color:var(--sage)}
.title{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.1vh,10px)}
.rule{width:clamp(36px,6vh,56px);height:1px;background:var(--green);opacity:.5;flex:none}
.block{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,18px)}
.cta{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,18px)}
.cta .btn{margin-top:0;padding:clamp(10px,1.7vh,14px) clamp(22px,6vw,32px)}
.alt{margin:0;font-family:'Season Mix',Georgia,serif;font-weight:300;font-style:italic;font-size:clamp(11.5px,1.7vh,15px);line-height:1.6}
.alt a{text-decoration:underline;text-underline-offset:3px}
.lede.narrow{max-width:40ch;line-height:1.6}
.lede.mid{max-width:48ch}
/* Denser rhythm for content-heavy pages (Inquire) so they still fit one screen. */
main.dense{gap:clamp(10px,2.2vh,26px)}
nav{display:flex;justify-content:space-between;align-items:center}
@media (max-width:640px){
  body{padding:clamp(10px,1.8vh,14px)}
  .frame{padding:clamp(18px,4vh,36px) clamp(16px,5vw,22px) clamp(14px,3vh,26px);gap:clamp(12px,2.5vh,36px)}
  .word{width:min(260px,72vw)}
  .mark{height:clamp(70px,19vh,175px);max-width:44vw}
  .caps{font-size:clamp(8.5px,1.15vh,10px);letter-spacing:.22em}
  .contact{gap:22px}
  main.stack{gap:clamp(12px,3vh,48px);padding:0 0 clamp(6px,1.5vh,18px)}
  h1{font-size:clamp(24px,5.2vh,36px)}
  .lede{font-size:clamp(12px,1.75vh,15px);padding:0 4px}
  .alt{font-size:clamp(11px,1.6vh,14px)}
  main.dense{gap:clamp(9px,2vh,22px)}
}
/* Short viewports (phone landscape): tighten further so nothing is cut off. */
@media (max-height:520px){
  body{padding:8px}
  .frame{padding:12px 20px 10px;gap:8px}
  .mark{height:clamp(44px,15vh,88px);max-width:26vw}
  .caps{font-size:8.5px;letter-spacing:.18em}
  h1{font-size:clamp(20px,5.5vh,28px)}
  .lede{font-size:11.5px;line-height:1.45;max-width:64ch}
  .btn{margin-top:0;padding:7px 16px}
  .group{gap:8px}
  .contact{gap:7px}
  .contact .lines{gap:3px}
  main.stack{gap:8px;padding:0}
  main.center{gap:10px}
  main.dense{gap:6px}
  .title{gap:4px}
  .rule{width:36px}
  .block{gap:6px}
  /* Landscape phones are wide and very short: let text use the full frame
     width so it wraps to fewer lines instead of overrunning the height. */
  .lede.narrow,.lede.mid{max-width:none;line-height:1.45}
  .cta{gap:7px}
  .cta .btn{padding:7px 18px}
  .alt{font-size:11px;line-height:1.45}
}