/* ============================================================================
   Dar Yazya — layout and site chrome
   ----------------------------------------------------------------------------
   1200px container, gutters shrinking 48px → 20px, 96px sections. Mobile is the
   default case, not an afterthought: every grid uses auto-fit/minmax so it
   reflows without media queries. Only the header needs a breakpoint, because a
   hamburger is a different control, not a reflowed one.
   ========================================================================== */

/* ------------------------------------------------------------- Container -- */
.dy-container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter-lg);
}
@media (max-width:900px){ .dy-container{padding-inline:var(--gutter)} }
@media (max-width:560px){ .dy-container{padding-inline:20px} }

.dy-main{display:block;min-height:50vh}
.dy-section{padding-block:var(--section-y)}
.dy-section--tight{padding-block:var(--section-y-sm)}
.dy-prose{max-width:var(--measure-prose)}

/* ------------------------------------------------------------ Skip link -- */
.dy-skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:var(--z-toast);
  padding:var(--space-3) var(--space-5);
  background:var(--oxblood-700);color:var(--text-on-brand);
  font:var(--type-body-sm);
}
.dy-skip-link:focus{inset-inline-start:0}

/* ----------------------------------------------------- Announcement bar -- */
/* Scrolls away — it is not sticky. 38px, oxblood, one line only. */
.dy-announce{
  height:var(--announce-height);
  background:var(--oxblood-700);color:var(--text-on-brand);
}
.dy-announce__inner{
  height:100%;display:flex;align-items:center;justify-content:center;
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;text-align:center;
}
[dir="rtl"] .dy-announce__inner{text-transform:none}

/* ---------------------------------------------------------------- Header -- */
.dy-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--surface-page);
  border-bottom:1px solid var(--border-hairline);
}
.dy-header__inner{
  height:var(--header-height);
  display:flex;align-items:center;gap:var(--space-8);
}
.dy-header__actions{
  display:flex;align-items:center;gap:var(--space-1);
  margin-inline-start:auto;
}

/* Brand lockup: roundel badge + typeset name. There is no wordmark artwork,
   so the name is set in letterspaced Newsreader caps (readme.md § 4). */
.dy-brand{
  display:inline-flex;align-items:center;gap:var(--space-3);
  text-decoration:none;color:var(--text-primary);flex:0 0 auto;
}
.dy-brand:hover{text-decoration:none;color:var(--text-primary)}
.dy-brand__mark{width:48px;height:48px;border-radius:var(--radius-circle)}
.dy-brand__name{
  font-family:var(--font-display);font-weight:var(--weight-regular);
  font-size:var(--size-h4);line-height:1;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
[dir="rtl"] .dy-brand__name{text-transform:none}

/* Nav */
.dy-nav__list{
  display:flex;align-items:center;gap:var(--space-7);
  margin:0;padding:0;list-style:none;
}
.dy-nav__list a{
  font:var(--type-body-sm);color:var(--text-primary);text-decoration:none;
  transition:var(--transition-color);
}
.dy-nav__list a:hover{color:var(--oxblood-700);text-decoration:underline}

/* ------------------------------------------------------------ Mega menu -- */
/* Plain field, one ornamented moment: a flat panel, hairline rules, and a
   single arched photograph. Movement is a fade plus an 8px rise — never a
   slide or a drop. */
.dy-nav__item--mega{position:static}
.dy-nav__trigger{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font:var(--type-body-sm);color:var(--text-primary);text-decoration:none;
}
.dy-nav__chevron{
  --dy-icon-size:14px;color:var(--sand-600);
  transition:transform var(--dur-base) var(--ease-standard);
}
.dy-nav__trigger[aria-expanded="true"] .dy-nav__chevron{transform:rotate(180deg)}

.dy-mega{
  position:absolute;inset-inline:0;top:100%;z-index:var(--z-header);
  background:var(--surface-page);
  border-block:1px solid var(--border-hairline);
  box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(-8px);
  transition:opacity var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-out);
}
.dy-mega[hidden]{display:none}
.dy-mega--open{opacity:1;transform:translateY(0)}

