/* hz, the whole stylesheet.
   One file, no framework, no build. Order: tokens, reset, wordmark, header,
   hero, collections, grid, photograph, shop, form, footer, phone.

   CLAUDE.md asks for under 25 KB and says to measure before claiming it. So:
   about 36 KB raw, about 7 KB over the wire once the server compresses it.
   The one it replaced was 890 KB.

   The raw number is not worth chasing. Deduplicating the repeated small-label
   declarations was measured at 13 bytes compressed, because gzip already
   collapses repetition far better than hand-editing does. What is worth doing
   is deleting rules nothing uses, which is why the form-plugin compatibility
   block went when the form came into the theme. */

/* ---------------------------------------------------------------- tokens - */

:root {
  --paper:    #FBFAF8;
  --ink:      #1B1A17;
  --soft:     #55524B;
  --muted:    #6F6B63;
  --faint:    #9A968D;
  --hairline: #E4E0D9;
  --accent:   oklch(0.55 0.07 62);
  --accent-deep: oklch(0.44 0.07 62);

  --display: 'Bodoni Moda', Didot, 'Bodoni MT', Georgia, serif;
  --text:    'Jost', Futura, system-ui, sans-serif;

  /* The page gutter, and the gap between tiles in a justified row. */
  --gutter: 72px;
  --gap: 28px;

  /* Nothing below ~14px uses the display face: Bodoni's hairlines vanish. */
  --micro: 11px;
  --small: 12px;
}

@media (max-width: 1099px) { :root { --gutter: 40px; --gap: 22px; } }
@media (max-width: 699px)  { :root { --gutter: 16px; --gap: 16px; } }

/* ----------------------------------------------------------------- reset - */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* No horizontal scroll at any width. */
}

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  line-height: 1.12;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* Both list types. The breadcrumb and the lineage are ordered lists, because
   the order is the meaning in each, and resetting only `ul` left them printing
   their markers: "1. Work 2. / Ground", the numbers overlapping the labels. */
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Prose is the exception. A list written in the editor should look like one. */
.hz-prose ul, .hz-prose ol { margin: 1.1em 0; padding-left: 1.4em; }
.hz-prose ul { list-style: disc; }
.hz-prose ol { list-style: decimal; }
.hz-prose li + li { margin-top: 0.4em; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.hz-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 20px;
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: var(--small); letter-spacing: 0.16em; text-transform: uppercase;
}
.hz-skip:focus { left: 0; color: var(--paper); }

/* Every uppercase letterspaced label on the site is one of these two. */
.hz-label,
.hz-counts span,
.hz-crumbs,
.hz-nav__list a,
.hz-footer,
.hz-price {
  font-family: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* -------------------------------------------------------------- wordmark - */
/* From parts/mark.css. 0.71em is what makes the drawn O agree with Bodoni's
   cap height inline with the type. Do not change the geometry. */

.hz-mark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.20em;
  white-space: nowrap;
}

.hz-mark__o {
  height: 0.71em;
  width: auto;
  margin: 0 0.15em 0 0.04em;
}

.hz-mark--small .hz-mark__o { margin: 0 0.15em 0 0.04em; }

/* ---------------------------------------------------------------- header - */

.hz-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  padding: 36px var(--gutter) 28px;
  border-bottom: 1px solid var(--hairline);
}

/* On the homepage the header sits over the photograph, with no rule. */
.hz-header--over {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  border-bottom: 0;
  padding: 40px var(--gutter) 0;
}

/* The wordmark is a link home, so it is a tap target like any other: 44px
   minimum, even though the type itself is 22px tall. */
.hz-header__mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 22px;
  text-transform: uppercase;
}
.hz-header__mark:hover { color: var(--ink); }

.hz-nav__list {
  display: flex;
  gap: 40px;
  font-size: var(--small);
  letter-spacing: 0.18em;
}

.hz-nav__list a {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  min-height: 44px;             /* Hit targets 44px minimum. */
}
.hz-nav__list a:hover { color: var(--ink); }

.hz-nav__list .current-menu-item > a,
.hz-nav__list .current_page_item > a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.hz-header--over .hz-nav__list a { color: #3A3831; }
.hz-header--over .hz-nav__list a:hover { color: var(--ink); }

/* The cart link lives inside the nav list as an <li>, so the list already
   handles its placement, spacing and 44px target. All that is left is the
   count, and hiding the item until the cookie says there is a cart.

   It is .hz-cartlink and not .hz-cart because .hz-cart was already the black
   add-to-cart button on the print page, which is why the first version of this
   rendered as a black square below the nav. */
.hz-cartlink-item[hidden] { display: none; }
.hz-cartlink__count { color: var(--accent); letter-spacing: 0.08em; }
.hz-nav__list .hz-cartlink { color: var(--ink); }

.hz-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-right: -10px;
}

/* ------------------------------------------------------------------ hero - */

.hz-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;               /* svh, with the vh above as the fallback. */
  overflow: hidden;
  background: #C9CAC8;
}

.hz-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cover crops from the centre by default, which is the wrong place on most
     photographs. The anchor is set per breakpoint in the Customizer. */
  object-position: var(--hz-focus-tall, 50% 50%);
}

