/* Theme Name: ZeroY Starter */
/* Global base — 2026 redesign.
   Page-specific styling lives in assets/css/<page>.css and is enqueued per template.
   All colour/scale values come from assets/css/tokens.css — no hard-coded colours here. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--c-line-strong)}
a:hover{text-decoration-color:var(--c-accent)}
::selection{background:var(--c-accent-wash);color:var(--c-accent-strong)}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px;border-radius:2px}

/* --- type --- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);margin:0 0 var(--space-4);text-wrap:balance}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-family:var(--font-body);font-size:var(--fs-h4);font-weight:600}
p{margin:0 0 var(--space-4);max-width:var(--measure)}
ul,ol{margin:0 0 var(--space-4);padding-left:1.15em;max-width:var(--measure)}
li+li{margin-top:var(--space-1)}
strong{font-weight:600}
small{font-size:var(--fs-small)}
hr{border:0;border-top:var(--border-hair);margin:var(--space-7) 0}

/* --- layout --- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--sunk{background:var(--c-bg-sunk)}
.section--ink{background:var(--c-ink);color:var(--c-on-ink)}
.section--ink a{text-decoration-color:var(--c-on-ink-line)}
.section--ink .eyebrow,.section--ink .meta{color:var(--c-on-ink-mute)}
.section--ink .lead{color:var(--c-on-ink-soft)}
.stack>*+*{margin-top:var(--space-4)}
.stack-lg>*+*{margin-top:var(--space-6)}
.grid{display:grid;gap:var(--space-5)}
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
.split{display:grid;gap:var(--space-6);align-items:center}
@media (min-width:720px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr .95fr}
}
@media (min-width:1000px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* --- small parts --- */
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-ink-mute);margin:0 0 var(--space-3)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--c-ink-soft);max-width:var(--measure)}
.meta{font-size:var(--fs-small);color:var(--c-ink-mute)}
.rule-accent{width:64px;height:2px;background:var(--c-accent);border:0;margin:0 0 var(--space-5)}