.dy-mega__inner{
  display:grid;gap:var(--space-12);
  grid-template-columns:minmax(220px,1fr) minmax(200px,1fr) minmax(220px,.8fr);
  padding-block:var(--section-y-sm);
  align-items:start;
}
.dy-nav__item{display:inline-flex;align-items:center}
.dy-mega__col{display:flex;flex-direction:column;min-width:0}
/* The list column carries the rules, so it needs no separator of its own. */
.dy-mega__col--links{padding-inline-end:var(--space-4)}
/* A quiet column: the note sits against a hairline rather than a border box. */
.dy-mega__col--note{
  border-inline-start:1px solid var(--border-hairline);
  padding-inline-start:var(--space-8);
}
.dy-mega__col--media{align-items:flex-end}
.dy-mega__heading{color:var(--sand-600);margin-block-end:var(--space-5)}
.dy-mega__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dy-mega__link{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding-block:var(--space-3);
  border-block-end:1px solid var(--border-hairline);
  color:var(--text-primary);text-decoration:none;
  transition:var(--transition-color);
}
.dy-mega__link:hover{color:var(--oxblood-700);text-decoration:none}
.dy-mega__name{font:var(--type-h4)}
.dy-mega__count{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted)}
.dy-mega__link--all{border-block-end:0;color:var(--oxblood-700);--dy-icon-size:15px}
.dy-mega__note{font:var(--type-body-sm);color:var(--text-secondary);max-width:32ch;margin-block-end:var(--space-4)}
.dy-mega__note--muted{color:var(--text-muted);font:var(--type-caption)}
.dy-mega__media{max-width:260px;margin-inline-start:auto}

/* Below the nav breakpoint the panel has no trigger to hang from. */
@media (max-width:1000px){
  .dy-mega{display:none !important}
}

/* --------------------------------------------------------------- Search -- */
/* A panel, not a page. Same register as the mega menu: flat surface, hairline
   rules, a fade and an 8px rise. */
.dy-search-panel{
  position:absolute;inset-inline:0;top:100%;z-index:var(--z-header);
  background:var(--surface-page);
  border-block:1px solid var(--border-hairline);
  box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(-8px);
  transition:opacity var(--dur-base) var(--ease-standard),
             transform var(--dur-base) var(--ease-out);
}
.dy-search-panel[hidden]{display:none}
.dy-search-panel--open{opacity:1;transform:translateY(0)}

.dy-search-panel__form{padding-block:var(--space-8) var(--space-4)}
.dy-search-panel__label{
  display:block;font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--sand-600);margin-block-end:var(--space-4);
}
[dir="rtl"] .dy-search-panel__label{text-transform:none}

.dy-search-panel__row{
  display:flex;align-items:center;gap:var(--space-4);
  border-block-end:1px solid var(--border-default);
  padding-block-end:var(--space-3);
}
.dy-search-panel__icon{color:var(--sand-600)}

/* The input carries no box of its own — the rule under it is the field. */
.dy-search-panel__input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--font-display);font-weight:var(--weight-light);
  font-size:var(--size-h3);line-height:1.3;color:var(--text-primary);
}
.dy-search-panel__input::placeholder{color:var(--text-muted);font-weight:var(--weight-regular)}
.dy-search-panel__input::-webkit-search-cancel-button{display:none}

.dy-search-panel__results{
  display:grid;gap:var(--space-2);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  padding-block-end:var(--space-8);
}
.dy-search-panel__results:empty{padding-block-end:0}
.dy-search-panel__empty{
  grid-column:1/-1;font:var(--type-body-sm);color:var(--text-muted);
  padding-block:var(--space-4);
}

.dy-search-result{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-3);border-radius:var(--radius-card);
  text-decoration:none;color:inherit;
  transition:var(--transition-color);
}
.dy-search-result:hover{background:var(--surface-subtle);text-decoration:none}
.dy-search-result__media{
  flex:0 0 auto;width:54px;height:68px;overflow:hidden;
  background:var(--surface-photo);
  /* The arch, at the smallest size it still reads at. */
  border-radius:40px 40px var(--radius-xs) var(--radius-xs);
}
.dy-search-result__media img{width:100%;height:100%;object-fit:cover}
.dy-search-result__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.dy-search-result__name{
  font:var(--weight-regular) var(--size-body-sm)/1.35 var(--font-display);
  color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dy-search-result__price{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted)}

/* Language pill — always shows the target language in its own script. */
.dy-lang-pill{
  display:inline-flex;align-items:center;height:32px;padding:0 var(--space-4);
  border:1px solid var(--border-default);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:var(--weight-medium);
  font-size:var(--size-caption);line-height:1;
  color:var(--neutral-700);text-decoration:none;
  transition:var(--transition-color);
}
.dy-lang-pill:hover{background:var(--sand-100);color:var(--neutral-900);text-decoration:none}

