/* ============================================================
   PETTICORA DESIGN SYSTEM v1 — "quiet luxury editorial"
   Light browsing theme · dark editorial moments
   ============================================================ */

:root {
  /* colour tokens */
  --pt-paper:      #FAF8F4;   /* ivory page background */
  --pt-paper-2:    #F3EFE7;   /* warm card/section tint */
  --pt-ink:        #1A1713;   /* near-black text */
  --pt-ink-2:      #4A443C;   /* secondary text */
  --pt-muted:      #857D70;   /* tertiary text */
  --pt-line:       #E5DFD3;   /* hairline borders */
  --pt-gold:       #B08D4F;   /* accent — AA on paper */
  --pt-gold-2:     #C9A96E;   /* lighter gold (bg use, large text) */
  --pt-maroon:     #2C0B18;   /* deep editorial maroon */
  --pt-maroon-2:   #47122A;
  --pt-sage:       #6B7A5E;
  --pt-rose:       #BE1D44;
  --pt-dark:       #080604;   /* editorial dark bg */
  --pt-dark-ink:   #F5EDD8;   /* text on dark */

  /* type */
  --pt-serif: "Fraunces", Georgia, serif;
  --pt-sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --pt-brand: "Italiana", "Fraunces", serif;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15.5px; --fs-md: 17px;
  --fs-lg: 21px; --fs-xl: 27px; --fs-2xl: 34px; --fs-3xl: 43px;
  --fs-4xl: 54px; --fs-hero: clamp(42px, 6vw, 78px);

  /* space (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* misc */
  --pt-radius: 10px; --pt-radius-lg: 16px;
  --pt-shadow: 0 1px 2px rgba(26,23,19,.05), 0 4px 16px rgba(26,23,19,.06);
  --pt-shadow-lg: 0 2px 4px rgba(26,23,19,.06), 0 12px 40px rgba(26,23,19,.12);
  --pt-ease: cubic-bezier(.25,.8,.25,1);
  --pt-max: 1240px;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--pt-sans); font-size: var(--fs-base);
  line-height: 1.6; color: var(--pt-ink); background: var(--pt-paper);
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { font-family: var(--pt-serif); font-optical-sizing: auto; font-weight: 420; line-height: 1.12; margin: 0 0 var(--sp-4); letter-spacing: -.015em; font-variation-settings: "SOFT" 60; }
h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); }

.pt-container { max-width: var(--pt-max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.pt-eyebrow { font-family: var(--pt-sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--pt-gold); margin-bottom: var(--sp-3); }
.pt-muted { color: var(--pt-muted); }
.pt-serif-i { font-family: var(--pt-serif); font-style: italic; }

/* ---- skip link ---- */
.pt-skip { position: absolute; left: -999px; top: 12px; z-index: 100; background: var(--pt-gold); color: #fff; padding: 10px 16px; border-radius: 6px; }
.pt-skip:focus { left: 12px; }

/* ---- header / nav ---- */
.pt-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,248,244,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pt-line);
}
.pt-header--dark { background: rgba(8,6,4,.85); border-bottom-color: rgba(201,169,110,.18); color: var(--pt-dark-ink); }
.pt-nav { display: flex; align-items: center; gap: var(--sp-6); height: 72px; }
.pt-brand { display: flex; flex-direction: column; line-height: 1; }
.pt-brand-main { font-family: var(--pt-brand); font-size: 27px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400; }
.pt-brand-sub { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--pt-gold); margin-top: 4px; }
.pt-nav-links { display: flex; gap: var(--sp-5); margin-left: auto; align-items: center; }
.pt-nav-links a { font-size: var(--fs-sm); font-weight: 500; color: var(--pt-ink-2); transition: color .2s var(--pt-ease); padding: 8px 2px; }
.pt-header--dark .pt-nav-links a { color: rgba(245,237,216,.75); }
.pt-nav-links a:hover, .pt-nav-links a[aria-current="page"] { color: var(--pt-gold); }
.pt-nav-cta { display: flex; gap: var(--sp-3); align-items: center; }
@media (max-width: 900px) { .pt-nav-links { display: none; } }

