/* Uzunu v2 internal pages. Ported from docs/design-system/component-sheet.html.
   Surfaces separate content; there are no rule lines in this file. The only
   borders are the text-link underline and the form-field bottom edge. */

/* ============================================================
   PAGE HERO
   ============================================================ */

.uzunu-v2-page-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: min(30rem, 60svh);
}

.uzunu-v2-page-hero-main,
.uzunu-v2-page-hero-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--gutter);
}

.uzunu-v2-page-hero-main {
  padding-left: var(--edge);
  background: var(--warm-gray);
}

.uzunu-v2-page-hero-side {
  padding-right: var(--edge);
}

.uzunu-v2-page-hero h1,
.uzunu-v2-page-legal h1,
.uzunu-v2-page-error h1 {
  max-width: 92%;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.uzunu-v2-page-hero-side {
  background: var(--ink);
  color: var(--white);
}

.uzunu-v2-page-hero-side--orange,
.uzunu-v2-page-hero--portrait .uzunu-v2-page-hero-side {
  background: var(--orange);
  color: var(--white);
}

.uzunu-v2-page-hero--contact .uzunu-v2-page-hero-main {
  background: var(--orange);
  color: var(--white);
}

/* Ink, not warm gray. Design system 4.4 puts ink on the contact hero's side panel,
   and warm gray here merged with the warm-gray contact details panel below it once
   the columns stacked at 390 and 768. Orange main plus ink side keeps every pair
   of touching surfaces different at every width. Found in the 390 render, 2026-09-03. */
.uzunu-v2-page-hero--contact .uzunu-v2-page-hero-side {
  background: var(--ink);
  color: var(--white);
}

.uzunu-v2-page-hero-copy > p {
  max-width: 42ch;
  margin: 0 0 var(--s-4);
  font-size: 1.1rem;
  line-height: 1.5;
}

.uzunu-v2-page-portrait {
  width: 9rem;
  aspect-ratio: 1;
  margin-bottom: var(--s-3);
  border-radius: 50%;
  object-fit: cover;
}

/* ============================================================
   PAGE SECTIONS
   ============================================================ */

.uzunu-v2-page-section {
  background: var(--white);
}

.uzunu-v2-page-section.uzunu-v2-page-section--gray {
  background: var(--warm-gray);
}

.uzunu-v2-page-section.uzunu-v2-page-section--dark {
  background: var(--ink);
  color: var(--white);
}

.uzunu-v2-page-section-head {
  display: grid;
  gap: var(--s-4);
  align-items: end;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-6) var(--gutter) var(--s-4);
}

.uzunu-v2-page-section-head .uzunu-v2-page-label {
  margin-bottom: 0;
}

.uzunu-v2-page-section h2,
.uzunu-v2-page-cta h2,
.uzunu-v2-page-contact h2 {
  max-width: 92%;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.uzunu-v2-page-prose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--s-6);
}

.uzunu-v2-page-prose p {
  grid-column: 2;
  max-width: 48ch;
  margin: 0 0 var(--s-3);
  color: var(--muted);
  font-size: var(--t-small);
}

.uzunu-v2-page-section--dark .uzunu-v2-page-prose p {
  color: var(--muted-on-ink);
}

/* ============================================================
   NUMBERED ROWS AND Q&A: alternating surfaces, no rules
   ============================================================ */

.uzunu-v2-page-row,
.uzunu-v2-page-faq-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--s-3);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--edge);
}

/* Rows carry their own ground so they still alternate inside a gray or
   ink section, where the section background would otherwise swallow one
   half of the pattern. */
.uzunu-v2-page-row,
.uzunu-v2-page-faq-row {
  background: var(--white);
}

.uzunu-v2-page-row:nth-child(odd),
.uzunu-v2-page-faq-row:nth-child(odd) {
  background: var(--warm-gray);
}

.uzunu-v2-page-section--dark .uzunu-v2-page-row,
.uzunu-v2-page-section--dark .uzunu-v2-page-faq-row {
  background: var(--ink);
}

