/* PuzzleDuo — site.css
   Shared chrome and home-page composition: header, drawer, buttons, cards,
   toast, tooltip, FAQ, divider motif, registration ticks, footer, print modal. */

/* ============================================================== header ==== */
.pf-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper-1);
  border-bottom: 1px solid var(--line-200);
}
.pf-header__in {
  display: flex;
  align-items: center;
  gap: var(--s6);
  max-width: var(--w-workspace);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 76px;
}
.pf-header--slim .pf-header__in { height: 56px; }
.pf-header--play .pf-header__in { height: 48px; }

.pf-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pf-logo:hover { color: var(--ink-900); }
.pf-logo__mark { width: 26px; height: 26px; flex: none; }
.pf-logo__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-500);
  padding-left: var(--s3);
  margin-left: var(--s1);
  border-left: 1px solid var(--line-300);
  line-height: 1.1;
}

.pf-nav { display: flex; align-items: center; gap: var(--s6); margin-left: auto; }
.pf-nav a {
  position: relative;
  color: var(--ink-700);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 6px 2px;
  white-space: nowrap;
}
.pf-nav a:hover { color: var(--ink-900); }
.pf-nav a[aria-current="page"] { color: var(--ink-900); font-weight: 700; }
/* active state is a 6px jigsaw tab, not an underline bar (§8.3) */
.pf-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 7px;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='7'%3E%3Cpath d='M0 7V3.4h5.2V1.9a2.8 2.8 0 0 1 5.6 0v1.5H18V7z' fill='%23A8462A'/%3E%3C/svg%3E");
}

.pf-nav--tight { gap: var(--s4); }

.pf-drawer-btn { display: none; }

/* trust chip: never clickable, never a link */
.pf-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
.pf-trust svg { color: var(--sage-600); flex: none; }
.pf-trust--icon { width: 28px; padding: 0; justify-content: center; }
.pf-trust--icon span { display: none; }

/* ============================================================= buttons ==== */
.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pf-btn svg { flex: none; }

