/*
Theme Name: Zara Tehran
Theme URI: https://tehzz.com
Template: zara
Author: Zara Photography
Description: Tehran child theme — warm brown on cream paper, culture, people
             and food copy. Layout comes from the Zara parent theme.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: zara-teh
*/

/* Palette read from the TEH mockups (image3/8/11/1).

   Every solid in the design — the header CTA, the buttons, the MTP card
   panels, the selected service and time, the copyright closing band — is the
   same warm brown, sampled as #4c2a18 from all four mockups. That is --ink.

   The text ladder is warm too: headings and strong copy sample #271d17, the
   terms body and every small label sample #7a685a. --soft sits between them,
   on the same ladder New York's verified #000/#1a1a1a/#333/#8c8c8c uses.

   Paper is the one reconciliation. The three subpage mockups all measure
   #f7f2e9 with a #f2ece1 tint band; the homepage mockup was generated a
   little cooler, at #faf9f5 with #f5f3ef. The difference is about four
   points of hue and the site cannot be two colours, so the subpage value
   (three mockups out of four, and the warmer one the brown was chosen for)
   is used everywhere. See MEASUREMENTS.md. */

:root {
	--ink: #4c2a18;
	--paper: #f7f2e9;
	--tint: #f2ece1;
	--tint-b: #f2ece1;
	--near: #271d17;
	--soft: #4a3c33;
	--muted: #7a685a;
	--line: #d6d2c8;

	/* Tehran sets headings and running copy in one text serif rather than
	   pairing a display face with a second one. Identified the same way
	   Montreal's was: the three lines of the first copyright term measure
	   275 / 290 / 252px in the mockup, and Source Serif 4 scaled to that
	   line height renders them 274 / 290 / 251. The heading test used
	   "Questions About Usage?" from the closing band, where the mockup's
	   349x31px block and its flat, low-contrast serifs, the straight Q tail
	   and the single-storey g match the same family. */
	--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--body: var(--serif);
	--quote: var(--serif);

	/* Tiles measure 203x212 inside the 636px container, so the gutter is
	   24px at 1440 — the same as New York's. */
	--tile-gap: 24px;
}

/* Body copy is the muted brown, not the heading brown: the terms, the hero
   body and the section leads all sample #7a685a in the mockups. */
body { color: var(--near); }

/* Source Serif 4 carries an optical size axis, and the browser's automatic
   mapping thins and narrows the display sizes: "Book Your Session" comes out
   312px wide at 724 where the mockup draws it 361. Every mockup matches the
   font's own smallest text optical size instead: rendered at opsz 14 the
   same string comes out 361px, to the pixel. Pinning the axis means the
   parent's measured sizes hold rather than having to be inflated. */
html { font-variation-settings: "opsz" 14; }

/* The solid --ink is the brand brown, so the places the parent uses it as a
   text colour need the heading brown instead. */
.svc,
.book-form .ea-bootstrap .ui-datepicker td a,
.book-form .ea-bootstrap .time .time-value,
.review-form .wpmtst-text,
.review-form .wpmtst-textarea { color: var(--near); }

/* --- Client wordmarks ---------------------------------------------------
   Six real lockups, each set differently in the mockup, so each is styled
   individually rather than flattened into one rule. Sizes start from the
   measured cap height and word width at 724 and are doubled. */

.mark-1 {                                    /* Saffron Table — two lines */
	font-size: 27.1px;
	letter-spacing: 0;
	text-transform: none;
}
.mark-2 {                                     /* House of Mehr — two lines */
	font-size: 27.1px;
	letter-spacing: 0;
	text-transform: none;
}
.mark-3 {                                         /* Cedar Journal — wide */
	font-size: 26.2px;
	letter-spacing: 0;
	text-transform: none;
}
.mark-4 {                                 /* Courtyard Editions — two lines */
	font-size: 27.1px;
	letter-spacing: 0;
	text-transform: none;
}
.mark-5 {                                            /* Atlas Feast — one */
	font-size: 26.2px;
	letter-spacing: 0;
	text-transform: none;
}
.mark-6 {                              /* The Tehran Collective — three lines */
	font-size: 22.4px;
	letter-spacing: 0;
	text-transform: none;
}

