/* featherScroll homepage v2: homepage opening, lead story, "Three ways in" cabinet, editorial feed. */
:root {
  --gold: #e8c97a;
  --cream: #f5f0e8;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* ===== Homepage opening (fresh visits and refreshes) ===== */
.fs-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--cream);
  cursor: default;
  touch-action: none;
}
.fs-booting .fs-intro,
.fs-intro.fs-intro-out:not([hidden]) {
  display: flex;
}
.fs-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #10231b;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}
.fs-half-t {
  top: 0;
}
.fs-half-b {
  bottom: 0;
}
.fs-intro-inner {
  position: relative;
  z-index: 2;
  transition:
    opacity 0.25s ease,
    transform 0.5s ease;
}
.fs-stage {
  position: relative;
  width: 320px;
  height: 120px;
  margin: 0 auto -6px;
  max-width: 92vw;
}
.fs-ink {
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fs-draw 0.8s 0.1s cubic-bezier(0.5, 0, 0.25, 1) forwards;
}
.fs-ink-2 {
  stroke-width: 1.2;
  opacity: 0.6;
  animation-delay: 0.65s;
  animation-duration: 0.35s;
}
.fs-quill {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  color: #f3dfa0;
  opacity: 0;
  offset-path: path("M16 84C60 112 96 40 148 70S236 104 304 50");
  offset-anchor: 6px 29px;
  offset-rotate: 0deg;
  animation:
    fs-quill 0.8s 0.1s cubic-bezier(0.5, 0, 0.25, 1) forwards,
    fs-quill-off 0.25s 0.95s forwards;
}
@supports not (offset-path: path("M0 0")) {
  .fs-quill {
    display: none;
  }
}
.fs-intro-brand {
  display: block;
  font:
    600 2.3rem/1.1 "Cormorant Garamond",
    Georgia,
    serif;
  letter-spacing: 0.02em;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  animation: fs-wipe 0.65s 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.fs-intro-brand span {
  color: var(--gold);
}
.fs-intro-sub {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a9bfae;
  animation: fs-fade 0.35s 0.75s both;
}
.fs-seam {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  opacity: 0;
}
.fs-intro-out .fs-half-t {
  transform: translateY(-101%);
  transition-delay: 0.15s;
}
.fs-intro-out .fs-half-b {
  transform: translateY(101%);
  transition-delay: 0.15s;
}
.fs-intro-out .fs-intro-inner {
  opacity: 0;
  transform: scale(1.03);
}
.fs-intro-out .fs-seam {
  animation: fs-seam 0.7s 0.1s ease-out forwards;
}
@keyframes fs-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fs-quill {
  0% {
    opacity: 1;
    offset-distance: 0%;
  }
  100% {
    opacity: 1;
    offset-distance: 100%;
  }
}
@keyframes fs-quill-off {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes fs-wipe {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
@keyframes fs-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fs-seam {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  30% {
    opacity: 1;
    transform: scaleX(1);
  }
  75% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

/* ===== Hero: title is "written" in, then the rest follows ===== */
.home-hero {
  padding-top: 14px;
}
.home-hero-title {
  position: relative;
  padding-bottom: 14px;
}
.home-hero-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 84px;
  height: 2px;
  margin-left: -42px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform-origin: center;
}
html:not(.fs-booting) .home-hero-title {
  animation: ink-in 0.8s 0.05s cubic-bezier(0.4, 0, 0.2, 1) both;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;
}
html:not(.fs-booting) .home-hero-title::after {
  animation: grow-x 0.5s 0.55s var(--ease) both;
}
html:not(.fs-booting) .home-hero-label {
  animation: rise 0.45s var(--ease) both;
}
html:not(.fs-booting) .home-hero-sub {
  animation: rise 0.5s 0.2s var(--ease) both;
}
html:not(.fs-booting) .home-welcome-card {
  animation: rise 0.5s 0.3s var(--ease) both;
}
@keyframes ink-in {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== Section headings ===== */
.home-feed-main {
  gap: 1.7rem;
}
.home-feed-heading h2 {
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 600;
  color: var(--cream);
}
.home-feed-heading h2::before {
  content: "✦";
  display: inline-block;
  margin-right: 0.55rem;
  font-size: 0.7em;
  font-style: normal;
  color: var(--gold);
  vertical-align: 0.12em;
}
.home-feed-heading::after {
  display: block;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #f5f0e824, transparent);
}
.home-feed-heading .home-date {
  order: 3;
}

/* ===== Lead story: a 16:10 delivery crop matched to its display frame ===== */
.home-feed-featured {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #0b1a12;
  box-shadow:
    0 34px 50px -34px #000,
    0 0 0 1px #ffffff12;
}
.home-feed-featured-overlay {
  display: none;
}
.home-feed-featured-img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.home-feed-featured-body {
  position: static;
  min-height: 0;
  margin: 0;
  padding: 1.1rem 1.25rem 1.35rem;
  gap: 0.7rem;
  justify-content: flex-start;
}
.home-feed-tag {
  box-shadow: 0 6px 18px -6px #000a;
}
.home-feed-featured-title {
  font-size: clamp(1.75rem, 7.6vw, 2.4rem);
  line-height: 1.07;
  font-weight: 700;
  max-width: none;
  letter-spacing: -0.005em;
}
.home-feed-featured-teaser {
  font-size: 0.88rem;
  max-width: 46ch;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.home-feed-featured-meta {
  align-self: flex-start;
  margin-top: 0.2rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--gold);
  border-radius: 99px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  transition:
    background 0.25s,
    color 0.25s;
}
.home-feed-featured:hover .home-feed-featured-meta,
.home-feed-featured:focus-visible .home-feed-featured-meta {
  background: var(--gold);
  color: #10241b;
}
html:not(.fs-booting) .home-feed-featured-title {
  animation: rise 0.9s 0.2s var(--ease) both;
}
html:not(.fs-booting) .home-feed-featured-teaser {
  animation: rise 0.9s 0.4s var(--ease) both;
}
html:not(.fs-booting) .home-feed-featured-meta {
  animation: rise 0.9s 0.55s var(--ease) both;
}
/* larger screens: poster with the headline over the lower part of the delivered 16:10 photo */
@media (min-width: 760px) {
  .home-feed-featured {
    display: block;
    position: relative;
    aspect-ratio: 16/10;
  }
  .home-feed-featured-img,
  .home-feed-featured-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  .home-feed-featured-overlay {
    display: block;
    background: linear-gradient(
      0deg,
      #07130dfa 0%,
      #0a1a11d0 28%,
      #08150e40 56%,
      #08150e10 100%
    );
  }
  .home-feed-featured-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.9rem 1.8rem;
    z-index: 1;
  }
  .home-feed-featured-title {
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    max-width: 19ch;
    text-shadow: 0 2px 18px #0008;
  }
  .home-feed-featured-teaser {
    font-size: 0.95rem;
  }
}

/* ===== Three ways in: one "object" per series ===== */
.cab {
  margin-top: 0.6rem;
}
.cab-row {
  list-style: none;
  display: flex;
  gap: 1.2rem;
  margin: 0.4rem calc(50% - 50vw) 0;
  padding: 1.7rem calc(50vw - 50%) 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cab-row::-webkit-scrollbar {
  display: none;
}
.cab-item {
  flex: 0 0 74%;
  max-width: 330px;
  scroll-snap-align: center;
}
.cab-obj {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  height: 100%;
  color: var(--cream);
  text-decoration: none;
}
.cab-stage {
  position: relative;
  display: block;
  transition:
    transform 0.45s var(--ease),
    filter 0.3s;
}
.cab-photo {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.cab-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cab-badge {
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  left: 0.55rem;
  padding: 0.22rem 0.45rem;
  font:
    700 0.52rem/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.15em;
}
.cab-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 0.2rem;
}
.cab-name {
  font:
    700 1.75rem/1.05 "Cormorant Garamond",
    Georgia,
    serif;
}
.cab-line {
  font-size: 0.8rem;
  color: #b9cbbd;
}
.cab-latest {
  margin-top: 0.5rem;
  font:
    600 0.95rem/1.3 "Cormorant Garamond",
    Georgia,
    serif;
  color: #e9e4d8;
  display: block;
}
.cab-latest-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cab-latest small {
  display: block;
  margin-bottom: 0.15rem;
  font:
    700 0.58rem/1 "DM Sans",
    sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.cab-cta {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.cab-cta span {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.cab-obj:hover .cab-cta span,
.cab-obj:focus-visible .cab-cta span {
  transform: translateX(6px);
}

/* Wild Tales: taped photograph */
.cab-wild .cab-stage {
  padding: 0.5rem 0.5rem 0.9rem;
  background: linear-gradient(180deg, #f0e2d4, #e6d3c2);
  border-radius: 2px;
  transform: rotate(-2.4deg);
  box-shadow:
    0 18px 24px -14px #000d,
    0 2px 3px #0006;
}
.cab-wild .cab-stage::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -11px;
  left: 50%;
  width: 58px;
  height: 20px;
  margin-left: -29px;
  transform: rotate(-3deg);
  opacity: 0.9;
  background: linear-gradient(90deg, #e0707fcc, #e98a96cc 50%, #e0707fcc);
  clip-path: polygon(
    0 8%,
    4% 0,
    8% 10%,
    12% 0,
    16% 8%,
    84% 8%,
    88% 0,
    92% 10%,
    96% 0,
    100% 8%,
    100% 92%,
    96% 100%,
    92% 90%,
    88% 100%,
    84% 92%,
    16% 92%,
    12% 100%,
    8% 90%,
    4% 100%,
    0 92%
  );
}
.cab-wild .cab-img {
  filter: sepia(0.6) contrast(1.06) brightness(0.94);
  transition: filter 0.4s;
}
.cab-wild .cab-badge {
  color: #f5e9dc;
  background: #2a1519d9;
  border-radius: 2px;
}
.cab-wild:hover .cab-stage,
.cab-wild:focus-visible .cab-stage {
  transform: rotate(0) translateY(-6px);
}
.cab-wild:hover .cab-img {
  filter: sepia(0.05);
}

/* Did You Know?: blueprint plate with a scanning line */
.cab-know .cab-stage {
  padding: 0.5rem;
  border: 1px solid #7aa2ff66;
  border-radius: 3px;
  background-color: #0a1834;
  background-image:
    linear-gradient(#7aa2ff1c 1px, transparent 1px),
    linear-gradient(90deg, #7aa2ff1c 1px, transparent 1px);
  background-size: 14px 14px;
  box-shadow:
    inset 0 0 0 4px #0a1834,
    inset 0 0 0 5px #7aa2ff40,
    0 18px 24px -16px #000d;
}
.cab-know .cab-stage::after {
  content: "";
  display: block;
  height: 7px;
  margin: 0.5rem -0.5rem 0;
  background:
    repeating-linear-gradient(90deg, #7aa2ff99 0 1px, transparent 1px 8px) 0
      100%/100% 4px no-repeat,
    repeating-linear-gradient(90deg, #7aa2ffcc 0 1px, transparent 1px 40px) 0
      100%/100% 7px no-repeat;
}
.cab-know .cab-photo {
  border: 1px solid #7aa2ff66;
}
.cab-know .cab-photo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #9bb9ff55 50%, transparent);
  transform: translateY(-100%);
  animation: scan 3.8s linear infinite;
  animation-play-state: paused;
}
.cab-know .cab-photo.is-visible-effect::after {
  animation-play-state: running;
}
.cab-know .cab-badge {
  color: #a9c1ff;
  background: #0a1834e6;
  border: 1px solid #7aa2ff80;
}
.cab-know:hover .cab-stage,
.cab-know:focus-visible .cab-stage {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 4px #0a1834,
    inset 0 0 0 5px #9bb9ff80,
    0 0 0 1px #7aa2ff55,
    0 20px 30px -14px #3a6bffaa;
}
@keyframes scan {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(350%);
  }
}

/* On This Day: tear-off calendar leaf */
.cab-day .cab-stage {
  padding: 0.5rem 0.5rem 0;
  background: #f3ecdc;
  border-radius: 6px;
  transform: rotate(1.6deg);
  box-shadow:
    0 2px 0 #cfc5ac,
    0 5px 0 #0f2018,
    0 6px 0 #cfc5ac,
    0 20px 24px -16px #000d;
}
.cab-day .cab-img {
  border-radius: 3px;
}
.cab-leaf {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.5rem -0.5rem 0;
  padding: 0.65rem 0.9rem 0.6rem;
  color: var(--cream);
  background: #0e7a63;
  transform-origin: 50% 0;
  transition: transform 0.5s var(--ease);
  -webkit-mask: radial-gradient(circle 4px at 8px 0, #0000 98%, #000) 0 0/16px
    100% repeat-x;
  mask: radial-gradient(circle 4px at 8px 0, #0000 98%, #000) 0 0/16px 100%
    repeat-x;
  border-radius: 0 0 5px 5px;
}
.cab-leaf b {
  font:
    700 2.4rem/0.9 "Cormorant Garamond",
    Georgia,
    serif;
}
.cab-leaf i {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 500;
}
.cab-day:hover .cab-stage,
.cab-day:focus-visible .cab-stage {
  transform: rotate(0) translateY(-6px);
}
.cab-day:hover .cab-leaf {
  animation: flip 0.7s var(--ease);
}
@keyframes flip {
  0% {
    transform: perspective(500px) rotateX(0);
  }
  35% {
    transform: perspective(500px) rotateX(-22deg);
  }
  100% {
    transform: perspective(500px) rotateX(0);
  }
}

.cab-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: -0.2rem;
  padding: 0 0.2rem;
}
.cab-hint-text {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: #b9cbbd;
}
.cab-dots {
  display: flex;
  margin-left: auto;
  flex: none;
}
.cab-dots button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
}
.cab-dots button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.cab-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #f5f0e836;
  transition:
    width 0.25s var(--ease),
    background 0.25s;
}
.cab-dots button.on .cab-dot {
  width: 22px;
  background: var(--gold);
}
@media (min-width: 760px) {
  .cab-hint {
    display: none;
  }
}
@media (min-width: 760px) {
  .cab-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin: 0.4rem 0 0;
    padding: 1.7rem 0 1rem;
    overflow: visible;
  }
  .cab-item {
    max-width: none;
  }
  .cab-item:nth-child(2) {
    margin-top: 1.6rem;
  }
}

/* ===== Latest stories: editorial, no boxes ===== */
.home-feed-list {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
  counter-reset: story;
}
.home-feed-list .home-feed-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  counter-increment: story;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.home-feed-item:nth-child(1),
.home-feed-item:last-child:nth-child(even) {
  grid-column: 1/-1;
}
.home-feed-list .home-feed-item-img,
.home-feed-list .home-feed-item-img-empty {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 4/3;
  border-radius: 14px;
  transition: transform 0.3s var(--ease);
}
.home-feed-list .home-feed-item:nth-child(1) .home-feed-item-img,
.home-feed-list .home-feed-item:last-child:nth-child(even) .home-feed-item-img {
  aspect-ratio: 16/10;
}
.home-feed-item::before {
  content: counter(story, decimal-leading-zero);
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  left: 0.75rem;
  font:
    700 2.1rem/1 "Cormorant Garamond",
    Georgia,
    serif;
  color: var(--cream);
  text-shadow: 0 2px 14px #000c;
  pointer-events: none;
}
.home-feed-item:hover .home-feed-item-img {
  transform: scale(1.025);
}
.home-feed-list .home-feed-item-body {
  padding: 0.85rem 0.1rem 0;
  gap: 0.4rem;
}
.home-feed-item-tag {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
.home-feed-item-title {
  font-size: 1.18rem;
  line-height: 1.22;
}
.home-feed-item:nth-child(1) .home-feed-item-title,
.home-feed-item:last-child:nth-child(even) .home-feed-item-title {
  font-size: 1.7rem;
  line-height: 1.14;
}
.home-feed-item-date {
  margin-top: 0.15rem;
}

/* larger screens: wide stories read as photo + text side by side, so they don't repeat the lead's size */
@media (min-width: 760px) {
  .home-feed-list .home-feed-item:nth-child(1),
  .home-feed-list .home-feed-item:last-child:nth-child(even) {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
  }
  .home-feed-list .home-feed-item:nth-child(1) .home-feed-item-body,
  .home-feed-list
    .home-feed-item:last-child:nth-child(even)
    .home-feed-item-body {
    padding: 0;
    gap: 0.6rem;
  }
  .home-feed-list .home-feed-item:nth-child(1) .home-feed-item-title,
  .home-feed-list
    .home-feed-item:last-child:nth-child(even)
    .home-feed-item-title {
    font-size: 1.9rem;
  }
}

/* ===== Discover more: quiet list ===== */
.home-sidebar-item {
  padding: 0.8rem 0;
  border: 0;
  border-bottom: 1px solid #f5f0e81c;
  border-radius: 0;
  background: none;
}
.home-sidebar-item:hover {
  transform: none;
  background: none;
}
.home-sidebar-item:hover .home-sidebar-item-title {
  color: var(--gold);
}
.home-sidebar-item .home-sidebar-item-img {
  width: 84px;
  height: 63px;
  border-radius: 8px;
  object-fit: cover;
}

/* ===== Scroll reveals (only when JS confirms it can reveal) ===== */
.reveal-on .home-feed-item,
.reveal-on .cab-item,
.reveal-on .home-feed-heading,
.reveal-on .home-sidebar-item {
  transition:
    opacity 0.45s var(--ease),
    transform 0.5s var(--ease);
}
.reveal-on .home-feed-item:not(.in-view),
.reveal-on .cab-item:not(.in-view),
.reveal-on .home-feed-heading:not(.in-view),
.reveal-on .home-sidebar-item:not(.in-view) {
  opacity: 0;
  transform: translateY(14px);
}

/* ===== Cabinet artwork: one drawn picture per series (replaces latest-story photos) ===== */
.cab-art {
  display: block;
  width: 100%;
  height: 100%;
}
.cab-photo {
  background: #0a1834;
}
.cab-wild .cab-photo {
  background: #e2cca8;
}
.cab-day .cab-photo {
  background: #f1e8d2;
}
.cab-art text {
  font-family: "Cormorant Garamond", Georgia, serif;
}
.cab-art-wild .a-q {
  font-size: 46px;
  font-weight: 700;
  font-style: italic;
  fill: #b3262f;
}
.cab-art-know .a-dim text,
.cab-art-know .a-dim {
  font:
    600 11px "DM Sans",
    sans-serif;
  letter-spacing: 0.08em;
}
.cab-art-know .a-eq {
  font-size: 17px;
  font-style: italic;
}
.cab-art-day .a-years text {
  font-size: 21px;
  font-style: italic;
  font-weight: 600;
}
.cab-art-wild .a-pin,
.cab-art-wild .a-seal,
.cab-art-know .a-spin,
.cab-art-day .a-sweep,
.cab-art-day .a-flip {
  transform-box: fill-box;
  transform-origin: center;
}
.cab-art-know .a-spin {
  transform-box: view-box;
  transform-origin: 200px 150px;
}
.cab-art-day .a-sweep,
.cab-art-day .a-flip {
  transform-box: view-box;
  transform-origin: 200px 150px;
}

/* motion: only while the card is on screen and motion is allowed (home-ui.js adds .is-visible-effect) */
.cab-photo.is-visible-effect .a-string {
  stroke-dasharray: 1;
  animation: art-draw 1.6s 0.15s cubic-bezier(0.5, 0, 0.25, 1) both;
}
.cab-photo.is-visible-effect .a-route {
  animation: art-march 2.4s linear infinite;
}
.cab-photo.is-visible-effect .a-pin {
  animation: art-pin 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.cab-photo.is-visible-effect .a-pin:nth-child(2) {
  animation-delay: 0.5s;
}
.cab-photo.is-visible-effect .a-pin:nth-child(3) {
  animation-delay: 1s;
}
.cab-photo.is-visible-effect .a-seal {
  animation: art-pulse 3.2s ease-in-out infinite;
}
.cab-photo.is-visible-effect .a-x {
  animation: art-pulse 2.4s ease-in-out infinite;
}
.cab-photo.is-visible-effect .a-bulb {
  stroke-dasharray: 1;
  animation: art-draw 1.4s 0.1s cubic-bezier(0.5, 0, 0.25, 1) both;
}
.cab-photo.is-visible-effect .a-glow {
  animation: art-glow 3.4s ease-in-out infinite;
}
.cab-photo.is-visible-effect .a-fil {
  animation: art-fil 3.4s ease-in-out infinite;
}
.cab-photo.is-visible-effect .a-ray {
  animation: art-ray 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}
.cab-photo.is-visible-effect .a-spin {
  animation: art-spin 14s linear infinite;
}
.cab-photo.is-visible-effect .a-sweep {
  animation: art-spin 24s linear infinite;
}
.cab-photo.is-visible-effect .a-flip {
  animation: art-flip 9s ease-in-out infinite;
}
.cab-photo.is-visible-effect .a-sand-top {
  animation: art-top 9s linear infinite;
}
.cab-photo.is-visible-effect .a-sand-bot {
  animation: art-bot 9s linear infinite;
}
.cab-photo.is-visible-effect .a-stream {
  animation:
    art-stream 0.5s linear infinite,
    art-stream-vis 9s linear infinite;
}
@keyframes art-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes art-march {
  to {
    stroke-dashoffset: -20;
  }
}
@keyframes art-pin {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(1.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes art-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}
@keyframes art-glow {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes art-fil {
  0%,
  100% {
    stroke: #bcd0ff;
  }
  50% {
    stroke: #fff;
  }
}
@keyframes art-ray {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}
@keyframes art-spin {
  to {
    transform: rotate(360deg);
  }
}
/* hourglass: drains for ~7s, flips, repeats (the end state flipped equals the start state) */
@keyframes art-flip {
  0%,
  78% {
    transform: rotate(0);
  }
  92%,
  100% {
    transform: rotate(180deg);
  }
}
@keyframes art-top {
  0% {
    transform: translateY(0);
  }
  78%,
  100% {
    transform: translateY(58px);
  }
}
@keyframes art-bot {
  0% {
    transform: translateY(74px);
  }
  78%,
  100% {
    transform: translateY(0);
  }
}
@keyframes art-stream {
  to {
    stroke-dashoffset: -14;
  }
}
@keyframes art-stream-vis {
  0%,
  76% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}
/* resting state (reduced motion / before effects start): top bulb full, bottom empty */
.cab-art-day .a-sand-bot {
  transform: translateY(74px);
}
.cab-art-day .a-stream {
  opacity: 0.9;
}

/* ===== Welcome: no box, just type, and a pen circles the word ===== */
#home-welcome {
  min-height: 110px;
}
#home-welcome .pi-welcome {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 5px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
#home-welcome .pi-welcome-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--gold);
}
#home-welcome .pi-welcome-label::before,
#home-welcome .pi-welcome-label::after {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e8c97a99);
}
#home-welcome .pi-welcome-label::after {
  transform: scaleX(-1);
}
#home-welcome .pi-welcome-heading {
  font:
    600 clamp(1.55rem, 6.4vw, 2.1rem)/1.15 "Cormorant Garamond",
    Georgia,
    serif;
  color: var(--cream);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#home-welcome .pw-word {
  position: relative;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0.24em;
  margin: 0 -0.12em 0 -0.04em;
  font-style: italic;
  color: var(--gold);
}
#home-welcome #home-welcome-name {
  color: var(--gold);
  font-weight: 600;
  overflow-wrap: anywhere;
}
#home-welcome .pw-loop {
  position: absolute;
  left: -4%;
  top: -12%;
  width: 108%;
  height: 124%;
  overflow: visible;
  pointer-events: none;
}
#home-welcome .pw-loop path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}
#home-welcome .pi-welcome-sub {
  font:
    italic 500 1rem/1.3 "Cormorant Garamond",
    Georgia,
    serif;
  color: #b9ccbd;
}
/* one-time entrance: label fades in, the heading rises, then the pen draws the loop */
html:not(.fs-booting) #home-welcome .pi-welcome-label {
  animation: rise 0.6s 0.35s var(--ease) both;
}
html:not(.fs-booting) #home-welcome .pi-welcome-heading {
  animation: rise 0.7s 0.5s var(--ease) both;
}
html:not(.fs-booting) #home-welcome .pi-welcome-sub {
  animation: rise 0.7s 0.7s var(--ease) both;
}
html:not(.fs-booting) #home-welcome .pw-loop path {
  animation: pw-draw 0.9s 1.05s cubic-bezier(0.5, 0, 0.25, 1) both;
}
@keyframes pw-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ===== Ambient: falling quill feathers + fireflies (transform/opacity only, a handful of elements) ===== */
#feather-canvas {
  z-index: 0;
}
.fs-fall {
  position: absolute;
  top: -6vh;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 2);
  animation: fs-fall var(--dur) linear var(--delay) infinite;
}
.fs-feather {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40' fill='none' stroke='%23e8c97a' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M10 2C2 10 2 26 10 38 18 26 18 10 10 2Z' fill='%23e8c97a' fill-opacity='.2'/%3E%3Cpath d='M10 4V39M10 12 5 16M10 18 4.5 23M10 24 5.5 30M10 12l5 4m-5 2 5.5 5m-5.5 1 4.5 6'/%3E%3C/svg%3E")
    center/contain no-repeat;
  animation: fs-sway calc(var(--dur) / 5) ease-in-out var(--delay) infinite
    alternate;
}
.fs-feather.is-cream {
  opacity: 0.38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40' fill='none' stroke='%23f5f0e8' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M10 2C2 10 2 26 10 38 18 26 18 10 10 2Z' fill='%23f5f0e8' fill-opacity='.16'/%3E%3Cpath d='M10 4V39M10 12 5 16M10 18 4.5 23M10 24 5.5 30M10 12l5 4m-5 2 5.5 5m-5.5 1 4.5 6'/%3E%3C/svg%3E");
}
.fs-mote {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0.15;
  background: radial-gradient(circle, #fff6cf 0, #e8c97acc 32%, #e8c97a00 70%);
  animation:
    fs-drift var(--dur) ease-in-out var(--delay) infinite alternate,
    fs-twinkle calc(var(--dur) / 3.5) ease-in-out var(--delay) infinite;
}
@keyframes fs-fall {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 114vh, 0);
  }
}
@keyframes fs-sway {
  from {
    transform: translateX(calc(var(--sway) * -1)) rotate(-26deg);
  }
  to {
    transform: translateX(var(--sway)) rotate(22deg);
  }
}
@keyframes fs-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--dx), var(--dy), 0);
  }
}
@keyframes fs-twinkle {
  0%,
  100% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.8;
  }
}
@media (max-width: 1279px) {
  .fs-feather {
    opacity: 0.34;
  }
  .fs-feather.is-cream {
    opacity: 0.26;
  }
}
/* Pause without resetting animation progress; release layer hints while idle. */
#feather-canvas:not(.fs-ambient-running) .fs-fall,
#feather-canvas:not(.fs-ambient-running) .fs-feather,
#feather-canvas:not(.fs-ambient-running) .fs-mote,
html.fs-booting #feather-canvas .fs-fall,
html.fs-booting #feather-canvas .fs-feather,
html.fs-booting #feather-canvas .fs-mote {
  animation-play-state: paused;
}

