/* The Projects page: one wide card per project, built from the home page's arch cards.
   Same card colours, arch photo frame, grey "type · length" line, Instrument Serif title,
   "Step inside →" link, cursor glow and colour-on-hover photo. */
:root { --card-3: #F6DCE1; }

.page-projects .section.projects { padding-top: clamp(96px, 12vw, 140px); padding-bottom: 200px; }
.page-projects .section-head { text-align: center; }

.rows {
  position: relative;
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  max-width: var(--max);
  margin: 0 auto;
}

.row-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease), box-shadow 0.4s;
}
.row-card:hover,
.row-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.row-card.is-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.row-card.is-flip > :first-child { order: 2; }

.row-thumb {
  position: relative;
  aspect-ratio: 10 / 9;
  overflow: hidden;
  border-radius: 50% 50% 20px 20px / 55.6% 55.6% 20px 20px;
  background: var(--surface);
}
.row-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.row-card:hover .row-thumb img { transform: scale(1.04); }

.row-body { position: relative; padding: 24px 32px 24px 8px; }
.row-card.is-flip .row-body { padding: 24px 8px 24px 32px; }
.row-num {
  display: block;
  margin: 0 0 2px;
  font-family: var(--font-script);
  font-size: 44px;
  line-height: 1;
  color: var(--kicker);
}
.row-card h2 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-size: calc(clamp(26px, 2.6vw, 32px) * var(--head-scale, 1));
  font-weight: var(--head-weight, 400);
  line-height: 1.1;
  color: var(--ink);
}
.row-body p:not(.meta) { max-width: 46ch; margin: 0 0 18px; font-size: 16.5px; }
.row-card .arch-link span { display: inline-block; transition: transform 0.3s; }
.row-card:hover .arch-link span { transform: translateX(5px); }

/* Phones: photo on top, words underneath */
@media (max-width: 720px) {
  .row-card,
  .row-card.is-flip { grid-template-columns: 1fr; gap: 6px; }
  .row-card.is-flip > :first-child { order: 0; }
  .row-body,
  .row-card.is-flip .row-body { padding: 14px 12px 12px; }
}

/* ---------- A project's own page: "coming soon" ---------- */
.project-soon {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding-top: 100px;
  padding-bottom: 170px;
}
.soon-card {
  width: min(100%, 520px);
  padding: 12px 12px 34px;
  border: 1px solid var(--line);
  border-radius: 260px 260px 30px 30px;
  background: var(--card);
  text-align: center;
  box-shadow: var(--shadow);
}
.soon-thumb {
  aspect-ratio: 10 / 8;
  overflow: hidden;
  margin-bottom: 26px;
  border-radius: 50% 50% 20px 20px / 62.5% 62.5% 20px 20px;
}
.soon-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.soon-card .section-title { padding: 0 20px; font-size: calc(clamp(28px, 3vw, 36px) * var(--head-scale, 1)); }
.soon-card .meta { margin: 10px 0 0; }
.soon-line { margin: 18px 0 22px; }
.soon-line span { font-family: var(--font-script); font-size: 40px; line-height: 0.6; color: var(--kicker); }

/* ---------- Idea 4 · Gate and pup ----------
   The garden gate frame from idea 3. The gates swing open by themselves once 85% of the
   card is on screen and close again when it scrolls away. Once they're open, hovering
   the card brings the pup up from the photo's bottom outer corner, as in idea 1. */
.idea-gatepup .row:nth-child(odd) { margin-right: clamp(0px, 6vw, 80px); }
.idea-gatepup .row:nth-child(even) { margin-left: clamp(0px, 6vw, 80px); }

