/* Simply Lane 2 preview: warm editorial, layered over the approved layout. */
:root {
  --cream: #F6F1E7;
  --linen: #EDE5D5;
  --olive: #505E37;
  --gold: #946A2A;
  --ink: var(--olive);
  --soft: var(--olive);
  --card: var(--cream);
  --line: color-mix(in srgb, var(--olive) 22%, transparent);
  --gold-line: color-mix(in srgb, var(--gold) 35%, transparent);
  --shadow-soft: color-mix(in srgb, var(--olive) 12%, transparent);
  --shadow-deep: color-mix(in srgb, var(--olive) 19%, transparent);
}
body { color: var(--olive); }
h1, h2, h3, .col-nm, .pc-nm, .tile-nm, .fcard .n, .pv-name { color: var(--olive); }
::selection { background: var(--linen); color: var(--olive); }
:where(a, button):focus-visible { outline: 2px solid var(--olive); outline-offset: 5px; }
.top { border-bottom-color: var(--gold-line); }
.nav a:hover, .hero-links a { color: var(--olive); }
.btn { background: var(--olive); color: var(--cream); }
.btn:hover { background: var(--olive); box-shadow: inset 0 0 0 1px var(--gold); }
.btn.line { color: var(--olive); box-shadow: inset 0 0 0 1px var(--olive); }
.btn.line:hover { background: var(--linen); color: var(--olive); }

/* Static wash is the default; canvas is an optional, faint layer. */
.hero3 {
  isolation: isolate;
  background: radial-gradient(ellipse at 88% 24%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 64%),
    radial-gradient(ellipse at 15% 80%, color-mix(in srgb, var(--olive) 8%, transparent), transparent 60%), var(--cream);
}
.hero3 .aurora { display: none; }
.hero3::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cream) 76%, transparent), transparent 74%);
}
.hero3-in { z-index: 2; }
.hero3-copy h1 { max-width: 11ch; font-size: clamp(46px, 5.7vw, 84px); line-height: 1.06; letter-spacing: -.025em; }
.hero3-copy h1 em { margin-top: .12em; color: var(--gold); }
.hero3-copy .sub { line-height: 1.65; }
.hero3-copy .kicker { line-height: 1.6; }
.hero-links a { text-decoration-color: var(--gold); text-underline-offset: 4px; }
.lane-shader {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  z-index: 0; pointer-events: none; opacity: .12;
}
.dcard { border: 1px solid var(--gold-line); border-radius: 2px; box-shadow: 0 24px 50px var(--shadow-deep), 0 2px 8px var(--shadow-soft); }
.dcard .cap b { color: var(--olive); }
.deck-nav { border-color: var(--gold-line); color: var(--olive); }
.deck-nav:hover { background: var(--linen); color: var(--olive); border-color: var(--olive); }
.badge text { fill: var(--olive); }
.badge svg { animation-duration: 50s; }

.ticker {
  background: var(--linen); color: var(--olive); border-block: 1px solid var(--gold-line);
  padding: 19px 0;
}
.ticker-track { animation-duration: 70s; }
.ticker-track span { font-size: clamp(22px, 2.3vw, 30px); gap: 44px; padding-inline: 22px; }
.ticker-track span::after { color: var(--gold); }

/* An editorial index: quiet numbers, generous names, fine ruled rows. */
.cols { background: var(--cream); }
.cols .head { padding-bottom: 16px; margin-bottom: 18px; }
.cols .head p { max-width: 28ch; font-size: 14px; }
.col-list { border-top: 1px solid var(--gold-line); }
.col-list li { border-bottom: 1px solid var(--gold-line); }
.col-row {
  grid-template-columns: 62px minmax(0, 1fr) minmax(170px, 24%);
  padding: clamp(28px, 3.7vw, 46px) 12px;
  transition: background .25s;
}
.col-row::before {
  content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; width: 2px;
  background: var(--gold); opacity: 0; transition: opacity .25s;
}
.col-row:hover, .col-row:focus-visible { background: var(--linen); }
.col-row:hover::before, .col-row:focus-visible::before { opacity: 1; }
.col-no { color: var(--olive); font-family: var(--body); font-size: 11px; letter-spacing: .12em; }
.col-nm { font-size: clamp(36px, 4.6vw, 68px); line-height: 1.1; letter-spacing: -.025em; }
.col-meta { gap: 10px; padding-left: 12px; }
.col-bl { font-size: 14px; line-height: 1.5; }
.col-n { color: var(--olive); font-size: 10px; letter-spacing: .13em; }
.col-row:hover .col-nm, .col-row:focus-visible .col-nm { color: var(--olive); transform: translateX(8px); }
.col-float { border: 1px solid var(--gold-line); border-radius: 2px; box-shadow: 0 24px 50px var(--shadow-deep); }
.col-float img, .col-th img, .dcard img, .pc-ph img, .pv-gal > img, .about-art img { object-fit: contain; }
.cursor { background: var(--olive); color: var(--cream); border: 1px solid var(--gold); }