.hz-hero__foot {
  position: absolute;
  inset: auto var(--gutter) 210px var(--gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  z-index: 2;
}

/* The shade behind the hero line.
   Only drawn when that breakpoint's tone is set to light type, which is the
   phone default: the near-native vertical crop reaches down into the water and
   ink-coloured type disappears into it. The gradient is tall and eased rather
   than a band, so on a photograph that is already pale it reads as nothing. */
.hz-hero__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: 1;
  pointer-events: none;
  display: none;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 0%,
    rgb(0 0 0 / 12%) 38%,
    rgb(0 0 0 / 42%) 72%,
    rgb(0 0 0 / 60%) 100%
  );
}

@media (min-width: 700px) {
  .hz-hero__img { object-position: var(--hz-focus-wide, 50% 50%); }
  .hz-hero--wide-paper .hz-hero__scrim { display: block; }
  .hz-hero--wide-paper .hz-hero__line,
  .hz-hero--wide-paper .hz-hero__cue { color: var(--paper); }
}

/* Pagination.

   One component, printed by hz_pagination(), used above and below every grid.
   It replaced two different shapes: WooCommerce's woocommerce_pagination() and
   a bare paginate_links() on the collection template. Two shapes meant two sets
   of styles, which is how one of them ended up with none at all and the numbers
   stacked down the left of the page.

   44px targets, because on a phone these are among the most-tapped things on
   the site. */

.hz-pager {
  display: flex;
  justify-content: center;
  margin: 56px 0 0;
  padding: 0 var(--gutter);
}

.hz-pager .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.hz-pager li { margin: 0; }

.hz-pager li .page-numbers {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--text);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--soft);
  text-decoration: none;
  border: 1px solid var(--hairline);
  transition: color 0.2s, border-color 0.2s;
}

.hz-pager li a.page-numbers:hover { color: var(--ink); border-color: var(--ink); }
.hz-pager li .page-numbers.current { color: var(--ink); border-color: var(--ink); }

/* The ellipsis is not a target, so it should not look like one. */
.hz-pager li .page-numbers.dots {
  border-color: transparent;
  min-width: 0;
  padding: 0 2px;
  color: var(--faint);
}

/* The one above the grid sits on the heading's line, so it has to be quiet:
   no boxes, the current page marked by a rule under it rather than around it,
   and pushed to the right so the heading keeps the left. */
.hz-section__head--pager {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}

.hz-pager--compact {
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

.hz-pager--compact .page-numbers { gap: 2px; }

.hz-pager--compact li .page-numbers {
  min-width: 34px;
  min-height: 44px;
  padding: 0 6px;
  font-size: 13px;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--faint);
}

.hz-pager--compact li a.page-numbers:hover {
  color: var(--ink);
  border-bottom-color: var(--hairline);
}

.hz-pager--compact li .page-numbers.current {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.hz-pager--compact li .page-numbers.dots { min-width: 0; padding: 0; }

/* While a page is being fetched, the grid it belongs to steps back. */
.hz-grid.is-loading { opacity: 0.35; transition: opacity 0.15s; }

/* Music photographs. The page used to be three names, a list of venues and no
   evidence that any of it happened. */
.hz-music__lead,
.hz-music__stage {
  margin: 48px 0 0;
  padding: 0 var(--gutter);
}

.hz-music__lead img,
.hz-music__stage img { width: 100%; height: auto; display: block; }

.hz-music__stage { margin: 0 0 40px; padding: 0; }

.hz-music__teachers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: 32px 0 0;
  padding: 0 var(--gutter);
}

.hz-music__teacher { flex: 1 1 280px; margin: 0; }
.hz-music__teacher img { width: 100%; height: auto; display: block; }

