@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

:root {
  --ink: #22301f;
  --muted: #5d6154;
  --paper: #f7f3e9;
  --card: rgba(255, 255, 255, 0.76);
  --plum: #8c3d1b;
  --rose: #b4552b;
  --line: rgba(34, 48, 31, 0.16);
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.65 var(--font-body);
}
a { color: var(--plum); }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
header { padding: 24px 0; }
nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font: 600 18px/1.2 var(--font-heading); text-decoration:none; letter-spacing:.1em; text-transform:uppercase; }
.brand img { width:52px; height:52px; object-fit:cover; object-position:top; clip-path:inset(0 0 20% 0); }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.nav-links a { color: var(--muted); font-size: 14px; text-decoration: none; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--plum); }
.hero { min-height:66vh; display:grid; place-items:center; padding:72px 0 96px; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:60px; }
.hero-copy { text-align:left; }
.hero-art { display:flex; justify-content:center; }
.hero-art img { width:min(100%,460px); height:auto; filter:drop-shadow(0 18px 28px rgba(34,48,31,.09)); }
.eyebrow { margin: 0 0 20px; color: var(--plum); font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.14; }
h1 { max-width:850px; margin:0 0 24px; font-size:clamp(48px,8vw,84px); font-weight:400; letter-spacing:-.035em; }
.lead { max-width:690px; margin:0 0 34px; color:var(--muted); font-size:clamp(18px,2.2vw,22px); }
.button { display: inline-block; padding: 13px 22px; border-radius: 999px; color: white; background: var(--plum); font-weight: 650; text-decoration: none; }
.section { padding: 88px 0; border-top: 1px solid var(--line); }
.section h2 { margin: 0 0 16px; font-size: clamp(34px, 5vw, 54px); font-weight: 500; }
.section-intro { max-width: 680px; margin: 0 0 38px; color: var(--muted); font-size: 18px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 15px 45px rgba(53, 36, 51, .06); }
.card h3 { margin: 0 0 10px; font-size: 23px; }
.card p { margin: 0; color: var(--muted); }
.sc-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sc-card { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-height:210px; padding:26px 24px 22px; border:1px solid var(--line); border-radius:22px; background:#efe8d8; color:var(--ink); text-align:left; text-decoration:none; transition:background .2s,box-shadow .2s,border-color .2s,transform .2s; }
.sc-card:hover { background:#fbeee7; border-color:#e9bca3; box-shadow:0 16px 34px -22px rgba(34,48,31,.7); transform:translateY(-2px); }
.sc-card:focus-visible { outline:2px solid var(--rose); outline-offset:3px; }
.sc-card__dial { position:absolute; right:-58px; top:-52px; width:190px; height:190px; border-radius:50%; overflow:hidden; opacity:.16; mix-blend-mode:multiply; pointer-events:none; }
.sc-card__dial img { position:absolute; left:-42px; top:-37px; width:274px; height:320px; max-width:none; }
.sc-card__num { color:var(--plum); font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.sc-card__title { position:relative; max-width:75%; font-family:var(--font-heading); font-size:30px; line-height:1.05; }
.sc-card__sub { position:relative; max-width:26ch; color:var(--muted); font-size:14px; line-height:1.5; }
.topic-page { padding-bottom:96px; }
.topic-hero { max-width:850px; padding:72px 0 74px; }
.topic-hero h1 { font-size:clamp(46px,7vw,76px); }
.topic-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:64px; padding:72px 0; border-top:1px solid var(--line); }
.topic-layout h2 { margin:0; font-size:clamp(32px,4vw,46px); font-weight:500; }
.topic-copy { max-width:720px; }
.topic-copy p, .topic-copy li { color:var(--muted); font-size:17px; }
.topic-copy ul { padding-left:22px; }
.topic-back { padding-top:24px; }
.legal { max-width: 780px; padding: 50px 0 100px; }
.legal h1 { margin: 45px 0 14px; font-size: clamp(42px, 7vw, 68px); text-align: left; }
.legal h2 { margin-top: 42px; font-size: 27px; }
.legal p, .legal li { color: var(--muted); }
.notice { padding: 20px 22px; border-left: 3px solid var(--rose); background: rgba(255,255,255,.62); }
.about-page { padding-bottom: 96px; }
.about-hero { min-height: 62vh; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 60px; padding: 70px 0 90px; }
.about-hero h1 { font-size: clamp(46px, 7vw, 78px); }
.about-mark { display: flex; justify-content: center; }
.about-mark img { width: min(100%, 380px); filter: drop-shadow(0 18px 28px rgba(34,48,31,.09)); }
.about-photo img { display: block; border-radius: 50%; filter: none; box-shadow: 0 18px 50px rgba(34,48,31,.12); image-rendering: auto; }
.hello { margin: 0 0 16px; color: var(--ink); font-family: var(--font-heading); font-size: clamp(25px, 3vw, 34px); line-height: 1.25; }
.about-photo img { border-radius: 50%; box-shadow: 0 18px 50px rgba(34,48,31,.12); }
.about-story, .about-values, .about-closing { padding: 78px 0; border-top: 1px solid var(--line); }
.about-story { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.about-story h2, .about-closing h2 { margin: 0; font-size: clamp(34px, 5vw, 54px); font-weight: 500; }
.prose { max-width: 700px; }
.prose p { margin: 0 0 24px; color: var(--muted); font-size: 18px; }
.about-closing .section-intro { margin-top: 20px; }
.about-article { max-width: 790px; margin: 0 auto; padding: 76px 0 30px; border-top: 1px solid var(--line); }
.about-article p { margin: 0 0 28px; color: var(--muted); font-size: 18px; }
.about-article .article-closing { margin-top: 48px; padding: 28px 30px; border-left: 3px solid var(--rose); background: rgba(255,255,255,.62); color: var(--ink); font-family: var(--font-heading); font-size: clamp(23px,3vw,31px); line-height: 1.35; }
.about-contact { max-width: 790px; margin: 0 auto; padding: 16px 0 58px; }
footer { padding: 36px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-row p { margin: 0; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.contact-email { font-family:var(--font-heading); font-size:clamp(22px,3vw,32px); overflow-wrap:anywhere; }
.social-links { position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); width:min(100%,520px); aspect-ratio:1; margin:28px 0 36px; background:url("social-ring.png") center/contain no-repeat; }
.social-link { display:block; align-self:center; justify-self:center; width:24%; min-width:66px; max-width:94px; aspect-ratio:1; border:2px solid transparent; border-radius:50%; color:transparent; font-size:0; text-decoration:none; }
.social-link.facebook { grid-area:1/2; }
.social-link.instagram { grid-area:2/3; }
.social-link.tiktok { grid-area:3/2; }
.social-link.threads { grid-area:2/1; }
.social-link:hover, .social-link:focus-visible { border-color:var(--rose); background:rgba(180,85,43,.08); outline:none; box-shadow:0 0 0 5px rgba(180,85,43,.13); }
@media (max-width: 760px) {
  .wrap { width: min(100% - 28px, 1120px); }
  nav { align-items: flex-start; }
  .nav-links { justify-content: flex-end; gap: 10px 14px; }
  .hero { min-height:auto; padding:52px 0 72px; }
  .hero-grid { grid-template-columns:1fr; gap:34px; }
  .hero-copy { text-align:center; }
  .hero-copy h1, .hero-copy .lead { margin-left:auto; margin-right:auto; }
  .hero-art img { max-width:310px; }
  .brand img { width:44px; height:44px; }
  .social-links { width:min(100%,390px); }
  .grid { grid-template-columns: 1fr; }
  .sc-cards { grid-template-columns:1fr; }
  .section { padding: 64px 0; }
  .about-hero, .about-story { grid-template-columns: 1fr; gap: 34px; }
  .about-hero { padding: 52px 0 70px; }
  .about-mark img { max-width: 290px; }
  .about-story, .about-values, .about-closing { padding: 60px 0; }
  .about-article { padding-top: 56px; }
  .about-article p { font-size: 17px; }
  .about-article .article-closing { padding: 22px; }
  .topic-layout { grid-template-columns:1fr; gap:24px; padding:56px 0; }
}