/* ============================================================
   BrickHamptons - shared stylesheet
   Design system derived from a white Rolex Daytona.
   Minimal: one screen, generous whitespace.
   ============================================================ */

:root{
  --dial-white:  #FAFAF8;   /* page background - near-white, faint warmth */
  --panel:       #FCFBF7;   /* reserved alternate surface */
  --charcoal:    #1C1F22;   /* primary text, wordmark */
  --steel:       #6E7479;   /* secondary text */
  --steel-light: #9BA0A6;   /* muted captions, footer fine print */
  --hairline:    #D9DBDD;   /* dividers */
  --accent-navy: #1B2A4D;   /* USED EXACTLY ONCE - the corner brick */

  --measure: 660px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  color:var(--charcoal);
  font-family:"EB Garamond", Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;

  /* Faint LEGO-stud texture: a regular grid of studs as seen straight down -
     a soft round top with a slightly darker edge ring (the cylinder rim).
     Kept very low-contrast so it never competes with the type. */
  background-color:var(--dial-white);
  background-image:
    radial-gradient(circle at 50% 50%,
      rgba(28,31,34,0.014) 0 27%,        /* flat top of the stud, barely there */
      rgba(28,31,34,0.032) 28% 32%,      /* edge ring - the rim of the stud */
      transparent 33%);
  background-size:24px 24px;
  background-position:0 0;
}

p{ margin:0; }
a{ color:inherit; text-decoration:none; }

/* ------------------------------------------------------------
   Hero - the entire page, centered on one screen
   ------------------------------------------------------------ */
.hero{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:96px 28px 72px;
}

/* First block - wordmark */
.wordmark{
  font-family:"Cormorant Garamond", serif;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--charcoal);
  line-height:1;
  margin:0;
  font-size:clamp(2.4rem, 7vw, 3.7rem);
}

/* Second block - tagline (EB Garamond, upright, to match the third block) */
.tagline{
  font-family:"EB Garamond", Georgia, serif;
  font-style:normal;
  font-weight:400;
  color:var(--charcoal);
  font-size:clamp(1.18rem, 3vw, 1.42rem);
  max-width:62ch;
  text-wrap:balance;
  margin:36px auto 0;
}

/* Third block - capacity note (softer, less contrast) */
.subline{
  color:var(--steel-light);
  font-size:1.02rem;
  max-width:46ch;
  margin:28px auto 0;
}

/* Inquiry line - basic charcoal (the navy now lives on the corner brick). */
.contact{
  color:var(--charcoal);
  font-size:1rem;
  max-width:48ch;
  margin:44px auto 0;
}
.contact a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:0.5px;
}

/* ------------------------------------------------------------
   Footer - two quiet legal lines
   ------------------------------------------------------------ */
.site-footer{
  border-top:0.5px solid var(--hairline);
  padding:36px 28px 46px;
  text-align:center;
}
.footer-inner{ max-width:var(--measure); margin:0 auto; }
.fineprint{
  font-size:0.76rem;
  color:var(--steel-light);
  max-width:56ch;
  margin:0 auto 8px;
  line-height:1.5;
}
.fineprint:last-child{ margin-bottom:0; }

@media (max-width:560px){
  body{ font-size:17px; }
  .hero{ min-height:100dvh; padding:80px 24px 60px; }
}

/* ------------------------------------------------------------
   Corner build - small isometric LEGO model on the baseplate
   ------------------------------------------------------------ */
.hero, .about, .wwd, .order{ position:relative; }   /* anchor for the corner build */

.brickwork{
  position:absolute;
  right:clamp(14px, 4vw, 60px);
  bottom:clamp(16px, 4vw, 48px);
  width:clamp(108px, 15vw, 168px);
  opacity:0.92;
  pointer-events:none;
}
.brickwork svg{ display:block; width:100%; height:auto; overflow:visible; }

@media (max-width:560px){
  .brickwork{ width:96px; right:12px; bottom:14px; opacity:0.9; }
}

/* ------------------------------------------------------------
   Navigation - minimal top bar overlay
   ------------------------------------------------------------ */
.site-nav{ position:absolute; top:0; left:0; right:0; z-index:10; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:22px clamp(20px, 4vw, 48px); }
.nav-brand{ font-family:"Cormorant Garamond", serif; font-weight:500; text-transform:uppercase;
  letter-spacing:0.12em; font-size:1.05rem; color:var(--charcoal); white-space:nowrap; }
.nav-links{ display:flex; gap:clamp(16px, 3vw, 30px); align-items:baseline; }
.nav-links a{ font-family:"EB Garamond", Georgia, serif; font-size:0.98rem; color:var(--steel); transition:color .15s ease; }
.nav-links a:hover{ color:var(--charcoal); }
.nav-links a[aria-current="page"]{ color:var(--charcoal); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:0.5px; }

/* ------------------------------------------------------------
   Inner pages - About, What We Do, Order
   ------------------------------------------------------------ */
.about, .wwd, .order{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:120px 28px 84px; }
.about-title{ font-family:"Cormorant Garamond", serif; font-weight:500; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--charcoal); margin:0; line-height:1.05; font-size:clamp(1.8rem, 5vw, 2.6rem); }
.about-text{ font-family:"EB Garamond", Georgia, serif; color:var(--charcoal); font-size:clamp(1.12rem, 2.6vw, 1.34rem);
  line-height:1.6; max-width:60ch; text-wrap:balance; margin:30px auto 0; }
.commission-btn{ display:inline-block; margin-top:34px; font-family:"EB Garamond", Georgia, serif;
  text-transform:uppercase; letter-spacing:0.18em; font-size:0.86rem; color:#FFFFFF; background:var(--accent-navy);
  padding:16px 34px; border-radius:2px; text-decoration:none; transition:transform .25s ease, background .25s ease; }
.commission-btn:hover{ background:#16224a; transform:translateY(-2px); }

/* ------------------------------------------------------------
   Corner build - falls in on load
   ------------------------------------------------------------ */
@keyframes brick-fall{
  0%  { transform:translateY(-820px); animation-timing-function:cubic-bezier(.34,0,.66,0); }
  86% { transform:translateY(0);      animation-timing-function:ease-out; }
  93% { transform:translateY(-9px);   animation-timing-function:ease-in; }
  100%{ transform:translateY(0); }
}
.brick-fall{ animation:brick-fall 1.7s both; }
.brick-fall-2{ animation-delay:.05s; }
@media (prefers-reduced-motion: reduce){ .brick-fall{ animation:none; } }