/* ==========================================================================
   Estate Theory — estatetheory.in
   Palette and type are set here, once. Change a value and it changes
   everywhere on the page.
   ========================================================================== */

:root{
  /* --- colour ------------------------------------------------------------ */
  --stone:      #DBD1C5;   /* pale ground, taken from the deck             */
  --stone-pale: #E4DDD4;   /* a shade lighter, for the enquiry ground      */
  --sand:       #BCA289;   /* mid ground                                   */
  --bark:       #2E251F;   /* deep ground                                  */
  --ink:        #453A31;   /* text on light grounds                        */
  --chalk:      #E8E1D8;   /* text on the deep ground                      */

  /* --- type -------------------------------------------------------------- */
  --display: "Cinzel", Georgia, serif;              /* headings            */
  --body:    "EB Garamond", Georgia, serif;         /* running text        */

  /* Cinzel echoes the Roman capitals of the logo; EB Garamond carries the
     running text. Change either here and it changes everywhere. */

  /* --- measure ----------------------------------------------------------- */
  --gutter: clamp(1.5rem, 6vw, 6rem);
  --bandpad: clamp(4.5rem, 11vw, 9.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.0625rem, 0.55vw + 0.95rem, 1.25rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--bark); color:var(--chalk); padding:.75rem 1.25rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

/* --- shared blocks -------------------------------------------------------- */

.wrap{ width:100%; max-width:76rem; margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow > *{ max-width:46rem; }   /* narrow measure, same left edge as every other section */

.band{ padding-block:var(--bandpad); }
.band--stone{ background:var(--stone); color:var(--ink); }
.band--sand{ background:var(--sand); color:var(--bark); }
.band--bark{ background:var(--bark); color:var(--chalk); }
.band--enquire{ background:var(--stone-pale); color:var(--ink); }

h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.6rem, 3.1vw, 2.6rem);
  line-height:1.24;
  letter-spacing:.005em;
  margin:0 0 1.4rem;
  max-width:22ch;
}
h2.centred{ max-width:none; text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem); }

h3{
  font-family:var(--display);
  font-weight:400;
  font-size:1.0625rem;
  letter-spacing:.02em;
  margin:0 0 .35rem;
}

p{ margin:0 0 1.15rem; max-width:64ch; }
p:last-child{ margin-bottom:0; }

.lede{ font-size:1.08em; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(6rem,14vh,10rem) var(--gutter) clamp(20rem,42vh,30rem);
  text-align:center;
  overflow:hidden;
}

.hero__top{ position:relative; z-index:2; width:100%; }

.mark{ margin:0; }
.mark img{
  width:min(30rem, 72vw);
  height:auto;
  margin-inline:auto;
}

.hero__line{
  margin:clamp(2.5rem,6vh,4rem) auto 0;
  max-width:38ch;
  font-size:clamp(.95rem,1.5vw,1.1rem);
  line-height:1.85;
}

.hero__places{
  margin:clamp(1.25rem,3vh,2rem) auto 0;
  max-width:none;
  font-family:var(--display);
  font-size:.8rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.7;
}

/* the land, rising at the foot of the first screen —
   the one piece of motion on the page */
.hero__band{
  position:absolute;
  left:0; right:0; bottom:0;
  height:clamp(14rem, 34vh, 24rem);
  overflow:hidden;
  clip-path:inset(0 0 0 0);
  animation:rise 1.6s cubic-bezier(.2,.7,.25,1) both;
  z-index:1;
}
.hero__band img{ width:100%; height:100%; object-fit:cover; }

@keyframes rise{
  from{ clip-path:inset(100% 0 0 0); }
  to  { clip-path:inset(0 0 0 0); }
}
@media (prefers-reduced-motion:reduce){
  .hero__band{ animation:none; }
}

/* ==========================================================================
   HEADER BAR
   ========================================================================== */