.uzunu-v2-page-section--dark .uzunu-v2-page-row:nth-child(odd),
.uzunu-v2-page-section--dark .uzunu-v2-page-faq-row:nth-child(odd) {
  background: #2a2a2a;
}

.uzunu-v2-page-row-number {
  align-self: start;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 0.8;
  color: var(--faded);
}

.uzunu-v2-page-section--dark .uzunu-v2-page-row-number {
  color: var(--faded-on-ink);
}

.uzunu-v2-page-row h3,
.uzunu-v2-page-faq-row h3 {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.uzunu-v2-page-row p:not(.uzunu-v2-page-row-number),
.uzunu-v2-page-faq-row p:not(.uzunu-v2-page-row-number) {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small);
}


.uzunu-v2-page-section--dark .uzunu-v2-page-row p:not(.uzunu-v2-page-row-number),
.uzunu-v2-page-section--dark .uzunu-v2-page-faq-row p:not(.uzunu-v2-page-row-number) {
  color: var(--muted-on-ink);
}

.uzunu-v2-page-row .uzunu-v2-page-text-link {
  margin-top: 0.75rem;
}

/* ============================================================
   CTA BAND
   ============================================================ */

.uzunu-v2-page-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--edge);
  background: var(--orange);
  color: var(--white);
}

.uzunu-v2-page-cta--ink {
  background: var(--ink);
}

.uzunu-v2-page-cta h2 {
  margin-bottom: var(--s-2);
}

.uzunu-v2-page-cta p:not(.uzunu-v2-page-label) {
  margin: 0;
  font-size: var(--t-small);
}

.uzunu-v2-page-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: flex-end;
}

.uzunu-v2-page-cta-actions .uzunu-v2-page-text-link {
  border-color: currentColor;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.uzunu-v2-page-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.uzunu-v2-page-contact-details,
.uzunu-v2-page-form-panel {
  min-width: 0;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--gutter);
}

.uzunu-v2-page-contact-details {
  padding-left: var(--edge);
  background: var(--warm-gray);
}

.uzunu-v2-page-form-panel {
  padding-right: var(--edge);
}

/* inline-flex with a min-height, not block: at 768 and under, --t-h2 clamps to
   2rem and line-height 1 made these 32px tall, under the 2.75rem rule and WCAG 2.2
   SC 2.5.8. The email and the phone number are the two things a phone user taps.
   Same technique as the nav controls and the footer legal links. */
.uzunu-v2-page-contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  width: fit-content;
  margin-top: var(--s-3);
  font-family: var(--serif);
  font-size: var(--t-h2);
  line-height: 1;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
  overflow-wrap: break-word;
}

.uzunu-v2-page-contact-link:hover {
  color: var(--orange-dark);
}

.uzunu-v2-page-facts {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
}

.uzunu-v2-page-facts dt {
  margin-bottom: 0.4rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.uzunu-v2-page-facts dd {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small);
}

.uzunu-v2-page-form-panel {
  background: var(--white);
}

.uzunu-v2-page-form-panel > p:not(.uzunu-v2-page-label) {
  max-width: 44ch;
  margin: var(--s-2) 0 var(--s-4);
  color: var(--muted);
  font-size: var(--t-small);
}

.uzunu-v2-page-field {
  display: grid;
  gap: 0.5rem;
  margin-bottom: var(--s-3);
}

.uzunu-v2-page-field label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.uzunu-v2-page-field input,
.uzunu-v2-page-field textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.uzunu-v2-page-field input:focus,
.uzunu-v2-page-field textarea:focus {
  outline: 0;
  border-bottom-color: var(--orange);
}

.uzunu-v2-page-field textarea {
  resize: vertical;
}

.uzunu-v2-page-field input::placeholder,
.uzunu-v2-page-field textarea::placeholder {
  color: var(--muted);
}

.uzunu-v2-page-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.uzunu-v2-page-legal {
  display: grid;
  grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 0.58fr);
  gap: var(--s-6);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-6) var(--gutter);
}