.hz-music__lead figcaption,
.hz-music__stage figcaption,
.hz-music__teacher figcaption {
  margin-top: 10px;
  font-family: var(--text);
  font-size: var(--small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------------- cart, checkout - */
/* WooCommerce's own markup, styled rather than overridden. There are no cart or
   checkout templates in this theme: both render their shortcode through
   page.php, and a template override would be a copy of Woo's markup that has to
   be re-merged on every Woo release. Styling it costs one block and survives
   updates.

   The starting point was Woo's default stylesheet: a grey bordered table, a
   purple #7f54b3 button, and the browser's own form controls. That is a
   different website bolted onto the end of this one, and it is the only part of
   the site where money changes hands, which is the worst place to lose
   somebody's confidence. */

/* Notices. Woo ships three, each a tinted panel with a coloured bar. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  margin: 0 0 32px;
  padding: 14px 18px;
  border: 0;
  border-left: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--soft);
  font-size: 15px;
  list-style: none;
}

.woocommerce-error { border-left-color: #A4302C; color: #A4302C; }
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { content: none; }
.woocommerce-info .button,
.woocommerce-message .button { float: right; margin-left: 20px; }

/* The tables: the cart lines, and the order review at checkout. */
.woocommerce table.shop_table {
  width: 100%;
  margin: 0 0 40px;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  font-size: 15px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 20px 12px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  text-align: left;
}

.woocommerce table.shop_table thead th {
  padding-bottom: 12px;
  font-family: var(--text);
  font-size: var(--small);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom-color: var(--ink);
}

.woocommerce table.shop_table th.product-price,
.woocommerce table.shop_table th.product-subtotal,
.woocommerce table.shop_table th.product-total,
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table td.product-total { text-align: right; }

.woocommerce table.shop_table .product-thumbnail { width: 88px; }
.woocommerce table.shop_table .product-thumbnail img { width: 88px; height: auto; display: block; }

.woocommerce table.shop_table td.product-name a {
  font-family: var(--display);
  font-size: 20px;
  color: var(--ink);
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--accent-deep); }

/* The chosen size, printed under the title as a definition list. */
.woocommerce table.shop_table .variation {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.woocommerce table.shop_table .variation dt,
.woocommerce table.shop_table .variation dd { display: inline; margin: 0; padding: 0; }
.woocommerce table.shop_table .variation dd p { display: inline; margin: 0; }

/* Remove. A red cross by default; a hairline circle here. */
.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  color: var(--faint);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  text-decoration: none;
}
.woocommerce a.remove:hover { color: var(--ink); border-color: var(--ink); background: transparent; }

/* Scoped to the cart, not to .woocommerce generally. The print page draws the
   border on the .quantity wrapper and clears it on the input inside; an
   unscoped .woocommerce .quantity input.qty is 0,3,1 against that rule's 0,2,1
   and wins wherever it applies, so the input got its border back and the box
   came out doubled. */
.woocommerce-cart .quantity input.qty {
  width: 64px;
  height: 44px;
  padding: 0 8px;
  text-align: center;
  font-family: var(--text);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 0;
}

.woocommerce table.shop_table td.actions { padding: 24px 0 0; border-bottom: 0; }
.woocommerce .coupon { display: flex; gap: 10px; float: none; }
.woocommerce #coupon_code { width: auto; min-width: 180px; height: 48px; padding: 0 12px; }

/* Buttons. One shape for all of them, the purple one included. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--text);
  font-size: var(--small);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  text-shadow: none;
  box-shadow: none;
  line-height: 1;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  color: var(--paper);
  background: #000;
  border-color: #000;
}

/* Secondary: Update cart, Apply coupon. Outlined, so the one button that takes
   you forward is the only filled thing on the page. */
.woocommerce .coupon .button,
.woocommerce td.actions > .button,
.woocommerce button[name="update_cart"] {
  color: var(--ink);
  background: transparent;
  border-color: var(--hairline);
}

.woocommerce .coupon .button:hover,
.woocommerce td.actions > .button:hover,
.woocommerce button[name="update_cart"]:hover {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink);
}

.woocommerce .button:disabled,
.woocommerce button[name="update_cart"]:disabled { opacity: 0.4; }

/* Totals. */
.woocommerce .cart-collaterals { width: 100%; }
.woocommerce .cart_totals { float: none; width: 100%; max-width: 420px; margin-left: auto; }

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 20px;
}

.woocommerce .cart_totals table.shop_table { margin-bottom: 24px; }
.woocommerce .cart_totals th {
  width: 45%;
  color: var(--soft);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 400;
}
.woocommerce .cart_totals td { text-align: right; }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { border-bottom: 0; color: var(--ink); }
.woocommerce .cart_totals .order-total .amount { font-family: var(--display); font-size: 22px; }

.woocommerce .wc-proceed-to-checkout { padding: 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; }

/* Checkout. */
.woocommerce-checkout .col2-set { display: flex; flex-wrap: wrap; gap: var(--gap); }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: auto; flex: 1 1 320px; }

.woocommerce form .form-row { margin: 0 0 20px; padding: 0; }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--text);
  font-size: var(--small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.woocommerce form .form-row .required { color: var(--accent); text-decoration: none; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: 12px 14px;
  font-family: var(--text);
  /* 16px exactly, or iOS zooms the page when the field takes focus. */
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}

.woocommerce form .form-row textarea { min-height: 110px; resize: vertical; }

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--ink); outline: none; }

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.4;
  padding: 0;
  color: var(--ink);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; right: 10px; }

.woocommerce-checkout #order_review { margin-top: 40px; }
.woocommerce-checkout-payment { background: transparent; border-radius: 0; }

.woocommerce-checkout #payment ul.payment_methods {
  padding: 0 0 24px;
  border-bottom: 1px solid var(--hairline);
}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; margin-bottom: 12px; }

.woocommerce-checkout #payment div.payment_box {
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  padding: 8px 0 0;
}
.woocommerce-checkout #payment div.payment_box::before { content: none; }

.woocommerce-checkout #payment div.form-row.place-order { padding: 24px 0 0; }
.woocommerce #place_order { width: 100%; }
.woocommerce-terms-and-conditions-wrapper { font-size: 14px; color: var(--muted); }

