/* Native HTML/CSS adaptation of UseLayouts Card Folder. */
.design-ticker { position:relative;display:flex;align-items:center;gap:16px;margin:0 -32px;max-width:none;padding:24px 0;border-block:1px solid var(--line); }
.design-ticker-window { overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.design-ticker-track { display:flex;width:max-content; }
.design-ticker-track[data-loop] { animation:design-ticker 32s linear infinite; }
.design-ticker-group { display:flex;flex:none;align-items:center;gap:36px;padding-right:36px;white-space:nowrap;font-size:clamp(20px,2.5vw,34px);font-weight:400;letter-spacing:-.025em; }
.ticker-star { width:16px;height:16px;flex:none;stroke:var(--muted);stroke-width:1; }
@keyframes design-ticker { to { transform:translateX(var(--ticker-shift)); } }
.design-folders { max-width:1100px;margin:80px auto 24px; }
.design-folders-heading { margin-bottom:36px; }
.design-folders-heading h2 { margin:0 0 10px;font-size:clamp(24px,3vw,32px);font-weight:400;letter-spacing:-.03em; }
.design-folders-heading p { margin:0;color:var(--muted);font-size:14px;line-height:1.6; }
.design-folder-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px; }
.folder-card { --folder:#dce5d6;--folder-border:#c4d0bb;--folder-ink:#233b2c;position:relative;isolation:isolate;display:block;min-width:0;aspect-ratio:3/4;max-height:440px;overflow:hidden;border:10px solid var(--folder-border);border-radius:30px;background:var(--folder-border);color:var(--folder-ink);text-decoration:none;perspective:1000px;box-shadow:0 10px 24px rgb(0 0 0 / .08); }
/* Folio variants use the exported front and arrow artwork from their paired Figma states. */
.folder-card--sand {
  --folder-border:#decaaf;--folder-ink:#513a28;
  --folder-front-art:url("Assets/Folder-Cards/folio-141-front.svg");
  --folder-arrow-art:url("Assets/Folder-Cards/folio-141-arrow.svg");
  --folder-arrow-hover-art:url("Assets/Folder-Cards/folio-141-arrow-hover.svg");
}
.folder-card--lilac {
  --folder-border:#cdc5df;--folder-ink:#39304f;
  --folder-front-art:url("Assets/Folder-Cards/folio-168-front.svg");
  --folder-arrow-art:url("Assets/Folder-Cards/folio-168-arrow.svg");
  --folder-arrow-hover-art:url("Assets/Folder-Cards/folio-168-arrow-hover.svg");
}
.folder-card--sage {
  --folder-front-art:url("Assets/Folder-Cards/folio-193-front.svg");
  --folder-arrow-art:url("Assets/Folder-Cards/folio-193-arrow.svg");
  --folder-arrow-hover-art:url("Assets/Folder-Cards/folio-193-arrow-hover.svg");
}
.folder-card-visual { position:absolute;inset:0;overflow:hidden;border-radius:20px;pointer-events:none; }
.folder-card-backdrop {
  position:absolute;inset:0;
  background:radial-gradient(ellipse 76.92% 76.92% at 30.77% 46.15%,rgb(255 255 255 / .65),transparent),var(--folder-border);
  transition:transform 500ms cubic-bezier(.22,1,.36,1);
}
.folder-card-front {
  position:absolute;z-index:2;top:20%;left:-3.871%;width:107.742%;height:105.714%;
  background:var(--folder-front-art) center / 100% 100% no-repeat;
  transition:transform 500ms cubic-bezier(.22,1,.36,1);
}
.folder-card-arrow {
  position:absolute;z-index:3;top:36.762%;left:84.194%;width:7.742%;aspect-ratio:1;
  transition:transform 500ms cubic-bezier(.22,1,.36,1);
}
.folder-card-arrow span { position:absolute;inset:0;background:var(--folder-arrow-art) center / contain no-repeat;transition:opacity 200ms ease; }
.folder-card-arrow span + span { background-image:var(--folder-arrow-hover-art);opacity:0; }
.folder-card-copy { position:absolute;z-index:3;inset:auto 0 0;padding:22px; }
.folder-card-copy h3 { margin:0 0 8px;font-size:17px;font-weight:500;line-height:1.4;letter-spacing:-.02em; }
.folder-card-copy p { margin:0;font-size:13px;line-height:1.6;max-width:28ch; }
.folder-card--sage .folder-card-copy p { color:#39304f; }
.folder-card-spencer,.folder-card-photos {
  position:absolute;opacity:0;transform:translateY(12%);
  transition:opacity 350ms ease,transform 500ms cubic-bezier(.22,1,.36,1);
}
.folder-card-spencer { top:-11.429%;left:-2.903%;width:105.806%;height:100%;overflow:hidden; }
.folder-card-spencer img { position:absolute;top:-13.46%;left:-74.73%;width:249.45%;height:129.88%;max-width:none; }
.folder-card-photos { inset:0; }
.folder-card-photos img {
  position:absolute;width:51.074%;height:56.546%;object-fit:cover;
  border:1px solid rgb(248 243 234 / .32);background:#121212;
  box-shadow:0 18px 35px rgb(0 0 0 / .34);top:11.522%;
}
.folder-card-photo--left { left:5.651%;transform:rotate(-6deg); }
.folder-card-photo--right { left:43.105%;transform:rotate(6deg); }
.folder-card-photos .folder-card-photo--center { left:24.306%;top:4.612%; }
.folder-card:is(:hover,:focus-visible,.is-in-view) .folder-card-backdrop { transform:scale(1.09); }
.folder-card:is(:hover,:focus-visible,.is-in-view) :is(.folder-card-spencer,.folder-card-photos) { opacity:1;transform:none; }
.folder-card:is(:hover,:focus-visible,.is-in-view) .folder-card-front { transform:translateY(23.649%); }
.folder-card:is(:hover,:focus-visible,.is-in-view) .folder-card-arrow { transform:translate(20.833%,437.5%) scale(1.1); }
.folder-card:is(:hover,:focus-visible,.is-in-view) .folder-card-arrow span:first-child { opacity:0; }
.folder-card:is(:hover,:focus-visible,.is-in-view) .folder-card-arrow span + span { opacity:1; }
.folder-card:focus-visible { outline:2px solid var(--ink);outline-offset:5px; }
.folder-card[hidden] { display:none; }
@media(max-width:700px), (hover:none) and (pointer:coarse) {
  /* Overlap the visual edge to absorb the SVG's transparent inset. */
  .folder-card--sand .folder-card-front { left:-5%;width:110%; }
}
@media(min-width:1200px) and (max-width:1450px) { .design-folder-grid { gap:18px; }.folder-card { border-width:7px;border-radius:24px; }.folder-card-copy { padding:16px; }.folder-card-copy h3 { font-size:15px; } }
@media(max-width:700px) { .design-ticker { margin:0 -24px;padding-block:20px; }.design-folders { margin-top:52px; }.design-folder-grid { grid-template-columns:1fr;gap:24px; }.folder-card { width:min(100%,320px);justify-self:center; }.design-folders-heading { text-align:center; }.folder-card-number { font-size:48px; } }
@media(prefers-reduced-motion:reduce) { .design-ticker-track[data-loop] { animation:none; }.design-ticker-window { overflow:auto;mask-image:none; }.design-ticker-track > [aria-hidden="true"] { display:none; }.folder-card * { transition:none!important; } }