/*
Theme Name: Zara Montreal
Theme URI: https://mtlzz.com
Template: zara
Author: Zara Photography
Description: Montreal child theme — navy ink on warm paper, corporate and
             events copy. Layout comes from the Zara parent theme.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: zara-mtl
*/

/* Palette read from the MTL mockups (image10/0/5/2). Where a value could be
   sampled from a solid area it was: the CTA band and MTP card panel give
   --ink, a run of hairline pixels gives --line, and the heaviest headings
   ("More Than a Portfolio") reach a solid #101820 for --near.

   Small text never reaches its true colour at 724px — antialiasing lifts it,
   and sharpening haloes on the thin display serif overshoot the other way to
   pure black. So --soft and --muted are NYC's verified ladder shifted into
   this navy hue rather than read off glyphs. The check: that shift predicts
   #878f96 for the testimonial attribution, and the mockup measures #889197.
   See MEASUREMENTS.md. */

:root {
	--ink: #121a22;
	--paper: #fbfbf9;
	--tint: #f8f8f6;
	--tint-b: #f4f4f2;
	--near: #101820;
	--soft: #2f3840;
	--muted: #878f96;
	--line: #ddddd9;

	/* Tiles measure 199x196 inside the 636px container, so the gutter is
	   40px at 1440 rather than New York's 24. */
	--tile-gap: 40px;

	/* Montreal sets its running copy in a text serif, where New York uses
	   the sans. Identified by rendering the same testimonial line in eleven
	   candidate serifs and comparing each with the mockup: scaled to the
	   mockup's 17px line height, Noto Serif comes out 361px wide against the
	   mockup's 363, and its x-height is 0.531 of the line against the
	   mockup's 0.529. Source Serif 4 is the near miss — the same width, but
	   an x-height 7% short. */
	--body: "Noto Serif", Georgia, "Times New Roman", serif;
	--quote: var(--body);
}

/* The six client wordmarks. Each is a real brand lockup and the mockup sets
   every one differently, so they are styled individually rather than
   flattened into one rule. Order is fixed by the design.

   Sizes start from the mockup's measured cap height (9px at 724, so 17.9px
   at 1440) and the measured width of each word, which is what sets the
   tracking. */

.mark-1 {                                  /* LAURENT GROUP — serif, caps */
	font-size: 30px;
	letter-spacing: 0.11em;
}
.mark-2 {                      /* Northbridge Summit — serif, mixed case */
	font-size: 25px;
	letter-spacing: 0;
	text-transform: none;
}
.mark-3 {                            /* ATELIER PARC — sans, wide tracking */
	font-family: var(--sans);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 0.10em;
}
.mark-4 {                                  /* MAISON CLERC — sans, tracked */
	font-family: var(--sans);
	font-size: 25px;
	font-weight: 400;
	letter-spacing: 0.12em;
}
.mark-5 {                             /* Forum Eight — serif, mixed case */
	font-size: 27px;
	letter-spacing: 0;
	text-transform: none;
}
.mark-6 {                               /* RIVIÈRE CAPITAL — sans, tracked */
	font-family: var(--sans);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0.07em;
}

/* --- Hero and closing band ----------------------------------------------
   Montreal sets the hero larger than New York does. Measured by rendering
   the same string in both and comparing its width at 724px: the eyebrow is
   1.144x, the body 1.256x and the button label 1.19x New York's, while the
   headline matches at 0.985x. The ghost button's box is 131x28 at 724, so
   261x56 at the 1440 the design was drawn for. */

/* Every small-caps label runs larger than New York's: measured 1.14x on the
   hero eyebrow, 1.16x on BOOK COVERAGE, 1.22x on the tile subtitles. */
.eyebrow { font-size: 16px; }
.tile-s { font-size: 16px; }

.hero-body { font-size: 25px; }

/* The hero text is not centred in its band the way New York's is: measured
   at 724px it sits 111px below the top of the band and 68px above the
   bottom, so it is pushed down by half that difference. */
.hero--home .hero-in { transform: translateY(20px); }

