:root{--bg:#faf8f4;--ink:#1d1c1a;--muted:#8a857c;--line:#e7e2d9;--accent:#a8834c}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
  nav{display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,5vw,64px)}
  .mark{font-family:Inter,sans-serif;font-weight:500;letter-spacing:.32em;font-size:.9rem;text-decoration:none;color:var(--ink)}
  .mark b{font-weight:300;color:var(--accent)}
  nav a.link{color:var(--muted);text-decoration:none;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
  nav a.link:hover{color:var(--ink)}
  .hero{text-align:center;padding:clamp(48px,10vw,110px) 20px clamp(50px,8vw,90px)}
  .hero h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:clamp(3rem,10vw,6.5rem);letter-spacing:.04em;margin:0;line-height:1}
  .hero h1 span{font-style:italic;color:var(--accent)}
  .hero .rule{width:48px;height:1px;background:var(--accent);margin:28px auto}
  .hero p{margin:0;color:var(--muted);letter-spacing:.35em;text-transform:uppercase;font-size:.78rem}
  .hero p.slogan{margin-top:18px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;text-transform:none;letter-spacing:.04em;font-size:clamp(1.25rem,3.2vw,1.6rem);color:var(--accent)}
  .hero .cta{display:inline-block;margin-top:40px;color:var(--ink);text-decoration:none;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px}
  .hero .jump{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 36px;margin-top:40px;padding:0}
  .hero .jump a{color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
  .hero .jump a:hover,.hero .jump a:focus-visible{border-bottom-color:var(--ink)}
  .hero .jump a+a::before{content:"\00B7";color:var(--muted);position:absolute;margin-left:calc(-18px - .5ch);letter-spacing:0;pointer-events:none}
  .hero .jump a{position:relative}
  section{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px) 100px;scroll-margin-top:24px}
  .head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:28px;margin-bottom:36px}
  .head h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2rem;margin:0}
  .head span{color:var(--muted);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase}
  .grid{display:grid;gap:56px 40px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
  .frame{overflow:hidden;background:#efebe4}
  .card img.main{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#efebe4;transform:scale(1);transition:transform 1.4s cubic-bezier(.22,.61,.36,1),opacity .25s}
  .frame:hover img.main{transform:scale(1.08)}
  @media (prefers-reduced-motion:reduce){.card img.main{transition:opacity .25s}.frame:hover img.main{transform:none}}
  .thumbs{display:flex;gap:8px;margin-top:10px}
  .thumbs img{width:56px;height:56px;object-fit:cover;cursor:pointer;opacity:.5;transition:opacity .2s;border:1px solid transparent}
  .thumbs img.on,.thumbs img:hover{opacity:1}
  .thumbs img.on{border-color:var(--accent)}
  .meta{margin-top:18px}
  .num{color:var(--accent);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase}
  .card h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.7rem;margin:4px 0 10px}
  .desc{color:#55524c;line-height:1.7;font-size:.95rem;margin:0}
  .row{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
  .price{font-weight:400}
  .buy{color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
  .brand{color:var(--accent);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase}
  .empty{border:1px solid var(--line);background:#fdfcf9;text-align:center;padding:clamp(48px,8vw,80px) 24px}
  .empty .rule{width:32px;height:1px;background:var(--accent);margin:0 auto 22px;opacity:.7}
  .empty p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.3rem,3vw,1.6rem);color:#55524c;margin:0}
  .disclose{color:var(--muted);font-size:.78rem;line-height:1.6;margin:-18px 0 36px;max-width:620px}
  .tools{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
  .tool{display:flex;flex-direction:column;border:1px solid var(--line);background:#fdfcf9;padding:26px 26px 22px;transition:border-color .3s}
  .tool:hover{border-color:#d6cdbd}
  .tool .tframe{overflow:hidden;background:#efebe4;margin:-26px -26px 22px}
  .tool .tframe img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 44%;display:block}
  .tool .tn{font-variant-numeric:lining-nums;font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--accent);letter-spacing:.06em;line-height:1}
  .tool .tn::after{content:"";display:block;width:24px;height:1px;background:var(--accent);margin-top:14px;opacity:.6}
  .tool h3{font-variant-numeric:lining-nums;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.45rem;margin:16px 0 8px;line-height:1.2}
  .tool p{color:#55524c;line-height:1.65;font-size:.9rem;margin:0 0 22px}
  .tool .act{margin-top:auto}
  .subhead{display:flex;justify-content:space-between;align-items:baseline;margin:72px 0 28px;padding-top:22px;border-top:1px solid var(--line);position:relative}
  .subhead::before{content:"";position:absolute;top:-1px;left:0;width:32px;height:1px;background:var(--accent)}
  .subhead h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-style:italic;font-size:1.55rem;margin:0;letter-spacing:.01em}
  .subhead span{color:var(--muted);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase}
  .soon{color:var(--muted);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
  .btn{display:inline-block;color:var(--ink);text-decoration:none;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink);padding:10px 16px;transition:background .2s,color .2s}
  .btn:hover,.btn:focus-visible{background:var(--ink);color:var(--bg)}
  @media (max-width:560px){.head h2{font-size:1.75rem}.hero .jump{gap:10px 22px}.hero .jump a{font-size:.68rem;letter-spacing:.14em}.hero .jump a+a::before{margin-left:calc(-11px - .5ch)}.tool{padding:22px 22px 20px}.tool .tframe{margin:-22px -22px 18px}}
  footer{border-top:1px solid var(--line);text-align:center;padding:40px 20px 50px;color:var(--muted);font-size:.8rem;letter-spacing:.05em}
  footer a{color:var(--muted);text-decoration:none;margin:0 10px}
  footer a:hover{color:var(--ink)}
  footer .note{max-width:560px;margin:16px auto 0;font-size:.72rem;line-height:1.6}