/* =====================================================================
   Option A — The Quiet House
   Layout layer. Composition rules specific to this option.
   Type-led editorial. Generous whitespace. Single-column flow.
   ===================================================================== */

/* ---------- Page shell ---------- */

main {
  display: block;
}

/* Sticky-nav offset for in-page anchor scrolling.
   Nav is roughly 88px tall (24px padding-block × 2 + 40px logo on mobile,
   24px × 2 + 44px logo on desktop). Use 96px as a safe clearance. */
html {
  scroll-padding-top: 96px;
}

/* ---------- Quiet hero (type-led, with subtle logo watermark) ---------- */

.q-hero {
  padding-block: var(--space-11) var(--space-9);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) {
  .q-hero { padding-block: var(--space-12) var(--space-11); }
}

/* Hero text sits above the watermark */
.q-hero > .container {
  position: relative;
  z-index: 2;
}

/* Watermark — large, faint logo behind the type. Athangudi by default,
   so opacity 0.12 reads as a soft, dusty mark rather than a coloured shape. */
.q-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-image: url("../../../shared/img/logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  opacity: 0.12;
  z-index: 1;
  aspect-ratio: 219 / 100;
}
@media (max-width: 767.98px) {
  .q-hero::after {
    top: 6%;
    right: -14%;
    width: 96vw;
    opacity: 0.10;
  }
}
@media (min-width: 768px) {
  .q-hero::after {
    top: 50%;
    right: -6%;
    transform: translateY(-50%);
    width: 58vw;
    max-width: 760px;
  }
}
@media (min-width: 1280px) {
  .q-hero::after {
    width: 52vw;
    max-width: 820px;
    right: -3%;
  }
}

/* Honour reduced motion / print: still subtle, no animations on watermark anyway. */
@media print {
  .q-hero::after { display: none; }
}

.q-hero__eyebrow {
  margin-bottom: var(--space-6);
}

.q-hero__headline {
  font-family: var(--font-serif);
  font-size: var(--text-display-l);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-7);
  max-width: 18ch;
}

.q-hero__lede {
  font-family: var(--font-serif);
  font-size: var(--text-body-l);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 52ch;
  margin-bottom: var(--space-7);
}

.q-hero__meta {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.q-hero__meta span:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-6);
  color: var(--border-default);
}

/* ---------- Hero anchor image (sits below the type-led hero) ---------- */

.q-hero-image {
  padding-block: var(--space-7) var(--space-9);
}
.q-hero-image .frame {
  aspect-ratio: 21 / 10;
}
.q-hero-image__caption {
  display: block;
  text-align: right;
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-caption);
  font-style: italic;
  color: var(--text-secondary);
  max-width: none;
}

/* ---------- Editorial image divider between sections ---------- */

.q-divider {
  padding-block: var(--space-9);
}
.q-divider--tight { padding-block: var(--space-7); }
.q-divider .frame {
  aspect-ratio: 21 / 9;
}
.q-divider__caption {
  display: block;
  text-align: center;
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--text-caption);
  font-style: italic;
  color: var(--text-secondary);
  max-width: none;
}

/* Full-bleed variant: image extends edge-to-edge of viewport while respecting
   container vertical rhythm. Used sparingly for visual punctuation. */
.q-divider--bleed {
  padding-inline: 0;
}
.q-divider--bleed .frame {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  aspect-ratio: 24 / 9;
}
.q-divider--bleed .q-divider__caption {
  margin-inline: var(--container-padding-mobile);
}
@media (min-width: 768px) {
  .q-divider--bleed .q-divider__caption { margin-inline: var(--container-padding-tablet); }
}
@media (min-width: 1280px) {
  .q-divider--bleed .q-divider__caption { margin-inline: var(--container-padding-desktop); }
}

/* ---------- Manifesto block ---------- */

.q-manifesto {
  padding-block: var(--section-spacing-l);
  text-align: center;
}

.q-manifesto__quote {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: var(--tracking-tight);
  margin: 0 auto var(--space-7);
  max-width: 22ch;
}