/* --- Hero aside ---------------------------------------------------------
   New York hangs its aside off a rule to the left. Tehran underlines each
   word instead, and the rule the parent draws has to go. */

.hero-aside::before,
.band-aside::before { content: none; }

.hero-aside,
.band-aside {
	padding-left: 0;
	/* "PEOPLE" measures 34px at 724 in the mockup against the parent's 26,
	   and the five rules are 10.5px apart. Tehran also sets them brighter
	   and an inch further in from the right edge than New York. */
	font-size: 13.5px;
	line-height: 16px;
	color: rgba(255, 255, 255, .95);
	right: 100px;
}

.hero-aside .ln,
.band-aside .ln {
	display: block;
	padding-bottom: 3px;
	margin-bottom: 2px;
	border-bottom: 1px solid currentColor;
}

/* --- Band order ---------------------------------------------------------
   New York's three tints are within a point of each other, so the parent's
   alternation is invisible there. Tehran's paper and tint are four points
   apart and the mockup alternates the other way round: the work and client
   bands sit on paper, the about and portfolio bands on the tint. */

.sec-work,
.sec-clients { background: var(--paper); }
.sec-about,
.sec-mtp { background: var(--tint); }

/* --- Type scale ---------------------------------------------------------
   Tehran sets every tracked label about a fifth larger than New York:
   "SELECTED STORIES" measures 104px in the mockup against the parent's 88,
   and the tile sub-labels and section links scale with it. */

.eyebrow { font-size: 17px; }
.tile-t { font-size: 21.5px; }
.tile-s { font-size: 15.5px; }
.sec-head .link-arrow { font-size: 13.5px; }

/* The mockup's hero line pitch is 44px at 724, so 88 at 1440. */
.hero--home .hero-h { font-size: 75px; line-height: 88px; }
.hero--home .hero-body { font-size: 22.5px; }

/* The mockup's closing band is 254px of its 724px width. (The solid band
   sizes itself, so the parent's own reset has to be restated -- the child's
   .band rule would otherwise outrank it.) */
.band { min-height: 505px; }
.band--solid { min-height: 0; }

/* Hero copy: the mockup's block is 251px tall at 724 and sits 17px below the
   band's centre line, where the parent's is 268px and centred. The three
   gaps are tightened to the measured ones and the whole block dropped. */
.hero--home .hero-in { transform: translateY(15px); }
.hero--home .hero-body { margin-top: 16px; }
.hero--home .hero-act { margin-top: 48px; }
.hero--home .hero-act .link-arrow { font-size: 18px; }

/* Tehran's display serif runs a fifth larger than New York's: "In Good
   Company" measures 258px at 724 against the parent's 231, and the mockup's
   two-line headings are 35px apart there, so the leading is pinned rather
   than left as a multiple. */
.h2 { font-size: 62px; line-height: 70px; }
.body { font-size: 20.5px; line-height: 33.5px; }

/* Work band: the label sits 32px below the band top at 724 and the tiles
   13px below the label, against the parent's 35 and 23. */
.sec-work { padding-top: 64px; }
.sec-work .sec-head { margin-bottom: 26px; }
.tile-img { aspect-ratio: 203 / 212; }

/* About: Tehran's portrait is wider and taller than New York's -- 343 x 323
   at 724 against 314 x 272 -- which pushes the copy column right and drops
   the gutter between them to 65px. */
.about-in { grid-template-columns: 678fr 517fr; gap: 65px; }
.about-img { aspect-ratio: 678 / 646; }
.sec-about { padding-top: 58px; }
.about-copy { padding-top: 40px; }

