/*
 * Howling Press theme. theme.json sets the tokens (colors, type, spacing) and the CSS custom
 * properties; this file is the rest: the header, the sections of the front page, the store.
 * Satoshi throughout; white and light-grey bands; big centred headlines; rounded tiles.
 */

:root {
  --hp-line: 1px solid var(--wp--preset--color--line);
  --hp-header-height: 4rem;
  --hp-radius-tile: 24px;
  --hp-radius-image: 24px;
  --hp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { height: auto; max-width: 100%; }
:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--ink); }
h1, h2, h3 { text-wrap: balance; }

/* ---- Text styles ------------------------------------------------------------------------- */

.is-style-eyebrow { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--quiet); margin-bottom: 0.75rem; }
.is-style-lede { font-size: var(--wp--preset--font-size--large); line-height: 1.45; font-weight: 400; color: var(--wp--preset--color--body); max-width: 40rem; letter-spacing: -0.005em; }
.is-style-lede.has-text-align-center { margin-left: auto; margin-right: auto; }
.is-style-rail .is-style-lede { color: var(--wp--preset--color--rail-text); }
.is-style-rail, .is-style-rail h1, .is-style-rail h2, .is-style-rail h3 { color: var(--wp--preset--color--surface); }
.is-style-rail { background: var(--wp--preset--color--rail); color: var(--wp--preset--color--rail-text); }
.is-style-rail a { color: var(--wp--preset--color--surface); }

/* ---- Buttons ----------------------------------------------------------------------------- */

.wp-block-button__link { line-height: 1.2; transition: background-color 160ms var(--hp-ease), color 160ms var(--hp-ease), transform 160ms var(--hp-ease); }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line-strong); padding: calc(0.8rem - 1px) calc(1.4rem - 1px); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-light .wp-block-button__link { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-light .wp-block-button__link:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.is-style-rail .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
/* The text link with a chevron, the second action beside a filled button. */
.wp-block-button.is-style-link .wp-block-button__link { background: transparent; color: var(--wp--preset--color--brand-deep); padding: 0.8rem 0; font-weight: 500; }
.wp-block-button.is-style-link .wp-block-button__link::after { content: "\203A"; display: inline-block; margin-left: 0.35em; font-size: 1.15em; line-height: 0; transition: transform 160ms var(--hp-ease); }
.wp-block-button.is-style-link .wp-block-button__link:hover { text-decoration: underline; text-underline-offset: 0.2em; transform: none; color: var(--wp--preset--color--brand-deep); }
.wp-block-button.is-style-link .wp-block-button__link:hover::after { transform: translateX(2px); }
.is-style-rail .wp-block-button.is-style-link .wp-block-button__link { color: #fff; }
.wp-block-button.is-style-quiet .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); padding-left: 0; padding-right: 0; }

/* ---- Lists ------------------------------------------------------------------------------- */