/* --- buttons --- */
.btn,.button{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.4em;border:1px solid transparent;border-radius:var(--r-sm);font:inherit;font-weight:500;text-decoration:none;cursor:pointer;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn--primary{background:var(--c-ink);color:var(--c-on-ink)}
.btn--primary:hover{background:var(--c-accent-strong);color:var(--c-on-accent)}
.btn--accent{background:var(--c-accent);color:var(--c-on-accent)}
.btn--accent:hover{background:var(--c-accent-strong)}
.btn--ghost{border-color:var(--c-line-strong)}
.btn--ghost:hover{border-color:var(--c-accent);color:var(--c-accent-strong)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* --- cards & chips --- */
.card{background:var(--c-surface);border:var(--border-hair);border-radius:var(--r-md);padding:var(--space-5)}
.card--quiet{background:transparent}
.chip,.tag{display:inline-block;padding:.3em .7em;border:var(--border-hair);border-radius:var(--r-pill);font-size:var(--fs-small);color:var(--c-ink-soft);background:var(--c-surface)}
.chip--accent{border-color:var(--c-accent);color:var(--c-accent-strong);background:var(--c-accent-wash)}

/* --- media --- */
.media{background:var(--c-bg-sunk);border-radius:var(--r-md);overflow:hidden}
.media img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* --- forms --- */
.field{margin-bottom:var(--space-4)}
label{display:block;font-size:var(--fs-small);color:var(--c-ink-soft);margin-bottom:var(--space-1)}
input,select,textarea{width:100%;font:inherit;color:var(--c-ink);background:var(--c-surface);border:1px solid var(--c-line-strong);border-radius:var(--r-sm);padding:.7em .8em}
textarea{min-height:8rem;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--c-accent);outline:2px solid var(--c-accent-wash)}
.form-note{font-size:var(--fs-small);color:var(--c-ink-mute)}

/* --- accessibility --- */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:var(--space-3);top:var(--space-3);z-index:100;background:var(--c-surface);border:var(--border-hair);border-radius:var(--r-sm);padding:.6em .9em}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* --- site header --- */
.site-header{position:relative;z-index:50;border-bottom:var(--border-hair);background:var(--c-bg)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;padding-block:var(--space-4)}
.site-brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--c-ink);font-family:var(--font-display);font-size:1.375rem;font-weight:600;letter-spacing:var(--ls-tight)}
.site-brand__logo{height:34px;width:auto}
.site-nav{margin-inline-start:auto}
.site-nav__list{display:flex;align-items:center;gap:var(--space-5);list-style:none;margin:0;padding:0}
.site-nav__item{padding-block:var(--space-2)}
.site-nav__item--list{position:relative}
.site-nav__list > li > a{display:inline-flex;align-items:center;gap:.45em;color:var(--c-ink-soft);font-size:var(--fs-small);text-decoration:none}
.site-nav__list > li > a:hover{color:var(--c-accent-strong);text-decoration:underline}
.site-nav__caret{width:.4em;height:.4em;margin-top:-.28em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.site-nav__list .current-menu-item > a,.site-nav__list .current_page_item > a,.site-nav__list .current-menu-ancestor > a{color:var(--c-ink);font-weight:600}
.site-header__actions{display:inline-flex;align-items:center;gap:var(--space-4)}
.site-header__cta{padding:.6em 1.1em;font-size:var(--fs-small)}

/* --- navigation panels: the dropdowns and the Lace Library's mega panel ---
   A panel opens for a pointer that can hover, and for keyboard focus inside its entry, on a
   screen wide enough to hold one. Narrower screens, and anything that cannot hover, keep the
   top-level links — each one a real page — while the footer carries the same structure as a
   site map. Nothing here needs JavaScript. */
.nav-panel{display:none;position:absolute;z-index:60;background:var(--c-surface);border:var(--border-hair);box-shadow:0 24px 48px -32px var(--c-ink)}
@media (min-width:861px){
  /* One header row. A panel hangs from the header's bottom edge, so the entry that opens it has
     to reach that edge: the entries stretch to the row, and the strip between them and the edge
     belongs to the panel (see .nav-panel--mega::before), which is what lets a pointer travel
     from an entry down into its panel. The wordmark stands aside while the navigation needs the
     room — the mark alone carries the brand — and returns on a wider screen. */
  .site-header__inner{flex-wrap:nowrap;gap:var(--space-4)}
  .site-nav{align-self:stretch;display:flex;align-items:stretch}
  .site-nav__list{align-items:stretch;gap:var(--space-4)}
  .site-nav__item{display:flex;align-items:center}
  .site-brand__name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .site-nav__item--list:hover > .nav-panel,
  .site-nav__item--list:focus-within > .nav-panel,
  .site-nav__item--mega:hover > .nav-panel,
  .site-nav__item--mega:focus-within > .nav-panel{display:block}
}
@media (min-width:1024px){
  .site-brand__name{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none}
  .site-nav__list{gap:var(--space-5)}
}
@media (max-width:860px){
  .site-nav{order:3;width:100%;margin-inline-start:0}
  .site-nav__list{flex-wrap:wrap;gap:var(--space-3) var(--space-5)}
  .site-header__actions{margin-inline-start:auto}
}

/* A dropdown hangs from its own entry; the mega panel spans the header and starts below it. */
.nav-panel--list{top:100%;right:0;min-width:15rem;padding:var(--space-3) 0;border-radius:var(--r-md)}
.nav-panel__links{display:grid;list-style:none;margin:0;padding:0}
.nav-panel__links a{display:block;padding:var(--space-2) var(--space-5);color:var(--c-ink-soft);font-size:var(--fs-small);text-decoration:none}
.nav-panel__links a:hover{background:var(--c-accent-wash);color:var(--c-accent-strong)}
.nav-panel--mega{left:0;right:0;top:100%;border-inline:0;border-bottom:var(--border-hair);border-radius:0}
/* The strip between the navigation row and the panel belongs to the panel, so a pointer can
   travel from the entry into it without the panel closing underneath. */
.nav-panel--mega::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--space-4));height:var(--space-4)}
.nav-panel__body{display:grid;gap:var(--space-5);padding-block:var(--space-6)}
.nav-panel__inner{display:grid;gap:var(--space-6)}
@media (min-width:1000px){.nav-panel__inner{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}}
/* A menu assigned in the admin is served by wp_nav_menu; its second level opens the same way. */
.site-nav__list .sub-menu{display:none;position:absolute;top:100%;right:0;z-index:60;min-width:15rem;list-style:none;margin:0;padding:var(--space-3) 0;background:var(--c-surface);border:var(--border-hair);border-radius:var(--r-md);box-shadow:0 24px 48px -32px var(--c-ink)}
@media (min-width:861px){
  .site-nav__list li:hover > .sub-menu,
  .site-nav__list li:focus-within > .sub-menu{display:block}
}
.site-nav__list .sub-menu a{display:block;padding:var(--space-2) var(--space-5);color:var(--c-ink-soft);font-size:var(--fs-small);text-decoration:none}
.site-nav__list .sub-menu a:hover{background:var(--c-accent-wash);color:var(--c-accent-strong)}