/* About copy: the mockup opens 16px (at 1440) further below the heading and
   closes the gap between the two paragraphs to 46px baseline to baseline. */
.about-copy .body { margin-top: 8px; }
.about-copy .h2 + .body { margin-top: 32px; }
.act { margin-top: 42px; }
.act .link-arrow { font-size: 15.5px; }

/* --- Clients ------------------------------------------------------------
   The wordmarks are set in the same near-black as the rest of the page here,
   not the brand brown, and the row sits closer under the heading. */
.mark { color: var(--near); }
.marks { margin-top: 50px; }

/* Tehran's hairline runs the full 1260 rather than the parent's inset 1058,
   and the quote is one line of 912px, so the measure has to be wide enough
   to hold it. */
.feat-quote { max-width: 1000px; margin-top: 110px; }
.feat-quote blockquote p { font-size: 26px; }
.feat-quote::before { width: 1260px; }

/* The intro paragraph is set against the right edge of the wrap in a 520px
   measure rather than filling half the row. */
.clients-head { grid-template-columns: 1fr 520px; }
.feat-quote::before { top: -42px; }

/* --- More than a portfolio ----------------------------------------------
   The card labels are a third smaller than the section labels and the card
   headings a shade larger; the band's head is tighter throughout and the
   closing rule sits 48px under the cards rather than 34. */
.sec-mtp { padding-top: 56px; }
.sec-mtp .h2 { margin-top: 28px; }
.mtp-body { margin-top: 2px; }
.card-body .eyebrow { font-size: 14px; }
.card-t { font-size: 33px; }
.mtp-foot { margin-top: 44px; padding-top: 8px; }
.sec-mtp { padding-bottom: 16px; }
.mtp-foot .link-arrow { font-size: 11.5px; }

/* --- Closing band -------------------------------------------------------
   Everything in the band is set larger than the parent's New York values
   except the label, which is smaller: measured on image3's "Start a
   Conversation" the heading is 77px on a 70px line. */
.band .eyebrow { font-size: 14.5px; }
.band-h { font-size: 64px; line-height: 70px; }
.band .btn { min-height: 66px; padding: 0 30px; font-size: 16px; }
.band .body { font-size: 21.5px; }

/* The two asides are placed differently against their bands: 22px higher in
   the hero, 40px lower in the closing band. */
.hero-aside { bottom: 78px; }
.band-aside { bottom: 16px; }

/* The closing band's heading sits on a 70px line that is shorter than its
   own type, so the block is nudged back down and the copy pulled up. */
.band .eyebrow { margin-top: 9px; }
.band-h { margin-top: 19px; }
.band .body { margin-top: 22px; }

/* --- Footer -------------------------------------------------------------
   The column of links is set on a 30px rhythm rather than the parent's 32.5
   and starts level with the logo and the blurb. */
.foot-nav { margin-top: -10px; }
.foot-nav a { line-height: 18px; }

/* --- Book: custom project band ------------------------------------------
   New York runs this band's photograph off the right edge of the viewport
   and insets the copy into the right half of the grid. Tehran keeps both
   inside the wrap: the copy starts at the gutter and the photograph is a
   498px block ending on the wrap's right edge. The copy also sits high in
   the band rather than centred -- 70px of clearance above, 24 below. */
.custom-in {
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
	grid-template-columns: 1fr 498px;
}
.custom-copy {
	align-items: flex-start;
	padding-block: 70px 24px;
}
.custom-copy .wrap-h {
	max-width: none;
	margin-left: 0;
	padding-left: 0;
	padding-right: 24px;
}
.custom-copy .eyebrow { font-size: 13.5px; }
.custom-copy .h2 { margin-top: 33px; }
.custom-copy .body { font-size: 21.5px; max-width: none; margin-top: 4px; }
.custom-copy .btn { min-height: 74px; padding: 0 96px; font-size: 14px; }