/* ---- buttons ---- */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em; cursor: pointer;
  transition: all .22s var(--pt-ease); white-space: nowrap;
}
.pt-btn--primary { background: var(--pt-maroon); color: #fff; }
.pt-btn--primary:hover { background: var(--pt-maroon-2); transform: translateY(-1px); box-shadow: var(--pt-shadow-lg); }
.pt-btn--gold { background: var(--pt-gold); color: #fff; }
.pt-btn--gold:hover { background: #9a7a42; transform: translateY(-1px); }
.pt-btn--ghost { border-color: var(--pt-line); color: var(--pt-ink); background: transparent; }
.pt-btn--ghost:hover { border-color: var(--pt-gold); color: var(--pt-gold); }
.pt-btn--lg { padding: 16px 36px; font-size: var(--fs-base); }
.pt-btn--block { width: 100%; }

/* ---- cards ---- */
.pt-card {
  background: #fff; border: 1px solid var(--pt-line); border-radius: var(--pt-radius-lg);
  overflow: hidden; transition: transform .25s var(--pt-ease), box-shadow .25s var(--pt-ease);
}
.pt-card:hover { transform: translateY(-3px); box-shadow: var(--pt-shadow-lg); }
.pt-card-media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--pt-paper-2); }
.pt-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pt-ease); }
.pt-card:hover .pt-card-media img { transform: scale(1.04); }
.pt-card-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.pt-card-title { font-family: var(--pt-serif); font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.01em; margin: 0 0 4px; }
.pt-card-meta { font-size: var(--fs-sm); color: var(--pt-muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- badges / rating ---- */
.pt-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; }
.pt-badge--gold { background: rgba(176,141,79,.12); color: var(--pt-gold); }
.pt-badge--sage { background: rgba(107,122,94,.12); color: var(--pt-sage); }
.pt-badge--verified { background: rgba(107,122,94,.14); color: #55644a; }
.pt-rating { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); }
.pt-rating .star { color: var(--pt-gold); }
.pt-rating .count { color: var(--pt-muted); font-weight: 400; }
.pt-save {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none; cursor: pointer; display: grid; place-items: center;
  font-size: 17px; color: var(--pt-ink-2); transition: all .2s; box-shadow: var(--pt-shadow);
}
.pt-save:hover, .pt-save.saved { color: var(--pt-rose); transform: scale(1.08); }

/* ---- grid ---- */
.pt-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pt-grid--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---- forms ---- */
.pt-field { margin-bottom: var(--sp-4); }
.pt-label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; color: var(--pt-ink-2); }
.pt-input, .pt-select, .pt-textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--pt-line); border-radius: var(--pt-radius);
  background: #fff; font-size: var(--fs-base); transition: border-color .2s, box-shadow .2s;
}
.pt-input:focus, .pt-select:focus, .pt-textarea:focus {
  outline: none; border-color: var(--pt-gold); box-shadow: 0 0 0 3px rgba(176,141,79,.15);
}
.pt-textarea { min-height: 110px; resize: vertical; }

/* ---- section rhythm ---- */
.pt-section { padding: var(--sp-8) 0; }
.pt-section--tint { background: var(--pt-paper-2); }
.pt-section--dark { background: var(--pt-dark); color: var(--pt-dark-ink); }
.pt-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); }

/* ---- breadcrumbs ---- */
.pt-crumbs { font-size: var(--fs-xs); color: var(--pt-muted); display: flex; gap: 8px; flex-wrap: wrap; padding: var(--sp-4) 0; }
.pt-crumbs a:hover { color: var(--pt-gold); }
.pt-crumbs .sep { opacity: .5; }

/* ---- profile page ---- */
.pt-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; border-radius: var(--pt-radius-lg); overflow: hidden; max-height: 480px; }
.pt-gallery > * { width: 100%; height: 100%; object-fit: cover; background: var(--pt-paper-2); }
.pt-gallery-side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.pt-gallery--single { grid-template-columns: 1fr; }
@media (max-width: 720px) { .pt-gallery { grid-template-columns: 1fr; max-height: 320px; } .pt-gallery-side { display: none; } }