/* What a mega panel holds: the dimensions the library carries, the categories that have a
   representative image, the featured pattern, then the library's own routes. */
.nav-panel__eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-ink-mute);margin:0 0 var(--space-3)}
.nav-panel__groups{display:grid;gap:var(--space-5) var(--space-6);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.nav-panel__group-title{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-ink);margin:0 0 var(--space-2)}
.nav-panel__terms{display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0;max-width:none}
.nav-panel__terms a{color:var(--c-ink-soft);font-size:var(--fs-small);text-decoration:none}
.nav-panel__terms a:hover{color:var(--c-accent-strong);text-decoration:underline}
.nav-panel__terms .nav-panel__more{color:var(--c-accent-strong)}
.nav-panel__aside{display:grid;gap:var(--space-5);align-content:start}
.nav-feature{display:grid;gap:var(--space-3);text-decoration:none;color:inherit}
.nav-feature__media{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--c-bg-sunk)}
.nav-feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.nav-feature__code{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-ink-mute)}
.nav-feature__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-family:var(--font-display);font-size:1.0625rem;line-height:1.3;color:var(--c-ink)}
.nav-feature:hover .nav-feature__title{color:var(--c-accent-strong);text-decoration:underline}
.nav-panel__tiles{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));list-style:none;margin:0;padding:0}
.nav-tile{display:grid;gap:var(--space-2);text-decoration:none;color:var(--c-ink-soft)}
.nav-tile__media{display:block;border-radius:var(--r-sm);overflow:hidden;background:var(--c-bg-sunk)}
.nav-tile__media img{width:100%;aspect-ratio:1/1;object-fit:cover}
.nav-tile__name{font-size:var(--fs-small);color:var(--c-ink)}
.nav-tile__dimension{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-ink-mute)}
.nav-tile:hover .nav-tile__name{color:var(--c-accent-strong);text-decoration:underline}
.nav-panel__actions{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);padding-top:var(--space-5);border-top:var(--border-hair)}
.nav-panel__actions a{color:var(--c-accent-strong);font-size:var(--fs-small);font-weight:500;text-decoration:none}
.nav-panel__actions a:hover{text-decoration:underline}

/* --- site footer --- */
.site-footer{margin-top:var(--section-y);border-top:var(--border-hair);background:var(--c-bg-sunk)}
.site-footer__inner{display:grid;gap:var(--space-6);padding-block:var(--space-7)}
.site-footer__name{margin:0 0 var(--space-2);font-family:var(--font-display);font-size:1.25rem;font-weight:600}
.site-footer__col p{margin:0 0 var(--space-2)}
/* The footer carries the navigation's structure as a site map, so a screen too narrow for the
   header's panels still reaches every page in the framework. */
.site-footer__map-list{display:grid;gap:var(--space-5) var(--space-6);list-style:none;margin:0;padding:0}
.site-footer__group-title{display:block;color:var(--c-ink);font-size:var(--fs-small);font-weight:600;text-decoration:none}
.site-footer__group-title:hover{color:var(--c-accent-strong);text-decoration:underline}
@media (min-width:720px){.site-footer__map-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.site-footer__list{display:grid;gap:var(--space-2);list-style:none;margin:0;padding:0}
.site-footer__list a{color:var(--c-ink-soft);font-size:var(--fs-small);text-decoration:none}
.site-footer__list a:hover{color:var(--c-accent-strong);text-decoration:underline}
.site-footer__legal{border-top:var(--border-hair);padding-block:var(--space-4)}
.site-footer__legal p{margin:0}
@media (min-width:720px){
  .site-footer__inner{grid-template-columns:1fr 1.7fr 1fr}
}

/* --- framework placeholder pages (built before their content is written) --- */
.framework{padding-block:var(--section-y)}
.framework__heading{margin:var(--space-6) 0 0;font-family:var(--font-body);font-size:var(--fs-small);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-mute)}
.framework__list{display:grid;gap:.5rem;margin:1rem 0 0;padding-inline-start:1.1rem;color:var(--c-ink-soft)}
.framework__list--cols{list-style:none;padding:0}
@media (min-width:640px){.framework__list--cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.framework__list--cols{grid-template-columns:repeat(3,1fr)}}
.framework__map{margin-top:var(--space-7);padding-top:var(--space-6);border-top:var(--border-hair)}
.framework__map a{color:var(--c-ink-soft);font-size:var(--fs-small);text-decoration:none}
.framework__map a:hover{color:var(--c-accent-strong);text-decoration:underline}
.framework__map .is-current a{color:var(--c-ink);font-weight:600}