/* ==========================================================================
   VIDA · temporary holding page
   Canvas #F8F6F1 · Canyon Sage #3D4232 · Copper #A65A3A
   Newsreader (display) · Spectral (text) · both served locally
   One stylesheet, three pages: /, /contact/, /thanks/
   Self contained. Delete this folder to remove the holding page.
   ========================================================================== */

@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight:200 500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("../fonts/spectral-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("../fonts/spectral-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --canvas:      #F8F6F1;
  --canyon-sage: #3D4232;
  --dry-grass-t: #4E553E;
  --sandstone:   #C9B79C;
  --copper:      #A65A3A;
  --hair:        rgba(201, 183, 156, .62);

  --serif-display:"Newsreader", Georgia, "Times New Roman", serif;
  --serif-text:   "Spectral", Georgia, "Times New Roman", serif;

  --pad: 56px;
  --col-gap: 28px;

  /* Lockup proportions, taken from the VIDA entrance lockup. */
  --mark-size:     clamp(84px, 11.8vw, 172px);
  --mark-track:    0.30em;
  --desc-size:     calc(var(--mark-size) * 0.085);
  --desc-track:    0.56em;
  --gap-mark-rule: calc(var(--mark-size) * 0.17);
  --gap-rule-desc: calc(var(--mark-size) * 0.105);
  --rule-width:    calc(var(--mark-size) * 0.26);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:var(--canvas);
  color:var(--canyon-sage);
  font-family:var(--serif-text);
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; }
h1,h2,p{ margin:0; }
::selection{ background:var(--sandstone); color:var(--canyon-sage); }

:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:6px;
  border-radius:1px;
}


/* ==========================================================================
   SHARED LOCKUP
   ========================================================================== */

.mark{
  display:block;
  font-family:var(--serif-display);
  font-weight:450;
  font-size:var(--mark-size);
  line-height:0.86;
  letter-spacing:var(--mark-track);
  margin-inline-end:calc(var(--mark-track) * -1);
  color:var(--canyon-sage);
}

.mark__rule{
  display:block;
  width:var(--rule-width);
  height:1px;
  background:var(--copper);
  margin-block:var(--gap-mark-rule) var(--gap-rule-desc);
}

.descriptor{
  display:block;
  font-family:var(--serif-display);
  font-weight:500;
  font-size:var(--desc-size);
  line-height:1;
  letter-spacing:var(--desc-track);
  margin-inline-end:calc(var(--desc-track) * -1);
  white-space:nowrap;
  color:var(--canyon-sage);
}

.practitioner{
  margin-block-start:clamp(22px, 2.6vh, 30px);
  font-family:var(--serif-text);
  font-weight:400;
  font-size:16px;
  letter-spacing:0.01em;
  color:var(--dry-grass-t);
}


/* ==========================================================================
   SHARED ACTIONS
   ========================================================================== */

.cta{
  display:inline-block;
  font-family:var(--serif-display);
  font-weight:450;
  font-size:15px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--canyon-sage);
  text-decoration:none;
  border:0;
  border-block-end:1px solid var(--copper);
  padding:0 0 7px;
  background:none;
  cursor:pointer;
  transition:color 220ms ease;
}
.cta:hover{ color:var(--copper); }

.cta--quiet{
  font-size:13px;
  color:var(--dry-grass-t);
  border-block-end-color:var(--hair);
}
.cta--quiet:hover{ color:var(--canyon-sage); }

.tel{
  margin-block-start:16px;
  font-family:var(--serif-text);
  font-weight:400;
  font-size:14px;
  letter-spacing:0.04em;
  color:var(--dry-grass-t);
}
.tel a{ color:inherit; text-decoration:none; transition:color 220ms ease; }
.tel a:hover{ color:var(--copper); }

.continuity{
  font-family:var(--serif-text);
  font-weight:400;
  font-size:13.5px;
  line-height:1.6;
  letter-spacing:0.015em;
  color:var(--dry-grass-t);
}


/* ==========================================================================
   HOLDING PAGE · one screen
   Desktop is a 12 column grid. The type auto-places down columns 1 to 7,
   the photograph is explicitly placed in columns 9 to 12 spanning every row.
   Mobile is the same DOM in plain source order, no reordering, no
   display:contents. Both layouts read top to bottom the same way.
   ========================================================================== */