.pf-btn--primary {
  background: var(--clay-600);
  color: var(--paper-0);
  border-color: var(--clay-600);
}
.pf-btn--primary:hover {
  background: var(--clay-700);
  border-color: var(--clay-700);
  color: var(--paper-0);
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(var(--shadow-ink), 0.10);
}
.pf-btn--primary:active {
  background: var(--clay-800);
  border-color: var(--clay-800);
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.pf-btn--primary:disabled,
.pf-btn--primary[aria-disabled="true"] {
  background: var(--paper-3);
  border-color: var(--paper-3);
  color: rgba(122, 103, 84, 0.6);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.pf-btn--secondary {
  background: var(--paper-0);
  border-color: var(--line-300);
  color: var(--ink-900);
}
.pf-btn--secondary:hover {
  background: var(--clay-100);
  border-color: rgba(194, 96, 60, 0.4);
  color: var(--ink-900);
  transform: translateY(-1px);
}
.pf-btn--secondary:active { background: var(--paper-3); transform: translateY(0); }
.pf-btn--secondary:disabled,
.pf-btn--secondary[aria-disabled="true"] {
  border-color: var(--line-200);
  color: var(--ink-500);
  background: var(--paper-0);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.pf-btn[aria-disabled="true"] { cursor: not-allowed; }

.pf-btn--onstage {
  background: var(--paper-0);
  color: var(--ink-900);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.pf-btn--onstage:hover { background: var(--clay-100); color: var(--ink-900); }

.pf-btn--44 { height: 44px; }
.pf-btn--full { width: 100%; }

.pf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink-700);
  transition: background-color var(--dur-fast) var(--ease);
}
.pf-icon-btn:hover { background: rgba(var(--shadow-ink), 0.06); }
.pf-icon-btn:active { background: rgba(var(--shadow-ink), 0.10); }

.pf-btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.pf-btn:hover .pf-btn__arrow { transform: translateX(2px); }

/* ============================================================== cards ===== */
.pf-card {
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-radius: var(--r-card);
  padding: 24px;
  transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.pf-card--hover:hover { box-shadow: var(--e1); transform: translateY(-2px); }

.pf-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper-2);
  color: var(--ink-700);
  white-space: nowrap;
}
.pf-badge--clay { background: var(--clay-100); color: var(--clay-700); }
.pf-badge--sage { background: rgba(124, 140, 111, 0.18); color: var(--sage-600); }

/* ======================================================= divider motif ==== */
/* A real cut line with a tab and a blank — 96px period, 24px tall, 1.5 stroke.
   Used exactly three times per page (§8.2). */
.pf-divider {
  height: 24px;
  width: 100%;
  background-repeat: repeat-x;
  background-position: center left;
  background-size: 96px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' viewBox='0 0 96 24'%3E%3Cpath d='M0 12C8 12 16 12 22 12C28 12 28 5 36 5C44 5 44 12 50 12C58 12 66 12 72 12C78 12 78 19 86 19C94 19 94 12 96 12' fill='none' stroke='%23E4D9C6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pf-divider--ink {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' viewBox='0 0 96 24'%3E%3Cpath d='M0 12C8 12 16 12 22 12C28 12 28 5 36 5C44 5 44 12 50 12C58 12 66 12 72 12C78 12 78 19 86 19C94 19 94 12 96 12' fill='none' stroke='%23D6C7AE' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==================================================== registration ticks === */
.pf-ticks { position: relative; }
.pf-ticks::before {
  content: "";
  position: absolute;
  inset: -14px;
  pointer-events: none;
  --tick: rgba(122, 103, 84, 0.55);
  background-image:
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick));
  background-size: 8px 1px, 8px 1px, 8px 1px, 8px 1px, 1px 8px, 1px 8px, 1px 8px, 1px 8px;
  background-position:
    left top, right top, left bottom, right bottom,
    left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
}

/* ============================================================= toast ====== */
/* 260, not 200. Every download confirmation lives here — "SVG downloaded",
   "PNG downloaded", "PNG export failed" — and all three fire from *inside* the
   print modal, which is 220. At 200 the toast painted underneath the modal's
   scrim: press Download, get no confirmation at all, and in the failure case
   walk away believing the file exists. A toast that a modal can cover is not a
   toast, it is decoration. System layer: above .pf-menu (240) and .pf-modal
   (220), below .skip-link (300) which must beat everything. */
.pf-toasts {
  position: fixed;
  right: var(--s6);
  bottom: var(--s6);
  z-index: 260;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.pf-toast {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-left: 3px solid var(--clay-600);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--e2);
  animation: pf-toast-in 180ms var(--ease) both;
}
.pf-toast--error { border-left-color: var(--danger-600); }
.pf-toast__title { font-size: var(--fs-small); font-weight: 700; color: var(--ink-900); line-height: 1.35; }
.pf-toast__body { font-size: 13px; color: var(--ink-500); line-height: 1.4; margin-top: 2px; }
.pf-toast__x {
  margin-left: auto;
  /* 44x44 hit area on a 20px glyph: the negative margin keeps the card the same
     size while the target stops being a 24px dartboard */
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink-500);
  border-radius: 6px;
  flex: none;
}
.pf-toast__x:hover { background: var(--paper-2); }
@keyframes pf-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .pf-toasts { right: 16px; left: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* =========================================================== tooltip ====== */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 2px);
  background: var(--ink-900);
  color: var(--paper-0);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: var(--r-xs);
  max-width: 240px;
  width: max-content;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
  z-index: 90;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