/* Order received. */
.woocommerce ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 0 0 40px;
  padding: 0;
}
.woocommerce ul.order_details li {
  list-style: none;
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
  font-family: var(--text);
  font-size: var(--small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.woocommerce ul.order_details li strong {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
@media (max-width: 699px) {
  /* Woo's own responsive table turns each row into a stack of labelled lines. */
  .woocommerce table.shop_table td { padding: 12px 0; }
  .woocommerce table.shop_table .product-thumbnail { width: auto; }
  .woocommerce .cart_totals { max-width: none; }
  .woocommerce .coupon { flex-direction: column; }
  .woocommerce #coupon_code,
  .woocommerce .coupon .button,
  .woocommerce td.actions > .button { width: 100%; }
  .woocommerce-checkout .col2-set { gap: 0; }

  .hz-music__teachers { flex-direction: column; gap: 24px; }
  .hz-music__teacher { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 699px) {
  .hz-pager li .page-numbers { padding: 0 9px; font-size: 13px; }

  /* Stacked, the compact pager has the width to itself, so centre it under
     the heading rather than leaving it hanging off the right edge. */
  .hz-section__head--pager { gap: 12px; }
  .hz-pager--compact { justify-content: center; width: 100%; }
}

}

@media (max-width: 699px) {
  .hz-hero--tall-paper .hz-hero__scrim { display: block; }
  .hz-hero--tall-paper .hz-hero__line,
  .hz-hero--tall-paper .hz-hero__cue { color: var(--paper); }
}

.hz-hero__line {
  max-width: 420px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 26px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
}

.hz-hero__cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #3A3831;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hz-hero__cue:hover { color: var(--ink); }

/* Missing hero, so the page still reads rather than showing a grey void. */
.hz-hero--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hairline);
  color: var(--muted);
  font-size: var(--small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--gutter);
}

/* ----------------------------------------------------------- collections - */

.hz-section {
  padding: 96px var(--gutter) 0;
}

.hz-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 46px;
}

.hz-section__head h2 { font-size: clamp(25px, 2.6vw, 34px); }

.hz-label {
  font-size: var(--small);
  color: var(--muted);
}

/* Justified rows. Each tile's flex-grow is its aspect ratio and its basis is 0,
   so widths come out proportional to the ratios and every tile in a row lands
   at the same height. Nothing is cropped and no height is ever declared. */
.hz-rows {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.hz-row {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
}

.hz-row > * {
  flex: var(--hz-ar, 1) 1 0;
  min-width: 0;
}

.hz-tile { display: flex; flex-direction: column; gap: 12px; }

.hz-tile img {
  display: block;
  width: 100%;
  height: auto;
}

.hz-tile__name {
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--ink);
}

.hz-tile a { color: var(--ink); }
.hz-tile a:hover .hz-tile__name { color: var(--accent-deep); }

/* The description line is not decoration: a non-literal taxonomy is only
   navigable if this line does the job the old literal name used to do. */
.hz-tile__desc {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
}

.hz-tile img { transition: opacity 240ms ease; }
.hz-tile a:hover img { opacity: 0.88; }

/* A collection with nothing in it yet. Only editors ever see this: visitors get
   the collection omitted entirely, and the row re-justifies around it. The frame
   holds the row's geometry so the remaining tiles still line up. */
.hz-tile__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: var(--hz-ar, 1);
  border: 1px solid var(--hairline);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 11px,
      var(--hairline) 11px 12px
    );
  opacity: 0.55;
}

/* The Prints card, which sits in the second row in place of a sixth tile. */
.hz-prints-card {
  border: 1px solid var(--hairline);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  color: var(--ink);
}
.hz-prints-card:hover { color: var(--ink); }

.hz-prints-card__title { font-family: var(--display); font-size: 30px; }

.hz-prints-card__body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--soft);
  margin-top: 18px;
}

.hz-prints-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
}

/* Pushed to the right corner. The foot is space-between so that a small print
   sample can sit on the left later, as in the mockup; with one child it would
   otherwise sit at the start. */
.hz-prints-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
  font-size: var(--small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hz-prints-card__from { color: var(--muted); }
.hz-prints-card__go { color: var(--accent); letter-spacing: 0.16em; }

/* ------------------------------------------------------------ crumbs etc - */

.hz-crumbs {
  padding: 32px var(--gutter) 0;
  font-size: var(--micro);
  color: var(--faint);
}

.hz-crumbs ol { display: flex; flex-wrap: wrap; gap: 14px; }
.hz-crumbs a { color: var(--faint); }
.hz-crumbs a:hover { color: var(--ink); }
.hz-crumbs li + li::before { content: '/'; margin-right: 14px; color: var(--faint); }
.hz-crumbs [aria-current] { color: var(--ink); }

.hz-page-head {
  padding: 46px var(--gutter) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
}

.hz-page-head__text { max-width: 660px; display: flex; flex-direction: column; gap: 20px; }

.hz-page-head h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.1; }

.hz-page-head__desc {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--soft);
}

.hz-counts {
  display: flex;
  gap: 34px;
  padding-bottom: 8px;
  font-size: var(--micro);
  color: var(--muted);
}

/* -------------------------------------------------------- photograph grid - */

/* Masonry columns, not a justified row: a collection has many photographs at
   many ratios, and columns keep every frame at its native ratio without
   leaving a ragged last row. */
.hz-grid {
  padding: 66px var(--gutter) 0;
  columns: 3;
  column-gap: var(--gap);
}