.page{
  min-height:100vh;
  min-height:100svh;
  padding:clamp(48px, 7vh, 88px) var(--pad);
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  column-gap:var(--col-gap);
  align-content:center;
}

.page > .mark,
.page > .mark__rule,
.page > .descriptor,
.page > .practitioner,
.page > .notice,
.page > .actions,
.page > .tel,
.page > .continuity{
  grid-column:1 / span 7;
}

.notice{
  margin-block-start:clamp(38px, 6vh, 66px);
  max-width:44ch;
  font-size:19px;
  line-height:1.62;
  color:var(--canyon-sage);
}

.actions{
  margin-block-start:clamp(34px, 5vh, 54px);
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:16px 44px;
  justify-self:start;
}

.page .continuity{ margin-block-start:clamp(46px, 9vh, 104px); }

.still{
  grid-column:9 / span 4;
  grid-row:1 / 9;
  align-self:end;
  margin:0;
}

.still img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
}


/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

.sheet{
  min-height:100vh;
  min-height:100svh;
  padding:44px var(--pad) 64px;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  column-gap:var(--col-gap);
  align-content:start;
}

/* A small masthead lockup, the site's horizontal form, not the large one. */
.crest{
  grid-column:1 / span 12;
  display:inline-flex;
  align-items:baseline;
  gap:20px;
  width:max-content;
  text-decoration:none;
}
.crest__word{
  font-family:var(--serif-display);
  font-weight:450;
  font-size:27px;
  line-height:1;
  letter-spacing:0.30em;
  margin-inline-end:-0.30em;
  color:var(--canyon-sage);
}
.crest__hairline{
  align-self:center;
  margin-inline-start:5px;
  width:1px; height:15px;
  background:var(--copper);
  flex:0 0 auto;
}
.crest__descriptor{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:9.5px;
  line-height:1;
  letter-spacing:0.22em;
  margin-inline-end:-0.22em;
  white-space:nowrap;
  color:var(--canyon-sage);
}

.enquiry{
  grid-column:1 / span 5;
  margin-block-start:clamp(64px, 12vh, 132px);
}

.enquiry__h1{
  font-family:var(--serif-display);
  font-weight:450;
  font-size:clamp(38px, 4.4vw, 60px);
  line-height:1.06;
  letter-spacing:0.005em;
  color:var(--canyon-sage);
}

.enquiry__intro{
  margin-block-start:26px;
  max-width:38ch;
  font-size:17.5px;
  line-height:1.62;
  color:var(--canyon-sage);
}

.enquiry .tel{ margin-block-start:20px; }

.form{
  grid-column:8 / span 5;
  margin-block-start:clamp(64px, 12vh, 132px);
}

.field{ margin-block-end:34px; }

.field label{
  display:block;
  font-family:var(--serif-display);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--dry-grass-t);
  margin-block-end:10px;
}

.field input,
.field textarea{
  display:block;
  width:100%;
  font-family:var(--serif-text);
  font-weight:500;
  font-size:17px;
  line-height:1.6;
  color:var(--canyon-sage);
  background:none;
  border:0;
  border-block-end:1px solid var(--hair);
  border-radius:0;
  padding:6px 0 10px;
  transition:border-color 220ms ease;
  -webkit-appearance:none;
  appearance:none;
}

.field textarea{ resize:vertical; min-height:118px; }

.field input:hover,
.field textarea:hover{ border-block-end-color:var(--sandstone); }

.field input:focus,
.field textarea:focus{
  outline:none;
  border-block-end-color:var(--copper);
}
.field input:focus-visible,
.field textarea:focus-visible{ outline:none; }

.field__opt{
  font-family:var(--serif-text);
  font-weight:400;
  font-size:11.5px;
  letter-spacing:0.02em;
  text-transform:none;
}

.form__send{ margin-block-start:6px; }

.hp{ position:absolute; left:-9999px; }

.sheet .continuity{
  grid-column:1 / span 12;
  margin-block-start:clamp(56px, 10vh, 104px);
}


/* ==========================================================================
   THANKS PAGE
   ========================================================================== */

.thanks{
  grid-column:1 / span 6;
  margin-block-start:clamp(90px, 20vh, 220px);
}
.thanks__body{
  margin-block-start:26px;
  max-width:40ch;
  font-size:17.5px;
  line-height:1.62;
}
.thanks .cta{ margin-block-start:44px; }


