/* ==========================================================================
   BLN Storage, LLC - landing page styles
   Palette derived from the brand source image (see ../../brand-guide.html)
   ========================================================================== */

:root {
  /* Warm neutrals */
  --cream:      #F2EEE7;
  --alabaster:  #E9E9E8;
  --sheepskin:  #D7D2C8;
  --plaster:    #D4CEC5;
  --oat:        #AC9981;
  --taupe:      #A59585;
  --walnut:     #958473;
  --ink:        #5C5147;
  --espresso:   #2E2823;

  /* Signature accents */
  --camel:      #C5A683;
  --terracotta: #AD6E5B;
  --terracotta-deep: #8F5644;

  /* Cool counterweights */
  --slate:      #818388;
  --sage:       #AEB3A1;

  /* Semantic roles */
  --bg:         var(--cream);
  --surface:    #FBF9F5;
  --text:       var(--espresso);
  --text-muted: var(--ink);
  --rule:       rgba(46, 40, 35, 0.12);
  --accent:     var(--terracotta);
  --accent-text: var(--terracotta-deep);

  /* Type */
  --serif: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  /* Soft vertical wash: plaster at the top, cream through the middle,
     sheepskin at the foot. Painted across the whole document (not fixed)
     so it stays seamless when the content is taller than the viewport. */
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--plaster) 0%, var(--cream) 32%, var(--cream) 70%, var(--sheepskin) 100%);
}

/* --------------------------------------------------------------- layout -- */

.page {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem) 1.25rem;
}

.card {
  width: 100%;
  max-width: 640px;
  text-align: center;
}

/* ------------------------------------------------------------- wordmark -- */

.mark { margin: 0 0 2.75rem; }

.mark__glyph {
  display: block;
  width: clamp(72px, 16vw, 96px);
  height: auto;
  margin: 0 auto 1.5rem;
}

.mark__name {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 12vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.14em;
  /* letter-spacing pushes the block right; nudge it back to true center */
  text-indent: 0.14em;
  color: var(--espresso);
}

.mark__word {
  display: block;
  margin-top: 0.9rem;
  font-size: clamp(0.7rem, 2.6vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  color: var(--walnut);
}

.mark__rule {
  width: 56px;
  height: 2px;
  margin: 1.75rem auto 0;
  border: 0;
  background: var(--terracotta);
}

/* ----------------------------------------------------------- intro copy -- */

.lede {
  margin: 0 auto 3rem;
  max-width: 44ch;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
}

/* ---------------------------------------------------------- detail grid -- */

.details {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  text-align: left;
}

@media (min-width: 34rem) {
  .details { grid-template-columns: 1fr 1fr; }
  .details__block--full { grid-column: 1 / -1; }
}

.details__block {
  background: var(--surface);
  padding: 1.6rem 1.5rem;
}

.details__label {
  margin: 0 0 0.6rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--walnut);
}

.details__body {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

.details__body a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 86, 68, 0.35);
  padding-bottom: 1px;
  transition: border-color 120ms ease, color 120ms ease;
}

.details__body a:hover,
.details__body a:focus-visible {
  color: var(--espresso);
  border-bottom-color: var(--espresso);
}

.details__note {
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
}

address { font-style: normal; }

/* --------------------------------------------------------------- footer -- */

.footer {
  flex-shrink: 0;
  padding: 2rem 1.25rem 2.5rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--walnut);
}

/* ------------------------------------------------------------ a11y bits -- */

:focus-visible {
  outline: 2px solid var(--terracotta-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}