/* WordPress and inner-page additions. Homepage look stays in patekprep.css. */

:root {
  --sans: "DM Sans", "DM Sans Fallback", Arial, sans-serif;
  --serif: "DM Serif Display", "DM Serif Display Fallback", Georgia, serif;
}

@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 94.9001%;
  descent-override: 29.6563%;
  line-gap-override: 0%;
  size-adjust: 104.531%;
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 450;
  font-style: normal;
  font-display: swap;
  ascent-override: 94.9001%;
  descent-override: 29.6563%;
  line-gap-override: 0%;
  size-adjust: 104.531%;
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 93.2984%;
  descent-override: 29.1557%;
  line-gap-override: 0%;
  size-adjust: 106.3255%;
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 550;
  font-style: normal;
  font-display: swap;
  ascent-override: 93.2984%;
  descent-override: 29.1557%;
  line-gap-override: 0%;
  size-adjust: 106.3255%;
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  ascent-override: 98.1733%;
  descent-override: 30.6792%;
  line-gap-override: 0%;
  size-adjust: 101.0458%;
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 650;
  font-style: normal;
  font-display: swap;
  ascent-override: 98.1733%;
  descent-override: 30.6792%;
  line-gap-override: 0%;
  size-adjust: 101.0458%;
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 96.5802%;
  descent-override: 30.1813%;
  line-gap-override: 0%;
  size-adjust: 102.7125%;
}
@font-face {
  font-family: "DM Serif Display Fallback";
  src: local("Georgia");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 103.5537%;
  descent-override: 33.485%;
  line-gap-override: 0%;
  size-adjust: 100.0447%;
}
@font-face {
  font-family: "DM Serif Display Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  ascent-override: 109.0174%;
  descent-override: 35.2518%;
  line-gap-override: 0%;
  size-adjust: 95.0307%;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--orange);
  color: #102b3a;
  padding: 10px 16px;
  font-weight: 650;
}
.skip-link:focus { top: 16px; }

.admin-bar .site-header { top: 0; }
body.admin-bar { scroll-padding-top: 122px; }

.site-header nav a.current-menu-item,
.site-header nav a.is-current {
  color: #ff9c71;
}

.article-dek {
  max-width: 720px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 22px;
}

.article-heading .article-meta time {
  color: var(--muted);
}

.article-feature {
  width: min(calc(100% - 48px), 1050px);
  margin: 42px auto 0;
}

.article-feature img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.article-tags a {
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 650;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 8px 14px;
  color: var(--muted);
}

.article-tags a:hover {
  color: var(--orange-dark);
  border-color: var(--orange-dark);
}

.writing-pagination {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 0 0 80px;
  font-weight: 600;
}

.writing-pagination a,
.writing-pagination span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.writing-pagination a:hover { color: var(--orange-dark); }

.pp-post-nav {
  width: min(calc(100% - 48px), 1050px);
  margin: 20px auto 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.pp-post-nav__item {
  position: relative;
  display: grid;
  grid-template-columns: 118px 1fr;
  min-height: 168px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .3s ease;
}

.pp-post-nav__item.is-next { grid-template-columns: 1fr 118px; }

.pp-post-nav__item:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 50px rgba(16, 43, 58, .14);
  border-color: #c9b5a6;
}

.pp-post-nav__media {
  position: relative;
  overflow: hidden;
  background: var(--navy);
}

.pp-post-nav__item.is-next .pp-post-nav__media { order: 2; }

.pp-post-nav__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.pp-post-nav__item:hover .pp-post-nav__media img { transform: scale(1.16); }

.pp-post-nav__placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(160deg, #1c3a48 0%, #102b3a 55%, #bb4820 140%);
}

.pp-post-nav__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 26px 28px;
  min-width: 0;
}

.pp-post-nav__item.is-next .pp-post-nav__copy { text-align: right; align-items: flex-end; }

.pp-post-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 650;
  color: var(--orange-dark);
}