.is-style-checks { list-style: none; padding-left: 0; }
.is-style-checks li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; }
.is-style-checks li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 1.1rem; height: 1.1rem; border-radius: 999px;
  background: var(--wp--preset--color--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

/* ---- Header ------------------------------------------------------------------------------ */

.hp-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid transparent; transition: border-color 200ms var(--hp-ease); }
/* no backdrop-filter here: it would trap the fixed menu overlay inside the header */
.hp-header.is-scrolled { border-bottom-color: var(--wp--preset--color--line); }
.hp-header__row { min-height: var(--hp-header-height); gap: var(--wp--preset--spacing--40); }
.hp-logo { display: inline-flex; align-items: center; line-height: 0; }
.hp-logo img { width: 150px; height: auto; }
.hp-nav .wp-block-navigation-item__content { padding: 0.4rem 0.7rem; border-radius: 999px; white-space: nowrap; transition: color 160ms var(--hp-ease); }
.hp-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--brand-deep); }
.hp-header__actions { gap: 0.75rem; }
.hp-header__account { font-size: 0.9375rem; font-weight: 500; color: var(--wp--preset--color--ink); text-decoration: none; }
.hp-header__account:hover { color: var(--wp--preset--color--brand-deep); }
.hp-header__cta .wp-block-button__link { padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.wc-block-mini-cart__button { color: var(--wp--preset--color--ink); }
.wc-block-mini-cart__badge { background: var(--wp--preset--color--brand); color: #fff; border: 0; }
@media (max-width: 900px) { .hp-header .hp-header__account, .hp-header .hp-header__cta { display: none; } }
@media (max-width: 600px) { .hp-logo img { width: 124px; } }

/* ---- The menu on a phone ----------------------------------------------------------------- */

.hp-nav .wp-block-navigation-item.hp-nav__phone-only { display: none; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--surface); padding-top: 5.5rem !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; justify-content: flex-start; gap: 0.25rem; --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-self: flex-start; text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.hp-nav__phone-only { display: block; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--wp--preset--color--ink); padding: 0.4rem 0; border-radius: 0; }
.wp-block-navigation__responsive-container.is-menu-open .hp-nav__cta { margin-top: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .hp-nav__cta .wp-block-navigation-item__content { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: #fff; background: var(--wp--preset--color--ink); border-radius: 999px; padding: 0.8rem 1.4rem; }
.wp-block-navigation__responsive-container-close { top: 1.1rem; right: 1.25rem; color: var(--wp--preset--color--ink); }

/* ---- The Guides menu ----------------------------------------------------------------------
   Hover (or focus) on Guides and the seven guides drop down as a panel; the word itself still
   goes to the hub. In the phone overlay they simply list under it. */

.hp-nav .hp-nav__guides > .wp-block-navigation-item__content { padding-right: 0.2rem; }
.hp-nav .hp-nav__guides > .wp-block-navigation__submenu-icon { padding: 0.4rem 0.5rem 0.4rem 0; color: var(--wp--preset--color--quiet); background: none; border: 0; cursor: pointer; transition: color 160ms var(--hp-ease), transform 200ms var(--hp-ease); }
.hp-nav .hp-nav__guides:hover > .wp-block-navigation__submenu-icon, .hp-nav .hp-nav__guides:focus-within > .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--ink); transform: translateY(1px); }
.hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child > .wp-block-navigation__submenu-container {
  left: 50%; top: 100%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem;
  min-width: 0; width: 0; padding: 0; margin-top: 0.6rem;
  background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--line); border-radius: 20px;
  box-shadow: 0 18px 40px -20px rgba(29, 29, 31, 0.28);
}
/* the gap between the word and the panel still counts as hovering */
.hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem; }
@media (hover: hover) {
  .hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child:hover > .wp-block-navigation__submenu-container { width: 36rem; min-width: 36rem; padding: 0.6rem; }
}
.hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child:focus-within > .wp-block-navigation__submenu-container,
.hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container { width: 36rem; min-width: 36rem; padding: 0.6rem; }
.hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.8rem; border-radius: 14px; white-space: normal; text-decoration: none; transition: background-color 160ms var(--hp-ease); }
.hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides > .wp-block-navigation__submenu-container .wp-block-navigation-item__label { font-weight: 600; font-size: 0.95rem; }
.hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides > .wp-block-navigation__submenu-container .wp-block-navigation-item__description { display: block; font-size: 0.8rem; line-height: 1.35; color: var(--wp--preset--color--quiet); }
@media (max-width: 900px) {
  .hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child > .wp-block-navigation__submenu-container { grid-template-columns: 1fr; left: 0; transform: none; }
  .hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child:hover > .wp-block-navigation__submenu-container,
  .hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child:focus-within > .wp-block-navigation__submenu-container,
  .hp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .hp-nav__guides.has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container { width: 18rem; min-width: 18rem; }
}
/* in the phone overlay: the guides list under the word, smaller, no descriptions */
.wp-block-navigation__responsive-container.is-menu-open .hp-nav__guides > .wp-block-navigation__submenu-icon { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .hp-nav__guides > .wp-block-navigation__submenu-container { position: static; visibility: visible; opacity: 1; width: auto; height: auto; overflow: visible; padding: 0.25rem 0 0.75rem 1rem; gap: 0; }
.wp-block-navigation__responsive-container.is-menu-open .hp-nav__guides > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.1rem; font-weight: 500; letter-spacing: 0; padding: 0.3rem 0; }
.wp-block-navigation__responsive-container.is-menu-open .hp-nav__guides .wp-block-navigation-item__description { display: none; }

/* ---- Sections ---------------------------------------------------------------------------- */

.hp-section { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); }
.hp-section--tight { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.hp-main > .hp-section { margin-block-start: 0; }
.hp-section__head { margin-bottom: var(--wp--preset--spacing--50); }
.hp-section__head > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.hp-section__head h2 { font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem); }

/* ---- Hero -------------------------------------------------------------------------------- */

.hp-hero { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.hp-hero__text > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.hp-hero__text .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }
.hp-hero__text h1 { font-weight: 700; }
.hp-hero__image { margin-top: var(--wp--preset--spacing--60); }
.hp-hero__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--hp-radius-image); box-shadow: var(--wp--preset--shadow--soft); }
@media (max-width: 781px) { .hp-hero { padding-top: var(--wp--preset--spacing--50); } .hp-hero__image { margin-top: var(--wp--preset--spacing--50); } .hp-hero__image img { aspect-ratio: 4 / 3; border-radius: 16px; } }

