:root{
  --cream:#fffaf4;
  --peach:#f3b8a5;
  --coral:#d96f63;
  --forest:#24463d;
  --forest-soft:#3d675c;
  --lavender:#d9c9e7;
  --display:"Cormorant Garamond",serif;
}

body.contact-page,
body.login-page{
  min-height:100vh;
  color:#352f2e;
  background:
    radial-gradient(circle at 8% 8%,rgba(243,184,165,.55),transparent 26%),
    radial-gradient(circle at 92% 84%,rgba(61,103,92,.3),transparent 28%),
    linear-gradient(135deg,#fbf5eb,#f5ddd9 55%,#eee8dd);
  overflow-x:hidden;
}

body.contact-page::before,
body.login-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  opacity:.18;
  mix-blend-mode:multiply;
  z-index:20;
}

.page-orb{
  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.48);
  pointer-events:none;
  z-index:-1;
  animation:orbDrift 12s ease-in-out infinite alternate;
}

.page-orb::before,
.page-orb::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(36,70,61,.16);
}

.page-orb::before{inset:32px}
.page-orb::after{inset:78px}
.page-orb.left{left:-230px;top:22%}
.page-orb.right{right:-260px;bottom:-100px;animation-delay:-5s}

@keyframes orbDrift{to{transform:translateY(-35px) rotate(18deg) scale(1.08)}}

.contact-page .page-shell{
  position:relative;
  max-width:1180px;
  margin:18px auto;
  padding:18px;
  border-radius:38px;
  background:rgba(255,250,244,.7);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 34px 90px rgba(72,49,44,.15);
  backdrop-filter:blur(18px);
}

.contact-page .topbar{padding:10px 14px 20px}

.contact-page .brand-lockup,
.login-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
}