.pp-post-nav__arrow {
  display: inline-flex;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.pp-post-nav__item.is-prev:hover .pp-post-nav__arrow { transform: translateX(-7px); }
.pp-post-nav__item.is-next:hover .pp-post-nav__arrow { transform: translateX(7px); }

.pp-post-nav__copy h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  max-width: 18ch;
}

.pp-post-nav__item:hover h2 { color: var(--orange-dark); }

.pp-post-nav__empty {
  border: 1px dashed var(--line);
  min-height: 168px;
  display: flex;
  align-items: center;
  padding: 28px;
  color: var(--muted);
  font-size: 14px;
}

.pp-post-nav__empty.is-next { justify-content: flex-end; text-align: right; }

.search-form {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  max-width: 520px;
}

.search-form input[type="search"] {
  flex: 1;
  min-height: 52px;
  border: 1px solid var(--line);
  padding: 0 16px;
  background: white;
}

.alignwide, .alignfull { max-width: 100%; }
.wp-block-image img { height: auto; }

@media (max-width: 800px) {
  .pp-post-nav { grid-template-columns: 1fr; }
  .pp-post-nav__item,
  .pp-post-nav__item.is-next { grid-template-columns: 96px 1fr; }
  .pp-post-nav__item.is-next .pp-post-nav__media { order: 0; }
  .pp-post-nav__item.is-next .pp-post-nav__copy { text-align: left; align-items: flex-start; }
  .article-dek { font-size: 18px; }
  .article-feature { width: calc(100% - 40px); margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-post-nav__item,
  .pp-post-nav__media img,
  .pp-post-nav__arrow,
  .back-to-top { transition: none; }
  .pp-post-nav__item:hover { transform: none; }
  .back-to-top:hover { transform: none; }
}

.back-to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 40;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(16, 43, 58, .88);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 14px 40px rgba(16, 43, 58, .28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.96);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s, background .2s ease, border-color .2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.back-to-top .ui-icon {
  width: 20px;
  height: 20px;
}

.back-to-top:hover {
  background: var(--orange);
  border-color: transparent;
  transform: translateY(-3px);
}

.back-to-top:active {
  transform: translateY(-1px) scale(.98);
}

@media (max-width: 700px) {
  .back-to-top {
    width: 48px;
    height: 48px;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media print {
  .back-to-top { display: none; }
}

html.js-reveal .pp-reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1),
    transform .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--pp-delay, 0ms);
}

html.js-reveal .pp-reveal-left { transform: translate3d(-40px, 0, 0); }
html.js-reveal .pp-reveal-right { transform: translate3d(40px, 12px, 0); }
html.js-reveal .pp-reveal-in { transform: translate3d(0, 24px, 0) scale(.97); }

html.js-reveal .pp-reveal.is-in {
  opacity: 1;
  transform: none;
}

html.js-reveal .hero-figure.pp-reveal .portrait-media img {
  transform: scale(1.06);
  transition: transform 1.35s cubic-bezier(.22, 1, .36, 1);
}
html.js-reveal .hero-figure.pp-reveal.is-in .portrait-media img {
  transform: none;
}

html.js-reveal .remaining-points > * {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
html.js-reveal .pp-reveal.is-in .remaining-points > *:nth-child(1) { transform: none; transition-delay: .15s; }
html.js-reveal .pp-reveal.is-in .remaining-points > *:nth-child(2) { transform: none; transition-delay: .28s; }
html.js-reveal .pp-reveal.is-in .remaining-points > *:nth-child(3) { transform: none; transition-delay: .41s; }
html.js-reveal .pp-reveal.is-in .remaining-points > *:nth-child(4) { transform: none; transition-delay: .54s; }
html.js-reveal .pp-reveal.is-in .remaining-points > *:nth-child(5) { transform: none; transition-delay: .67s; }

@media (max-width: 700px) {
  html.js-reveal .pp-reveal-left,
  html.js-reveal .pp-reveal-right {
    transform: translate3d(0, 28px, 0);
  }
}