/* =========================================================
   AMEER FAWAD — Chapter I
   Quiet luxury. Architectural. Editorial. Never flashy.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --bg:            #0B0B0B;
  --bg-elevated:   #121110;
  --text:          #F5F2EE;
  --text-secondary:#C9C3BB;
  --border:        rgba(255,255,255,.15);
  --border-strong: rgba(255,255,255,.28);
  --overlay:       rgba(0,0,0,.45);
  --thread:        rgba(245,242,238,.55);
  --thread-dim:     rgba(245,242,238,.22);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'EB Garamond', Georgia, serif;
  --font-label:   'Inter', Helvetica, Arial, sans-serif;

  --ease-luxury: cubic-bezier(.22,.61,.36,1);
  --dur-slow:    1200ms;
  --dur-med:     900ms;
  --dur-fast:    500ms;

  --gutter: clamp(24px, 6vw, 96px);
  --nav-h: 92px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
input{ font: inherit; }
h1,h2,h3,p{ margin: 0; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link{
  position: fixed; top: -100px; left: 24px; z-index: 1000;
  background: var(--text); color: var(--bg);
  padding: 12px 20px; font-family: var(--font-label);
  font-size: .8rem; letter-spacing: .08em;
  transition: top var(--dur-fast) var(--ease-luxury);
}
.skip-link:focus{ top: 24px; }

:focus-visible{
  outline: 1px solid var(--text);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Reveal-on-scroll base ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-luxury),
              transform var(--dur-slow) var(--ease-luxury);
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hero logo entrance (plays once on load, not scroll-linked) ---------- */
@keyframes heroEnter{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* =========================================================
   SIGNATURE ELEMENT — the stitch line
   A basting-stitch thread that "sews" the page together:
   a scroll-progress thread in the left margin, and a seam
   that stitches itself across the page between chapters.
   ========================================================= */
.stitch-progress{
  position: absolute;
  left: 28px;
  top: var(--nav-h);
  width: 2px;
  z-index: 40;
  pointer-events: none;
  display: none;
}
@media (min-width: 1100px){
  .stitch-progress{ display: block; }
}
.stitch-progress__track{
  stroke: var(--thread-dim);
  stroke-width: .9;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
.stitch-progress__thread{
  stroke: var(--thread);
  stroke-width: .9;
  stroke-dasharray: 3 4;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 80ms linear;
}

.chapter__stitch{
  width: 100%;
  height: 1px;
  overflow: visible;
}
.chapter__stitch svg{
  width: 100%;
  height: 40px;
  margin-top: -20px;
  overflow: visible;
}
.chapter__stitch line{
  stroke: var(--thread-dim);
  stroke-width: .9;
  stroke-dasharray: 4 4;
  stroke-dashoffset: 700;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 1400ms var(--ease-luxury), stroke .6s ease;
}
.chapter__stitch.is-stitched line{
  stroke-dashoffset: 0;
  stroke: var(--thread);
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-luxury),
              border-color var(--dur-med) var(--ease-luxury);
}
.nav.is-scrolled{
  background: rgba(11,11,11,.82);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}
.nav__inner{
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__logo{
  justify-self: start;
  display: block;
  line-height: 0;
}
.monogram{
  fill: currentColor;
  color: var(--text);
  display: block;
}
.monogram--nav{
  width: auto;
  height: 30px;
  transition: opacity var(--dur-fast) var(--ease-luxury);
}
.nav__logo:hover .monogram--nav,
.nav__logo:focus-visible .monogram--nav{
  opacity: .7;
}
.nav__center{
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  justify-self: center;
}
.nav__center a{
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  position: relative;
  padding-bottom: 6px;
}
.nav__center a::after{
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--text);
  transition: right var(--dur-med) var(--ease-luxury);
}
.nav__center a:hover, .nav__center a:focus-visible{
  color: var(--text);
}
.nav__center a:hover::after, .nav__center a:focus-visible::after{
  right: 0;
}
.nav__right{
  display: flex;
  gap: 32px;
  justify-self: end;
}
.nav__link{
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.nav__link:hover, .nav__link:focus-visible{ color: var(--text); }

.nav__burger{
  display: none;
  justify-self: end;
  width: 28px; height: 20px;
  position: relative;
}
.nav__burger span{
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--text);
  transition: transform var(--dur-fast) var(--ease-luxury), opacity var(--dur-fast);
}
.nav__burger span:nth-child(1){ top: 0; }
.nav__burger span:nth-child(2){ top: 9px; }
.nav__burger span:nth-child(3){ top: 18px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-luxury);
}
.mobile-menu.is-open{ opacity: 1; pointer-events: auto; }
.mobile-menu nav{
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}
.mobile-menu a{
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: .03em;
  color: var(--text-secondary);
}
.mobile-menu a:hover{ color: var(--text); }