.hz-figure {
  break-inside: avoid;
  margin: 0 0 42px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hz-figure__img { display: block; width: 100%; height: auto; transition: opacity 240ms ease; }
.hz-figure__link:hover .hz-figure__img { opacity: 0.88; }

.hz-figure__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.hz-figure__title {
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
}

.hz-price {
  font-size: var(--micro);
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
}

.hz-price--none { color: var(--faint); }

.hz-next {
  margin: 96px var(--gutter) 0;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
}

.hz-next__label { font-size: var(--small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hz-next__link { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); }
.hz-next__link:hover { color: var(--accent-deep); }

/* ------------------------------------------------------------ photograph - */

.hz-photo {
  padding: 44px var(--gutter) 0;
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

.hz-photo__image { flex: 1 1 58%; min-width: 0; }
.hz-photo__image img { display: block; width: 100%; height: auto; }

.hz-photo__side {
  flex: 1 1 42%;
  max-width: 524px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.hz-photo__collection {
  font-size: var(--micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.hz-photo__collection a { color: var(--faint); }
.hz-photo__collection a:hover { color: var(--ink); }

.hz-photo__title { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; }

.hz-photo__range { font-size: 20px; font-weight: 300; color: var(--soft); }

.hz-photo__desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--soft);
}

.hz-photo__head { display: flex; flex-direction: column; gap: 12px; }

/* The words that replace the whole purchase block. */
.hz-notforsale {
  font-size: var(--small);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.hz-terms {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}

/* ----------------------------------------------------------- shop pieces - */

/* Size and paper as visible pill rows, not dropdowns: four sizes and three
   papers fit on the page. */
.hz-pills { display: flex; flex-direction: column; gap: 14px; }

.hz-pills__label {
  font-size: var(--micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.hz-pills__row { display: flex; flex-wrap: wrap; gap: 10px; }

.hz-pill {
  border: 1px solid var(--hairline);
  padding: 13px 20px;
  font-size: 13px;
  color: var(--soft);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: transparent;
}

.hz-pill.is-selected {
  border-color: var(--ink);
  color: var(--ink);
}

.hz-pill:hover:not(.is-unavailable) { border-color: var(--muted); color: var(--ink); }

.hz-pill.is-unavailable {
  color: var(--faint);
  border-style: dashed;
  cursor: not-allowed;
}

/* The dropdown Woo rendered stays in the DOM and stays in charge; the pills are
   a second face on it. Hidden this way rather than display:none so it keeps its
   layout box for Woo's own scripts, and so it is still there without JS. */
.hz-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Woo's variation table, unstyled back down to a stack of pill rows. */
.hz-photo .variations,
.hz-photo .variations tbody,
.hz-photo .variations tr,
.hz-photo .variations th,
.hz-photo .variations td {
  display: block;
  width: auto;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: left;
}

.hz-photo .variations tr + tr { margin-top: 24px; }

/* The label is reprinted inside the pill group, so Woo's own <th> label is
   redundant once the pills are in. */
.hz-has-pills .variations th.label { display: none; }

.hz-photo .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hz-photo .woocommerce-variation-price {
  font-size: 20px;
  font-weight: 300;
  color: var(--soft);
  margin: 24px 0 0;
}

.hz-photo .woocommerce-variation-availability { font-size: 13px; color: var(--muted); }

.hz-photo form.cart { display: flex; flex-direction: column; gap: 24px; margin: 0; }

.hz-photo .single_add_to_cart_button {
  min-height: 56px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-size: var(--small);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 0 28px;
  flex-grow: 1;
}
.hz-photo .single_add_to_cart_button:hover { background: #000; }
.hz-photo .single_add_to_cart_button.disabled { opacity: 0.35; cursor: not-allowed; }

.hz-photo .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hz-photo .quantity {
  border: 1px solid var(--hairline);
  height: 56px;
  display: flex;
  align-items: center;
}
.hz-photo .quantity input {
  width: 72px;
  height: 54px;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  color: var(--ink);
}

.hz-buy { display: flex; align-items: center; gap: 16px; padding-top: 6px; }

.hz-qty {
  border: 1px solid var(--hairline);
  height: 56px;
  width: 116px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 15px;
}

.hz-cart {
  flex-grow: 1;
  min-height: 56px;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--small);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border: 0;
}
.hz-cart:hover { background: #000; color: var(--paper); }

/* Woo's notices, in the theme's voice rather than its own green banner.
   Woo prints the wrapper on every page whether or not there is anything in it,
   so an empty one must take no space: otherwise /prints/ sits 24px lower than
   every other page for no visible reason. */
.woocommerce-notices-wrapper { margin: 24px var(--gutter) 0; }
.woocommerce-notices-wrapper:empty { margin: 0; }
.hz-photo .woocommerce-notices-wrapper,
.hz-page-body .woocommerce-notices-wrapper { margin-left: 0; margin-right: 0; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  padding: 16px 20px;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--ink);
  background: transparent;
  font-size: 14px;
  font-weight: 300;
  color: var(--soft);
  list-style: none;
}

.woocommerce-error { border-left-color: var(--accent); }

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.hz-related { margin: 96px var(--gutter) 0; padding-top: 30px; border-top: 1px solid var(--hairline); }
.hz-related__label { font-size: var(--small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.hz-related__row { display: flex; gap: var(--gap); align-items: flex-start; }
.hz-related__row > * { flex: var(--hz-ar, 1) 1 0; min-width: 0; }

/* ---------------------------------------------------------------- footer - */

.hz-footer {
  margin: 96px var(--gutter) 0;
  padding: 30px 0 46px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  font-size: var(--small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.hz-footer__links { display: flex; gap: 28px; flex-wrap: wrap; }
.hz-footer a { color: var(--faint); }
.hz-footer a:hover { color: var(--ink); }

/* ------------------------------------------------------------- lightbox - */

.hz-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 72px;
}

.hz-lightbox[hidden] { display: none; }
.hz-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.hz-lightbox__close,
.hz-lightbox__prev,
.hz-lightbox__next {
  position: absolute;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 20px;
}
.hz-lightbox__close { top: 16px; right: 16px; }
.hz-lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.hz-lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
.hz-lightbox__close:hover, .hz-lightbox__prev:hover, .hz-lightbox__next:hover { color: var(--ink); }

.hz-lightbox__caption {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  margin: 0;
  text-align: center;
}

.hz-lightbox__caption a {
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
}
.hz-lightbox__caption a:hover { color: var(--ink); }

.hz-lightbox__price {
  font-family: var(--text);
  font-style: normal;
  font-size: var(--micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------- music and about - */

/* A full-width image opening a page. Not the hero: no viewport height, no
   overlay, and it scrolls away like any other photograph. */
.hz-lead img {
  display: block;
  width: 100%;
  height: 60vh;
  min-height: 320px;
  object-fit: cover;
  object-position: 50% 40%;
}

.hz-music + .hz-music { padding-top: 56px; }

/* The teaching line, drawn as a line. In Persian classical music this is the
   credential, so it reads as a sequence rather than a bulleted list. */
.hz-lineage {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  counter-reset: hz-lineage;
}

.hz-lineage__item {
  position: relative;
  flex: 1 1 240px;
  padding: 0 28px 0 0;
  margin-right: 28px;
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hz-lineage__item:last-child { border-right: 0; margin-right: 0; }

.hz-lineage__name {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
}

.hz-lineage__note {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
}

.hz-teaching {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hz-teaching p { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--soft); }

.hz-teaching a {
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hz-recordings {
  display: flex;
  flex-wrap: wrap;
  gap: 42px var(--gap);
}

.hz-recording {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hz-recording__title {
  font-family: var(--display);
  font-size: clamp(19px, 1.8vw, 23px);
  font-style: italic;
  font-weight: 400;
}

.hz-recording__credit,
.hz-recording__note {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 6px;
}

/* The facade. Nothing from a streaming service is requested until the button is
   pressed, so this is what the page costs until then: a frame and a triangle. */
.hz-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hairline);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
}

.hz-facade__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hz-facade__play {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  color: var(--ink);
  background: var(--paper);
  transition: background 200ms ease, color 200ms ease;
}
.hz-facade__play:hover { background: var(--ink); color: var(--paper); }

/* A facade with no artwork was a bordered rectangle with a play button in the
   middle of it. The title at least says what you would be playing. */
.hz-facade__title {
  position: absolute;
  left: 0; right: 0;
  top: 22px;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  font-family: var(--display);
  font-size: 20px;
  color: var(--soft);
}

.hz-facade__poster + .hz-facade__title { display: none; }

.hz-facade__note,
.hz-facade__link {
  position: relative;
  z-index: 1;
  font-size: var(--micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 0 16px;
}

.hz-facade__link { color: var(--accent); min-height: 44px; display: inline-flex; align-items: center; }

.hz-facade__services {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 14px;
}

.hz-facade__services a {
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.hz-facade.is-playing { border-color: transparent; }
.hz-facade__frame { width: 100%; height: 100%; border: 0; display: block; }

/* Performances: a year, a venue, a city, ruled off. */
.hz-performances { display: flex; flex-direction: column; }

.hz-performance {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}
.hz-performance:last-child { border-bottom: 1px solid var(--hairline); }

.hz-performance__year {
  font-size: var(--small);
  letter-spacing: 0.16em;
  color: var(--faint);
}

.hz-performance__venue { font-family: var(--display); font-size: clamp(18px, 1.7vw, 22px); }

.hz-performance__city { font-size: 14px; font-weight: 300; color: var(--muted); }
.hz-performance__note { display: block; font-size: 13px; color: var(--faint); }

/* Body copy inside a page. */
.hz-prose { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--soft); }

/* A page written in the editor, which page.php renders with no template of its
   own: the refund policy is the first long one. Two things it needs and the
   About and Contact templates already had.

   A measure, because 16px running the full 1296px gutter is unreadable.

   And subheads in the text face. Bodoni is right for one title at 54px and
   wrong for nine subheads at 22px stacked down a page: the hairlines thin out,
   every heading competes with the one above it, and the page stops looking
   like the rest of the site. Uppercase Jost at 12px with the letter-spacing is
   what the footer links, the years on the Music page and the section heads all
   use already, so the policy now reads as part of the same object. */
.hz-page-body.hz-prose { max-width: 68ch; }

.hz-page-body.hz-prose h2,
.hz-page-body.hz-prose h3 {
  font-family: var(--text);
  font-size: var(--small);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.8em 0 0.7em;
}

.hz-page-body.hz-prose > :first-child { margin-top: 0; }
.hz-prose p + p { margin-top: 1.1em; }
.hz-prose h2, .hz-prose h3 { margin: 1.6em 0 0.5em; font-size: clamp(20px, 2vw, 26px); }
.hz-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* About with no portrait yet. The text takes the page, at a measure that is
   still readable: about 70 characters, not the full 1296px gutter to gutter. */
.hz-about--no-portrait { display: block; }
.hz-about--no-portrait .hz-about__text { max-width: 68ch; flex: none; }
.hz-about--no-portrait .hz-photo__title { font-size: clamp(34px, 5vw, 54px); }

.hz-about__links { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.hz-about__links a {
  font-size: var(--small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------- contact - */

.hz-contact {
  padding: 46px var(--gutter) 0;
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

.hz-contact__form { flex: 1 1 58%; min-width: 0; }
.hz-contact__aside { flex: 1 1 34%; max-width: 420px; display: flex; flex-direction: column; gap: 32px; }

.hz-contact__block { display: flex; flex-direction: column; gap: 10px; }
.hz-contact__block p { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--muted); }

/* The theme's own form. */
.hz-form { display: flex; flex-direction: column; gap: 26px; }

.hz-form__field { display: flex; flex-direction: column; gap: 10px; margin: 0; }

.hz-form__field label {
  font-size: var(--micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hz-form input[type="text"],
.hz-form input[type="email"],
.hz-form textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  background: transparent;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;      /* 16px or iOS zooms the page on focus. */
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  border-radius: 0;
}

/* Generous enough to type in. The fields were 44px, which is the minimum for a
   thing you tap, not a comfortable height for a thing you write in. */
.hz-form input[type="text"],
.hz-form input[type="email"] { height: 56px; }

/* Four lines, not eight. Most of what arrives is a paragraph, and a tall empty
   box asks for an essay and pushes the send button off the screen. It grows. */
.hz-form textarea {
  min-height: 132px;
  padding: 14px 16px;
  resize: vertical;
  field-sizing: content;
}

.hz-form__submit { margin: 4px 0 0; }

.hz-form__submit button {
  min-height: 56px;
  padding: 0 40px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-size: var(--small);
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.hz-form__submit button:hover { background: #000; }

/* The honeypot. Off screen rather than display:none, because some bots skip
   anything that is display:none and fill the rest. */
.hz-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hz-form__sent,
.hz-form__errors {
  border-left: 2px solid var(--ink);
  padding: 18px 22px;
  margin-bottom: 28px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--soft);
  background: rgb(0 0 0 / 2%);
}

.hz-form__sent p + p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.hz-form__errors { border-left-color: var(--accent); }
.hz-form__errors ul { display: flex; flex-direction: column; gap: 6px; }

.hz-form input:focus-visible,
.hz-form textarea:focus-visible { outline-offset: 1px; border-color: var(--muted); }

/* ------------------------------------------------------------------ 404 - */

.hz-404 { padding: 120px var(--gutter); max-width: 620px; display: flex; flex-direction: column; gap: 24px; }
.hz-404 h1 { font-size: clamp(34px, 5vw, 54px); }
.hz-404 p { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--soft); }

.hz-search { display: flex; gap: 10px; align-items: stretch; }
.hz-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  border: 1px solid var(--hairline); background: transparent;
  padding: 0 14px; font: inherit; color: var(--ink);
}
.hz-search button { min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); font-size: var(--small); letter-spacing: 0.16em; text-transform: uppercase; }

/* ------------------------------------------------------------- 1100 down - */

@media (max-width: 1099px) {
  .hz-grid { columns: 2; }
  .hz-photo { flex-direction: column; gap: 40px; }
  .hz-photo__side { max-width: none; }
  .hz-hero__foot { bottom: 140px; }
  .hz-related__row { flex-wrap: wrap; }
  /* Stacked, the columns must stretch. The desktop rule anchors them to
     flex-start so a short aside does not stretch beside a tall form, and in
     column direction that same rule shrinks each one to its content. */
  .hz-contact { flex-direction: column; gap: 48px; align-items: stretch; }
}

/* --------------------------------------------------------------- phone - */

@media (max-width: 699px) {
  .hz-header { padding: 18px var(--gutter); align-items: center; }
  .hz-header--over { padding: 18px var(--gutter) 0; }
  .hz-header__mark { font-size: 15px; }

  .hz-burger { display: inline-flex; position: relative; z-index: 71; }
  .hz-burger__close { display: none; }
  .hz-burger[aria-expanded="true"] .hz-burger__open { display: none; }
  .hz-burger[aria-expanded="true"] .hz-burger__close { display: block; }
  .hz-burger[aria-expanded="true"] { color: var(--ink); }

  /* The menu takes the screen rather than dropping a white panel over the
     photograph. A half-open drawer puts a hard edge between paper and a
     full-bleed image, and the eye reads the edge before it reads the menu. */
  .hz-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--paper);
    display: none;
    padding: 84px var(--gutter) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hz-nav.is-open { display: block; }

  .hz-nav__list { flex-direction: column; gap: 0; padding: 0; }



  .hz-nav__list a {
    color: var(--ink);
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: 0.08em;
    text-transform: none;
    min-height: 68px;
    width: 100%;
    border-bottom: 1px solid var(--hairline);
  }

  .hz-nav__list li:last-child a { border-bottom: 0; }

  .hz-nav__list .current-menu-item > a,
  .hz-nav__list .current_page_item > a { color: var(--accent); border-bottom-color: var(--hairline); }

  /* The header stays above the overlay, so the wordmark and the close control
     are both still there while the menu is open. */
  .hz-header { position: relative; z-index: 70; }
  .hz-header--over { position: absolute; z-index: 70; }

  .hz-hero__foot { inset: auto var(--gutter) 132px var(--gutter); }
  .hz-hero__cue { display: none; }

  .hz-section { padding-top: 34px; }
  .hz-section__head { margin-bottom: 18px; flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Rows stop justifying and stack: three tiles across a 375px screen leaves
     each photograph about 110px wide, which is not a photograph. The related
     row at the foot of a print page is the same shape and the same answer.

     `align-items` and the flex shorthand both have to be reset, not just the
     direction. Left at `flex-start` a stacked child shrinks to its content,
     which on an image means the file's own pixel width, so a row of tiles comes
     out at whatever widths the derivatives happen to be: the exact ragged
     column this was meant to fix. And `flex: <ar> 1 0` sets a zero basis, which
     in a column is a zero *height*. */
  .hz-row,
  .hz-related__row {
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
  }

  .hz-row > *,
  .hz-related__row > * { flex: 0 0 auto; width: 100%; }

  .hz-rows { gap: 28px; }

  .hz-prints-card { padding: 28px; }
  .hz-prints-card__foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hz-prints-card__meta { text-align: left; align-items: flex-start; }

  .hz-page-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hz-counts { gap: 18px; flex-wrap: wrap; padding-bottom: 0; }

  .hz-grid { padding-top: 34px; }
  .hz-next, .hz-related, .hz-footer { margin-top: 56px; }
  .hz-footer { flex-direction: column; gap: 18px; }

  .hz-buy { flex-wrap: wrap; }
  .hz-cart { width: 100%; }

  .hz-lightbox { padding: 56px 16px 92px; }

  /* The arrows were 12px from the edge, vertically centred, muted grey over
     the photograph: a 44px target in the hardest place on a phone to hit, on
     top of the thing it is sitting in front of. Swipe is the primary gesture
     now, so these move down to where a thumb already is, get a paper disc so
     they are legible over any photograph, and stop covering the picture. */
  .hz-lightbox__prev,
  .hz-lightbox__next {
    top: auto;
    bottom: 16px;
    transform: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(251 250 248 / 88%);
    color: var(--ink);
    font-size: 18px;
  }

  .hz-lightbox__prev { left: 16px; }
  .hz-lightbox__next { right: 16px; }

  /* Clear of both discs, so a long title does not run underneath them. */
  .hz-lightbox__caption { bottom: 30px; padding: 0 76px; }

  /* The image is dragged during a swipe; nothing else in here should move. */
  .hz-lightbox img { touch-action: pan-y; }

  /* One width for every photograph on a phone.
     Full bleed was tried and the problem was not the gutter, it was that only
     some images got it: a lead image edge to edge above a grid that was inset
     reads as a mistake either way round. So they all sit inside the same
     gutter, and the only thing that varies down the page is the height, which
     is the photograph's own. */
  .hz-tile a img,
  .hz-tile__placeholder,
  .hz-figure__img,
  .hz-photo__image img,
  .hz-related__row img {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  /* One column of photographs, not two. A masonry column on a 375px screen is
     164px wide, which is a thumbnail. */
  .hz-grid { columns: 1; }

  .hz-lead { padding: 0 var(--gutter); }
  .hz-lead img { height: 44vh; min-height: 260px; }

  /* Stacked, the lineage was three tall blocks with a screen of air between
     them. Tighten the gap and the gap inside each entry, and drop the name a
     size, so the whole line reads as one sequence rather than three sections. */
  .hz-lineage { flex-direction: column; gap: 14px; }
  .hz-lineage__item {
    /* The row layout uses flex: 1 1 240px, where 240px is a width. Turning the
       container into a column silently turns that basis into a *height*, so
       each teacher became a 240px block whatever it contained, and flex-grow
       let it stretch further still. Measured at 440px: three one-line entries
       filled 748px. Reset the shorthand; the gap was never the problem. */
    flex: 0 0 auto;
    border-right: 0;
    border-left: 1px solid var(--hairline);
    padding: 0 0 0 14px;
    margin: 0;
    gap: 3px;
  }
  .hz-lineage__name { font-size: 19px; }
  .hz-lineage__note { line-height: 1.5; }

  .hz-performance { grid-template-columns: 64px minmax(0, 1fr); }
  .hz-performance__city { grid-column: 2; }

  .hz-contact { flex-direction: column; gap: 40px; }
  .hz-contact__aside { max-width: none; }
}


/* ------------------------------------------------------------ preferences - */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}