/* ==========================================================================
   ENTRANCE
   Opt in, not opt out. The animation only runs where the browser
   affirmatively supports prefers-reduced-motion and the visitor has not asked
   for less motion. Everywhere else the content simply renders, visible, with
   no fade. Visibility must never depend on an animation running.
   ========================================================================== */

@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
@keyframes settle{
  from{ opacity:0; transform:scale(1.018); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion: no-preference){
  .mark,
  .mark__rule,
  .descriptor,
  .practitioner,
  .notice,
  .actions,
  .tel,
  .page .continuity{
    animation:rise 900ms var(--ease) both;
  }

  .mark            { animation-delay:60ms; }
  .mark__rule      { animation-delay:170ms; }
  .descriptor      { animation-delay:230ms; }
  .practitioner    { animation-delay:320ms; }
  .notice          { animation-delay:430ms; }
  .actions         { animation-delay:520ms; }
  .tel             { animation-delay:580ms; }
  .page .continuity{ animation-delay:680ms; }

  .still{ animation:settle 1400ms var(--ease) both; animation-delay:180ms; }

  .enquiry, .form, .thanks{ animation:rise 800ms var(--ease) both; }
  .enquiry{ animation-delay:80ms; }
  .form   { animation-delay:200ms; }
  .thanks { animation-delay:80ms; }
}


/* ==========================================================================
   MOBILE · composed for the screen, not stacked from the desktop layout
   ========================================================================== */

@media (max-width: 900px){
  /* Nothing on a phone should ever scroll sideways. */
  html, body{ overflow-x:hidden; }

  :root{
    --pad:24px;
    --mark-size:clamp(66px, 19vw, 104px);
    --desc-size:clamp(9px, 2.6vw, 11.5px);
    --desc-track:0.28em;
  }

  .page{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    align-content:normal;
    min-height:100vh;
    min-height:100svh;
    padding:34px var(--pad) 28px;
  }

  .practitioner{ margin-block-start:20px; font-size:15.5px; }

  /* The photograph takes whatever height is left, so the page holds one screen. */
  /* The photograph fills the leftover height. The image is positioned against
     the figure box rather than sized with a percentage height, because a
     percentage height against a flex-sized parent is unreliable in Safari and
     was overflowing onto the copy. overflow:hidden is the backstop: whatever
     the image does, it can never cover the text. */
  .still{
    position:relative;
    overflow:hidden;
    align-self:stretch;
    margin-block-start:26px;
    flex:1 1 0;
    min-height:96px;
  }
  .still img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:50% 38%;
  }

  .notice{
    margin-block-start:26px;
    max-width:none;
    font-size:16.5px;
    line-height:1.6;
    text-wrap:pretty;
  }

  .actions{
    margin-block-start:12px;
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }
  /* Padding above the text grows the tap target without moving the underline. */
  .cta{
    font-size:14px;
    padding-block:14px 9px;
  }
  .tel{ margin-block-start:14px; }
  .page .continuity{
    margin-block-start:22px;
    font-size:13px;
    text-wrap:balance;
  }

  /* Contact and thanks */
  .sheet{
    display:block;
    padding:28px var(--pad) 48px;
  }
  .crest__word{ font-size:21px; }
  .crest__hairline{ height:12px; }
  .crest__descriptor{ font-size:8px; letter-spacing:0.18em; margin-inline-end:-0.18em; }

  .enquiry{ margin-block-start:54px; }
  .enquiry__h1{ font-size:clamp(32px, 8.6vw, 42px); }
  .enquiry__intro{ margin-block-start:20px; max-width:none; font-size:16.5px; }

  .form{ margin-block-start:46px; }
  .field{ margin-block-end:28px; }
  .field input,
  .field textarea{ font-size:16px; }

  .thanks{ margin-block-start:64px; }
  .thanks__body{ font-size:16.5px; }

  .sheet .continuity{ margin-block-start:56px; font-size:13px; }
}

/* Short phones in landscape, or very small screens: tighten, then drop the photograph. */
@media (max-width: 900px) and (max-height: 700px){
  .page{ padding-block:26px 22px; }
  .practitioner{ margin-block-start:16px; }
  .still{ margin-block-start:20px; }
  .notice{ margin-block-start:20px; }
  .page .continuity{ margin-block-start:18px; }
}

@media (max-width: 900px) and (max-height: 560px){
  .still{ display:none; }
}