/* Stone & Acre, one-page site with the waiting list (Nov 2026).
   Written phone first; the wider layouts are additions in the media queries.
   White ground, black type, the logo's green only in the logo and the mark.
   Marcellus for display, Jost for reading. Text never sits on a photograph. */
:root{
  --ink:#1A1A1C;
  --grey:#66666A;
  --line:#E4E4E1;
  --green:#008D07;
  --serif:'Marcellus','Times New Roman',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif;
  --gut:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:#FFFFFF;padding:12px 16px;z-index:50}
.skip:focus{left:16px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1360px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
p{margin:0}

/* type */
.d1,.d2,.fig,.say{font-family:var(--serif);font-weight:400;margin:0}
.d1{font-size:clamp(44px,11.5vw,112px);line-height:1.02;letter-spacing:-.012em}
.d2{font-size:clamp(34px,7.4vw,64px);line-height:1.08;letter-spacing:-.008em}
.say{font-size:clamp(26px,5.6vw,46px);line-height:1.24}
.d1,.d2,.say{text-wrap:balance}
.nw{white-space:nowrap}
.lead{font-size:19px;line-height:1.6;max-width:34ch}
.small{font-size:14px;line-height:1.6;color:var(--grey)}
.tl{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:2px;line-height:1.3}
.tl:hover{color:var(--green)}

/* header: the real logo, one link */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px}
.top .logo{height:26px;width:auto}
.top .tl{font-size:15px}

/* opening statement */
.intro{padding-top:64px;padding-bottom:56px}
.intro .d1{max-width:12ch}
.intro-side{margin-top:36px;display:grid;gap:22px;justify-items:start}
.intro-side .small{margin-top:-6px}
.go{font-size:17px}

/* photographs: full colour, nothing on top */
.photo{overflow:hidden;background:#EDEDEA}
.photo img{width:100%;height:100%;object-fit:cover}
.lead-photo{aspect-ratio:4/5}

/* the three markets */
.markets{padding-top:96px;padding-bottom:88px}
.markets .d2{margin-bottom:44px;max-width:14ch}
.tiers{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tiers li{display:grid;gap:10px;padding:30px 0 34px;border-bottom:1px solid var(--line)}
.tier-name{font-size:15px;color:var(--grey)}
.fig{font-size:clamp(68px,21vw,176px);line-height:.95;letter-spacing:-.02em}
.fig small{font-family:var(--sans);font-size:15px;letter-spacing:0;color:var(--grey);margin-left:10px;vertical-align:middle}
.tier-text{max-width:40ch}
.markets .small{margin-top:26px}

/* the mark, and what it stands for */
.markline{padding-top:40px;padding-bottom:104px;display:grid;gap:36px}
.markline svg{width:132px;height:132px}
.markline .say{max-width:22ch}
.markline .lead{margin-top:22px;color:var(--ink)}

/* waiting list */
.list{display:grid}
.list-photo{aspect-ratio:3/2}
.list-body{padding-top:56px;padding-bottom:96px}
.list-body .d2{margin-bottom:18px}
.list-body > .lead{margin-bottom:36px}
.form{display:grid;gap:24px;max-width:520px}
.form label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--grey)}
.form input[type=text],.form input[type=email]{border:0;border-bottom:1px solid #BDBDB9;background:transparent;padding:10px 0;font-size:19px;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.form input[type=text]:focus,.form input[type=email]:focus{outline:none;border-bottom-color:var(--ink)}
.form fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 26px}
.form legend{font-size:14px;color:var(--grey);margin-bottom:10px;padding:0}
.form fieldset label{display:flex;align-items:center;gap:8px;font-size:17px;cursor:pointer}
.form input[type=radio]{accent-color:var(--ink);width:17px;height:17px;margin:0}
.send{justify-self:start;margin-top:6px;border:0;border-radius:999px;background:var(--ink);color:#FFFFFF;padding:16px 34px;font-size:15px;letter-spacing:.04em;cursor:pointer}
.send:hover{background:var(--green)}
.send:disabled{opacity:.5;cursor:default}
.form-msg{min-height:1.6em;font-size:16px}
.done:focus{outline:none}
.done .say{max-width:18ch}
.done p.lead{margin-top:18px}

/* footer */
.foot{border-top:1px solid var(--line);padding-top:40px;padding-bottom:40px;display:grid;gap:18px}
.foot .logo{height:22px;width:auto}

/* privacy and not-found pages */
.page{padding-top:56px;padding-bottom:110px;max-width:720px}
.page .d2{margin-bottom:34px}
.page h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.25;margin:40px 0 10px}
.page p + p{margin-top:14px}
.page a{border-bottom:1px solid currentColor}

/* gentle arrival, only when scripts run and motion is welcome */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
  .js .rv.in{opacity:1;transform:none}
  .lead-photo img{animation:arrive 2.2s ease-out both}
  @keyframes arrive{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
}

/* wider phones and tablets */
@media (min-width:700px){
  :root{--gut:40px}
  .top{padding-top:30px;padding-bottom:30px}
  .top .logo{height:34px}
  .lead-photo{aspect-ratio:16/9}
  .tiers li{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:40px;align-items:end;padding:38px 0 40px}
  .tiers li .fig{grid-column:1;grid-row:1/3}
  .tier-name{grid-column:2;grid-row:1;align-self:end}
  .tier-text{grid-column:2;grid-row:2;align-self:start}
  .markline{grid-template-columns:auto minmax(0,1fr);column-gap:64px;align-items:start}
  .markline svg{width:200px;height:200px}
  .foot{grid-template-columns:auto 1fr;align-items:center;column-gap:48px}
  .foot .small{justify-self:end;text-align:right}
}

/* desktop */
@media (min-width:1100px){
  :root{--gut:56px}
  .intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:120px;padding-bottom:96px;align-items:end}
  .intro .d1{grid-column:1/9}
  .intro-side{grid-column:9/13;margin-top:0;padding-bottom:12px}
  .lead-photo{aspect-ratio:21/9}
  .markets{padding-top:150px;padding-bottom:130px}
  .markets .d2{margin-bottom:64px}
  .markline{padding-top:40px;padding-bottom:160px;column-gap:110px}
  .markline svg{width:280px;height:280px}
  .list{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .list-photo{aspect-ratio:auto;min-height:100%}
  .list-body{padding:120px var(--gut) 130px 72px;max-width:640px}
  .list-body .d2{font-size:clamp(40px,3.9vw,56px)}
  .top .logo{height:40px}
}
@media (min-width:1500px){
  .list-body{padding-left:96px}
}