/* --- Subpage heroes -----------------------------------------------------
   The label above the heading is two thirds the size of the section labels,
   the copy is set on a 36px line rather than 38.4, and the whole block sits
   36px above the band's centre line. */
.hero--sub .hero-in { transform: translateY(-42px); }
.hero--sub .hero-h { margin-top: 54px; }
.hero--sub .eyebrow { font-size: 12.5px; }
.hero--sub .hero-body { line-height: 36px; margin-top: 4px; }

/* --- Book page ----------------------------------------------------------
   The heading here is uppercase and set much tighter than the mixed-case
   section headings: "BOOK TODAY" measures 184px at 724 where the display
   size would draw it 213. (It also has to be restated, because the child's
   own .h2 rule outranks the parent's single-class .book-h.) */
.book-h { font-size: 58px; letter-spacing: 0.01em; }
.step-label { font-size: 12px; margin-bottom: 34px; }

/* The step labels are smaller than the section labels, the service tiles'
   labels larger. */
.svc { font-size: 12px; }

/* "Read what clients say..." measures 455px at 724 against the parent's
   473. */
.lead { font-size: 21px; }
.times-head { font-size: 11px; }

/* --- Reviews ------------------------------------------------------------
   The rows run on a 190px rhythm at 724: a 203x150 photograph with 20px of
   clearance either side of the rule, against the parent's 23. The section
   label is two thirds the size and the attributions smaller again. */
.sec-tst { padding-top: 80px; padding-bottom: 168px; }
.tst-label { font-size: 12.5px; margin-bottom: 52px; }
.tst-row { padding-block: 40px; }
.tst-img { aspect-ratio: 203 / 150; }
.tst-q figcaption { font-size: 11px; }

/* The subpage hero copy needs room for a 726px line before it wraps. */
.hero--sub .hero-body { max-width: 760px; }

/* The closing band is 560px deep on Reviews against 505 on the other pages. */
.page-template-reviews .band { min-height: 560px; }
.page-template-reviews .band-copy { padding-top: 0; transform: translateY(-39px); }
.page-template-reviews .band-h { margin-top: 35px; }
.page-template-reviews .band-act { margin-top: 56px; }
.tst-row { align-items: start; }
.tst-q { margin-top: 28px; }

/* --- Copyright ----------------------------------------------------------
   New York's terms run across the grid -- 01 left, 02 right, 03 left. The
   Tehran mockup reads down one column and then the other, so the list is a
   two-column flow with an explicit break after the fifth term, and the
   headings are smaller. */
.terms {
	display: block;
	columns: 2;
	column-gap: 58px;
}
.term {
	break-inside: avoid;
	margin-bottom: 42px;
}
.term:nth-child(5) { break-after: column; }
.term:nth-child(5), .term:last-child { margin-bottom: 0; }
.term-t { font-size: 16px; }
.terms { margin-top: 88px; }
.terms-intro { margin-top: 48px; }
.term-b { font-size: 20px; }
.sec-terms .eyebrow { font-size: 12.5px; }

/* The note panel's pull quote is set 30px on a 44px line, a fifth larger
   than New York's, and its photograph is 390px deep. */
.note-img { min-height: 390px; }
.note-text { font-size: 30px; }
.note-cite { font-size: 11px; }
.sec-note .eyebrow { font-size: 12.5px; }

/* The Copyright band puts its button on the right of the copy, vertically
   centred against it, which the parent's markup can only express from the
   stylesheet: the copy block itself becomes the two-column grid. */
.page-template-copyright .band--solid { padding-block: 73px 164px; }
.page-template-copyright .band-copy {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 48px;
	align-items: center;
}
.page-template-copyright .band-copy > .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 16px; }
.page-template-copyright .band-copy > .band-h { grid-column: 1; grid-row: 2; }
.page-template-copyright .band-copy > .body { grid-column: 1; grid-row: 3; }
.page-template-copyright .band-act {
	grid-column: 2;
	grid-row: 1 / 4;
	margin: 0;
}
.band--solid .band-h { font-size: 62px; }
.band--solid .body { font-size: 22.5px; max-width: 820px; }
.band--solid .btn { min-height: 70px; padding: 0 91px; font-size: 11px; }