/* Hamburger + mobile panel. The only place this file needs a breakpoint. */
.dy-burger{display:none}
.dy-mobile-panel{border-top:1px solid var(--border-hairline);background:var(--surface-page)}
.dy-mobile-panel__list{
  display:flex;flex-direction:column;gap:var(--space-1);
  margin:0;padding:var(--space-4) var(--gutter);list-style:none;
}
.dy-mobile-panel__list a{
  display:block;padding:var(--space-3) 0;
  font:var(--type-body);color:var(--text-primary);text-decoration:none;
}

@media (max-width:1000px){
  .dy-nav{display:none}
  .dy-burger{display:inline-grid}
  .dy-header__inner{gap:var(--space-4)}
  .dy-brand__mark{width:40px;height:40px}
  .dy-brand__name{font-size:var(--size-body)}
}

/* ---------------------------------------------------------------- Footer -- */
.dy-footer{
  background:var(--surface-inverse);color:var(--text-on-inverse);
  padding-block:var(--section-y-sm);margin-block-start:var(--section-y);
}
/* The homepage ends on the full-bleed oxblood newsletter. Its gap left a band
   of page colour between two oxblood blocks, which read as a mistake — the two
   should meet. */
.dy-main:has(> .dy-pattern:last-child) + .dy-footer{margin-block-start:0}

/* -------------------------------------------------------------- Social -- */
.dy-footer__social{
  display:flex;gap:var(--space-2);list-style:none;
  margin:var(--space-6) 0 0;padding:0;
}
.dy-footer__social a{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--border-inverse);border-radius:var(--radius-circle);
  color:var(--sand-100);
  transition:var(--transition-color);
}
.dy-footer__social a:hover{background:rgba(243,235,223,.12);border-color:transparent}