/* ========================================================== accordion ===== */
.pf-faq { border-top: 1px solid var(--line-100); }
.pf-faq__item { border-bottom: 1px solid var(--line-100); }
.pf-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  min-height: 56px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.pf-faq__item summary::-webkit-details-marker { display: none; }
.pf-faq__q {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-900);
  margin: 0;
}
.pf-faq__plus {
  flex: none;
  width: 20px; height: 20px;
  color: var(--clay-600);
  transition: transform var(--dur-med) var(--ease);
}
.pf-faq__item[open] .pf-faq__plus { transform: rotate(45deg); }
.pf-faq__a {
  color: var(--ink-700);
  max-width: 68ch;
  padding: 0 0 24px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.pf-faq__item summary:hover .pf-faq__q { color: var(--clay-700); }

/* ============================================================ footer ====== */
.pf-cta {
  position: relative;
  background: var(--clay-100);
  padding-block: var(--s16) var(--s12);
  text-align: center;
}
.pf-cta .pf-divider {
  position: absolute;
  top: 0; left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' viewBox='0 0 96 24'%3E%3Cpath d='M0 12C8 12 16 12 22 12C28 12 28 5 36 5C44 5 44 12 50 12C58 12 66 12 72 12C78 12 78 19 86 19C94 19 94 12 96 12' fill='none' stroke='%23C2603C' stroke-opacity='0.35' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pf-cta h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.pf-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
  margin-top: var(--s8);
}
.pf-cta__note { margin-top: var(--s4); font-size: var(--fs-small); color: var(--ink-500); }

.pf-footer {
  background: var(--paper-1);
  border-top: 1px solid var(--line-200);
  padding-block: var(--s12) var(--s6);
}
.pf-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s8) var(--s6);
}
.pf-footer__col h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--s3);
}
.pf-footer__col ul { list-style: none; margin: 0; padding: 0; }
.pf-footer__col li { margin-bottom: 10px; }
.pf-footer__col a {
  color: var(--ink-700);
  text-decoration: none;
  font-size: var(--fs-small);
}
.pf-footer__col a:hover { color: var(--clay-700); text-decoration: underline; }
.pf-footer__bottom {
  margin-top: var(--s12);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-200);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: space-between;
  align-items: center;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pf-footer__bottom p { margin: 0; }

@media (max-width: 767px) {
  .pf-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .pf-footer__grid { grid-template-columns: 1fr; gap: var(--s6); }
}

/* ============================================================== modal ===== */
body.pf-modal-open { overflow: hidden; }

.pf-modal { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 16px; }
.pf-modal[hidden] { display: none; }
.pf-modal__scrim { position: absolute; inset: 0; background: rgba(42, 33, 27, 0.58); }
.pf-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1080px, 100%);
  max-height: 90vh;
  background: var(--paper-0);
  border-radius: var(--r-panel);
  box-shadow: var(--e3);
  overflow: hidden;
}
.pf-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  height: 56px;
  padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--line-200);
  flex: none;
}
.pf-modal__title { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.01em; }
.pf-modal__sub { font-size: 13px; color: var(--ink-500); margin: 0; }

.pf-modal__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: var(--s6);
  padding: var(--s6);
  overflow: auto;
  min-height: 0;
}
.pf-modal__mat {
  background: var(--paper-2);
  border-radius: var(--r-card);
  padding: var(--s6);
  display: grid;
  place-items: center;
  min-height: 280px;
}
.pf-modal__pages {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.pf-modal__page { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pf-modal__sheet {
  background: #fff;
  border-radius: var(--r-sheet);
  box-shadow: var(--e3);
  width: 100%;
  max-width: 300px;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pf-modal__sheet svg { width: 100%; height: 100%; }
.pf-modal__page figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  text-align: center;
  letter-spacing: 0.02em;
}
.pf-modal__side { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }

.pf-summary {
  margin: 0;
  border-top: 1px solid var(--line-100);
  font-size: var(--fs-small);
}
.pf-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: 9px 0;
  border-bottom: 1px solid var(--line-100);
}
.pf-summary dt { color: var(--ink-500); margin: 0; }
.pf-summary dd {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pf-scale-note {
  background: var(--paper-2);
  border-radius: var(--r-card);
  padding: var(--s4);
}
.pf-scale-note h3 { font-size: 1rem; margin-bottom: 8px; }
.pf-scale-note p { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-700); }
.pf-scale-note__warn { font-weight: 700; color: var(--danger-600); margin-top: var(--s3); }

.pf-modal__foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 64px;
  padding: 0 var(--s6);
  border-top: 1px solid var(--line-200);
  flex: none;
  background: var(--paper-0);
}
.pf-modal__hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-500);
}
@media (max-width: 900px) {
  .pf-modal__body { grid-template-columns: 1fr; }
  .pf-modal__hint { display: none; }
  .pf-modal__foot { height: auto; padding: 12px 16px; flex-wrap: wrap; }
  .pf-modal__foot .pf-btn { flex: 1 1 auto; }
}