.bar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:.9rem var(--gutter);
  background:color-mix(in srgb, var(--stone) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  transform:translateY(-102%);
  transition:transform .4s ease;
}
.bar.is-shown{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .bar{ transition:none; } }

/* the logo does not shrink well — it is a wide, framed lockup — so the
   bar carries the name as set type instead */
.bar__mark{
  font-family:var(--display);
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none;
}
.bar__nav{ display:flex; gap:clamp(1rem,3vw,2.25rem); }
.bar__nav a{
  font-size:.82rem; letter-spacing:.09em;
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.bar__nav a:hover{ border-bottom-color:currentColor; }
@media (max-width:34rem){
  .bar__nav a:not(:last-child){ display:none; }
}

/* ==========================================================================
   STATEMENT
   ========================================================================== */

.quote{
  margin:0 0 2rem;
  font-family:var(--display);
  font-style:normal;
  font-size:clamp(1.35rem, 3.3vw, 2.15rem);
  line-height:1.42;
  text-indent:-.4em;
}
.quote::before{ content:"\201C"; }
.quote::after{ content:"\201D"; }

.rooted{
  margin-top:2.25rem;
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:2.1;
  opacity:.75;
}

/* ==========================================================================
   LIMITED INTAKE
   ========================================================================== */

.intake{
  display:grid;
  grid-template-columns:minmax(0,18rem) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
@media (max-width:52rem){ .intake{ grid-template-columns:1fr; } }

.intake__figure{
  border-top:1px solid color-mix(in srgb, var(--chalk) 40%, transparent);
  padding-top:1.25rem;
}
.intake__num{
  display:block;
  font-family:var(--display);
  font-size:clamp(3.25rem,9vw,5.5rem);
  line-height:1;
}
.intake__cap{
  display:block;
  margin-top:.6rem;
  font-size:.82rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.75;
}
.intake__body h2{ margin-top:0; }

/* ==========================================================================
   SPLIT SECTIONS (image beside text)
   ========================================================================== */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  padding-block:0;
}
.split__media{ display:flex; }
.split__media img{ width:100%; height:100%; min-height:30rem; object-fit:cover; }
.split__text{ padding:var(--bandpad) var(--gutter); align-self:center; }
.split__text p{ max-width:46ch; }
.split--flip .split__media{ order:2; }

@media (max-width:52rem){
  .split{ grid-template-columns:1fr; }
  .split__media img{ min-height:16rem; max-height:60vh; }
  .split--flip .split__media{ order:0; }
  .split__text{ padding-block:clamp(3rem,9vw,5rem); }
}

.asks{
  list-style:none;
  margin:2rem 0 0;
  padding:0;
  max-width:44ch;
}
.asks li{
  padding:.9rem 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  font-family:var(--display);
  font-size:clamp(.95rem,1.6vw,1.05rem);
  line-height:1.5;
}
.asks li:last-child{ border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent); }

.closer{ font-style:italic; }

/* ==========================================================================
   KINDS OF WORK
   ========================================================================== */

.kinds{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem);
}
@media (max-width:60rem){ .kinds{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:30rem){ .kinds{ grid-template-columns:1fr; } }

.kind img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  margin-bottom:1.15rem;
}
.kind h3{ font-size:1rem; }
.kind p{ font-size:.94rem; line-height:1.6; margin:0; }

/* ==========================================================================
   SCOPE
   ========================================================================== */

.scope{
  list-style:none;
  counter-reset:step;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-top:1px solid color-mix(in srgb, var(--chalk) 26%, transparent);
}
@media (max-width:52rem){ .scope{ grid-template-columns:1fr; } }