/* ===== Calm mode ===== */
@media (prefers-reduced-motion: reduce) {
  .fs-intro {
    display: none !important;
  }
  #home-welcome .pi-welcome-label,
  #home-welcome .pi-welcome-heading,
  #home-welcome .pi-welcome-sub {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  #home-welcome .pw-loop path {
    animation: none !important;
    stroke-dashoffset: 0;
  }
  .home-hero-title {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .cab-row {
    scroll-behavior: auto;
  }
  .cab-stage,
  .cab-leaf,
  .cab-dot,
  .home-feed-item-img {
    transition: none !important;
  }
  html:not(.fs-booting) .home-hero-title,
  html:not(.fs-booting) .home-hero-title::after,
  html:not(.fs-booting) .home-hero-label,
  html:not(.fs-booting) .home-hero-sub,
  html:not(.fs-booting) .home-welcome-card,
  html:not(.fs-booting) .home-feed-featured-title,
  html:not(.fs-booting) .home-feed-featured-teaser,
  html:not(.fs-booting) .home-feed-featured-meta,
  .home-feed-featured-img,
  .cab-know .cab-photo::after,
  .cab-day:hover .cab-leaf {
    animation: none !important;
  }
  .reveal-on .home-feed-item,
  .reveal-on .cab-item,
  .reveal-on .home-feed-heading,
  .reveal-on .home-sidebar-item {
    transition: none;
  }
  .reveal-on .home-feed-item:not(.in-view),
  .reveal-on .cab-item:not(.in-view),
  .reveal-on .home-feed-heading:not(.in-view),
  .reveal-on .home-sidebar-item:not(.in-view) {
    opacity: 1;
    transform: none;
  }
  .reveal-on .home-feed-item:not(.in-view) .home-feed-item-img {
    clip-path: none;
  }
}