.pt-profile-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-7); align-items: start; margin-top: var(--sp-6); }
@media (max-width: 960px) { .pt-profile-layout { grid-template-columns: 1fr; } }
.pt-sticky-card { position: sticky; top: 92px; background: #fff; border: 1px solid var(--pt-line); border-radius: var(--pt-radius-lg); padding: var(--sp-5); box-shadow: var(--pt-shadow); }

.pt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 1px solid var(--pt-line); border-bottom: 1px solid var(--pt-line); margin: var(--sp-5) 0; }
.pt-fact-label { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--pt-muted); margin-bottom: 4px; }
.pt-fact-value { font-family: var(--pt-serif); font-size: var(--fs-lg); font-weight: 600; }

/* ---- footer ---- */
.pt-footer { background: var(--pt-dark); color: rgba(245,237,216,.65); padding: var(--sp-8) 0 var(--sp-6); margin-top: var(--sp-9); font-size: var(--fs-sm); }
.pt-footer a { color: rgba(245,237,216,.65); transition: color .2s; }
.pt-footer a:hover { color: var(--pt-gold-2); }
.pt-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-7); }
@media (max-width: 800px) { .pt-footer-grid { grid-template-columns: 1fr 1fr; } }
.pt-footer h4 { color: var(--pt-dark-ink); font-family: var(--pt-sans); font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.pt-footer-bottom { border-top: 1px solid rgba(201,169,110,.15); padding-top: var(--sp-5); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* ---- skeleton loader ---- */
.pt-skeleton { background: linear-gradient(90deg, var(--pt-paper-2) 25%, #ece7dc 50%, var(--pt-paper-2) 75%); background-size: 200% 100%; animation: pt-shimmer 1.4s infinite; border-radius: var(--pt-radius); }
@keyframes pt-shimmer { to { background-position: -200% 0; } }

/* ---- reveal on scroll ---- */
.pt-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--pt-ease), transform .5s var(--pt-ease); }
.pt-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pt-reveal { opacity: 1; transform: none; transition: none; } * { animation: none !important; } }

/* ============================================================
   SIGNATURE PIECES — homepage hero, marquee, listing rail
   ============================================================ */

/* ---- cinematic hero ---- */
.pt-hero { position: relative; min-height: 92vh; display: flex; align-items: center; background: var(--pt-dark); color: var(--pt-dark-ink); overflow: hidden; }
.pt-hero-media { position: absolute; inset: 0; }
.pt-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 2.2s var(--pt-ease); animation: pt-kenburns 14s linear infinite; }
.pt-hero-media img.active { opacity: .48; }
@keyframes pt-kenburns { from { transform: scale(1.06) translateX(0); } to { transform: scale(1.14) translateX(-1.5%); } }
.pt-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,4,.55) 0%, rgba(8,6,4,.25) 45%, rgba(8,6,4,.82) 100%); }
.pt-hero-inner { position: relative; z-index: 2; width: 100%; padding: 140px 0 110px; }
.pt-hero h1 { font-size: var(--fs-hero); font-weight: 500; line-height: 1.05; max-width: 15ch; margin-bottom: var(--sp-5); }
.pt-hero .rotator { display: inline-block; font-style: italic; color: var(--pt-gold-2); position: relative; min-width: 6ch; }
.pt-hero .rotator::after { content: ""; position: absolute; left: 0; right: 12%; bottom: 4px; height: 1px; background: linear-gradient(90deg, var(--pt-gold-2), transparent); }
.pt-hero-sub { font-size: var(--fs-md); color: rgba(245,237,216,.75); max-width: 52ch; margin-bottom: var(--sp-6); }