/* The stone arch: cream blocks fanning out from the bottom middle */
.gate {
  position: relative;
  padding: 12px 12px 0;
  border-radius: 50% 50% 22px 22px / 52% 52% 22px 22px;
  background:
    repeating-conic-gradient(from -90deg at 50% 100%, #F1E7D6 0deg 8.4deg, #DDCDB2 8.4deg 9deg);
  box-shadow: inset 0 0 0 1px #D9C9AD, 0 4px 0 #E2D3B5;
}
.gate .row-thumb { perspective: 900px; border-radius: 50% 50% 14px 14px / 55.6% 55.6% 14px 14px; }

.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background:
    linear-gradient(180deg, transparent 0 26%, #5E7A55 26% 29%, transparent 29% 74%, #5E7A55 74% 77%, transparent 77%),
    repeating-linear-gradient(90deg, #87A27C 0 26px, #7A9570 26px 28px);
  box-shadow: inset 0 0 0 4px #6F8A66;
  backface-visibility: hidden;
  transition: transform 1.1s var(--ease);
}
.door.l { left: 0; transform-origin: 0 50%; }
.door.r { right: 0; transform-origin: 100% 50%; }
/* The ring handles meet in the middle */
.door i {
  position: absolute;
  top: 54%;
  width: 16px;
  height: 16px;
  border: 3px solid #EFE3C8;
  border-radius: 50%;
}
.door.l i { right: 10px; }
.door.r i { left: 10px; }

/* Open: when the card is in view (or reached with the keyboard) */
.row-card.is-open .door.l,
.row-card:focus-visible .door.l { transform: rotateY(-108deg); }
.row-card.is-open .door.r,
.row-card:focus-visible .door.r { transform: rotateY(108deg); }
.row-card.is-open .thumb img,
.row-card:focus-visible .thumb img { filter: none; }

/* Ivy over the outer shoulder of the arch */
.ivy {
  position: absolute;
  top: 4%;
  left: -14px;
  width: 38%;
  pointer-events: none;
  transform: rotate(-8deg);
}
.is-flip .ivy { left: auto; right: -14px; transform: scaleX(-1) rotate(-8deg); }

/* The pup, peeking up from the photo's bottom outer corner (in front of the open gates) */
.peek {
  position: absolute;
  bottom: -6px;
  left: 18px;
  z-index: 2;
  width: clamp(72px, 9vw, 104px);
  aspect-ratio: 520 / 700;
  transform: translateY(105%) rotate(-6deg);
  transform-origin: 50% 100%;
  transition: transform 0.6s 0.05s var(--ease);
  pointer-events: none;
}
.is-flip .peek { left: auto; right: 18px; transform: translateY(105%) rotate(6deg); }
/* p6: no hover. The pup is out on the card that sits fully in view (is-pup, set in
   projects.js), once its gates are open. Hover only lifts the card with its pink glow. */
/* p7: back to hover (and keyboard focus) once the gates are open; touch screens use is-pup */
.row-card.is-open:hover .peek,
.row-card.is-open:focus-visible .peek,
.row-card.is-open.is-pup .peek { transform: translateY(38%) rotate(-6deg); }
.row-card.is-flip.is-open:hover .peek,
.row-card.is-flip.is-open:focus-visible .peek,
.row-card.is-flip.is-open.is-pup .peek { transform: translateY(38%) rotate(6deg); }
.peek svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Peeking, not walking: only the blink, ears and tail move */
.peek .bp .upper, .peek .bp .head, .peek .bp .foot, .peek .bp .hand { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .door, .peek { transition: none; }
}
@media (max-width: 720px) {
  .idea-gatepup .row:nth-child(n) { margin: 0; }
}

/* Smaller everything (she asked for smaller cards): about 80% of the first size */
/* More room between cards, and a stronger zig-zag: each card floats further to its side.
   The row is wider by the same amount, so the cards themselves stay 860 px. */
.idea-gatepup .rows { max-width: 1200px; gap: clamp(56px, 8vw, 96px); }
.idea-gatepup .row:nth-child(odd) { margin-right: clamp(0px, 26vw, 340px); }
.idea-gatepup .row:nth-child(even) { margin-left: clamp(0px, 26vw, 340px); }
.idea-gatepup .row-card { gap: clamp(18px, 3vw, 40px); padding: 10px; border-radius: 24px; }
.idea-gatepup .gate { padding: 9px 9px 0; }
.idea-gatepup .row-body { padding: 18px 24px 18px 6px; }
.idea-gatepup .row-card.is-flip .row-body { padding: 18px 6px 18px 24px; }
.idea-gatepup .row-num { font-size: 36px; }
.idea-gatepup .row-card h2 { margin-bottom: 8px; font-size: calc(clamp(21px, 2.1vw, 25px) * var(--head-scale, 1)); }
.idea-gatepup .row-body p:not(.meta) { margin-bottom: 14px; font-size: 14.5px; }
.idea-gatepup .meta { font-size: 12px; }
.idea-gatepup .arch-link { font-size: 13px; }
.idea-gatepup .door {
  background:
    linear-gradient(180deg, transparent 0 26%, #5E7A55 26% 29%, transparent 29% 74%, #5E7A55 74% 77%, transparent 77%),
    repeating-linear-gradient(90deg, #87A27C 0 21px, #7A9570 21px 22.5px);
  box-shadow: inset 0 0 0 3px #6F8A66;
}
.idea-gatepup .door i { width: 13px; height: 13px; border-width: 2.5px; }
.idea-gatepup .peek { width: clamp(58px, 7vw, 82px); }
@media (max-width: 720px) {
  .idea-gatepup .row:nth-child(n) { margin: 0; }
  .idea-gatepup .row-body,
  .idea-gatepup .row-card.is-flip .row-body { padding: 12px 10px 10px; }
}

/* The page title: more room around it, and "Projects" in the Italianno script like "Jocelyn" */
/* No padding on top: the title starts just under the status bar */
.idea-gatepup.page-projects .section.projects { padding-top: 150px; }
.idea-gatepup .section-head { margin-bottom: clamp(64px, 9vw, 112px); }
.idea-gatepup .section-head .kicker { margin-bottom: 4px; }
.idea-gatepup .section-head .section-title {
  font-family: var(--font-script);
  font-size: clamp(76px, 10vw, 120px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
}

/* The opening fade now lives in shared/fade.css (used on every page) */

/* No "no. 1/2/3" numbers. The "type · length" line takes their pink instead */
.idea-gatepup .row-card .meta { color: var(--kicker); font-weight: 500; }

/* Title idea G (from p5): a faint embossed orchid behind the title, and a one-line subtitle */
.idea-gatepup .section-head { position: relative; isolation: isolate; }
.idea-gatepup .t-orchid {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 300px;
  translate: -50% -52%;
  opacity: 0.6;
  pointer-events: none;
}
.idea-gatepup .t-sub {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-size: clamp(19px, 2vw, 23px);
  font-style: italic;
  color: var(--text);
}

/* Paw-print trail: the unseen pup walks down the page as you scroll, through the empty
   side beside the title and each card, to each card's gate. Only the newest 4 prints
   show: the front one solid, each older one fainter (opacity is set in projects.js). */
.idea-gatepup .rows { position: relative; }
.idea-gatepup .row { position: relative; z-index: 1; }
.paw-trails { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.paw-print {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  color: #93694A;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.paw-print svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .paw-print { transition: none; }
}
@media (max-width: 720px) {
  .paw-trails { display: none; }
}

/* Vine idea V13 (from p5): ivy on the card's outer top corner and inner bottom corner.
   The old single sprig on each gate is gone. */
.card-vine { position: absolute; inset: 0; z-index: 4; overflow: visible; pointer-events: none; }

/* p7 · Paw prints that follow the mouse. The layer sits on the page (so prints stay where
   they were left when you scroll) underneath the cards, title and dock. */
.cursor-paws { position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; pointer-events: none; }
.idea-gatepup .app { position: relative; z-index: 1; }