/* =============================================================== menu ===== */
.pf-menu {
  position: absolute;
  z-index: 240;
  min-width: 220px;
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-radius: var(--r-card);
  box-shadow: var(--e2);
  padding: 6px;
}
.pf-menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: var(--r-xs);
  padding: 10px 12px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-900);
}
.pf-menu button:hover { background: var(--clay-100); }
.pf-menu__note {
  margin: 6px 0 2px;
  padding: 0 12px 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-500);
}

/* ================================================================ 404 ===== */
.pf-404 {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--s24);
}
.pf-404__code {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  color: var(--clay-600);
  text-transform: uppercase;
}
.pf-404 h1 { margin: var(--s4) 0 var(--s4); }
.pf-404__actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s8); }

/* ============================================================ drawer ====== */
.pf-drawer {
  display: none;
  border-bottom: 1px solid var(--line-200);
  background: var(--paper-0);
}
.pf-drawer[data-open="true"] { display: block; }
.pf-drawer__in {
  max-width: var(--w-workspace);
  margin-inline: auto;
  padding: var(--s4) var(--gutter) var(--s6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-drawer a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--line-100);
}
.pf-drawer a:last-child { border-bottom: 0; }

@media (max-width: 1023px) {
  .pf-nav--global { display: none; }
  .pf-drawer-btn { display: inline-flex; margin-left: auto; }
  .pf-header__in { gap: var(--s4); }
}
@media (max-width: 767px) {
  .pf-trust:not(.pf-trust--force) span { display: none; }
  .pf-trust:not(.pf-trust--force) { width: 28px; padding: 0; justify-content: center; }
}

/* Touch: nothing interactive may be smaller than 40x40, and the brand, nav and
   footer links get real height instead of a 19px text box. (§5 global) */
@media (max-width: 767px), (pointer: coarse) {
  .pf-logo { min-height: 44px; }
  .pf-trust--force { min-height: 44px; }
  .pf-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; }
  .pf-icon-btn { width: 44px; height: 44px; }
  .pf-drawer a { min-height: 48px; }
  .pf-footer__col li { margin-bottom: 0; }
  .pf-footer__col a { display: flex; align-items: center; min-height: 44px; }
  .pf-faq__item summary { min-height: 56px; }
  .pf-menu button { min-height: 44px; }
}

/* =============================================================== hero ===== */
.pf-hero {
  position: relative;
  overflow: hidden;             /* the ghost outline is meant to be cropped */
  min-height: min(88vh, 860px);
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: var(--s12);
  padding-block: var(--s16);
  max-width: var(--w-workspace);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.pf-hero::before {
  content: "";
  position: absolute;
  inset: -10% 0 auto 30%;
  height: 120%;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--paper-0), rgba(253, 250, 244, 0) 72%);
  z-index: 0;
}
.pf-hero__copy { position: relative; z-index: 2; max-width: 36rem; }
.pf-hero__copy .eyebrow { margin-bottom: var(--s6); }
.pf-hero h1 {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  text-wrap: balance;
}
.pf-hero__lede {
  margin-top: var(--s6);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-700);
  max-width: 46ch;
}
.pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s8);
}
.pf-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-200);
}
.pf-hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--ink-500);
  padding-right: var(--s4);
  border-right: 1px solid var(--line-200);
  line-height: 2.2;
}
.pf-hero__trust span:last-child { border-right: 0; padding-right: 0; }
.pf-hero__trust svg { color: var(--ink-500); flex: none; }