/* ---- Tiles (the light-grey rounded panels) ---------------------------------------------- */

.hp-tiles-grid { gap: var(--wp--preset--spacing--30) !important; }
.hp-tile-card { background: var(--wp--preset--color--tile); border-radius: var(--hp-radius-tile); padding: var(--wp--preset--spacing--40); }
.hp-tile-card > * { margin-block-start: 0; }
.hp-tile-card > * + * { margin-block-start: 0.5rem; }
.hp-tile-card__title { font-size: 1.25rem; }
.hp-tile-card p { color: var(--wp--preset--color--quiet); font-size: 0.95rem; }
.has-paper-background-color .hp-tile-card { background: var(--wp--preset--color--surface); }

/* ---- Clients ----------------------------------------------------------------------------- */

.hp-clients { padding-top: 0; }
.hp-clients__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--quiet); margin-bottom: var(--wp--preset--spacing--30); }
/* The logo columns. A plain row until the script builds the columns (and for reduced motion). */
.hp-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--wp--preset--spacing--50); }
.hp-logos__logo { margin: 0; }
.hp-logos img { display: block; width: 84px; height: 84px; object-fit: contain; filter: brightness(0); opacity: 0.4; transition: opacity 200ms var(--hp-ease); }
.hp-logos__logo:hover img { opacity: 0.85; }
.hp-logos.is-live { flex-wrap: nowrap; gap: var(--wp--preset--spacing--40); }
.hp-logos__col { position: relative; width: 6rem; height: 4.5rem; overflow: hidden; animation: hp-logos-rise 0.5s var(--hp-ease) both; }
@media (min-width: 782px) { .hp-logos__col { width: 10rem; height: 6rem; } }
.hp-logos__slot { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(12%); filter: blur(8px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity, filter; }
.hp-logos__slot.is-in { opacity: 1; transform: none; filter: blur(0); }
.hp-logos__slot.is-out { opacity: 0; transform: translateY(-20%); filter: blur(6px); transition-duration: 0.3s; transition-timing-function: ease-in; }
.hp-logos__slot img { width: 80%; height: 80%; opacity: 0.55; }
@keyframes hp-logos-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hp-logos__col { animation: none; } .hp-logos__slot { transition: opacity 0.3s; transform: none; filter: none; } }

/* ---- Bento (what we make) ---------------------------------------------------------------- */

.hp-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--30); }
.hp-bento__tile { display: flex; flex-direction: column; gap: 0.5rem; min-height: 11rem; padding: var(--wp--preset--spacing--40); background: var(--wp--preset--color--surface); border-radius: var(--hp-radius-tile); text-decoration: none; color: inherit; transition: transform 240ms var(--hp-ease), box-shadow 240ms var(--hp-ease); }
.hp-bento__tile:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--soft); text-decoration: none; }
.hp-bento__tile--wide { grid-column: span 2; }
.hp-bento__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--wp--preset--color--ink); }
.hp-bento__text { color: var(--wp--preset--color--quiet); font-size: 0.95rem; line-height: 1.5; max-width: 30rem; }
.hp-bento__more { margin-top: auto; padding-top: 1rem; color: var(--wp--preset--color--brand-deep); font-weight: 500; font-size: 0.95rem; }
.hp-bento__more span { display: inline-block; margin-left: 0.2em; transition: transform 160ms var(--hp-ease); }
.hp-bento__tile:hover .hp-bento__more span { transform: translateX(2px); }
@media (max-width: 900px) { .hp-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hp-bento { grid-template-columns: 1fr; } .hp-bento__tile { min-height: 0; grid-column: auto; } }

/* ---- Papers and finishes ----------------------------------------------------------------- */

