/* Demo shell only. Not pasted into Squarespace.
   Light paper, warm night, the sheet stays paper in both. */

body { margin: 0; }
#siteWrapper { min-height: 100vh; display: flex; flex-direction: column; }
#siteWrapper > .demo-wrap,
#siteWrapper > .ph-home,
#siteWrapper > #ph-mount { flex: 1 0 auto; }
.header { position: sticky; top: 0; z-index: 40; }
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}
.header-nav { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; }
#site-title { color: #1A1A1A; }

.ph-shop { position: relative; }
.ph-shop-btn {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1A1A1A;
  cursor: pointer;
}
.header-nav-item--active .ph-shop-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: #1A1A1A;
}
.ph-shop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 220px;
  background: #FFFCF6;
  border: 1px solid #C4BDB3;
  padding: 8px 0;
  z-index: 50;
}
.ph-shop.is-open .ph-shop-menu,
.ph-shop:focus-within .ph-shop-menu { display: block; }
@media (hover: hover) and (pointer: fine) {
  .ph-shop:hover .ph-shop-menu { display: block; }
}
.ph-shop-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #1A1A1A !important;
}
.ph-shop-menu a:hover { color: #0072A8 !important; }

.ph-theme, .ph-menu-btn {
  background: transparent;
  border: 0;
  color: #1A1A1A;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.ph-theme { min-height: 40px; padding: 0 2px; }
.ph-menu-btn { display: none; min-height: 44px; padding: 0 0 0 12px; }
.ph-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  background: #0072A8;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ph-nav-cta:hover { background: #005A85; }
.ph-nav-cta:active { transform: translateY(1px); }

.ph-drawer[hidden] { display: none !important; }
.ph-drawer {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: #F6F3EC;
  display: flex;
  flex-direction: column;
  padding: 88px 24px 28px;
  overflow: auto;
  box-sizing: border-box;
}
.ph-drawer a {
  color: #1A1A1A;
  text-decoration: none;
  font-size: 18px;
  padding: 8px 0;
}
.ph-drawer-label {
  margin: 18px 0 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0072A8;
}
.ph-drawer-families { display: flex; flex-direction: column; }
.ph-drawer-families a { font-size: 16px; color: #1A1A1A; }
.ph-drawer .ph-theme { align-self: flex-start; margin-top: 12px; padding-left: 0; }
.ph-drawer .ph-nav-cta { margin-top: 20px; min-height: 48px; }

.ph-home { position: relative; background: #F6F3EC; }
.ph-home canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#ph-mount { position: relative; z-index: 1; }
.ph-cta-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin: 22px 16px 0;
}
.ph-cta-pair .ph-cta { margin: 0; }
.ph-textlink {
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid #1A1A1A;
  line-height: 1.2;
  padding-bottom: 1px;
}
.ph-textlink:hover { color: #0072A8; border-bottom-color: #0072A8; }

.demo-wrap { max-width: 1440px; margin: 0 auto; padding: 28px 32px 80px; box-sizing: border-box; }
.demo-wrap h1 { margin: 0; font-size: 42px; font-weight: 500; letter-spacing: -0.02em; }
.demo-lede { max-width: 62ch; margin: 12px 0 0; }
.demo-prose p { max-width: 62ch; margin: 16px 0 0; }
.demo-prose a { color: #0072A8; }
.demo-faq { max-width: 68ch; margin: 8px 0 0; }
.demo-faq dt { margin: 22px 0 0; font-weight: 500; }
.demo-faq dd { margin: 6px 0 0; color: #5C656C; }
.demo-family { margin-top: 36px; scroll-margin-top: 88px; }
.demo-family h2 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid #C4BDB3;
  padding-bottom: 8px;
}
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.demo-card {
  display: flex;
  flex-direction: column;
  background: #FFFCF6;
  border: 1px solid #C4BDB3;
  color: #1A1A1A;
  text-decoration: none;
  overflow: hidden;
}
.demo-photo { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #FFFCF6; }
.demo-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.demo-card:hover .demo-photo img { transform: scale(1.04); }
.demo-card b { font-weight: 500; font-size: 16px; letter-spacing: 0; padding: 14px 16px 0; }
.demo-action {
  margin-top: 10px;
  padding: 0 16px 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0072A8;
}
.demo-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 28px;
  flex-wrap: wrap;
  border-top: 1px solid #C4BDB3;
  margin: 0;
  padding: 18px 32px 28px;
  color: #5C656C;
  font-size: 13px;
}
.demo-foot p { margin: 0; }
.demo-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.demo-foot a { color: inherit; text-decoration: none; }
.demo-foot a:hover { color: #1A1A1A; }
#ph-anchor-size, #ph-anchor-ink, #ph-anchor-fold, #ph-anchor-extras { scroll-margin-top: 88px; }

@media (min-width: 1280px) {
  .ph-home {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(980px, 1100px) minmax(120px, 1fr);
    max-width: 1440px;
    margin: 0 auto;
  }
  #ph-mount { grid-column: 2; grid-row: 1; }
  .ph-home canvas { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 1279px) {
  .ph-home { padding-top: 88px; }
  .ph-home canvas { inset: auto; top: 0; left: 0; right: 0; height: 88px; width: 100%; }
}
@media (max-width: 800px) {
  .demo-grid { grid-template-columns: 1fr 1fr; }
  .demo-wrap h1 { font-size: 28px; }
}
@media (max-width: 767px) {
  .header-inner { height: 60px; padding: 0 16px; }
  .header-nav { display: none; }
  .ph-menu-btn { display: inline-flex; align-items: center; }
  .demo-foot, .demo-wrap { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 520px) {
  .demo-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-photo img, .ph-nav-cta { transition: none; }
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #siteWrapper { background: #161311 !important; color: #F3EEE4; }
html[data-theme="dark"] .header { background: #161311 !important; border-bottom-color: #3A342C; }
html[data-theme="dark"] #site-title,
html[data-theme="dark"] .header-nav-item a,
html[data-theme="dark"] .ph-shop-btn,
html[data-theme="dark"] .ph-theme,
html[data-theme="dark"] .ph-menu-btn { color: #F3EEE4 !important; }
html[data-theme="dark"] .header-nav-item--active a::after,
html[data-theme="dark"] .header-nav-item--active .ph-shop-btn::after { background: #F3EEE4; }
html[data-theme="dark"] .ph-nav-cta { background: #3AA0D8; color: #161311 !important; }
html[data-theme="dark"] .ph-nav-cta:hover { background: #7EC4EA; }
html[data-theme="dark"] .ph-shop-menu { background: #1C1916; border-color: #3A342C; }
html[data-theme="dark"] .ph-shop-menu a { color: #F3EEE4 !important; }
html[data-theme="dark"] .ph-shop-menu a:hover { color: #7EC4EA !important; }
html[data-theme="dark"] .ph-drawer { background: #161311; }
html[data-theme="dark"] .ph-drawer a,
html[data-theme="dark"] .ph-drawer-families a { color: #F3EEE4; }
html[data-theme="dark"] .ph-drawer-label { color: #3AA0D8; }
html[data-theme="dark"] .ph-home { background: #161311; }
html[data-theme="dark"] .ph-year { background: transparent !important; color: #F3EEE4; }
html[data-theme="dark"] .ph-year .ph-sheet { color: #1A1A1A; background: #FFFCF6; }
html[data-theme="dark"] .ph-year-num,
html[data-theme="dark"] .ph-lede { color: #F3EEE4; }
html[data-theme="dark"] .ph-kicker { color: #3AA0D8; }
html[data-theme="dark"] .ph-year-range,
html[data-theme="dark"] .ph-open,
html[data-theme="dark"] .ph-legend { color: #B7A99A !important; }
html[data-theme="dark"] .ph-read { background: #3A342C; }
html[data-theme="dark"] .ph-read-bar { background: #F3EEE4; }
html[data-theme="dark"] .ph-cta { background: #3AA0D8 !important; color: #161311 !important; }
html[data-theme="dark"] .ph-cta:hover { background: #7EC4EA !important; }
html[data-theme="dark"] .ph-textlink { color: #F3EEE4; border-bottom-color: #B7A99A; }
html[data-theme="dark"] .ph-textlink:hover { color: #7EC4EA; border-bottom-color: #7EC4EA; }
html[data-theme="dark"] .demo-wrap h1,
html[data-theme="dark"] .demo-family h2,
html[data-theme="dark"] .demo-lede,
html[data-theme="dark"] .demo-prose p,
html[data-theme="dark"] .demo-faq dt { color: #F3EEE4; }
html[data-theme="dark"] .demo-family h2,
html[data-theme="dark"] .demo-foot { border-color: #3A342C; }
html[data-theme="dark"] footer.demo-foot { background: #161311 !important; border-top-color: #3A342C; }
html[data-theme="dark"] .demo-faq dd,
html[data-theme="dark"] .demo-foot { color: #B7A99A; }
html[data-theme="dark"] .demo-foot a:hover,
html[data-theme="dark"] .demo-prose a { color: #7EC4EA; }
html[data-theme="dark"] .demo-card { background: #FFFCF6; color: #1A1A1A; border-color: #3A342C; }
html[data-theme="dark"] .demo-action { color: #0072A8; }
html[data-theme="dark"] .ph-pdp { background: #161311; color: #F3EEE4; }
html[data-theme="dark"] .ph-pdp .ph-title,
html[data-theme="dark"] .ph-pdp .ph-sec .ph-sec-label,
html[data-theme="dark"] .ph-pdp .ph-size-label,
html[data-theme="dark"] .ph-pdp .ph-ink-line,
html[data-theme="dark"] .ph-pdp .ph-post { color: #F3EEE4; }
html[data-theme="dark"] .ph-pdp .ph-kicker,
html[data-theme="dark"] .ph-pdp .ph-sec span:first-child { color: #3AA0D8; }
html[data-theme="dark"] .ph-pdp .ph-steps { background: #3A342C; border-color: #3A342C; }
html[data-theme="dark"] .ph-pdp .ph-steps button { background: #161311; color: #F3EEE4; }
html[data-theme="dark"] .ph-pdp .ph-steps button:hover { background: #241F1A; }
html[data-theme="dark"] .ph-pdp .ph-steps button.is-on,
html[data-theme="dark"] .ph-pdp .ph-steps button.is-on:hover { background: #3AA0D8; color: #161311; }
html[data-theme="dark"] .ph-pdp .ph-sec { border-bottom-color: #3A342C; }
html[data-theme="dark"] .ph-pdp .ph-pill,
html[data-theme="dark"] .ph-pdp .ph-fold,
html[data-theme="dark"] .ph-pdp .ph-qty button { color: #F3EEE4; border-color: #3A342C; background: transparent; }
html[data-theme="dark"] .ph-pdp .ph-pill[aria-pressed="true"] { border-color: #3AA0D8; color: #7EC4EA; }
html[data-theme="dark"] .ph-pdp .ph-fold[aria-pressed="true"] { border-color: #3AA0D8; }
html[data-theme="dark"] .ph-pdp .ph-fold[aria-pressed="true"] .ph-fold-name { color: #7EC4EA; }
html[data-theme="dark"] .ph-pdp .ph-muted,
html[data-theme="dark"] .ph-pdp .ph-note,
html[data-theme="dark"] .ph-pdp .ph-fold-desc,
html[data-theme="dark"] .ph-pdp .ph-a4row span,
html[data-theme="dark"] .ph-pdp .ph-crease span { color: #B7A99A; }
html[data-theme="dark"] .ph-pdp .ph-measure i { background: #F3EEE4; }
html[data-theme="dark"] .ph-pdp .ph-slip {
  background: #FFFCF6;
  color: #1A1A1A;
  border-color: #F3EEE4;
}
html[data-theme="dark"] .ph-pdp .ph-slip .ph-slip-kicker { color: #0072A8; }
html[data-theme="dark"] .ph-pdp .ph-slip .ph-slip-foot { color: #5C656C; }
html[data-theme="dark"] .ph-pdp .ph-add { background: #3AA0D8; color: #161311; }
html[data-theme="dark"] .ph-pdp .ph-add:hover { background: #7EC4EA; }
html[data-theme="dark"] :focus-visible { outline-color: #F3EEE4; }