.contact-page .brand-mark,
.login-brand-mark{
  position:relative;
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  flex:0 0 50px;
  border-radius:17px 17px 17px 7px;
  color:#fff;
  background:linear-gradient(145deg,var(--forest),#5d8175);
  box-shadow:0 12px 24px rgba(36,70,61,.22);
  font-family:var(--display);
  font-size:29px;
  font-weight:700;
  transform:rotate(-4deg);
  transition:transform .3s ease;
}

.contact-page .brand-mark::after,
.login-brand-mark::after{
  content:"";
  position:absolute;
  inset:6px;
  border:1px dashed rgba(255,255,255,.55);
  border-radius:12px 12px 12px 5px;
}

.contact-page .brand-lockup:hover .brand-mark,
.login-brand:hover .login-brand-mark{transform:rotate(4deg) scale(1.04)}

.contact-page .brand{font-size:38px;line-height:.8}

.contact-page .nav{
  padding:5px;
  border:1px solid rgba(90,69,68,.1);
  border-radius:999px;
  background:rgba(255,255,255,.56);
}

.contact-page .nav a{
  border:0;
  background:transparent;
  padding:10px 17px;
  box-shadow:none;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}

.contact-page .nav a:hover,
.contact-page .nav a.active{
  color:#fff;
  background:var(--forest);
  transform:none;
}

.contact-page .hero{
  position:relative;
  min-height:390px;
  display:grid;
  align-content:center;
  overflow:hidden;
  padding:54px;
  color:#fffaf2;
  background:
    radial-gradient(circle at 82% 20%,rgba(243,184,165,.25),transparent 23%),
    linear-gradient(135deg,#24463d,#3d675c 62%,#6d8c7e);
  box-shadow:0 28px 64px rgba(36,70,61,.23);
  animation:pageEnter .75s cubic-bezier(.2,.8,.2,1) both;
}

.contact-page .hero::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  right:-35px;
  top:-70px;
  border:32px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:0 0 0 24px rgba(255,255,255,.035),0 0 0 62px rgba(255,255,255,.02);
  animation:slowSpin 22s linear infinite;
}

.contact-page .hero h1{font-size:clamp(54px,7vw,80px);max-width:9ch;letter-spacing:-.03em}
.contact-page .hero p{color:rgba(255,255,255,.7)}

.page-eyebrow{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#f5d7ca;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.page-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--peach);box-shadow:0 0 0 5px rgba(243,184,165,.13)}

.contact-page .wrap{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
}

.contact-page .panel{
  padding:34px;
  border-radius:30px;
  background:rgba(255,253,249,.92);
  box-shadow:0 18px 48px rgba(82,44,58,.08);
  animation:pageEnter .75s .12s cubic-bezier(.2,.8,.2,1) both;
}

.contact-page .panel h2{font-size:50px}

.contact-page .item{
  position:relative;
  padding:17px 20px 17px 66px;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.contact-page .item::before{
  position:absolute;
  left:16px;
  top:18px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:12px;
  color:#fff;
  background:var(--forest);
  font-size:14px;
  font-weight:800;
}

.contact-page .item:nth-child(1)::before{content:"P"}
.contact-page .item:nth-child(2)::before{content:"@"}
.contact-page .item:nth-child(3)::before{content:"L"}
.contact-page .item:nth-child(4)::before{content:"I"}
.contact-page .item:hover{transform:translateX(6px);border-color:rgba(61,103,92,.3);box-shadow:0 14px 30px rgba(49,65,58,.09)}
.contact-page .value{color:var(--forest);transition:color .2s ease}
.contact-page .value:hover{color:var(--coral)}

.contact-visual{
  position:relative;
  display:grid;
  align-content:space-between;
  min-height:100%;
  padding:34px;
  overflow:hidden;
  border-radius:30px;
  color:#fff;
  background:linear-gradient(145deg,#d46e62,#a55560 60%,#765a75);
  box-shadow:0 22px 50px rgba(126,76,79,.18);
  animation:pageEnter .75s .2s cubic-bezier(.2,.8,.2,1) both;
}

.contact-visual::before{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-75px;
  bottom:-70px;
  border:26px solid rgba(255,255,255,.1);
  border-radius:50%;
  animation:slowSpin 18s linear infinite reverse;
}

.contact-visual h3{position:relative;margin:0;font-family:var(--display);font-size:48px;line-height:.95;max-width:8ch}
.contact-visual p{position:relative;color:rgba(255,255,255,.74);line-height:1.7}
.response-card{position:relative;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:20px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px)}
.response-card strong{display:block;margin-bottom:7px;font-size:14px}
.response-card span{font-size:13px;color:rgba(255,255,255,.7)}

.contact-page .footer-note{
  color:#f7f1e9;
  background:var(--forest);
  border:0;
  box-shadow:0 20px 50px rgba(36,70,61,.18);
  animation:pageEnter .75s .28s cubic-bezier(.2,.8,.2,1) both;
}

.contact-page .footer-note a{color:var(--peach)}

@keyframes pageEnter{
  from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}

@keyframes slowSpin{to{transform:rotate(360deg)}}

body.login-page{
  display:grid;
  place-items:center;
  padding:24px;
}

.login-shell{
  position:relative;
  width:min(100%,930px);
  display:grid;
  grid-template-columns:1fr .82fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.76);
  border-radius:34px;
  background:rgba(255,250,244,.76);
  box-shadow:0 34px 90px rgba(72,49,44,.18);
  backdrop-filter:blur(18px);
  animation:loginEnter .8s cubic-bezier(.2,.8,.2,1) both;
}

.login-story{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:600px;
  padding:42px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 78% 16%,rgba(243,184,165,.27),transparent 24%),
    linear-gradient(145deg,#24463d,#3d675c);
}

.login-story::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  left:-120px;
  bottom:-130px;
  border:36px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:0 0 0 26px rgba(255,255,255,.035),0 0 0 66px rgba(255,255,255,.02);
  animation:slowSpin 24s linear infinite;
}

.login-brand{position:relative;color:#fff}
.login-brand-text strong{display:block;font-family:var(--display);font-size:30px;line-height:1}
.login-brand-text span{display:block;margin-top:6px;color:rgba(255,255,255,.58);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.login-copy{position:relative}
.login-copy h2{margin:0 0 14px;font-family:var(--display);font-size:58px;line-height:.92;max-width:8ch}
.login-copy h2 em{color:var(--peach);font-weight:600}
.login-copy p{max-width:34ch;margin:0;color:rgba(255,255,255,.67);line-height:1.7}
.login-story-note{position:relative;font-size:12px;color:rgba(255,255,255,.52)}

.login-page .card{
  width:auto;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.login-page .title{font-family:var(--display);font-size:45px;letter-spacing:-.02em}
.login-page .subtitle{line-height:1.6}
.login-page label{color:#4e4542;font-size:13px}

.login-page input{
  min-height:48px;
  padding:12px 14px;
  border-color:rgba(89,68,62,.15);
  border-radius:13px;
  background:rgba(255,255,255,.82);
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.login-page input:focus{border-color:rgba(61,103,92,.45);box-shadow:0 0 0 4px rgba(61,103,92,.1);transform:translateY(-1px)}

.password-field{position:relative;display:block}
.password-field input{padding-right:62px}
.password-toggle{position:absolute;right:8px;bottom:8px;width:auto;min-height:32px;padding:6px 9px;border-radius:9px;color:var(--forest);background:#edf2eb;font-size:11px;box-shadow:none}
.password-toggle:hover{background:#dfe9dd}

.login-page button[type="submit"]{
  position:relative;
  min-height:48px;
  overflow:hidden;
  border-radius:13px;
  background:var(--forest);
  box-shadow:0 14px 28px rgba(36,70,61,.2);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.login-page button[type="submit"]:hover{background:#315a50;transform:translateY(-2px);box-shadow:0 18px 34px rgba(36,70,61,.26)}

.back-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#756661;text-decoration:none;font-size:13px;font-weight:700;transition:color .2s ease,transform .2s ease}
.back-link::before{content:"←"}
.back-link:hover{color:var(--coral);transform:translateX(-3px)}

@keyframes loginEnter{
  from{opacity:0;transform:translateY(30px) scale(.97);filter:blur(7px)}
  to{opacity:1;transform:none;filter:none}
}

body.contact-page :focus-visible,
body.login-page :focus-visible{outline:3px solid rgba(217,111,99,.5);outline-offset:3px}

@media (max-width:760px){
  .contact-page .page-shell{margin:8px;padding:9px;border-radius:26px}
  .contact-page .topbar{padding:10px}
  .contact-page .brand{font-size:31px}
  .contact-page .brand-mark{width:44px;height:44px;flex-basis:44px}
  .contact-page .nav{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .contact-page .nav a{text-align:center;padding:9px 7px;font-size:13px}
  .contact-page .hero{min-height:340px;padding:34px 24px}
  .contact-page .wrap{grid-template-columns:1fr}
  .contact-page .panel,.contact-visual{padding:25px}
  .login-shell{grid-template-columns:1fr}
  .login-story{min-height:300px;padding:30px}
  .login-copy h2{font-size:46px}
  .login-story-note{display:none}
  .login-page .card{padding:34px 28px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Yarn workshop theme */
body.contact-page,
body.login-page{
  --yarn-cream:#fff8e9;
  --yarn-coral:#d98272;
  --yarn-berry:#8b4d5d;
  --yarn-sage:#78917b;
  --yarn-cocoa:#4d3935;
  color:var(--yarn-cocoa);
  background:
    radial-gradient(circle at 8% 9%,rgba(217,130,114,.38),transparent 25%),
    radial-gradient(circle at 91% 82%,rgba(120,145,123,.3),transparent 27%),
    repeating-linear-gradient(45deg,rgba(113,82,67,.025) 0 1px,transparent 1px 7px),
    linear-gradient(135deg,#f8edda,#f1dcd5 55%,#eee5d5);
}

.contact-page .page-shell,
.login-shell{
  background:
    linear-gradient(rgba(255,250,240,.88),rgba(255,250,240,.88)),
    repeating-linear-gradient(90deg,rgba(96,67,55,.05) 0 1px,transparent 1px 5px);
  border:2px solid rgba(255,255,255,.82);
  box-shadow:0 34px 90px rgba(93,59,51,.17),inset 0 0 0 1px rgba(137,91,74,.08);
}

.contact-page .brand-mark.yarn-logo,
.login-brand-mark.yarn-logo{
  border-radius:50%;
  background:var(--yarn-berry);
  transform:rotate(-7deg);
  box-shadow:0 10px 0 rgba(96,55,64,.12),0 14px 28px rgba(94,52,62,.22);
}

.contact-page .brand-mark.yarn-logo::after,
.login-brand-mark.yarn-logo::after{border-radius:50%;border-style:dashed}

.yarn-logo svg{width:38px;height:38px;overflow:visible}
.yarn-logo circle{fill:var(--yarn-coral)}
.yarn-logo path{fill:none;stroke:var(--yarn-cream);stroke-width:2;stroke-linecap:round}

.contact-page .nav a:hover,
.contact-page .nav a.active{background:var(--yarn-berry)}

.contact-page .hero,
.login-story{
  background:
    radial-gradient(ellipse at 50% 0,transparent 64%,rgba(255,248,233,.09) 66% 71%,transparent 73%) 0 0/22px 14px,
    radial-gradient(ellipse at 50% 100%,transparent 64%,rgba(255,248,233,.07) 66% 71%,transparent 73%) 11px 0/22px 14px,
    linear-gradient(145deg,#593b3d,#724954 55%,#536653);
  box-shadow:0 28px 64px rgba(83,53,49,.25);
}

.contact-page .hero::after,
.login-story::before{
  border-color:rgba(226,152,132,.22);
  box-shadow:0 0 0 24px rgba(255,248,233,.035),0 0 0 62px rgba(255,248,233,.02);
  background:
    repeating-radial-gradient(ellipse,transparent 0 12px,rgba(255,248,233,.07) 13px 16px,transparent 17px 23px),
    rgba(217,130,114,.24);
}

.page-eyebrow{border-style:dashed;color:#f2c5b5}
.page-eyebrow::before{background:var(--yarn-coral)}

.contact-page .panel{
  background:
    linear-gradient(rgba(255,253,247,.95),rgba(255,253,247,.95)),
    repeating-linear-gradient(90deg,rgba(121,85,65,.05) 0 1px,transparent 1px 5px);
  border-style:dashed;
}

.contact-page .item{
  border-style:dashed;
  background:#fffaf0;
}

.contact-page .item::before{
  border-radius:50%;
  background:
    repeating-radial-gradient(ellipse,transparent 0 4px,rgba(255,255,255,.34) 5px 6px),
    var(--yarn-berry);
  box-shadow:inset -4px -5px 6px rgba(67,38,39,.18);
}

.contact-page .item:nth-child(2)::before{background-color:var(--yarn-coral)}
.contact-page .item:nth-child(3)::before{background-color:var(--yarn-sage)}
.contact-page .item:nth-child(4)::before{background-color:#b68a65}

.contact-visual{
  background:
    radial-gradient(ellipse at 50% 0,transparent 65%,rgba(255,248,233,.08) 67% 72%,transparent 74%) 0 0/24px 16px,
    linear-gradient(145deg,#9d5961,#7b4d5b 60%,#5a6958);
  border:1px dashed rgba(255,248,233,.28);
}

.contact-visual::before{
  border-color:rgba(255,248,233,.14);
  background:repeating-radial-gradient(ellipse,transparent 0 10px,rgba(255,248,233,.08) 11px 13px);
}

.product-detail-page .page-shell{
  max-width:1160px;
}

.product-detail{
  display:grid;
  gap:18px;
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  padding:0 8px;
  color:var(--muted);
  font-size:14px;
}

.breadcrumb a{
  color:var(--brand-strong);
  font-weight:700;
  text-decoration:none;
}

.breadcrumb a:hover{
  text-decoration:underline;
}

.product-detail-grid{
  display:grid;
  grid-template-columns:minmax(0, .96fr) minmax(320px, .72fr);
  gap:24px;
  align-items:stretch;
}

.product-gallery,
.product-detail-copy{
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:var(--panel);
  box-shadow:0 18px 44px rgba(82,44,58,.1);
}

.product-gallery{
  padding:18px;
}

.product-hero-image{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:24px;
  background:#fff2f6;
}

.product-gallery-strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}

.product-gallery-strip img{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff2f6;
}

.product-detail-copy{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:30px;
}

.product-detail-copy h1{
  margin:0;
  max-width:10ch;
  font-family:var(--display);
  font-size:56px;
  line-height:.95;
}

.product-lead{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

.product-price-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:baseline;
}

.product-price-row strong{
  color:var(--brand-strong);
  font-size:28px;
}

.product-price-row span{
  color:#a37c8c;
  text-decoration:line-through;
  font-weight:700;
}

.product-availability,
.product-custom-note{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.product-custom-note{
  padding:12px 14px;
  border:1px dashed rgba(139,77,93,.22);
  border-radius:16px;
  background:#fff7fa;
  color:#7e4d5f;
  font-weight:700;
}

.product-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.product-tags span{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.product-contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}

.product-contact-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--brand-strong);
  font-weight:800;
  text-decoration:none;
}

.product-contact-actions a:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(82,44,58,.1);
}

.product-contact-actions .primary-action{
  border-color:transparent;
  background:linear-gradient(135deg,var(--yarn-berry),#9d5961);
  color:#fff;
}

@media (max-width:820px){
  .product-detail-grid{
    grid-template-columns:1fr;
  }

  .product-detail-copy h1{
    max-width:none;
    font-size:44px;
  }
}

@media (max-width:520px){
  .product-gallery,
  .product-detail-copy{
    padding:18px;
  }

  .product-gallery-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .product-contact-actions{
    display:grid;
    grid-template-columns:1fr;
  }
}

.response-card{border-style:dashed}

.contact-page .footer-note{
  background:
    radial-gradient(ellipse at 50% 0,transparent 65%,rgba(255,248,233,.07) 67% 72%,transparent 74%) 0 0/24px 16px,
    #563b3f;
  border:1px dashed rgba(255,248,233,.24);
}

.login-page .card{
  background:
    linear-gradient(rgba(255,250,240,.82),rgba(255,250,240,.82)),
    repeating-linear-gradient(0deg,rgba(121,85,65,.05) 0 1px,transparent 1px 6px);
}

.login-page input{border-style:dashed;background:#fffdf7}
.login-page button[type="submit"]{background:linear-gradient(135deg,#754653,#965663)}
.login-page button[type="submit"]:hover{background:#754653}
.password-toggle{color:var(--yarn-berry);background:#f3e4d2}
.back-link:hover{color:var(--yarn-berry)}