.q-manifesto__attribution {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------- Principles (3-up, restrained) ---------- */

.q-principles {
  padding-block: var(--section-spacing-l);
  border-top: 1px solid var(--border-subtle);
}

.q-principles__intro {
  margin-bottom: var(--space-9);
  max-width: 56ch;
}

.q-principles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
}
@media (min-width: 768px) {
  .q-principles__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
  }
}

.q-principle {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.q-principle__num {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-brand);
}
.q-principle__title {
  font-family: var(--font-serif);
  font-size: var(--text-heading-m);
  line-height: 1.25;
  margin: 0;
}
.q-principle__body {
  font-family: var(--font-serif);
  font-size: var(--text-body-m);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 38ch;
  margin: 0;
}
.q-principle__rule {
  width: 32px;
  height: 1px;
  background: var(--border-default);
  margin-bottom: var(--space-1);
}

/* ---------- Featured project (text + image, 50/50) ---------- */

.q-featured {
  padding-block: var(--section-spacing-l);
}
.q-featured__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 768px) {
  .q-featured__grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-9);
  }
}
.q-featured__media .frame {
  aspect-ratio: 4 / 5;
}
.q-featured__title {
  font-family: var(--font-serif);
  font-size: var(--text-display-m);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin: var(--space-3) 0 var(--space-5);
}
.q-featured__location {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

/* ---------- Photography triptych ---------- */

.q-triptych {
  padding-block: var(--section-spacing-l);
  border-top: 1px solid var(--border-subtle);
}
.q-triptych__intro {
  margin-bottom: var(--space-8);
  max-width: 56ch;
}
.q-triptych__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 768px) {
  .q-triptych__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}
.q-triptych__item .frame {
  aspect-ratio: 3 / 4;
  margin-bottom: var(--space-3);
}
.q-triptych__item:nth-child(2) {
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .q-triptych__item:nth-child(2) { margin-top: var(--space-8); }
}

/* ---------- Athangudi pull-quote section ---------- */

.q-pull-quote {
  padding-block: var(--section-spacing-l);
  text-align: center;
}
.q-pull-quote__text {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  margin: 0 auto var(--space-6);
  max-width: 28ch;
  color: var(--text-on-brand);
}
.q-pull-quote__cite {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--chalk-100);
}

/* ---------- CTA strip (inverse) ---------- */

.q-cta {
  padding-block: var(--space-10);
  text-align: center;
}
.q-cta__text {
  font-family: var(--font-serif);
  font-size: var(--text-display-m);
  line-height: 1.15;
  margin: 0 auto var(--space-7);
  max-width: 22ch;
  color: var(--text-inverse);
}

/* ---------- Philosophy page sections ---------- */

.q-philosophy-hero {
  padding-block: var(--space-10) var(--space-8);
  scroll-margin-top: var(--space-3);
}
@media (min-width: 768px) {
  .q-philosophy-hero { padding-block: var(--space-11) var(--space-9); }
}
.q-philosophy-hero h1,
.q-philosophy-hero h2 {
  font-family: var(--font-serif);
  font-size: var(--text-display-l);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-4) 0 var(--space-7);
  max-width: 16ch;
}

.q-principle-deep {
  padding-block: var(--section-spacing-l);
  border-top: 1px solid var(--border-subtle);
}
.q-principle-deep__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .q-principle-deep__grid {
    grid-template-columns: 4fr 8fr;
    gap: var(--space-9);
  }
}
.q-principle-deep__label {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: var(--space-3);
}
.q-principle-deep h2,
.q-principle-deep h3 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-l);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  max-width: 16ch;
}
.q-principle-deep__body {
  max-width: 60ch;
}
.q-principle-deep__bridge {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-heading-m);
  line-height: 1.35;
  color: var(--text-secondary);
  margin-block: var(--space-6);
  max-width: 52ch;
}

.q-voice {
  padding-block: var(--section-spacing-l);
}
.q-voice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .q-voice__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7);
  }
}
.q-voice__item h3,
.q-voice__item h4 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-m);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  max-width: 18ch;
}
.q-voice__num {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-bottom: var(--space-3);
  display: block;
}
.q-voice__compare {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.q-voice__compare-row .q-voice__compare-label {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--space-2);
}
.q-voice__compare-row .q-voice__compare-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-m);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  margin: 0;
  max-width: none;
}
.q-voice__compare-row--bad .q-voice__compare-text {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--athangudi-400);
  text-decoration-thickness: 1px;
}