/* ---- hero search panel ---- */
.pt-search-panel { display: grid; grid-template-columns: 1.2fr 1.2fr auto; gap: 10px; background: rgba(250,248,244,.97); border-radius: 14px; padding: 10px; max-width: 760px; box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.pt-search-panel .pt-input, .pt-search-panel .pt-select { border: none; background: transparent; color: var(--pt-ink); padding: 14px 16px; }
.pt-search-panel .pt-input:focus, .pt-search-panel .pt-select:focus { box-shadow: none; background: var(--pt-paper-2); border-radius: 8px; }
.pt-search-panel > div { border-right: 1px solid var(--pt-line); }
.pt-search-panel > div:nth-last-child(2) { border-right: none; }
@media (max-width: 720px) { .pt-search-panel { grid-template-columns: 1fr; } .pt-search-panel > div { border-right: none; border-bottom: 1px solid var(--pt-line); } }

/* ---- stats band ---- */
.pt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-6); text-align: center; }
.pt-stat-number { font-family: var(--pt-serif); font-size: var(--fs-4xl); font-weight: 500; color: var(--pt-gold); line-height: 1; }
.pt-stat-label { font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--pt-muted); margin-top: 10px; }

/* ---- serif marquee ---- */
.pt-marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--pt-line); border-bottom: 1px solid var(--pt-line); padding: 18px 0; }
.pt-marquee-track { display: inline-block; animation: pt-marquee 60s linear infinite; }
.pt-marquee span { font-family: var(--pt-serif); font-style: italic; font-weight: 380; font-size: var(--fs-xl); color: var(--pt-muted); margin: 0 34px; }
.pt-marquee span::after { content: "·"; color: var(--pt-gold); margin-left: 34px; font-style: normal; }
@keyframes pt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- collection tiles (category grid with reveal) ---- */
.pt-collections { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.pt-tile { position: relative; border-radius: var(--pt-radius-lg); overflow: hidden; grid-column: span 4; aspect-ratio: 4/3; display: block; }
.pt-tile--wide { grid-column: span 8; aspect-ratio: auto; }
.pt-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--pt-ease); }
.pt-tile:hover img { transform: scale(1.05); }
.pt-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,6,4,.78)); }
.pt-tile-label { position: absolute; z-index: 2; left: 22px; bottom: 18px; color: #fff; }
.pt-tile-label .t { font-family: var(--pt-serif); font-size: var(--fs-xl); font-weight: 600; display: block; }
.pt-tile-label .c { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--pt-gold-2); }
.pt-tile-arrow { position: absolute; z-index: 2; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; color: #fff; transition: all .3s var(--pt-ease); }
.pt-tile:hover .pt-tile-arrow { background: var(--pt-gold); border-color: var(--pt-gold); transform: translateX(3px); }
@media (max-width: 860px) { .pt-tile, .pt-tile--wide { grid-column: span 12; aspect-ratio: 16/9; } }

/* ---- listing layout ---- */
.pt-listing { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 900px) { .pt-listing { grid-template-columns: 1fr; } }
.pt-filter-rail { position: sticky; top: 92px; background: #fff; border: 1px solid var(--pt-line); border-radius: var(--pt-radius-lg); padding: var(--sp-5); }
.pt-filter-rail h3 { font-family: var(--pt-sans); font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.pt-listing-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.pt-pagination { display: flex; gap: 8px; justify-content: center; margin-top: var(--sp-7); flex-wrap: wrap; }
.pt-pagination a, .pt-pagination span { min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--pt-line); font-size: var(--fs-sm); font-weight: 600; padding: 0 10px; }
.pt-pagination a:hover { border-color: var(--pt-gold); color: var(--pt-gold); }
.pt-pagination .current { background: var(--pt-maroon); color: #fff; border-color: var(--pt-maroon); }

/* ---- section numerals (editorial) ---- */
.pt-numeral { font-family: var(--pt-serif); font-style: italic; font-size: var(--fs-lg); color: var(--pt-gold); }

/* ============================================================
   ART DIRECTION v2 — arches, the aisle, diptych, display type
   ============================================================ */

/* ---- the arch motif (signature) ---- */
.pt-arch { border-radius: 999px 999px 18px 18px; overflow: hidden; }
.pt-arch img { width: 100%; height: 100%; object-fit: cover; }

/* arch triptych — overlapping heights like a processional */
.pt-triptych { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(14px, 2.5vw, 30px); align-items: end; }
.pt-triptych .pt-arch { aspect-ratio: 3/4.4; position: relative; }
.pt-triptych .pt-arch:nth-child(2) { aspect-ratio: 3/5; }
.pt-triptych .pt-arch img { transition: transform 1.2s var(--pt-ease); }
.pt-triptych .pt-arch:hover img { transform: scale(1.05); }
.pt-triptych figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #fff; font-family: var(--pt-serif); font-style: italic; font-size: var(--fs-md); text-shadow: 0 1px 14px rgba(0,0,0,.55); }
@media (max-width: 720px) { .pt-triptych { grid-template-columns: 1fr 1fr; } .pt-triptych .pt-arch:nth-child(3) { display: none; } }

/* ---- outlined display type ---- */
.pt-display {
  font-family: var(--pt-serif); font-weight: 360; line-height: .92; font-optical-sizing: auto;
  font-size: clamp(56px, 10vw, 150px); letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px var(--pt-gold);
}
.pt-display .solid { color: var(--pt-ink); -webkit-text-stroke: 0; font-style: italic; }
.pt-section--dark .pt-display .solid { color: var(--pt-dark-ink); }

/* giant vertical watermark */
.pt-watermark { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: var(--pt-serif); font-size: clamp(80px, 12vh, 160px); letter-spacing: .28em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(176,141,79,.16); pointer-events: none; user-select: none; }

/* ---- the aisle: horizontal scroll gallery ---- */
.pt-aisle-wrap { position: relative; }
.pt-aisle { display: flex; gap: clamp(14px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 6px 22px; scrollbar-width: none; }
.pt-aisle::-webkit-scrollbar { display: none; }
.pt-aisle-item { flex: 0 0 min(340px, 78vw); scroll-snap-align: start; position: relative; display: block; }
.pt-aisle-item .pt-arch { aspect-ratio: 3/4; box-shadow: var(--pt-shadow-lg); }
.pt-aisle-item .pt-arch img { transition: transform .9s var(--pt-ease); }
.pt-aisle-item:hover .pt-arch img { transform: scale(1.06); }
.pt-aisle-meta { text-align: center; margin-top: 14px; }
.pt-aisle-meta .n { font-family: var(--pt-serif); font-size: var(--fs-lg); font-weight: 600; display: block; }
.pt-aisle-meta .m { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--pt-muted); }
.pt-aisle-nav { display: flex; gap: 10px; }
.pt-aisle-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--pt-line); background: #fff; cursor: pointer; font-size: 17px; transition: all .25s var(--pt-ease); }
.pt-aisle-nav button:hover { background: var(--pt-maroon); color: #fff; border-color: var(--pt-maroon); }

/* ---- diptych (split CTA) ---- */
.pt-diptych { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.pt-diptych-panel { position: relative; display: flex; align-items: flex-end; padding: clamp(28px, 4vw, 56px); color: #fff; overflow: hidden; transition: flex .5s var(--pt-ease); }
.pt-diptych-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--pt-ease); }
.pt-diptych-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,4,.14) 30%, rgba(8,6,4,.8)); transition: background .5s; }
.pt-diptych-panel:hover img { transform: scale(1.05); }
.pt-diptych-panel > div { position: relative; z-index: 2; max-width: 44ch; }
.pt-diptych-panel h3 { font-size: clamp(28px, 3.2vw, 44px); color: #fff; }
@media (max-width: 780px) { .pt-diptych { grid-template-columns: 1fr; } .pt-diptych-panel { min-height: 380px; } }

/* ---- gold hairline flourish ---- */
.pt-flourish { display: flex; align-items: center; gap: 18px; margin: 0 auto var(--sp-5); max-width: 420px; }
.pt-flourish::before, .pt-flourish::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--pt-gold)); }
.pt-flourish::after { background: linear-gradient(90deg, var(--pt-gold), transparent); }
.pt-flourish span { color: var(--pt-gold); font-size: 18px; }

