/* home.html copy of base.css without the two Bookish 400 faces (home.css declares Bookish once at 100 900). base.css is shared with hero-b and stays untouched. */
@font-face{font-family:"Haas Display";src:url(fonts/NeueHaasDisplayRoman.ttf) format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"Haas Display";src:url(fonts/NeueHaasDisplayMediu.ttf) format("truetype");font-weight:500;font-display:block}

:root{
  --blue:#002FA7;--cream:#F2F0E7;--ink:#1A1A1A;--ice:#BCD6EA;
  --m:40px;--g:24px;
  --ease:cubic-bezier(.23,1,.32,1);
  --fg:var(--cream);--bg:transparent;   /* suede pass: cream type, the ground is the suede (home.css html) */
}
@media (max-width:767px){:root{--m:20px;--g:16px}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:"Bookish",Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{display:block}

.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}

.top{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:80px;padding:0 var(--m)}
.top .mark{height:34px;width:auto}
.top nav{display:flex;gap:32px;font:500 15px/1 "Haas Display",sans-serif}
.top nav a{opacity:.92;transition:opacity 180ms var(--ease)}
.top nav a:hover{opacity:.6}
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;font:500 15px/1 "Haas Display",sans-serif;transition:transform 180ms var(--ease),opacity 180ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn img{width:11px;height:11px}
@media (max-width:767px){
  .top{height:64px}.top .mark{height:26px}.top nav{display:none}
  .btn{height:40px;padding:0 16px}
}

.headline{font:400 clamp(40px,5.3vw,92px)/.95 "Haas Display",sans-serif;letter-spacing:-.03em;text-wrap:balance}
.lead{font:400 19px/1.5 "Bookish",Georgia,serif;max-width:34ch}
@media (max-width:767px){.lead{font-size:16px}}

/* 3D scaffolding shared by every direction */
.stage{position:absolute;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.stage.dragging{cursor:grabbing}
.stage *{-webkit-user-drag:none}
.p3d{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.card{position:absolute;transform-style:preserve-3d}
.card img{width:100%;height:100%;object-fit:cover;pointer-events:none}

/* the lacquer sphere: blue body, one white specular */
.lacquer{border-radius:50%;background:var(--blue);position:absolute;overflow:hidden}
.lacquer::after{content:"";position:absolute;left:22%;top:16%;width:26%;height:20%;border-radius:50%;background:#fff;opacity:.9;filter:blur(1.5px);transform:rotate(-28deg)}