/* Crane & Archer — shared styles across all pages.
   Paper + brass palette, Cormorant Garamond display, breathing constellations. */
:root{
  --paper:#f7f4ec; --paper-2:#fbf9f3; --ink:#221d16; --soft:#5c5346;
  --faint:#9a9082; --gold:#9a7a24; --gold-deep:#856819;
  --line:rgba(34,29,22,.12);
  --maxw:720px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; min-height:100vh; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 560px at 76% -14%, #fffdf8 0%, transparent 60%),
    linear-gradient(180deg,#f8f5ee 0%, #f3efe4 100%);
  background-attachment:fixed;
}
.serif{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;}
a{color:inherit;}

/* breathing constellations behind everything (namesakes: Grus = Crane, Sagittarius = Archer) */
.sky{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; color:#0d0b09;}
.sky circle{fill:currentColor;}
.sky polyline,.sky line{fill:none; stroke:currentColor; stroke-width:1.1;
  vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; opacity:.6;}
.constellation{opacity:0; animation:breathe var(--dur,20s) ease-in-out infinite; animation-delay:var(--delay,0s);}
@keyframes breathe{0%,100%{opacity:0} 50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .constellation{animation:none; opacity:.45;} }

/* top nav */
.nav{position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 22px; padding:22px 24px 4px;}
.nav .brand{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; font-size:19px;
  color:var(--ink); text-decoration:none; margin-right:6px;}
.nav a.link{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--faint); text-decoration:none; padding:6px 2px; transition:color .15s;}
.nav a.link:hover{color:var(--gold-deep);}
.nav a.link[aria-current="page"]{color:var(--gold-deep); border-bottom:1.5px solid var(--gold);}

.wrap{max-width:var(--maxw); margin:0 auto; position:relative; z-index:1;
  padding:clamp(28px,5vh,56px) 24px 40px; text-align:center;}

/* home hero */
.plaque{display:block; width:clamp(280px,60vw,410px); height:auto; margin:0 auto; border-radius:9px;
  box-shadow:0 30px 60px -30px rgba(70,52,20,.55), 0 2px 6px -2px rgba(70,52,20,.28), 0 0 0 1px rgba(120,95,45,.18);}
.lede{font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(23px,4vw,31px); line-height:1.4;
  color:#2c261d; margin:40px auto 0; max-width:26ch; font-weight:500;}
.body{color:var(--soft); font-size:16.5px; margin:22px auto 0; max-width:56ch;}
.body .em{color:var(--gold-deep); font-weight:600;}
.motto{font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:clamp(19px,3vw,24px);
  color:var(--gold); font-weight:600; margin:30px auto 0; max-width:46ch; line-height:1.5;}

.rule{width:42px; height:1px; background:var(--gold); opacity:.55; margin:44px auto; border:0;}

/* page headings + prose (inner pages) */
.page-title{font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(30px,6vw,46px);
  font-weight:600; color:var(--ink); margin:12px auto 0; line-height:1.1;}
.page-sub{color:var(--soft); font-size:17px; margin:16px auto 0; max-width:56ch;}
.h2{font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(22px,4vw,28px); font-weight:600;
  color:var(--ink); margin:48px auto 0;}
.prose{color:var(--soft); font-size:16.5px; margin:16px auto 0; max-width:60ch; text-align:left;}
.prose p{margin:0 0 16px;}
.prose strong,.prose .em{color:var(--gold-deep);}
.label{font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint); font-weight:700; margin:0 0 16px;}

/* product / app card */
.card{display:flex; align-items:center; gap:18px; text-align:left; max-width:460px; margin:0 auto;
  padding:18px 20px; border-radius:18px; background:linear-gradient(180deg,var(--paper-2),#f5f1e7);
  border:1px solid var(--line); box-shadow:0 20px 44px -30px rgba(70,52,20,.5);}
.card img{width:64px; height:64px; border-radius:15px; flex:0 0 auto; box-shadow:0 4px 16px -6px rgba(50,38,18,.4);}
.card .name{font-family:"Cormorant Garamond",Georgia,serif; font-size:24px; font-weight:600; margin:0 0 2px;}
.card .desc{color:var(--soft); font-size:14.5px; line-height:1.5; margin:0;}

/* feature list */
.features{list-style:none; padding:0; margin:20px auto 0; max-width:56ch; text-align:left;}
.features li{position:relative; padding:0 0 0 22px; margin:0 0 12px; color:var(--soft); font-size:16px;}
.features li::before{content:"✦"; position:absolute; left:0; top:0; color:var(--gold); font-size:12px;}
.features b{color:var(--ink); font-weight:600;}

/* buttons */
.btn-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:28px auto 0;}
.btn{display:inline-block; font-size:14.5px; font-weight:700; letter-spacing:.02em; text-decoration:none;
  padding:12px 22px; border-radius:999px; transition:transform .12s, box-shadow .12s;}
.btn-primary{background:linear-gradient(180deg,#a9861f,#856819); color:#fdfbf4;
  box-shadow:0 12px 28px -14px rgba(120,90,25,.7);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--gold-deep); border:1.4px solid rgba(133,104,25,.4);}
.btn-ghost:hover{border-color:var(--gold-deep);}
.soon{display:block; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  font-weight:700; margin:18px auto 0;}

/* contact block */
.contact-grid{display:grid; gap:16px; max-width:420px; margin:28px auto 0; text-align:left;}
.contact-item{padding:16px 18px; border-radius:14px; background:linear-gradient(180deg,var(--paper-2),#f5f1e7);
  border:1px solid var(--line);}
.contact-item .k{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); font-weight:700; margin:0 0 5px;}
.contact-item a{color:var(--gold-deep); text-decoration:none; font-weight:700;}
.contact-item a:hover{text-decoration:underline;}
.contact-item .addr{color:var(--soft); font-size:14.5px; line-height:1.6; font-style:normal;}

footer{position:relative; z-index:1; text-align:center; color:var(--faint); font-size:12.5px;
  letter-spacing:.03em; padding:40px 24px 46px; line-height:1.9;}
footer a{color:var(--faint); text-decoration:none;}
footer a:hover{color:var(--gold-deep);}
footer .star{color:var(--gold);}
footer .fnav{margin-bottom:8px;}
footer .fnav a{margin:0 8px; font-weight:600;}