/* listing head refinements (no counts) */
.pt-result-note { font-size: var(--fs-sm); color: var(--pt-muted); font-style: italic; font-family: var(--pt-serif); }

/* ============================================================
   HOME v3 — asymmetric editorial hero, index with cursor image
   ============================================================ */

/* ---- asymmetric ivory hero ---- */
.pt-hero3 { position: relative; min-height: calc(100vh - 72px); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center; max-width: var(--pt-max); margin: 0 auto; padding: clamp(24px, 4vw, 40px); overflow: visible; }
@media (max-width: 900px) { .pt-hero3 { grid-template-columns: 1fr; min-height: unset; padding-top: 48px; } }

.pt-hero3-type h1 { font-size: clamp(52px, 7.2vw, 106px); line-height: .96; font-weight: 380; margin: 0 0 var(--sp-6); letter-spacing: -.025em; font-optical-sizing: auto; }
.pt-hero3-type h1 .ln { display: block; }
.pt-hero3-type h1 .outline { color: transparent; -webkit-text-stroke: 1px var(--pt-ink); font-weight: 340; }
.pt-hero3-type h1 .italic { font-style: italic; color: var(--pt-gold); font-weight: 430; letter-spacing: -.01em; }
.pt-hero3-type h1 .indent { padding-left: clamp(30px, 6vw, 110px); }