/* ---------- Projects page ---------- */

.q-projects-header {
  padding-block: var(--space-11) var(--space-9);
}
.q-projects-header h1 {
  font-family: var(--font-serif);
  font-size: var(--text-display-l);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-4) 0 var(--space-6);
  max-width: 16ch;
}
.q-projects-header__lede {
  font-family: var(--font-serif);
  font-size: var(--text-body-l);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 56ch;
}

.q-projects-grid {
  padding-block: var(--space-7) var(--section-spacing-l);
}
.q-projects-grid__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9) var(--space-7);
}
@media (min-width: 768px) {
  .q-projects-grid__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-9) var(--space-7);
  }
}
@media (min-width: 1024px) {
  .q-projects-grid__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

.q-project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
}
.q-project-card:hover { color: inherit; }
.q-project-card .frame {
  aspect-ratio: 4 / 5;
}
.q-project-card__num {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-brand);
  margin-top: var(--space-2);
}
.q-project-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-heading-m);
  line-height: 1.25;
  margin: 0;
}
.q-project-card__meta {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  display: flex;
  gap: var(--space-3);
}
.q-project-card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-3);
  color: var(--border-default);
}

/* Stagger the columns for editorial rhythm */
@media (min-width: 1024px) {
  .q-projects-grid__inner > .q-project-card:nth-child(3n+2) {
    margin-top: var(--space-8);
  }
  .q-projects-grid__inner > .q-project-card:nth-child(3n+3) {
    margin-top: var(--space-5);
  }
}

.q-projects-quote {
  padding-block: var(--section-spacing-l);
  text-align: center;
}

/* ---------- Contact page ---------- */

.q-contact-hero {
  padding-block: var(--space-10) var(--space-7);
  scroll-margin-top: var(--space-3);
}
@media (min-width: 768px) {
  .q-contact-hero { padding-block: var(--space-11) var(--space-7); }
}
.q-contact-hero h1,
.q-contact-hero h2 {
  font-family: var(--font-serif);
  font-size: var(--text-display-l);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-4) 0 var(--space-6);
  max-width: 14ch;
}
.q-contact-hero__lede {
  font-family: var(--font-serif);
  font-size: var(--text-body-l);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 52ch;
}

.q-contact-body {
  padding-block: var(--space-8) var(--section-spacing-l);
}
.q-contact-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .q-contact-body__grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-9);
  }
}

.q-contact-info h3 {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}
.q-contact-info__block {
  margin-bottom: var(--space-7);
}
.q-contact-info__block p {
  font-family: var(--font-serif);
  font-size: var(--text-body-l);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 36ch;
}
.q-contact-info__block a {
  text-decoration: none;
  border-bottom: 1px solid var(--border-default);
}
.q-contact-info__block a:hover {
  border-bottom-color: var(--text-brand);
}

.q-contact-form-card {
  background: var(--surface-secondary);
  padding: var(--space-7);
  border: 1px solid var(--border-subtle);
}
@media (min-width: 768px) {
  .q-contact-form-card { padding: var(--space-8); }
}
.q-contact-form-card h2,
.q-contact-form-card h3 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-m);
  margin-bottom: var(--space-6);
}
.q-contact-form-card .field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .q-contact-form-card .field-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}
.q-contact-form-card .field-grid--full {
  grid-template-columns: 1fr;
}
.q-contact-form-card__actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.q-contact-map {
  margin-top: var(--space-9);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}
.q-contact-map__placeholder {
  background: var(--surface-tertiary);
  border: 1px solid var(--border-subtle);
  aspect-ratio: 21 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Map grid drawn from inline SVG (no gradients, no box-shadow). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M48 0H0v48' fill='none' stroke='%23D2CCBF' stroke-width='1'/></svg>");
  background-size: 48px 48px;
  background-position: center;
}
.q-contact-map__pin {
  width: 12px;
  height: 12px;
  background: var(--athangudi-600);
  outline: 6px solid var(--athangudi-50);
}
.q-contact-map__caption {
  text-align: center;
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-caption);
  color: var(--text-secondary);
}