.pf-hero__art { position: relative; z-index: 1; justify-self: center; width: 100%; max-width: 470px; }
.pf-hero[data-drag="true"] { outline: 2px dashed var(--clay-600); outline-offset: -8px; border-radius: var(--r-lg); }
.pf-hero[data-drag="true"] .pf-hero__drop { background: var(--clay-100); border-color: var(--clay-500); }
.pf-hero__sheet {
  position: relative;
  aspect-ratio: 1 / 1.4142;
  background: var(--paper-0);
  border-radius: var(--r-sheet);
  box-shadow: var(--e3);
  transform: rotate(-1.5deg);
  overflow: hidden;
  z-index: 2;
}
.pf-hero__sheet svg { width: 100%; height: 100%; display: block; }
.pf-hero__shadow {
  position: absolute;
  left: 6%; right: 6%;
  bottom: -18px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(194, 96, 60, 0.55), rgba(194, 96, 60, 0) 78%);
  filter: blur(28px);
  opacity: 0.18;
  z-index: 1;
  transform: rotate(-1.5deg);
}
.pf-hero__ghost {
  position: absolute;
  right: -34%;
  top: -16%;
  width: 130%;
  color: var(--ink-900);
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
}
.pf-hero__drop {
  position: absolute;
  left: -8%;
  bottom: 8%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  box-shadow: var(--e2);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-700);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .pf-hero { grid-template-columns: 1fr; gap: var(--s12); min-height: 0; padding-block: var(--s16) var(--s12); }
  .pf-hero__art { max-width: 420px; order: 2; }
  .pf-hero__copy { order: 1; }
  .pf-hero::before { inset: -5% -10% auto 10%; }
}
@media (max-width: 767px) {
  .pf-hero__art { max-width: 420px; }
  .pf-hero__sheet { transform: none; }
  .pf-hero__shadow { transform: none; }
  .pf-hero__ghost { display: none; }
  .pf-hero__drop { left: 0; bottom: 4%; }
  .pf-hero__actions .pf-btn { flex: 1 1 auto; }
}

/* ======================================================= how it works ==== */
.pf-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}
.pf-step { border-top: 1px solid var(--line-200); padding-top: var(--s8); }
.pf-step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  color: var(--ochre-500);
  letter-spacing: 0.12em;
}
.pf-step__icon { margin: var(--s4) 0 var(--s6); color: var(--ink-900); }
.pf-step h3 { margin-bottom: var(--s2); }
.pf-step p { font-size: var(--fs-small); color: var(--ink-500); max-width: 32ch; }
@media (max-width: 767px) {
  .pf-steps { grid-template-columns: 1fr; gap: 0; }
  .pf-step { padding: var(--s6) 0; }
  .pf-step__icon { margin: var(--s3) 0; }
}

/* ============================================================ gallery ===== */
.pf-gallery {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--s8) 0 var(--s12);
  max-width: var(--w-inner);
  margin-inline: auto;
}
.pf-gallery__item {
  flex: 0 0 auto;
  width: 200px;
  margin-inline: -12px;
  background: var(--paper-0);
  border-radius: var(--r-sheet);
  box-shadow: var(--e1);
  aspect-ratio: 1 / 1.4142;
  overflow: hidden;
  position: relative;
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px));
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
  z-index: var(--z, 1);
}
/* The photo sits inside the picture block, sized and placed by home.js from
   layout() percentages, so it lands on exactly the same rectangle as the cut
   lines drawn over it. Cover + a 42% vertical focus reproduces the crop the SVG
   version used to compute itself. */