/* sentence search */
.pt-sentence { font-family: var(--pt-serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 28px); line-height: 2.05; color: var(--pt-ink-2); max-width: 36ch; }
.pt-sentence .blank { display: inline-block; border: none; border-bottom: 1.5px solid var(--pt-gold); background: transparent; font: inherit; font-style: italic; color: var(--pt-ink); padding: 0 6px; min-width: 7ch; max-width: 12ch; }
.pt-sentence .blank:focus { outline: none; border-bottom-color: var(--pt-maroon); }
.pt-sentence select.blank { appearance: none; cursor: pointer; max-width: 16ch; }
.pt-sentence .go { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pt-maroon); color: #fff; border: none; cursor: pointer; font-size: 19px; vertical-align: middle; margin-left: 14px; transition: all .25s var(--pt-ease); }
.pt-sentence .go:hover { background: var(--pt-gold); transform: translateX(3px); }

/* hero imagery: tall arch + offset polaroid */
.pt-hero3-art { position: relative; height: min(78vh, 720px); }
.pt-hero3-art .arch-main { position: absolute; right: 0; top: 0; width: 78%; height: 100%; }
.pt-hero3-art .arch-main .pt-arch { width: 100%; height: 100%; box-shadow: var(--pt-shadow-lg); }
.pt-hero3-art .arch-main img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--pt-ease); }
.pt-hero3-art .arch-main img.active { opacity: 1; }
.pt-hero3-art .offset { position: absolute; left: 0; bottom: 6%; width: 42%; aspect-ratio: 4/5; background: #fff; padding: 10px 10px 38px; box-shadow: var(--pt-shadow-lg); transform: rotate(-4deg); }
.pt-hero3-art .offset img { width: 100%; height: 100%; object-fit: cover; }
.pt-hero3-art .offset figcaption { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--pt-serif); font-style: italic; font-size: 15px; color: var(--pt-muted); }
.pt-hero3-badge { position: absolute; right: -14px; top: -14px; z-index: 3; width: 110px; height: 110px; animation: pt-spin 22s linear infinite; }
@keyframes pt-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .pt-hero3-art { height: 62vw; } }