.btn {
	min-height: 52px;
	padding: 0 30px;
	font-size: 15px;
}
.btn .ico { margin-left: 20px; }
.hero-act--boxed { margin-top: 30px; }

/* --- Selected work ------------------------------------------------------
   The tile captions are set in the sans, not the display serif New York
   uses, and the image is very slightly wider than tall (199x196) rather
   than taller than wide. */

.tile-img { aspect-ratio: 199 / 196; }
.tile-t {
	font-family: var(--sans);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.06em;
	color: var(--near);
}

/* --- Clients and quote --------------------------------------------------
   The wordmarks are spread across the full container, first and last flush
   with its edges (measured centres 82, 197, 311, 417, 529, 642 against a
   45-679 container), rather than centred in six equal columns.

   Both the featured quote and the testimonials are upright here; only New
   York sets them in italic, and there is no rule above the quote.

   The clients band and the Book Coverage band below it share one tinted
   background in the mockup rather than being two bands. */

.sec-extra { background: var(--tint); }
/* The right-hand column starts at 403 of the 45-679 container. */
.extra-in { grid-template-columns: 663fr 549fr; }
.clients-label + .marks { margin-top: 22px; }
.feat-quote { max-width: 820px; }
.feat-quote blockquote p { font-size: 29px; }
.feat-quote::before { content: none; }