.pf-gallery__photo {
  position: absolute;
  left: var(--bx, 4.8%);
  top: var(--by, 4.8%);
  width: var(--bw, 90.5%);
  height: var(--bh, 82%);
  display: block;
  object-fit: cover;
  object-position: 50% 42%;
}
.pf-gallery__plate { position: absolute; inset: 0; pointer-events: none; }
.pf-gallery__item svg { width: 100%; height: 100%; display: block; }
.pf-gallery__item:hover,
.pf-gallery__item:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--e3);
  z-index: 9;
}
.pf-gallery__fig { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pf-gallery__cap {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  /* Two lines now: the picture, then the spec. Still nowrap per line — a caption
     that wraps mid-phrase under a tilted card is worse than a caption that is one
     character too wide, and `A3 · 10×14 · square grid` is the longest string we
     ever emit at 26 characters ≈ 172px inside a 200px card. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  max-width: 100%;
}
.pf-gallery__cap > span { white-space: nowrap; max-width: 100%; }
.pf-gallery__what { color: var(--ink-700); }
.pf-gallery__spec { color: var(--ink-500); }
.pf-gallery__scroll { overflow-x: auto; padding-inline: var(--gutter); scroll-snap-type: x mandatory; }
.pf-gallery__scroll .pf-gallery__fig { scroll-snap-align: center; }

@media (max-width: 1023px) {
  .pf-gallery { justify-content: flex-start; }
  .pf-gallery__item { width: 168px; }
}
@media (max-width: 767px) {
  .pf-gallery__item { width: 156px; margin-inline: -8px; }
}

/* ============================================================== bento ===== */
.pf-bento {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--s6);
}
.pf-bento > * { min-width: 0; }
.pf-cell {
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-radius: var(--r-card);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.pf-cell--privacy { grid-column: span 5; box-shadow: var(--e1); border-color: var(--line-100); }
.pf-cell--a { grid-column: span 3; }
.pf-cell--b { grid-column: span 2; }
.pf-cell--c { grid-column: span 3; }
.pf-cell--d { grid-column: span 3; }
.pf-cell--e { grid-column: span 8; flex-direction: row; align-items: center; gap: var(--s6); }
.pf-cell--e .pf-cell__art { margin-bottom: 0; flex: none; }
.pf-cell--e h3 { flex: none; width: 14ch; }
.pf-cell--e p { max-width: 62ch; }
.pf-cell h3 { font-size: 1rem; }
.pf-cell p { font-size: 13px; color: var(--ink-500); line-height: 1.45; }
.pf-cell__art { color: var(--ink-900); margin-bottom: var(--s3); }
.pf-cell--privacy .pf-cell__art { color: var(--clay-600); }
.pf-bento__intro { grid-column: span 8; margin-bottom: var(--s3); }
.pf-bento__intro h2 { max-width: 22ch; }

@media (max-width: 1023px) {
  .pf-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pf-cell--privacy { grid-column: span 4; }
  .pf-cell--a, .pf-cell--c, .pf-cell--d { grid-column: span 2; }
  .pf-cell--b, .pf-cell--e { grid-column: span 2; }
  .pf-cell--e { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .pf-cell--e h3 { width: auto; }
  .pf-bento__intro { grid-column: span 4; }
}
@media (max-width: 600px) {
  .pf-bento { grid-template-columns: 1fr; }
  .pf-cell--privacy, .pf-cell--a, .pf-cell--b, .pf-cell--c, .pf-cell--d, .pf-cell--e, .pf-bento__intro { grid-column: span 1; }
}

/* ====================================================== size explainer ==== */
.pf-sizes {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--s16);
  align-items: center;
}
.pf-sizes__nest {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  aspect-ratio: 594 / 841;
}
.pf-size {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--ink-500);
  border-radius: 2px;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}
.pf-size span {
  position: absolute;
  top: 3px;
  left: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.pf-size[aria-pressed="true"] {
  background: var(--clay-100);
  border-color: var(--clay-600);
}
.pf-size[aria-pressed="true"] span { color: var(--clay-700); font-weight: 700; }
.pf-size--a1 { aspect-ratio: 594 / 841; width: 100%; }
.pf-size--a2 { aspect-ratio: 420 / 594; width: 70.7%; }
.pf-size--a3 { aspect-ratio: 297 / 420; width: 50%; }
.pf-size--a4 { aspect-ratio: 210 / 297; width: 35.4%; }
.pf-size:focus-visible { outline-offset: 3px; }
.pf-sizes__readout {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink-700);
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-200);
}
@media (max-width: 767px) {
  .pf-sizes { grid-template-columns: 1fr; gap: var(--s8); }
  .pf-sizes__nest { max-width: 320px; margin-inline: auto; }
}

/* ≤480 on /create: the page label costs more than it explains. The page is
   identifiable from the action bar, so the header keeps mark + rule + chip only.
   The trust chip keeps its full labelled pill — at 320 a 12ch puzzle name is the
   thing that must give way, not the privacy promise. */
@media (max-width: 480px) {
  .pf-header--slim .pf-logo__sub,
  .pf-header--slim .pf-logo__rule { display: none; }
}
/* The chip keeps its full labelled pill on /create (pf-trust--force), so at very
   narrow widths the room has to come from the wordmark, not from the privacy
   promise. Mark-only logo below 430px. */
@media (max-width: 430px) {
  .pf-header--slim .pf-logo > span { display: none; }
  /* mark-only, but the mark still needs a 44px target: a 26px square icon in a
     header is a 26px target no matter what the header height is */
  .pf-header--slim .pf-logo { gap: 0; min-width: 44px; justify-content: center; }
}

/* On a phone the tray lives at the bottom of the viewport, so a bottom-anchored
   toast lands on top of the pieces it is talking about. Toasts go under the
   header instead: they still cover nothing interactive. */
@media (max-width: 767px) {
  .pf-toasts { top: 92px; bottom: auto; right: 12px; left: 12px; width: auto; }
}