/* ---- editorial category index (cursor-follow preview) ---- */
.pt-index { border-top: 1px solid var(--pt-line); }
.pt-index-row { position: relative; display: flex; align-items: baseline; gap: clamp(16px, 3vw, 44px); padding: clamp(20px, 3vw, 34px) 0; border-bottom: 1px solid var(--pt-line); transition: padding-left .35s var(--pt-ease); }
.pt-index-row:hover { padding-left: clamp(10px, 2vw, 26px); }
.pt-index-row .no { font-family: var(--pt-serif); font-style: italic; color: var(--pt-gold); font-size: var(--fs-md); min-width: 44px; }
.pt-index-row .name { font-family: var(--pt-serif); font-size: clamp(30px, 4.6vw, 60px); font-weight: 360; line-height: 1; letter-spacing: -.02em; transition: color .3s, letter-spacing .4s var(--pt-ease); font-optical-sizing: auto; }
.pt-index-row:hover .name { color: var(--pt-gold); letter-spacing: .015em; }
.pt-index-row .hint { margin-left: auto; font-size: var(--fs-sm); color: var(--pt-muted); display: flex; align-items: center; gap: 10px; }
.pt-index-row .hint .arrow { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--pt-line); border-radius: 50%; transition: all .3s var(--pt-ease); }
.pt-index-row:hover .hint .arrow { background: var(--pt-maroon); color: #fff; border-color: var(--pt-maroon); transform: rotate(-45deg); }
#indexPreview { position: fixed; z-index: 70; width: 240px; aspect-ratio: 3/4; pointer-events: none; opacity: 0; transform: scale(.92) rotate(2deg); transition: opacity .25s var(--pt-ease), transform .35s var(--pt-ease); border-radius: 999px 999px 14px 14px; overflow: hidden; box-shadow: var(--pt-shadow-lg); }
#indexPreview.on { opacity: 1; transform: scale(1) rotate(0); }
#indexPreview img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { #indexPreview { display: none; } }

/* ---- dark aisle section ---- */
.pt-section--dark .pt-aisle-meta .n { color: var(--pt-dark-ink); }
.pt-section--dark .pt-aisle-meta .m { color: rgba(245,237,216,.55); }
.pt-section--dark .pt-aisle-nav button { background: transparent; color: var(--pt-dark-ink); border-color: rgba(245,237,216,.28); }
.pt-section--dark .pt-aisle-nav button:hover { background: var(--pt-gold); border-color: var(--pt-gold); }
.pt-section--dark .pt-eyebrow { color: var(--pt-gold-2); }

/* rotating badge text */
.pt-rotext { width: 100%; height: 100%; }
.pt-rotext text { font-family: var(--pt-sans); font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; fill: var(--pt-gold); }
@media (max-width: 640px) { .hide-s { display: none; } }

/* ============================================================
   SITE-WIDE ROLLOUT — mobile menu, listing/profile refinements
   ============================================================ */

/* ---- mobile menu ---- */
.pt-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--pt-line); border-radius: 50%; background: transparent; cursor: pointer; place-items: center; }
.pt-burger span { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.pt-burger span::before, .pt-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .3s; }
.pt-burger span::before { top: -6px; } .pt-burger span::after { top: 6px; }
@media (max-width: 900px) { .pt-burger { display: grid; } .pt-nav-cta { display: none; } }
.pt-mobile-menu[hidden] { display: none; }
.pt-mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--pt-paper); display: flex; flex-direction: column; padding: 24px; transform: translateY(-102%); transition: transform .45s var(--pt-ease); }
.pt-mobile-menu.open { transform: none; }
.pt-mobile-menu .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8vh; }
.pt-mobile-menu a.item { font-family: var(--pt-serif); font-optical-sizing: auto; font-weight: 380; font-size: clamp(32px, 9vw, 48px); padding: 12px 0; border-bottom: 1px solid var(--pt-line); display: flex; justify-content: space-between; align-items: center; }
.pt-mobile-menu a.item .no { font-size: 14px; font-style: italic; color: var(--pt-gold); }
.pt-mobile-menu .cta-row { margin-top: auto; display: grid; gap: 10px; }
.pt-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pt-line); background: none; font-size: 18px; cursor: pointer; }

/* ---- listing editorial header ---- */
.pt-listing-hero { padding: var(--sp-7) 0 var(--sp-5); }
.pt-listing-hero h1 { font-size: clamp(38px, 5.4vw, 72px); font-weight: 380; letter-spacing: -.02em; margin-bottom: 6px; }
.pt-listing-hero h1 .loc { font-style: italic; color: var(--pt-gold); font-weight: 400; }
.pt-listing-hero .sub { font-family: var(--pt-serif); font-style: italic; color: var(--pt-muted); font-size: var(--fs-md); }