.hp-swatches { list-style: none; padding: 0; margin: 0 0 var(--wp--preset--spacing--50); display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
.hp-swatch { display: grid; gap: 0.1rem; text-align: center; }
.hp-swatch__chip { display: block; aspect-ratio: 1; border-radius: 20px; margin: 0 auto 0.75rem; width: 100%; max-width: 8rem; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.05), 0 12px 28px -14px rgba(0, 0, 0, 0.25); transition: transform 240ms var(--hp-ease), box-shadow 240ms var(--hp-ease); }
.hp-swatch:hover .hp-swatch__chip { transform: translateY(-4px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 10px rgba(0, 0, 0, 0.06), 0 20px 36px -14px rgba(0, 0, 0, 0.3); }
.hp-swatch__chip--uncoated { background: linear-gradient(160deg, #fdfdfb, #f1f0ec); }
.hp-swatch__chip--cotton { background: radial-gradient(circle at 30% 30%, #ffffff, #f4f2ec 70%); }
.hp-swatch__chip--cream { background: linear-gradient(160deg, #f8f2e4, #ede4cf); }
.hp-swatch__chip--kraft { background: linear-gradient(160deg, #c8a97c, #b08e5f); }
.hp-swatch__chip--black { background: linear-gradient(160deg, #2a2d34, #131519); }
.hp-swatch__chip--soft-touch { background: linear-gradient(160deg, #e9e6ef, #d7d3df); }
.hp-swatch__chip--gloss { background: linear-gradient(135deg, #ffffff 0%, #eef0f4 40%, #ffffff 55%, #dfe3ea 100%); }
.hp-swatch__chip--foil { background: linear-gradient(135deg, #f3e2a6 0%, #c9a24a 35%, #f7ecc2 50%, #b8892f 70%, #e9cf7a 100%); }
.hp-swatch__chip--none { background: repeating-linear-gradient(45deg, #f4f3f0 0 6px, #e9e7e2 6px 8px); }
.hp-swatch__chip--smooth, .hp-swatch__chip--cougar { background: linear-gradient(160deg, #fdfdfb, #f1f0ec); }
.hp-swatch__chip--gloss-coated, .hp-swatch__chip--polar-bear-gloss, .hp-swatch__chip--coated { background: linear-gradient(135deg, #ffffff 0%, #eef0f4 40%, #ffffff 55%, #dfe3ea 100%); }
.hp-swatch__chip--velvet, .hp-swatch__chip--matte { background: linear-gradient(160deg, #f6f6f8, #e6e6ea); }
.hp-swatch__chip--silk { background: linear-gradient(150deg, #fbfbfc 0%, #ececf0 50%, #f7f7f9 100%); }
.hp-swatch__chip--c1s, .hp-swatch__chip--card { background: linear-gradient(135deg, #ffffff 0%, #f0f1f4 45%, #fafafa 100%); border-color: rgba(0, 0, 0, 0.12); }
.hp-swatch__chip--bond, .hp-swatch__chip--text { background: linear-gradient(160deg, #ffffff, #f7f7f5); }
.hp-swatch__chip--uv, .hp-swatch__chip--uv-coating { background: linear-gradient(135deg, #ffffff 0%, #e6e9f0 30%, #ffffff 45%, #d9dde6 60%, #ffffff 100%); }
.hp-swatch__chip--laser { background: linear-gradient(160deg, #fdfdfb, #f1f0ec); position: relative; }
.hp-swatch__chip--gloss-laminate { background: linear-gradient(135deg, #ffffff 0%, #e6e9ee 35%, #ffffff 50%, #d6dbe3 100%); }
.hp-swatch__name { font-weight: 600; color: var(--wp--preset--color--ink); font-size: 0.95rem; }
.hp-swatch__note { color: var(--wp--preset--color--quiet); font-size: 0.85rem; }

/* ---- The standard (black band) ----------------------------------------------------------- */

.hp-standard__statement { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); letter-spacing: -0.025em; }
.hp-principles { list-style: none; padding: 0; margin: var(--wp--preset--spacing--50) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--wp--preset--spacing--30); }
.hp-principle { display: grid; gap: 0.5rem; padding: var(--wp--preset--spacing--40); background: #1C1C1E; border-radius: var(--hp-radius-tile); }
.hp-principle__number { font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--rail-text); letter-spacing: 0.02em; }
.hp-principle__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: #fff; }
.hp-principle__text { font-size: 0.95rem; line-height: 1.5; color: var(--wp--preset--color--rail-text); }
.hp-standard__lines { margin-top: var(--wp--preset--spacing--50); color: var(--wp--preset--color--rail-text); }
.hp-standard__lines a { color: #fff; }
.hp-dot { display: inline-block; width: 4px; height: 4px; border-radius: 999px; background: var(--wp--preset--color--rail-text); vertical-align: middle; margin: 0 0.5rem; }

/* ---- People ------------------------------------------------------------------------------ */

.hp-people__grid { gap: var(--wp--preset--spacing--30) !important; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)) !important; }
.hp-person { text-align: center; }
.hp-person__photo { margin-bottom: 1rem; overflow: hidden; border-radius: 20px; }
.hp-person__photo img { width: 100%; display: block; transition: transform 600ms var(--hp-ease); }
.hp-person:hover .hp-person__photo img { transform: scale(1.03); }
.hp-person__name { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--wp--preset--color--ink); margin: 0; }
.hp-person__role { color: var(--wp--preset--color--quiet); font-size: 0.9rem; margin: 0.1rem 0 0; }

/* ---- Call to action ---------------------------------------------------------------------- */

.hp-cta__inner > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.hp-cta__title { font-size: clamp(2.25rem, 1.5rem + 3vw, 4.25rem); }
.hp-cta__inner .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }

/* ---- Pages and posts --------------------------------------------------------------------- */

.hp-page > .wp-block-post-title { margin-bottom: var(--wp--preset--spacing--50); }
.hp-page .hp-section:first-of-type { padding-top: 0; }
.hp-post-list { display: grid; gap: var(--wp--preset--spacing--30); }
.hp-post-list > * { background: var(--wp--preset--color--tile); border-radius: var(--hp-radius-tile); padding: var(--wp--preset--spacing--40); }
.hp-404 h1 { max-width: 14ch; }
.wp-block-search__input { border: var(--hp-line); border-radius: 999px; padding: 0.7rem 1.1rem; background: var(--wp--preset--color--surface); }
.wp-block-search__button { border-radius: 999px; background: var(--wp--preset--color--ink); color: #fff; border: 0; }

/* ---- Footer (light) ---------------------------------------------------------------------- */

.hp-footer { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--50); color: var(--wp--preset--color--quiet); font-size: 0.9rem; }
.hp-footer__columns { margin-bottom: var(--wp--preset--spacing--50); }
.hp-logo--footer img { width: 150px; }
.hp-footer__tagline { font-weight: 500; font-size: 1.05rem; color: var(--wp--preset--color--ink); margin-top: 1.25rem; }
.hp-footer__contact { line-height: 1.9; }
.hp-footer__contact a, .hp-footer__links a { color: var(--wp--preset--color--body); }
.hp-footer__contact a:hover, .hp-footer__links a:hover { color: var(--wp--preset--color--brand-deep); }
.hp-footer__heading { font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--ink) !important; font-weight: 600; margin-bottom: 0.9rem; }
.hp-footer__links { list-style: none; padding: 0; margin: 0; }
.hp-footer__links li { margin-bottom: 0.5rem; }
.hp-footer__bottom { border-top: 1px solid var(--wp--preset--color--line-strong); padding-top: var(--wp--preset--spacing--40); }
.hp-footer__bottom p { margin: 0; }
.hp-footer__bottom a { color: var(--wp--preset--color--quiet); }

/* ---- Motion ------------------------------------------------------------------------------ */

.hp-reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--hp-ease), transform 600ms var(--hp-ease); }
.hp-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hp-reveal { opacity: 1; transform: none; transition: none; }
  .wp-block-button__link, .hp-bento__tile, .hp-swatch__chip, .hp-person__photo img { transition: none; }
}

/* ---- The store (WooCommerce) ------------------------------------------------------------- */

.wc-block-product, .wc-block-grid__product { background: transparent; border: 0; padding: 0; }
.wc-block-product .wp-block-post-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.75rem 0 0.15rem; }
.wc-block-product .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { color: var(--wp--preset--color--brand-deep); }
.wc-block-product .wc-block-components-product-image img, .wc-block-product .wp-block-post-featured-image img { border-radius: 20px; background: var(--wp--preset--color--tile); }
.wc-block-components-product-price, .woocommerce .price { color: var(--wp--preset--color--body); font-weight: 400; }
.woocommerce .onsale { display: none; }
.wc-block-product .wp-block-button__link, .wc-block-components-product-button .wp-block-button__link { font-size: 0.875rem; padding: 0.55rem 1.1rem; }

.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce button.button.alt,
.wc-block-components-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
  background: var(--wp--preset--color--ink) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  font-weight: 500 !important; padding: 0.8rem 1.4rem !important; line-height: 1.2 !important;
}
.woocommerce .button:hover, .woocommerce button.button.alt:hover, .wc-block-components-button:hover { background: var(--wp--preset--color--brand-deep) !important; }
.woocommerce .button.disabled, .woocommerce button.button:disabled { opacity: 0.5; }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .quantity .qty,
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-select select, .woocommerce-ordering select, select.orderby {
  border: var(--hp-line); border-radius: 12px; background: var(--wp--preset--color--surface); padding: 0.7rem 1rem; font-family: inherit; color: var(--wp--preset--color--ink);
}
.woocommerce form .form-row input.input-text:focus, .wc-block-components-text-input input:focus, .woocommerce .quantity .qty:focus { border-color: var(--wp--preset--color--ink); outline: none; box-shadow: 0 0 0 3px var(--wp--preset--color--brand-soft); }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { border-radius: 12px; border: 0; border-top-width: 0; background: var(--wp--preset--color--tile); }
.woocommerce-message::before { color: var(--wp--preset--color--good); }
.woocommerce-info::before { color: var(--wp--preset--color--brand); }
.woocommerce-error::before { color: var(--wp--preset--color--danger); }

.woocommerce-breadcrumb { font-size: 0.85rem; color: var(--wp--preset--color--quiet); }
.woocommerce-breadcrumb a { color: var(--wp--preset--color--quiet); text-decoration: none; }
.woocommerce div.product .product_title, .wp-block-post-title.product_title { font-size: var(--wp--preset--font-size--xx-large); }
.woocommerce div.product p.price, .wp-block-woocommerce-product-price { font-size: 1.15rem; color: var(--wp--preset--color--quiet); }
.woocommerce div.product .product_meta { font-size: 0.85rem; color: var(--wp--preset--color--quiet); border-top: var(--hp-line); padding-top: 1rem; margin-top: 1.5rem; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 20px; background: var(--wp--preset--color--tile); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li { border: 0; background: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 0.75rem 0; margin-right: 1.5rem; color: var(--wp--preset--color--quiet); font-weight: 500; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--ink); box-shadow: inset 0 -2px 0 var(--wp--preset--color--ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: var(--hp-line); padding: 0; margin-bottom: 1.5rem; }

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 0.55rem 0.9rem; border-radius: 999px; color: var(--wp--preset--color--ink); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--wp--preset--color--tile); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--wp--preset--color--ink); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { background: var(--wp--preset--color--tile); border-radius: var(--hp-radius-tile); padding: var(--wp--preset--spacing--40); }
.woocommerce table.shop_table { border: 0; border-radius: 16px; border-collapse: separate; background: var(--wp--preset--color--surface); }
.woocommerce table.shop_table th { font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--quiet); }
.hp-job h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: var(--wp--preset--spacing--50); }
.hp-job dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; }
.hp-job dt { color: var(--wp--preset--color--quiet); }
.hp-job dd { margin: 0; color: var(--wp--preset--color--ink); }

/* ---- The paper guide --------------------------------------------------------------------- */

.hp-swatch__link { display: grid; gap: 0.1rem; text-decoration: none; color: inherit; }
.hp-swatch__link:hover { text-decoration: none; }
.hp-swatch__link:hover .hp-swatch__name { color: var(--wp--preset--color--brand-deep); }
.hp-guide-hero { padding-bottom: var(--wp--preset--spacing--50); }
.hp-guide-hero > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.hp-guide-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: var(--wp--preset--spacing--40); }
.hp-guide-nav a { font-size: 0.9rem; font-weight: 500; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--tile); border-radius: 999px; padding: 0.5rem 0.95rem; text-decoration: none; transition: background-color 160ms var(--hp-ease), color 160ms var(--hp-ease); }
.hp-guide-nav a:hover { background: var(--wp--preset--color--ink); color: #fff; }
.hp-guide [id] { scroll-margin-top: calc(var(--hp-header-height) + 1rem); }
.hp-guide__note { color: var(--wp--preset--color--quiet); font-size: 0.95rem; max-width: 46rem; margin: var(--wp--preset--spacing--40) auto 0; }
.hp-tiles-grid--2, .hp-tiles-grid--3 { display: grid; gap: var(--wp--preset--spacing--30); }
.hp-tiles-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hp-tiles-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hp-tiles-grid--after { margin-top: var(--wp--preset--spacing--30); }
@media (max-width: 900px) { .hp-tiles-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hp-tiles-grid--2 { grid-template-columns: 1fr; } }
.hp-tile-card .hp-tile-card__big { font-size: 2.5rem; color: var(--wp--preset--color--ink); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--wp--preset--color--ink); margin: 0 0 0.75rem !important; }
.hp-tile-card__chip { display: block; width: 3.5rem; aspect-ratio: 1; border-radius: 14px; margin: 0 0 1rem !important; border: 1px solid rgba(0, 0, 0, 0.06); }
.hp-tile-card--tall { min-height: 0; }
.hp-sheet { display: block; width: 6rem; border-radius: 4px; background: #fff; margin: 0 0 1.25rem !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 8px 20px -10px rgba(0, 0, 0, 0.3); }
.hp-sheet--text { height: 2px; transform: rotate(-4deg); }
.hp-sheet--cover { height: 12px; transform: rotate(-4deg); }
.hp-tile-card--figure .hp-figure { display: block; width: 100%; height: auto; color: var(--wp--preset--color--ink); margin: 0 0 1rem !important; }
.hp-table-wrap { overflow-x: auto; margin-top: var(--wp--preset--spacing--40); border-radius: var(--hp-radius-tile); background: var(--wp--preset--color--surface); }
.has-paper-background-color .hp-table-wrap { background: var(--wp--preset--color--surface); }
.hp-guide:not(.has-paper-background-color) .hp-table-wrap { background: var(--wp--preset--color--tile); }
.hp-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.hp-table caption { caption-side: bottom; text-align: left; color: var(--wp--preset--color--quiet); font-size: 0.85rem; padding: 1rem 1.5rem 1.25rem; }
.hp-table th, .hp-table td { text-align: left; padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.hp-table th { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--quiet); }
.hp-table tr:last-child td { border-bottom: 0; }
.hp-table__kind { font-weight: 600; color: var(--wp--preset--color--ink); white-space: nowrap; }
.hp-table__na { color: var(--wp--preset--color--faint); }
.hp-papers { display: grid; gap: var(--wp--preset--spacing--30); }
.hp-paper { display: grid; grid-template-columns: 9rem 1fr; gap: var(--wp--preset--spacing--40); align-items: start; background: var(--wp--preset--color--tile); border-radius: var(--hp-radius-tile); padding: var(--wp--preset--spacing--40); }
.has-paper-background-color .hp-paper { background: var(--wp--preset--color--surface); }
.hp-paper--plain { grid-template-columns: 1fr; }
.hp-paper__chip { display: block; aspect-ratio: 1; border-radius: 18px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.05); }
.hp-paper__body > * { margin: 0; }
.hp-paper__body > * + * { margin-top: 0.5rem; }
.hp-paper__name { font-size: 1.5rem; }
.hp-paper__spec { font-weight: 500; color: var(--wp--preset--color--ink); font-size: 0.95rem; }
.hp-paper__for, .hp-paper__note { color: var(--wp--preset--color--quiet); font-size: 0.95rem; }
.hp-paper__for strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.hp-paper .hp-dot { background: var(--wp--preset--color--faint); }
@media (max-width: 600px) { .hp-paper { grid-template-columns: 1fr; } .hp-paper__chip { width: 5rem; } }

/* ---- Start a project --------------------------------------------------------------------- */

.hp-project { padding-top: var(--wp--preset--spacing--60); min-height: 70vh; }
.hp-project .hp-section__head { margin-bottom: var(--wp--preset--spacing--50); }

/* The account: navigation beside the content (WooCommerce's layout stylesheet is not loaded). */
@media (min-width: 782px) {
  .woocommerce-account .woocommerce { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--wp--preset--spacing--50); align-items: start; }
  .woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after { display: none; }
  .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
  .woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; }
  .woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--hp-header-height) + 1rem); }
}
.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 0.5rem 0.9rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 0.15rem; }
.woocommerce-account .woocommerce-MyAccount-content { overflow-x: auto; }

/* The artwork guide's checklist, the questions page, the terms. */
.hp-checklist { counter-reset: hp-check; list-style: none; padding: 0; margin: 0 auto; max-width: 760px; display: grid; gap: 0.75rem; }
.hp-checklist li { counter-increment: hp-check; display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; gap: 1rem; background: var(--wp--preset--color--tile); border-radius: 18px; padding: 1rem 1.25rem; font-size: 1.05rem; }
.hp-checklist li::before { content: counter(hp-check); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--wp--preset--color--ink); color: #fff; font-weight: 600; }
.hp-faq-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.hp-faq-section h2 { margin-bottom: var(--wp--preset--spacing--40); }
.hp-faq { display: grid; gap: 0.75rem; }
.hp-faq__item { background: var(--wp--preset--color--tile); border-radius: 18px; padding: 0 1.5rem; }
.has-paper-background-color .hp-faq__item { background: var(--wp--preset--color--surface); }
.hp-faq__q { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; font-size: 1.1rem; font-weight: 500; position: relative; }
.hp-faq__q::-webkit-details-marker { display: none; }
.hp-faq__q::after { content: ''; position: absolute; right: 0.25rem; top: 50%; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--wp--preset--color--quiet); border-bottom: 2px solid var(--wp--preset--color--quiet); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s; }
.hp-faq__item[open] .hp-faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.hp-faq__a { margin: 0; padding: 0 0 1.25rem; color: var(--wp--preset--color--quiet); max-width: 60ch; }
.hp-terms { padding-top: 0; }
.hp-terms__body { display: grid; gap: var(--wp--preset--spacing--40); }
.hp-terms__section h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 0.75rem; }
.hp-terms__section p { color: var(--wp--preset--color--quiet); margin: 0 0 0.75rem; }
/* The orders list's actions: small, and View as an outline (the rule above uses !important). */
.woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.woocommerce .woocommerce-orders-table__cell-order-actions a.button { padding: 0.4rem 0.9rem !important; font-size: 0.85rem; margin: 0.15rem 0.15rem 0.15rem 0; }
.woocommerce .woocommerce-orders-table__cell-order-actions a.button.view { background: transparent !important; color: var(--wp--preset--color--ink) !important; border: 1px solid var(--wp--preset--color--line) !important; }
.woocommerce .woocommerce-orders-table__cell-order-actions a.button.view:hover { border-color: var(--wp--preset--color--ink) !important; }
/* The guides hub: each card is one link. */
.hp-guides__card { display: block; text-decoration: none; color: var(--wp--preset--color--ink); transition: transform 0.2s; }
.hp-guides__card:hover { transform: translateY(-2px); }
.hp-guides__card .hp-tile-card__title { font-size: 1.35rem; }
.hp-guides__more { display: inline-block; margin-top: 0.75rem; font-weight: 500; color: var(--wp--preset--color--brand); }

/* Illustrations: line art that scales with its tile. */
.hp-illustration { display: block; width: 100%; height: auto; }
.hp-bento__figure { display: block; width: 7.5rem; max-width: 100%; margin: 0 0 0.75rem; }
.hp-bento__tile--wide .hp-bento__figure { width: 9rem; }
/* Seven steps on a 24-column grid: four across, then three centered beneath. */
.hp-how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--wp--preset--spacing--30); counter-reset: none; }
.hp-how__step { position: relative; grid-column: span 6; background: var(--wp--preset--color--tile); border-radius: var(--hp-radius-tile); padding: var(--wp--preset--spacing--40); }
.hp-how__step:nth-child(5):nth-last-child(3) { grid-column: 4 / span 6; }
.hp-how__figure { display: block; width: 100%; max-width: 12rem; margin: 0 auto 1rem; }
.hp-how__number { position: absolute; top: 1.25rem; left: 1.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--wp--preset--color--quiet); }
.hp-how__title { font-size: 1.25rem; margin: 0 0 0.35rem; }
.hp-how__text { margin: 0; color: var(--wp--preset--color--quiet); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 900px) {
  .hp-how__step { grid-column: span 12; }
  .hp-how__step:nth-child(5):nth-last-child(3) { grid-column: span 12; }
  .hp-how__step:nth-child(7):nth-last-child(1) { grid-column: 7 / span 12; }
}
@media (max-width: 600px) {
  .hp-how__step, .hp-how__step:nth-child(5):nth-last-child(3), .hp-how__step:nth-child(7):nth-last-child(1) { grid-column: 1 / -1; }
}

/* The About page: prose sections, value tiles, a pull line, a note from Chris. */
.hp-about__prose { max-width: 46rem; margin: 0 auto; font-size: 1.15rem; line-height: 1.6; color: var(--wp--preset--color--body); }
.hp-about__prose p { margin: 0 0 1.1em; }
.hp-about__prose p:last-child { margin-bottom: 0; }
.hp-about__tiles { margin-top: var(--wp--preset--spacing--40); }
.hp-tiles-grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--30); }
@media (max-width: 1000px) { .hp-tiles-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hp-tiles-grid--4 { grid-template-columns: 1fr; } }
.hp-about__quote { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; max-width: 40rem; margin: var(--wp--preset--spacing--50) auto 0; color: var(--wp--preset--color--ink); }
.hp-about-note { padding-top: 0; }
.hp-note { display: grid; grid-template-columns: 6rem 1fr; gap: var(--wp--preset--spacing--40); align-items: start; max-width: 52rem; margin: 0 auto; background: var(--wp--preset--color--tile); border-radius: var(--hp-radius-tile); padding: var(--wp--preset--spacing--50); }
.hp-note__photo { width: 6rem; height: 6rem; border-radius: 999px; object-fit: cover; }
.hp-note__body p { margin: 0 0 1em; font-size: 1.1rem; line-height: 1.55; }
.hp-note__body p:last-child { margin-bottom: 0; }
.hp-note__sign { color: var(--wp--preset--color--quiet); font-weight: 500; }
@media (max-width: 600px) { .hp-note { grid-template-columns: 1fr; } }
.hp-contact { padding-top: var(--wp--preset--spacing--50); }
.hp-contact__ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--30); max-width: 60rem; margin: var(--wp--preset--spacing--50) auto 0; }
@media (max-width: 800px) { .hp-contact__ways { grid-template-columns: 1fr; } }
.hp-contact__way { background: var(--wp--preset--color--tile); border-radius: var(--hp-radius-tile); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); text-align: center; }
.has-paper-background-color .hp-contact__way { background: var(--wp--preset--color--surface); }
.hp-contact__way h2 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--quiet); margin: 0 0 0.5rem; }
.hp-contact__way a, .hp-contact__way p { font-size: 1.2rem; font-weight: 600; color: var(--wp--preset--color--ink); margin: 0; text-decoration: none; }
.hp-contact__way a:hover { color: var(--wp--preset--color--brand-deep); }
.hp-contact__way small { display: block; margin-top: 0.4rem; color: var(--wp--preset--color--quiet); font-size: 0.95rem; font-weight: 400; }