/* ============================================================
   lindsandlace.com — the front door
   A Sundae Software Solutions build.

   One job: send a visitor to The Studio or to the photography
   work in a single click, without looking like a placeholder.

   Palette is borrowed straight from the two sister sites so
   this reads as the parent of both rather than a third brand:
     The Studio      cream #EDEADF · taupe #72635E · sage #C0C2A4
     Photography     cream #F7F2E9 · rose  #B27F84 · sage #6F7B63
   ============================================================ */
:root{
  --cream:#EDEADF;
  --taupe:#72635E;   --taupe-deep:#584C48;
  --sage-deep:#8E9174;
  --rose-deep:#B27F84;
  --ink:#2A2522;

  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-script:"Pinyon Script", cursive;
  --font-body:"Montserrat", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}

/* Visible only when tabbed to. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--cream);color:var(--ink);
  padding:12px 20px;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------------------------------------------------------------
   The split. Two full-bleed doors, side by side on a wide screen,
   stacked on a phone.

   min-height uses dvh with a vh fallback: on mobile Safari, 100vh
   is taller than the visible area, which would push the second
   door's call-to-action under the browser chrome on first paint —
   on a page whose entire purpose is those two buttons.
   --------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1fr;
  min-height:100vh;
  min-height:100dvh;
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
}

.door{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  /* 50dvh each, so on a phone both doors are fully on screen at once and
     the footer sits just below the fold. A splash page where you have to
     scroll to discover the second choice has failed at its only job. */
  min-height:50vh;
  min-height:50dvh;
  padding:64px 28px;
  text-decoration:none;
  isolation:isolate;
}
@media (min-width:900px){
  .door{min-height:100vh;min-height:100dvh;padding:80px 48px}
  /* A hairline seam between the two, in the shared cream. */
  .door-photo{box-shadow:inset 1px 0 0 rgba(237,234,223,.35)}
}

.door-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}

/* The scrim. Without it the cream logos vanish into a pale photo —
   the studio shot in particular is almost entirely white. */
.door-veil{
  position:absolute;inset:0;z-index:-1;
  transition:opacity .5s ease;
}
.door-studio .door-veil{
  background:linear-gradient(180deg,
    rgba(88,76,72,.46) 0%,
    rgba(88,76,72,.58) 55%,
    rgba(42,37,34,.68) 100%);
}
.door-photo .door-veil{
  background:linear-gradient(180deg,
    rgba(70,48,52,.50) 0%,
    rgba(70,48,52,.62) 55%,
    rgba(38,26,28,.72) 100%);
}

.door-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:20px;
  max-width:420px;
  color:var(--cream);
}

.door-eyebrow{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(237,234,223,.82);
}

.door-logo{
  width:auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.28));
}
/* The two marks are different shapes, so they are sized to look
   optically equal rather than measured equal: the studio lockup is
   a wide horizontal block, the photography wordmark is squarer. */
.door-logo-studio{max-width:340px;max-height:120px}
.door-logo-photo{max-width:250px;max-height:130px}
@media (min-width:900px){
  .door-logo-studio{max-width:400px}
  .door-logo-photo{max-width:280px}
}

.door-copy{
  font-size:.95rem;
  font-weight:300;
  line-height:1.75;
  color:rgba(237,234,223,.9);
  max-width:34ch;
}

.door-go{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream);
  padding-bottom:7px;
  border-bottom:1px solid rgba(237,234,223,.55);
  transition:border-color .3s ease;
}
.arrow{
  display:inline-block;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}

/* Hover / focus: the photo drifts in a little, the scrim lifts,
   the arrow steps forward. Nothing moves position, so the click
   target never runs away from the cursor. */
@media (hover:hover){
  .door:hover .door-bg{transform:scale(1.11)}
}
.door:hover .door-veil,
.door:focus-visible .door-veil{opacity:.82}
.door:hover .door-go,
.door:focus-visible .door-go{border-bottom-color:var(--cream)}
.door:hover .arrow,
.door:focus-visible .arrow{transform:translateX(6px)}

.door:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:-14px;
}

@media (prefers-reduced-motion:reduce){
  .door-bg,.door-veil,.door-go,.arrow{transition:none !important}
  .door:hover .door-bg{transform:scale(1.04)}
}

/* ---------------------------------------------------------------
   Footer strip
   --------------------------------------------------------------- */
.foot{
  background:var(--cream);
  border-top:1px solid rgba(114,99,94,.18);
  padding:22px 24px;
  text-align:center;
}
.foot p{
  margin:0;
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--taupe);
}
.foot-name{
  font-family:var(--font-display);
  font-size:.95rem;
  letter-spacing:.16em;
  color:var(--taupe-deep);
}
.foot-sep{margin:0 10px;color:var(--sage-deep)}