.scope li{
  counter-increment:step;
  padding:1.75rem 0 1.75rem 3.5rem;
  border-bottom:1px solid color-mix(in srgb, var(--chalk) 26%, transparent);
  position:relative;
}
.scope li:nth-child(odd){ padding-right:clamp(1rem,4vw,3rem); }
@media (min-width:52.001rem){
  .scope li:nth-child(even){ padding-left:calc(3.5rem + clamp(1rem,4vw,3rem)); }
  .scope li:nth-child(even)::before{ left:clamp(1rem,4vw,3rem); }
}
.scope li::before{
  content:counter(step, upper-roman);
  position:absolute; left:0; top:1.75rem;
  font-family:var(--display);
  font-size:.85rem;
  letter-spacing:.1em;
  opacity:.55;
}
.scope p{ margin:0; font-size:.95rem; opacity:.85; }

/* ==========================================================================
   SYSTEMS + FIT lists
   ========================================================================== */

.systems, .fit{
  list-style:none;
  margin:2rem 0 0;
  padding:0;
}
.systems li, .fit li{
  padding:1rem 0;
  border-top:1px solid color-mix(in srgb, currentColor 24%, transparent);
  max-width:56ch;
}
.systems li:last-child, .fit li:last-child{
  border-bottom:1px solid color-mix(in srgb, currentColor 24%, transparent);
}

/* ==========================================================================
   SELECTED WORK
   ========================================================================== */

.works{ margin:2.25rem 0 0; }
.works > div{
  padding:1.1rem 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.works > div:last-child{ border-bottom:1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.works dt{
  font-family:var(--display);
  font-size:1rem;
  line-height:1.45;
}
.works dd{
  margin:.2rem 0 0;
  font-size:.94rem;
  opacity:.72;
}

/* ==========================================================================
   ENQUIRY
   ========================================================================== */

.enquire{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,7vw,6rem);
  align-items:start;
}
@media (max-width:52rem){ .enquire{ grid-template-columns:1fr; } }

.field{ margin:0 0 1.75rem; max-width:none; }
.field label{
  display:block;
  margin-bottom:.5rem;
  font-size:.86rem;
  letter-spacing:.04em;
  opacity:.8;
}
.field input, .field textarea{
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 38%, transparent);
  padding:.55rem 0;
  border-radius:0;
  transition:border-color .2s ease;
}
.field textarea{ resize:vertical; line-height:1.7; box-shadow:none; }
.field input:focus, .field textarea:focus{
  outline:none;
  border-bottom-color:var(--ink);
}
.field.is-wrong input, .field.is-wrong textarea{ border-bottom-color:#8A3B2A; }

.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form button{
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stone-pale);
  background:var(--bark);
  border:1px solid var(--bark);
  padding:1rem 2.25rem;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.form button:hover{ background:transparent; color:var(--bark); }
.form button[disabled]{ opacity:.5; cursor:default; }

.form__note{
  margin:1.1rem 0 0;
  min-height:1.5rem;
  font-size:.92rem;
}
.form__note.is-bad{ color:#8A3B2A; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot{
  background:var(--bark);
  color:var(--chalk);
  padding:clamp(3.5rem,8vw,6rem) 0 2rem;
}
.foot__grid{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:clamp(1.5rem,5vw,4rem);
  align-items:start;
}
@media (max-width:44rem){ .foot__grid{ grid-template-columns:1fr; } }

.foot__mark{ margin:0; }
.foot__mark img{ width:min(13rem, 54vw); height:auto; }
.foot__contact{ margin:0; font-size:.94rem; line-height:2; }
.foot__contact a{ text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--chalk) 35%, transparent); }
.foot__contact a:hover{ border-bottom-color:var(--chalk); }
.foot__places{
  margin:0;
  font-size:.94rem;
  line-height:2;
  opacity:.75;
  text-align:right;
}
@media (max-width:44rem){ .foot__places{ text-align:left; } }

.foot__rule{
  max-width:none;
  margin:clamp(3rem,7vw,5rem) var(--gutter) 0;
  padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb, var(--chalk) 20%, transparent);
  font-size:.8rem;
  letter-spacing:.05em;
  opacity:.6;
}