@media (max-width: 900px){
  .nav__center, .nav__right{ display: none; }
  .nav__burger{ display: block; }
  .nav__inner{ grid-template-columns: 1fr auto; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display: inline-block;
  font-family: var(--font-label);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 18px 44px;
  position: relative;
}
.btn:disabled{
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--outline{
  border: 1px solid var(--border-strong);
  color: var(--text);
  overflow: hidden;
  z-index: 1;
}
.btn--outline::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-luxury);
  z-index: -1;
}
.btn--outline:hover, .btn--outline:focus-visible{
  color: var(--bg);
  border-color: var(--text);
}
.btn--outline:hover::before, .btn--outline:focus-visible::before{
  transform: scaleX(1);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 80px;
}
.hero__media{
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__image{
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(28,26,23,.15) 0%, rgba(5,5,5,.1) 100%),
    url('assets/images/hero.jpg') center 30%/cover no-repeat;
  will-change: transform;
}
.hero__image::after{
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 2px, transparent 2px 6px);
  mix-blend-mode: overlay;
}
.hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, var(--overlay) 40%, rgba(0,0,0,.7) 100%);
}
.hero__content{
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.hero__monogram{
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
  animation: heroEnter 800ms cubic-bezier(0.22,1,0.36,1) 300ms both;
}
.monogram--hero{
  width: auto;
  height: clamp(70px, 11vw, 120px);
  opacity: .92;
}
.hero__title{
  font-family: var(--font-display);
  font-weight: 300;
  /* Deliberately conservative cap (5rem, not the previous 8.5rem): the
     old value was sized purely off viewport width (11vw) with no regard
     for hero__content's fixed 700px max-width. On real screens, with the
     real Fraunces font (which this sandbox's renderer cannot load, so
     the previous version was never actually tested against it), that
     produced a font-size wide enough that "AMEER FAWAD" — held to one
     line via white-space:nowrap — overflowed past 700px and got clipped
     by .hero's overflow:hidden. This range is sized to comfortably fit
     within 700px at every width from 901px up. */
  font-size: clamp(3.2rem, 6vw, 5rem);
  line-height: .95;
  letter-spacing: .04em;
  white-space: nowrap;
  animation: heroEnter 700ms cubic-bezier(0.22,1,0.36,1) 500ms both;
}
/* Letter-spacing adds a trailing gap after the last character, which
   browsers still count toward the box width used by text-align:center —
   with no matching gap before the first character, the visible text
   drifts left of true center relative to the (letter-spacing-free)
   monogram graphic above it. Cancel exactly that trailing gap so the
   two are optically centered on the same axis. Desktop/tablet only,
   per request — mobile keeps its own separate rule below untouched. */
@media (min-width: 901px){
  .hero__title{
    margin-right: -0.04em;
  }
}
.hero__tagline{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--text-secondary);
  margin-top: 28px;
  letter-spacing: .02em;
  animation: heroEnter 600ms cubic-bezier(0.22,1,0.36,1) 700ms both;
}
.hero__body{
  max-width: 650px;
  margin: 26px auto 44px;
  color: var(--text-secondary);
  font-size: 1.15rem;
  line-height: 1.8;
}
.hero__scroll{
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero__scroll-line{
  width: 1px; height: 46px;
  background: linear-gradient(var(--thread), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after{
  content: '';
  position: absolute;
  top: -100%; left: 0; right: 0; height: 100%;
  background: var(--text);
  animation: scrollThread 2.4s var(--ease-luxury) infinite;
}
@keyframes scrollThread{
  0%{ top: -100%; }
  60%{ top: 100%; }
  100%{ top: 100%; }
}
.hero__scroll-text{
  font-family: var(--font-label);
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* =========================================================
   CHAPTERS
   ========================================================= */
.chapter{
  position: relative;
  padding: clamp(90px, 14vw, 200px) var(--gutter);
}
.chapter__grid{
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}

.chapter__eyebrow{
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.chapter__title{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: .01em;
  margin-bottom: 30px;
}
.chapter__lede{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 26px;
  max-width: 480px;
}
.chapter__text{
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.85;
  max-width: 460px;
}

.chapter__media{ position: relative; }
.chapter__image{
  aspect-ratio: 16 / 10;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
}
.chapter__image::before{
  content: '';
  position: absolute; inset: 0;
}
.chapter__image::after{
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--border);
}

.chapter__image--house::before{
  background:
    linear-gradient(115deg, rgba(255,255,255,.03), transparent 40%),
    url('assets/images/house.jpg') center/cover no-repeat;
}
.chapter__image--cloth::before{
  background: url('assets/images/cloth.jpg') center/cover no-repeat;
}
.chapter__image--hand::before{
  background: url('assets/images/hand.jpg') center/cover no-repeat;
}
.chapter__image--form::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 30%),
    url('assets/images/form.jpg') center/cover no-repeat;
}

@media (max-width: 900px){
  .chapter__grid{
    grid-template-columns: 1fr;
  }
  /* Mobile only: every chapter shows Heading + Content, then Image —
     regardless of the desktop alternating left/right order. Desktop
     and tablet (>900px) are untouched; they keep the DOM-order-based
     alternation defined in .chapter__grid above. */
  .chapter__grid > .chapter__copy{ order: 1; }
  .chapter__grid > .chapter__media{ order: 2; }
  .chapter__lede, .chapter__text{ max-width: 100%; }
}

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter{
  padding: clamp(100px, 16vw, 220px) var(--gutter);
  text-align: center;
  border-top: 1px solid var(--border);
}
.newsletter__inner{
  max-width: 560px;
  margin: 0 auto;
}
.newsletter__label{
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 22px;
}
.newsletter__title{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5rem);
  margin-bottom: 24px;
}
.newsletter__text{
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.8;
  margin-bottom: 44px;
}
.newsletter__form{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.newsletter__field{
  width: 100%;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 4px;
}
.newsletter__form input{
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  text-align: center;
  padding: 10px 6px;
}
.newsletter__form input::placeholder{ color: var(--text-secondary); opacity: .7; }
.newsletter__form input:focus{ outline: none; }
.newsletter__form .btn{
  margin-top: 8px;
}

.newsletter__status{
  min-height: 1.4em;
  margin-top: 16px;
  font-family: var(--font-label);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--text-secondary);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  border-top: 1px solid var(--border);
  padding: 40px var(--gutter);
}
.footer__inner{
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.footer__links{ display: flex; gap: 28px; }
.footer__links a:hover, .footer__links a:focus-visible{ color: var(--text); }

@media (max-width: 600px){
  .footer__inner{ flex-direction: column; text-align: center; }
}

/* =========================================================
   PHONE REFINEMENTS
   Fixes for real mobile issues (potential button overflow on
   narrow screens, hero content height on short/landscape
   viewports, form stacking) — desktop/tablet rules untouched.
   ========================================================= */
@media (max-width: 560px){
  :root{ --nav-h: 72px; }

  body{ font-size: 16px; }

  .btn{
    padding: 16px 30px;
    font-size: .68rem;
    letter-spacing: .13em;
  }

  .hero{
    padding: calc(var(--nav-h) + 28px) var(--gutter) 64px;
  }
  .hero__monogram{ margin-bottom: 20px; }
  /* Below the clamp's crossover width the desktop rule floors at 3.2rem,
     which was sized for two stacked short words and is too wide to fit
     "AMEER FAWAD" on one line without wrapping/overflowing on phones.
     Scoped here only — tablet and desktop keep the original clamp(). */
  .hero__title{
    font-size: clamp(1.9rem, 9.5vw, 3.2rem);
  }
  .hero__body{
    font-size: 1rem;
    line-height: 1.75;
    margin: 20px auto 32px;
  }
  .hero__scroll{ bottom: 20px; }
  .hero__scroll-line{ height: 32px; }
  .hero__image{
    background-position: 85% 25%;
  }

  .mobile-menu a{ font-size: 1.55rem; }
  .mobile-menu nav{ gap: 24px; }
}

/* Short / landscape mobile viewports: avoid clipped hero content */
@media (max-height: 480px) and (orientation: landscape){
  .hero{
    min-height: auto;
    padding: calc(var(--nav-h) + 20px) var(--gutter) 32px;
  }
  .hero__scroll{ display: none; }
}