#new { padding-top: clamp(44px, 6vw, 78px); }
.pc-ph, .tile, .fcard { border-color: var(--gold-line); border-radius: 2px; }
.pc-tx { padding-top: 17px; gap: 5px; }
.pc-nm { font-size: clamp(20px, 1.8vw, 24px); }
.made { background: var(--linen); color: var(--olive); border-block: 1px solid var(--gold-line); }
.made .wrap { gap: 34px; }
.made h3, .made p, .made .kicker { color: var(--olive); }
.made h3 { font-size: 28px; margin-top: 15px; }
.made .rv { border-top: 1px solid var(--gold-line); padding-top: 22px; }
.about { background: var(--cream); border-block-color: var(--gold-line); }
.about .pull { color: var(--olive); line-height: 1.35; }
.about-art figure { border: 1px solid var(--gold-line); border-radius: 2px; box-shadow: 0 18px 36px var(--shadow-soft); }
.fcard { background: var(--linen); padding: 30px; }
.fcard:hover { border-color: var(--olive); }
.fcard .go { color: var(--olive); }
.chips button[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); }

@media (min-width: 861px) { .cols .head h2.t { font-size: clamp(36px, 3.8vw, 49px); } }
@media (max-width: 860px) {
  .hero3-copy h1 { max-width: 15ch; }
  .hero3 { padding-top: 36px; }
  .hero3-in { gap: 56px; }
  .col-row { grid-template-columns: minmax(0, 1fr) 92px; gap: 10px 14px; padding: 25px 8px; }
  .col-nm { font-size: clamp(32px, 5.5vw, 44px); }
  .col-meta { padding-left: 0; }
  .col-th { border: 1px solid var(--gold-line); border-radius: 2px; box-shadow: 0 8px 18px var(--shadow-soft); }
  .cols .head { padding-bottom: 8px; }
}
@media (max-width: 700px) { .lane-shader { display: none; } }
@media (max-width: 560px) {
  .hero3-copy h1 { font-size: clamp(42px, 11.5vw, 60px); }
  .hero3-copy .cta { gap: 10px; margin-top: 24px; }
  .ticker { padding: 15px 0; }
  .col-row { grid-template-columns: minmax(0, 1fr) 78px; padding-block: 24px; }
  .col-nm { font-size: 32px; }
  .col-n { font-size: 9.5px; letter-spacing: .09em; }
  .pc-nm { font-size: 19px; }
  .made .wrap { gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .lane-shader { display: none; }
  .badge svg, .ticker-track { animation: none; }
  .col-row, .col-nm, .col-row::before { transition: none; }
  .col-row:hover .col-nm, .col-row:focus-visible .col-nm { transform: none; }
}

/* Scroll stays native; the sticky header does not sample/reblur moving content. */
html { scroll-behavior: auto; }
.top { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lane-reveal { transform: translateY(6px); transition: transform .45s ease-out, background .25s; }
.lane-reveal.lane-visible { transform: none; }
@media (max-width: 700px) {
  .ticker-track, .badge svg { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lane-reveal, .js .rv, .js .rv.in, .dcard, .dcard.out,
  .pc:hover, .tile:hover, .btn:hover, .fcard:hover { transform: none !important; }
  .js .rv { opacity: 1; }
  .col-float { scale: 1; rotate: none !important; }
  .dcard, .col-float, .cursor, .col-row, .col-nm, .pc, .tile, .btn, .fcard,
  .deck-nav, .words .wd, .js .rv, .lane-reveal { transition: none !important; }
  .badge svg, .ticker-track, .river .track { animation: none !important; }
}

/* Preserve the credit, with readable small-label contrast. */
.pzft-footer .rkft-mark{opacity:1}
.pzft-footer .rkft-made{color:#505E37!important;opacity:1!important}


/* Collection portraits: warm oval mats, whole photographs, no white cards. */
.col-float {
  width: 320px; height: 382px; margin: -191px 0 0 -160px;
  padding: 0; display: grid; place-items: center;
  border: 1px solid var(--gold-line); border-radius: 50%;
  background: radial-gradient(ellipse at 30% 18%, var(--cream), var(--linen) 76%);
  box-shadow: 0 18px 38px var(--shadow-soft);
  scale: 1; transition: opacity .22s ease;
}
.col-float::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid var(--gold-line); border-radius: 50%;
}
.col-float > img {
  display: block; width: 220px; height: 220px; aspect-ratio: auto;
  object-fit: contain; align-self: center; margin-top: -16px;
}
.col-float-label {
  position: absolute; bottom: 36px; left: 24px; right: 24px;
  text-align: center; color: var(--olive);
  font: italic 500 22px/1.1 var(--serif);
}
.col-float-label::before {
  content: ""; display: block; width: 28px; height: 1px;
  margin: 0 auto 10px; background: var(--gold);
}
@media (max-width: 860px) {
  .col-row { grid-template-columns: minmax(0, 1fr) 108px; }
  .col-th {
    width: 108px; height: 136px; padding: 0;
    display: grid; place-items: center; position: relative;
    background: radial-gradient(ellipse at 30% 18%, var(--cream), var(--linen) 76%);
    border: 1px solid var(--gold-line); border-radius: 50%;
    box-shadow: 0 8px 20px var(--shadow-soft);
  }
  .col-th::before {
    content: ""; position: absolute; inset: 5px;
    border: 1px solid var(--gold-line); border-radius: 50%;
    pointer-events: none;
  }
  .col-th img { width: 76px; height: 76px; aspect-ratio: auto; object-fit: contain; }
  .col-float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .col-float { transition: none; rotate: none !important; }
}

/* Product displays: arched linen niches rather than white square cards. */
#newGrid, #shopGrid { align-items: start; column-gap: clamp(18px, 2.4vw, 32px); row-gap: clamp(38px, 4.5vw, 58px); }
.pc { min-width: 0; border-radius: 0; }
.pc:hover { transform: none; }
.pc-ph {
  aspect-ratio: 4 / 5; isolation: isolate;
  border-radius: 48% 48% 18px 18px;
  border: 1px solid var(--gold-line);
  background: radial-gradient(ellipse at 38% 25%, var(--cream) 8%, var(--linen) 80%);
  box-shadow: 0 12px 25px var(--shadow-soft);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.pc:nth-child(even) .pc-ph {
  background: radial-gradient(ellipse at 62% 25%, var(--cream) 8%, color-mix(in srgb, var(--olive) 7%, var(--linen)) 90%);
}
.pc-ph::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--gold-line);
  border-radius: 48% 48% 12px 12px; pointer-events: none; z-index: 2;
}
.pc-ph img {
  inset: 22% 9% auto; width: 82%; height: 65%; object-fit: contain;
  mix-blend-mode: multiply; transform: none;
}
.pc:hover .pc-ph, .pc:focus-visible .pc-ph {
  border-color: var(--gold); box-shadow: 0 18px 30px var(--shadow-soft);
}
.pc-tx { padding: 19px 6px 0; gap: 5px; text-align: center; align-items: center; }
.pc-col { font-size: 10px; letter-spacing: .18em; line-height: 1.4; }
.pc-nm { margin-top: 2px; line-height: 1.2; }
.pc-ty { line-height: 1.45; }
.pc-pr { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--gold-line); line-height: 1.3; }
@media (max-width: 560px) {
  #newGrid, #shopGrid { column-gap: 18px; row-gap: 34px; }
  .pc-ph { border-radius: 48% 48% 14px 14px; box-shadow: 0 8px 16px var(--shadow-soft); }
  .pc-ph::before { inset: 5px; border-radius: 48% 48% 9px 9px; }
  .pc-tx { padding: 15px 0 0; }
  .pc-nm { font-size: 19px; }
  .pc-ty { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pc-ph { transition: none; } }