/* Each subpage hero sets its copy at a different height in its band, and
   the parent centres it, so the two with a two-line standfirst need their
   own offsets. */
.page-template-reviews .hero--sub .hero-in { transform: translateY(-104px); }
.page-template-copyright .hero--sub .hero-in { transform: translateY(-86px); }

/* --- Narrower viewports -------------------------------------------------
   Everything above is measured off a 1440px mockup and written without a
   media query, which means it outranks the parent's responsive rules even
   though those are more specific to the viewport. So the parent's own
   breakpoints are restated here for each property this stylesheet touches. */

@media (max-width: 1200px) {
	.hero--home .hero-h { font-size: 60px; line-height: 1.14; }
	.hero--home .hero-body { font-size: 20px; }
	.h2,
	.band-h { font-size: 44px; line-height: 1.1; }
	.band--solid .band-h { font-size: 40px; }
	.book-h { font-size: 40px; }
	.note-text { font-size: 26px; }
	.term-b { font-size: 19px; }
	.custom-copy .body { font-size: 20px; }
	.band .body,
	.band--solid .body { font-size: 20px; }
}

@media (max-width: 960px) {
	/* Single column wherever this stylesheet set an explicit second track. */
	.about-in,
	.clients-head,
	.custom-in { grid-template-columns: 1fr; }
	.custom-copy .wrap-h { padding-right: 0; }
	.custom-copy { align-items: center; padding-block: 56px; }
	.terms { columns: 1; margin-top: 48px; }
	.term:nth-child(5) { break-after: auto; margin-bottom: 42px; }

	.page-template-copyright .band-copy { display: block; }
	.page-template-copyright .band-act { margin-top: 32px; }
	.page-template-copyright .band--solid { padding-block: 96px; }

	/* The measured vertical offsets belong to the 1440px bands only. */
	.hero--home .hero-in,
	.hero--sub .hero-in,
	.page-template-reviews .hero--sub .hero-in,
	.page-template-copyright .hero--sub .hero-in,
	.page-template-reviews .band-copy { transform: none; }
	.hero--sub .hero-h { margin-top: 18px; }
	.hero--home .hero-act { margin-top: 44px; }

	.band,
	.page-template-reviews .band { min-height: 480px; }
	.note-img { min-height: 320px; }
	.sec-tst { padding-top: 72px; padding-bottom: 72px; }
	.feat-quote { max-width: none; margin-top: 64px; }
}

@media (max-width: 600px) {
	.hero--home .hero-h { font-size: 36px; }
	.h2,
	.band-h { font-size: 31px; }
	.band--solid .band-h { font-size: 27px; }
	.book-h { font-size: 24px; }
	.tile-t { font-size: 19px; }
	.card-t { font-size: 26px; }
	.feat-quote blockquote p { font-size: 21px; }
	.feat-quote::before { top: -32px; width: 100%; }
	.note-text { font-size: 20px; }
	.mark-1, .mark-2, .mark-3,
	.mark-4, .mark-5, .mark-6 { font-size: 21px; }
	.body,
	.term-b { font-size: 17px; }
	.body { line-height: 1.62; }
	.eyebrow { font-size: 14px; }
	.sec-head .link-arrow { font-size: 12px; }
	.lead { font-size: 18px; }
	.hero--home .hero-body,
	.band .body,
	.band--solid .body,
	.custom-copy .body { font-size: 18px; }
	.band .btn,
	.custom-copy .btn,
	.band--solid .btn { padding: 0 24px; }
	.sec-tst { padding-top: 56px; padding-bottom: 56px; }
}