.marks {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.feat-quote blockquote p { font-style: normal; }
.tst-q blockquote p { font-style: normal; }

/* --- About --------------------------------------------------------------
   A wider measure — the mockup's second paragraph runs to 282px at 724 —
   a slightly wider portrait, and the copy starting higher against it. */

.about-copy .body { max-width: 570px; }
.about-copy { padding-top: 26px; }
.about-img { aspect-ratio: 313 / 281; }

/* --- Book coverage ------------------------------------------------------
   This heading is set smaller than the other section headings: "Let's
   Create" measures 130px at 724 against "More Than a Portfolio" at its full
   size, a ratio of 0.79. */

.sec-extra .h2 { font-size: 50px; }

/* --- Closing band -------------------------------------------------------
   255px tall at 724, so 507 at 1440, with the copy centred rather than
   sitting below centre. The headline is 0.88x New York's and the body,
   like the hero's, is larger. */

.band { min-height: 507px; }
.band--photo .band-copy { padding-top: 0; }
.band-h { font-size: 60px; }
.band-copy .body { font-size: 24px; }

/* --- Book page ----------------------------------------------------------
   "CHECK AVAILABILITY" measures 303px at 724 against New York's 189, so the
   step heading is set 1.6x larger, and the service tiles are shorter (37px
   at 724, not 43) with more air between the rows. */

.book-h { font-size: 54px; margin-bottom: 46px; }
.step-label { margin-bottom: 34px; }
.svc { min-height: 68px; font-size: 12px; }
.svc-grid { gap: 37px 22px; }

/* The custom-project band is held inside the container here rather than
   bleeding to the viewport edge: the photograph runs 432-679 of 724 and the
   copy starts on the container's left edge. */

.custom-in {
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
	grid-template-columns: 770fr 490fr;
	align-items: start;
	min-height: 0;
}
.custom-copy { padding-block: 120px 48px; }
.custom-copy .wrap-h {
	max-width: none;
	margin-left: 0;
	padding-left: 0;
	padding-right: 24px;
}
/* The mockup sets this heading large enough that "in Mind?" runs over the
   photograph. That is a mockup overflow rather than a design, so it is sized
   to the largest that still keeps the line inside the copy column. */
.custom-copy .h2 { font-size: 44px; }
.custom-copy .body { max-width: none; margin-top: 26px; font-size: 18px; }
.custom-copy .btn { min-height: 76px; padding: 0 34px; font-size: 14px; }
.custom-img { margin-top: 122px; aspect-ratio: 490 / 342; }

/* Subpage hero copy is top-aligned, not centred: the block starts 54px (at
   724) below the band top on all three subpages even though the bands are
   271, 311 and 294 tall. The eyebrow is set small here, the body tight under
   the headline. */
.hero--sub { align-items: flex-start; }
.hero--sub .hero-in { padding-top: 96px; }
.hero--sub .hero-h { margin-top: 36px; }
.hero--sub .hero-body { margin-top: 6px; }

/* --- Subpage eyebrows ---------------------------------------------------
   Only the homepage and the Book page's step labels take the 16px eyebrow.
   Every subpage hero, and everything on Reviews and Copyright, is 12. */

.hero--sub .eyebrow,
.page-template-reviews .eyebrow,
.page-template-copyright .eyebrow { font-size: 12px; }

/* --- Reviews ------------------------------------------------------------
   The quote measure stops at 743px rather than filling its column, and this
   page's closing band is set larger than the homepage's. */

.tst-q blockquote { max-width: 743px; }
.page-template-reviews .band-h { font-size: 65px; }
.page-template-reviews .band .btn { min-height: 74px; padding: 0 46px; }
.page-template-reviews .band { min-height: 549px; }

/* --- Copyright ----------------------------------------------------------
   The mockup runs 01-05 down the left column and 06-10 down the right, so
   the grid fills by column rather than by row. */

.terms {
	grid-auto-flow: column;
	grid-template-rows: repeat(5, auto);
	grid-template-columns: 581fr 603fr;
	column-gap: 78px;
	margin-top: 90px;
}
.terms-intro { margin-top: 36px; font-size: 21px; }

/* The Copyright page's closing band puts its button on the right, beside the
   heading, rather than under the copy, and sets the heading much larger than
   the homepage band does. 457px tall at 1440. */

.page-template-copyright .band--solid { padding-block: 138px; }
.page-template-copyright .band-copy {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 60px;
	align-items: center;
}
.page-template-copyright .band-copy > .eyebrow,
.page-template-copyright .band-copy > .band-h,
.page-template-copyright .band-copy > .body { grid-column: 1; }
.page-template-copyright .band-act {
	grid-column: 2;
	grid-row: 2;
	align-self: center;
	margin: 0;
}
.page-template-copyright .band-h { font-size: 72px; }
.page-template-copyright .band-copy .body { font-size: 22px; max-width: 850px; }
.page-template-copyright .band .btn { min-height: 80px; padding: 0 83px; font-size: 13px; }

/* --- Narrow viewports ---------------------------------------------------
   The parent collapses its multi-column bands at 960px, but a child rule
   without a media query still beats a parent rule inside one, so every grid
   overridden above has to be collapsed again here. */

@media (max-width: 960px) {
	.marks {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 34px 24px;
	}
	.extra-in,
	.custom-in,
	.terms { grid-template-columns: 1fr; }
	.terms { grid-auto-flow: row; grid-template-rows: none; }

	.custom-in { padding-inline: 0; }
	.custom-copy { padding-block: 56px; }
	.custom-copy .wrap-h { padding-inline: var(--gutter); }
	.custom-in { align-items: stretch; }
	.custom-img { width: 100%; margin-top: 0; aspect-ratio: 3 / 2; }

	.page-template-copyright .band-copy { display: block; }
	.page-template-copyright .band-act { margin-top: 32px; }
	.page-template-copyright .band .btn { padding: 0 40px; }

	.hero--sub .hero-in { padding-top: 0; }
	.hero--sub { align-items: center; }
}

@media (max-width: 600px) {
	.marks { grid-template-columns: repeat(2, 1fr); }
	/* The six wordmark rules above carry no media query, so they outrank
	   the parent's phone size and "Northbridge Summit" at 25px dragged the
	   row past a 320px viewport. Restated here at the parent's size. */
	.mark-1, .mark-2, .mark-3,
	.mark-4, .mark-5, .mark-6 { font-size: 21px; }
	.book-h { font-size: 32px; }
	.custom-copy .h2 { font-size: 31px; }
	.page-template-copyright .band-h { font-size: 27px; }
	.page-template-reviews .band-h { font-size: 31px; }
}