.dy-footer__sep{padding-inline:var(--space-2);color:var(--rose-300)}
.dy-footer__credit{color:var(--sand-100);text-decoration:none;border-block-end:1px solid var(--border-inverse)}
.dy-footer__credit:hover{color:#FFFFFF;text-decoration:none}

/* ------------------------------------------------------------ WhatsApp -- */
/* Physical `right`, deliberately — not inset-inline-end.
   This is the one element that does NOT mirror. inset-inline-end put it on the
   left of the Arabic page, which is where a mirrored layout would place it,
   but a floating chat button is a fixed convention people reach for in the
   same corner regardless of script. Asked for on the right; kept on the right
   in both languages. */
.dy-whatsapp{
  position:fixed;z-index:var(--z-toast);
  right:var(--space-6);inset-block-end:var(--space-6);
  width:54px;height:54px;display:grid;place-items:center;
  background:var(--oxblood-700);color:var(--sand-100);
  border-radius:var(--radius-circle);box-shadow:var(--shadow-lg);
  transition:var(--transition-color),transform var(--dur-base) var(--ease-out);
}
.dy-whatsapp:hover{background:var(--oxblood-600);color:var(--sand-100);transform:translateY(var(--rise-hover))}
@media (max-width:560px){
  .dy-whatsapp{
    right:var(--space-4);inset-block-end:var(--space-4);
    width:48px;height:48px;
  }
}
.dy-footer__inner{
  display:grid;gap:var(--space-12);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.dy-footer__brand{display:flex;flex-direction:column;gap:var(--space-4)}
.dy-footer__mark{width:56px;height:56px;border-radius:var(--radius-circle)}
.dy-footer__blurb{
  font:var(--type-body-sm);color:var(--text-on-inverse-muted);
  max-width:var(--measure-narrow);
}
.dy-footer__list{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;list-style:none}
.dy-footer__list a,.dy-footer__place{
  display:inline-flex;align-items:center;gap:var(--space-2);
  color:var(--text-on-inverse);font:var(--type-body-sm);text-decoration:none;
}
.dy-footer__list a:hover{color:var(--sand-100);text-decoration:underline}
.dy-footer__place{color:var(--text-on-inverse-muted)}
.dy-footer__heading{color:var(--rose-300);margin-block-end:var(--space-5)}
.dy-footer__nav,.dy-footer__contact{display:flex;flex-direction:column}

.dy-footer__legal{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;
  margin-block-start:var(--space-12);padding-block-start:var(--space-6);
  border-block-start:1px solid var(--border-inverse);
  font:var(--type-caption);color:var(--text-on-inverse-muted);
}

.dy-footer__made{color:var(--text-on-inverse-muted)}

/* ------------------------------------------------------------ Page / 404 -- */
.dy-page{display:block}
/* A live region that must be announced but never seen. Not display:none — that
   would hide it from screen readers too, which is the whole point of it. */
.dy-filters__pending{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* Patterned page header. The lattice is quiet enough to sit behind text; the
   butterfly repeat would not be. */
.dy-page-header{padding-block:var(--section-y-sm)}
.dy-page-header .dy-section-heading__eyebrow{color:var(--sand-600)}

.dy-cart-strip{padding-block-start:var(--section-y-sm);margin-block-start:var(--space-12);border-block-start:1px solid var(--border-hairline)}

.dy-page__head{margin-block-end:var(--space-10)}
.dy-page__body--wide{max-width:none}
.dy-page__body p{margin-block-end:var(--space-5)}
.dy-page__body p:last-child{margin-block-end:0}
.dy-page__body h2{font:var(--type-h3);letter-spacing:var(--ls-h3);margin-block:var(--space-10) var(--space-4)}

.dy-404{display:flex;flex-direction:column;gap:var(--space-8);align-items:flex-start}
.dy-404__rule{max-width:280px}

/* --------------------------------------------------------------- Search -- */
.dy-search__products{margin-block:var(--space-10)}
.dy-search__list{
  display:flex;flex-direction:column;
  margin:var(--space-10) 0 0;padding:0;list-style:none;
  border-block-start:1px solid var(--border-hairline);
}
.dy-search__row{
  display:flex;flex-direction:column;gap:var(--space-1);
  padding-block:var(--space-5);
  border-block-end:1px solid var(--border-hairline);
}
.dy-search__link{font:var(--type-h4);color:var(--text-primary);text-decoration:none}
.dy-search__link:hover{color:var(--oxblood-700)}
.dy-search__excerpt{font:var(--type-body-sm);color:var(--text-muted);max-width:var(--measure-prose)}
.dy-search__empty{margin-block-start:var(--space-8)}

.pagination,.wp-block-query-pagination{margin-block-start:var(--space-12)}
.nav-links{display:flex;gap:var(--space-2);justify-content:center}
.nav-links .page-numbers{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 var(--space-3);
  border:1px solid var(--border-hairline);border-radius:var(--radius-control);
  font:var(--type-body-sm);color:var(--text-primary);text-decoration:none;
}
.nav-links .page-numbers.current{background:var(--oxblood-700);color:var(--sand-100);border-color:var(--oxblood-700)}

/* -------------------------------------------- WooCommerce cart/checkout -- */
/* These are Woo's own React blocks. They are restyled through their variables
   and a light touch on their wrappers rather than replaced — rebuilding
   checkout would cost the payment gateway and buy nothing. */
.wc-block-components-main,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  font-family:var(--font-body);color:var(--text-primary);
}
.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title{
  font-family:var(--font-display) !important;
  font-weight:var(--weight-regular) !important;
  letter-spacing:var(--ls-h4);
  text-transform:none !important;
  color:var(--text-primary);
}
.wc-block-components-product-name{
  font:var(--weight-regular) var(--size-body)/1.3 var(--font-display);
  color:var(--text-primary);text-decoration:none;
}
.wc-block-components-button:not(.is-link){
  background:var(--oxblood-700) !important;color:var(--text-on-brand) !important;
  border-radius:var(--radius-control) !important;
  font-family:var(--font-body) !important;font-weight:var(--weight-medium) !important;
  letter-spacing:.05em;text-transform:uppercase;
}
.wc-block-components-button:not(.is-link):hover{background:var(--oxblood-600) !important}
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select{
  border-radius:var(--radius-control) !important;
  border-color:var(--border-default) !important;
  background:var(--surface-card) !important;
  font-family:var(--font-body) !important;
}
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img{
  background:var(--surface-photo);border-radius:var(--radius-sm);
}
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount{font-family:var(--font-mono);font-weight:var(--weight-medium)}
.wc-block-components-sidebar,
.wc-block-cart__sidebar{
  background:var(--surface-subtle);border-radius:var(--radius-card);
  padding:var(--card-pad);
}

@media (max-width:700px){
  .dy-footer__inner{gap:var(--space-10)}
}

/* ----------------------------------------------------------------- Price -- */
/* Western digits in --font-mono for prices, SKUs and dimensions, even in
   Arabic copy. Currency reads OMR in English and ر.ع. in Arabic, always to
   three decimals (readme.md § 2). */
.dy-price{display:inline-flex;align-items:baseline;gap:var(--space-2)}
.dy-price__code{font:var(--type-caption);color:var(--text-muted)}

/* The rial mark. Both forms are in the markup and exactly one is shown; see
   dy_rial_mark() in inc/components.php and detectRialSign() in chrome.js.
   Before the script answers, the abbreviation is the one on screen — a price
   should never be a tofu box, however briefly. */
.dy-rial-sign{display:none}
[data-rial-sign="yes"] .dy-rial-sign{display:inline;font-size:1.15em;line-height:1}
[data-rial-sign="yes"] .dy-rial-text{display:none}
.dy-price__value{font-family:var(--font-mono);font-weight:var(--weight-medium);font-size:var(--size-body)}
.dy-price__compare{font:var(--type-caption);color:var(--text-muted);text-decoration:line-through}

/* ------------------------------------------------------------- Typography -- */
.dy-h1{font:var(--type-h1);letter-spacing:var(--ls-h1)}
.dy-h2{font:var(--type-h2);letter-spacing:var(--ls-h2)}
.dy-h3{font:var(--type-h3);letter-spacing:var(--ls-h3)}
.dy-h4{font:var(--type-h4);letter-spacing:var(--ls-h4)}
.dy-lead{font:var(--type-lead);max-width:var(--measure-lead)}
.dy-body{font:var(--type-body)}
.dy-caption{font:var(--type-caption);color:var(--text-muted)}
.dy-eyebrow{
  font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
[dir="rtl"] .dy-eyebrow{text-transform:none}

/* ------------------------------------------------------------ Shop / grid -- */
/* auto-fit/minmax, so four across becomes one on a phone with no media query. */
.dy-product-grid{
  display:grid;gap:var(--gap-grid-loose) var(--gap-grid);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.dy-shop-head{margin-block-end:var(--space-10)}

.woocommerce-pagination ul{
  display:flex;gap:var(--space-2);list-style:none;
  margin:var(--space-12) 0 0;padding:0;justify-content:center;
}
.woocommerce-pagination a,.woocommerce-pagination span{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 var(--space-3);
  border:1px solid var(--border-hairline);border-radius:var(--radius-control);
  font:var(--type-body-sm);color:var(--text-primary);text-decoration:none;
}
.woocommerce-pagination .current{background:var(--oxblood-700);color:var(--sand-100);border-color:var(--oxblood-700)}

/* -------------------------------------------------------- Single product -- */
.dy-product{
  display:grid;gap:var(--space-16) var(--space-12);
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  align-items:start;
}
.dy-product__buy{
  display:flex;flex-direction:column;gap:var(--space-5);
  position:sticky;top:calc(var(--header-height) + var(--space-6));
}
.dy-product{--dy-product-gap:var(--space-12)}
.dy-product__media{min-width:0}
.dy-product__price{margin-block:var(--space-2) var(--space-4)}
.dy-product__price .dy-price__value{font-size:var(--size-h3)}
.dy-product__material{font:var(--type-body-sm);color:var(--text-muted)}
.dy-product__short{color:var(--text-secondary)}
.dy-product__delivery{margin-block-start:calc(var(--space-2) * -1)}

.woocommerce-breadcrumb{
  font:var(--type-caption);color:var(--text-muted);margin-block-end:var(--space-8);
}
.woocommerce-breadcrumb a{color:var(--text-muted)}
.woocommerce-breadcrumb a:hover{color:var(--oxblood-700)}
/* The middle dot separates attributes throughout the brand. It is safe here
   because it only ever sits between words, never against an Arabic-Indic
   numeral — where "كبير · ٣٠ سم" would read as ٣٠٠. */
.dy-breadcrumb__sep{color:var(--sand-500);padding-inline:var(--space-1)}

/* ------------------------------------------------------------- Related -- */
.dy-related{padding-block-start:var(--section-y-sm)}
/* ul.products, not .products — Woo's wrapper is <section class="related
   products">, so the looser selector turned the SECTION into the grid and its
   <h2> into a grid item, collapsing four columns to two. */
.dy-related ul.products{
  display:grid;gap:var(--gap-grid-loose) var(--gap-grid);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:0;padding:0;list-style:none;
}
.dy-related h2{font:var(--type-h3);letter-spacing:var(--ls-h3);margin-block-end:var(--space-8)}
/* Woo wraps each loop item in <li class="product">; the card inside does the
   layout, so the li must not add its own. */
.dy-related ul.products > li{list-style:none;margin:0;padding:0}

/* The sticky column only helps when there is room beside the gallery. */
@media (max-width:820px){
  .dy-product__buy{position:static}
}

/* ------------------------------------------------------------------ Home -- */
/* Plain field, one ornamented threshold. The hero frame is the worked moment;
   everything below it stays quiet. */
/* The photograph leads and the words follow it — 1.1fr against 1fr, so the
   arch is the first thing read rather than an illustration beside the text. */
.dy-hero{
  display:grid;gap:clamp(var(--space-10),5vw,var(--space-20));
  align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  padding-block:var(--section-y-lg) var(--section-y);
}
@media (min-width:1000px){
  .dy-hero{grid-template-columns:1.1fr 1fr}
}

.dy-hero__text{display:flex;flex-direction:column;gap:var(--space-6);max-width:var(--measure-lead)}

/* A hairline before the eyebrow: the smallest possible mark of a beginning. */
.dy-hero__eyebrow{
  display:flex;align-items:center;gap:var(--space-4);
}
.dy-hero__eyebrow::before{
  content:"";width:36px;height:1px;background:var(--sand-400);flex:0 0 auto;
}

/* Display scale, set in Light — the delicate register the brand asks for.
   clamp so it never overruns a phone. */
.dy-hero__title{
  font-family:var(--font-display);
  font-weight:var(--weight-light);
  font-size:clamp(var(--size-h1),4.6vw,var(--size-display-2));
  line-height:var(--lh-display-2);
  letter-spacing:var(--ls-display-2);
  color:var(--text-primary);
  max-width:15ch;
  text-wrap:balance;
}
[dir="rtl"] .dy-hero__title{letter-spacing:0;line-height:1.3;max-width:18ch}

.dy-hero__actions{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-block-start:var(--space-2)}

/* Taller than a product card: this is the page's one worked moment. */
.dy-hero__media{
  width:100%;max-width:560px;margin-inline:auto;
  --aspect-product:4/5;
}
.dy-hero__rule{max-width:220px;margin-inline:auto;opacity:.7}

.dy-strip{padding-block:var(--section-y-sm)}
.dy-strip--hairline{border-block:1px solid var(--border-hairline)}

/* Full-bleed lattice band. Hairlines top and bottom rather than a box — the
   texture is doing the separating, and the design system asks for borders that
   are one hairline of --border-hairline. */
.dy-strip-lattice{
  padding-block:var(--section-y-sm);
  border-block:1px solid var(--border-hairline);
  margin-block:var(--space-4);
}

.dy-collection{display:flex;flex-direction:column;gap:var(--space-10);padding-block:var(--section-y)}

.dy-materials{
  display:grid;gap:var(--gap-grid);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.dy-material-tile{display:flex;flex-direction:column;gap:var(--space-4);text-decoration:none;color:inherit}
.dy-material-tile__name{font:var(--type-h4);color:var(--text-primary)}
.dy-material-tile__note{font:var(--type-caption);color:var(--text-muted)}

/* The one full-bleed oxblood section. A page with two is a page with one too
   many (readme.md § 3.1). */
.dy-accent{padding-block:var(--section-y)}
.dy-accent__inner{
  display:grid;gap:var(--space-12);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.dy-newsletter{display:flex;flex-direction:column;gap:var(--space-5);max-width:var(--measure-lead)}
.dy-newsletter__form{display:flex;gap:var(--space-3);flex-wrap:wrap}
/* A solid card ground, not a transparent box on oxblood — at 20% border on a
   dark field the input read as decoration rather than something to type in. */
.dy-newsletter__input{
  flex:1;min-width:220px;height:var(--control-h);padding:0 var(--space-5);
  background:var(--surface-card);color:var(--text-primary);
  border:1px solid var(--surface-card);border-radius:var(--radius-control);
  font:var(--type-body-sm);
}
.dy-newsletter__input::placeholder{color:var(--text-muted)}
.dy-newsletter__input:focus{outline:none;box-shadow:0 0 0 3px rgba(243,235,223,.35)}

.dy-story{
  display:grid;gap:var(--space-12);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  padding-block:var(--section-y);
}