/* ---- profile refinements ---- */
.pt-gallery { border-radius: 0; overflow: hidden; }
.pt-gallery--single > img:first-child { width: 100%; height: clamp(320px, 48vh, 480px); object-fit: cover; }
.pt-fact-value { overflow-wrap: anywhere; }
.pt-gallery > img:first-child, .pt-gallery--single > img:first-child { border-radius: 999px 999px 18px 18px; }
.pt-gallery-side img:first-child { border-radius: 0 18px 0 0; }
.pt-gallery-side img:last-child { border-radius: 0 0 18px 0; }
.pt-gallery > img, .pt-gallery-side img { overflow: hidden; }
.pt-profile-name { font-size: clamp(34px, 4.6vw, 60px); font-weight: 380; letter-spacing: -.02em; }

/* focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--pt-gold); outline-offset: 2px; }

/* ============================================================
   JOURNAL ARTICLES — light editorial re-skin of .art-* content
   ============================================================ */
.pt-article-hero { position: relative; height: clamp(380px, 52vw, 620px); overflow: hidden; border-radius: 0 0 var(--pt-radius-lg) var(--pt-radius-lg); }
.pt-article-hero img { width: 100%; height: 100%; object-fit: cover; }
.pt-article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,6,4,.82), rgba(8,6,4,.25) 55%, rgba(8,6,4,.1)); }
.pt-article-hero-body { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: clamp(28px, 5vw, 64px); max-width: 900px; margin: 0 auto; }
.pt-article-hero-body h1 { color: #fff; font-size: clamp(32px, 5vw, 62px); font-weight: 380; letter-spacing: -.02em; margin-bottom: 10px; }
.pt-article-hero-body h1 em { color: var(--pt-gold-2); font-style: italic; }
.pt-article-hero-body .art-meta { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.pt-article-hero-body .art-eyebrow { font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--pt-gold-2); font-weight: 600; margin-bottom: 12px; }

.art-body { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 24px); }
.art-body h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 420; margin: 2.4rem 0 1rem; }
.art-body h2 em { color: var(--pt-gold); font-style: italic; }
.art-body h3 { font-size: var(--fs-lg); color: var(--pt-gold); margin: 2rem 0 .75rem; font-weight: 500; }
.art-body p { font-size: var(--fs-md); color: var(--pt-ink-2); line-height: 1.85; margin-bottom: 1.25rem; }
.art-body p strong { color: var(--pt-ink); }
.art-body ul, .art-body ol { margin: 1rem 0 1.5rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.art-body ul li, .art-body ol li { color: var(--pt-ink-2); line-height: 1.75; padding-left: 1.6rem; position: relative; }
.art-body ul li::before { content: '—'; position: absolute; left: 0; color: var(--pt-gold); }
.art-body ol { counter-reset: c; }
.art-body ol li { counter-increment: c; padding-left: 2.2rem; }
.art-body ol li::before { content: counter(c); position: absolute; left: 0; color: var(--pt-gold); font-family: var(--pt-serif); font-size: 1.15rem; }
.art-body blockquote { border-left: 2px solid var(--pt-gold); padding: 1.25rem 1.75rem; margin: 2rem 0; background: rgba(176,141,79,.05); }
.art-body blockquote p { font-family: var(--pt-serif); font-size: var(--fs-lg); font-style: italic; color: var(--pt-ink); margin: 0; }
.art-body blockquote cite { display: block; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--pt-gold); margin-top: .75rem; font-style: normal; }
.art-divider { width: 48px; height: 1px; background: var(--pt-gold); margin: 2.5rem 0; }
.art-tip { background: rgba(176,141,79,.06); border: 1px solid var(--pt-line); border-radius: var(--pt-radius); padding: 1.5rem 1.75rem; margin: 2rem 0; }
.art-tip .tip-label { font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--pt-gold); font-weight: 600; margin-bottom: .6rem; }
.art-tip p { margin: 0; }
.art-img-full { margin: 2.5rem 0; }
.art-img-full img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--pt-radius-lg); }
.art-img-caption { font-size: var(--fs-xs); color: var(--pt-muted); margin-top: .6rem; letter-spacing: .06em; }
.pt-article-nav { border-top: 1px solid var(--pt-line); padding: var(--sp-5) 0; display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); }
.pt-article-nav a { color: var(--pt-ink-2); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; font-size: var(--fs-xs); }
.pt-article-nav a:hover { color: var(--pt-gold); }