.uzunu-v2-page-legal-head {
  align-self: start;
}

/* Needs the extra class weight: `.uzunu-v2 p { margin-top: 0 }` in the core sheet
   is (0,1,1) and was silently zeroing the top margin, so the date sat inside the
   h1's descenders (the h1 line-height is 0.92, so they overflow its box). */
.uzunu-v2 .uzunu-v2-page-legal-date {
  margin: var(--s-3) 0 var(--s-4);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.uzunu-v2-page-legal-intro {
  max-width: 44ch;
  font-size: var(--t-small);
  color: var(--muted);
}

.uzunu-v2-page-legal-sections section {
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 0.65fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
}

.uzunu-v2-page-legal-sections h2 {
  max-width: none;
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uzunu-v2-page-legal-sections p {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-small);
}

.uzunu-v2-page-legal a {
  text-underline-offset: 0.25rem;
}

/* ============================================================
   404
   ============================================================ */

.uzunu-v2-page-error {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: calc(100svh - 10rem);
}

.uzunu-v2-page-error > div,
.uzunu-v2-page-error nav {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--gutter);
}

.uzunu-v2-page-error > div {
  padding-left: var(--edge);
  background: var(--warm-gray);
}

.uzunu-v2-page-error nav {
  padding-right: var(--edge);
  background: var(--ink);
  color: var(--white);
}

.uzunu-v2-page-error-code {
  margin: 0 0 var(--s-4);
  color: var(--orange);
  font-family: var(--serif);
  font-size: clamp(5rem, 12vw, 12rem);
  line-height: 0.7;
}

.uzunu-v2-page-error > div > p:not(.uzunu-v2-page-label):not(.uzunu-v2-page-error-code) {
  max-width: 44ch;
  margin: var(--s-3) 0;
  color: var(--muted);
  font-size: var(--t-small);
}

.uzunu-v2-page-error nav a {
  padding: 0.85rem 0;
  font-family: var(--serif);
  font-size: var(--t-h3);
  text-decoration: none;
}

.uzunu-v2-page-error nav a:hover {
  color: var(--orange);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 48rem) {
  .uzunu-v2-page-hero,
  .uzunu-v2-page-contact,
  .uzunu-v2-page-legal,
  .uzunu-v2-page-error,
  .uzunu-v2-page-cta,
  .uzunu-v2-page-section-head,
  .uzunu-v2-page-legal-sections section {
    grid-template-columns: 1fr;
  }

  .uzunu-v2-page-section-head,
  .uzunu-v2-page-prose {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .uzunu-v2-page-prose p {
    grid-column: auto;
  }

  .uzunu-v2-page-hero,
  .uzunu-v2-page-error {
    min-height: 0;
  }

  .uzunu-v2-page-hero h1,
  .uzunu-v2-page-legal h1,
  .uzunu-v2-page-error h1,
  .uzunu-v2-page-section h2,
  .uzunu-v2-page-cta h2,
  .uzunu-v2-page-contact h2 {
    max-width: none;
  }

  .uzunu-v2-page-hero-copy > p,
  .uzunu-v2-page-prose p,
  .uzunu-v2-page-cta p:not(.uzunu-v2-page-label),
  .uzunu-v2-page-row p:not(.uzunu-v2-page-row-number),
  .uzunu-v2-page-faq-row p:not(.uzunu-v2-page-row-number),
  .uzunu-v2-page-facts dd,
  .uzunu-v2-page-legal-intro,
  .uzunu-v2-page-form-panel > p:not(.uzunu-v2-page-label),
  .uzunu-v2-page-error > div > p:not(.uzunu-v2-page-label):not(.uzunu-v2-page-error-code) {
    max-width: none;
  }

  .uzunu-v2-page-row,
  .uzunu-v2-page-faq-row {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--s-2);
  }

  .uzunu-v2-page-cta-actions {
    justify-content: flex-start;
  }

  .uzunu-v2-page-legal {
    gap: var(--s-4);
  }
}