/* Sundog Corporation — Design A holding page (preview).
   Palette below is a TEST palette from the A-developed comps; not locked. */
@font-face{
  font-family:"Cinzel";
  src:url("../fonts/Cinzel-VariableFont_wght.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:block;
}
:root{
  --ink:#0E0D0C;          /* test palette */
  --cream:236,226,204;    /* #ECE2CC test palette */
  --brass:176,141,87;     /* #B08D57 exploratory */
  --ms:17vmin;            /* seal width */
  --off:calc(var(--ms)*2.55);                     /* parhelion distance from the eye */
  --r1:max(calc(var(--off)*.34),calc(var(--ms)*.75));
  --r2:calc((var(--r1) + var(--off))/2);
  --cy:43%;
  --word-size:calc(var(--ms)*.15);
  --word-track:.42em;
  --word-y:calc((var(--r1) + var(--r2))/2 - var(--word-size)*.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:rgb(var(--cream));-webkit-text-size-adjust:100%}
body{font-family:"Cinzel",Georgia,"Times New Roman",serif;font-weight:500;background:var(--ink);min-height:100vh;min-height:100svh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid rgba(var(--cream),.6);outline-offset:4px}

.page{position:relative;width:100%;min-height:100vh;min-height:100svh;overflow:hidden}
.sky{position:absolute;inset:0;pointer-events:none}
.stage{position:absolute;left:50%;top:var(--cy);width:0;height:0}
.stage>*{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}

/* the sun's place, implied */
.sun{width:calc(var(--ms)*9.6);height:calc(var(--ms)*9.6);border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--cream),.035),rgba(var(--cream),.021) 21%,rgba(var(--cream),.0047) 42%,rgba(var(--cream),0) 70%)}

/* rose of light — last ring is the 22° halo through the parhelia */
.ring{border-radius:50%;border:1.5px solid rgba(var(--cream),var(--o));
  box-shadow:0 0 calc(var(--ms)*.12) calc(var(--ms)*.015) rgba(var(--cream),calc(var(--o)*.45)),
             inset 0 0 calc(var(--ms)*.12) calc(var(--ms)*.015) rgba(var(--cream),calc(var(--o)*.45))}
.ring.r1{width:calc(var(--r1)*2);height:calc(var(--r1)*2);--o:.075}
.ring.r2{width:calc(var(--r2)*2);height:calc(var(--r2)*2);--o:.05}
.ring.r3{width:calc(var(--off)*2);height:calc(var(--off)*2);--o:.06}

/* parhelia: two sundogs level with the eye */
.dog{width:0;height:0}
.dog.l{left:calc(var(--off)*-1)}
.dog.r{left:var(--off)}
.dog>i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;display:block}
.dog .core{width:calc(var(--ms)*.30);height:calc(var(--ms)*.375);
  background:radial-gradient(closest-side,rgba(255,250,238,.95),rgba(var(--cream),.62) 23%,rgba(var(--cream),.14) 47%,rgba(var(--cream),.012) 70%,rgba(var(--cream),0))}
.dog .glow{width:calc(var(--ms)*.8);height:calc(var(--ms)*1.52);
  background:radial-gradient(closest-side,rgba(var(--brass),.12),rgba(var(--brass),.07) 40%,rgba(var(--brass),.016) 80%,rgba(var(--brass),0))}
.dog .tail{width:calc(var(--ms)*2.42);height:calc(var(--ms)*.55);
  background:radial-gradient(closest-side,rgba(var(--cream),.035),rgba(var(--cream),.02) 40%,rgba(var(--cream),.005) 80%,rgba(var(--cream),0))}
.dog.l .tail{left:calc(var(--ms)*-.12)}
.dog.r .tail{left:calc(var(--ms)*.12)}

/* the seal: eye of the mark sits on the parhelic line */
.seal{width:var(--ms);height:auto;transform:translate(-50.3%,-56.94%)!important;display:block}

.word{top:var(--word-y)!important;transform:translate(-50%,0)!important;white-space:nowrap;
  font-size:var(--word-size);font-weight:500;letter-spacing:var(--word-track);
  padding-left:var(--word-track);line-height:1.2;text-transform:uppercase;color:rgba(var(--cream),.92);font-feature-settings:"kern"}

/* quiet contact + footer */
.base{position:absolute;left:0;right:0;bottom:0;padding:0 24px calc(26px + env(safe-area-inset-bottom));text-align:center}
.contact{display:inline-block;font-size:13px;letter-spacing:.16em;color:rgba(var(--cream),.62);margin-bottom:22px;padding:4px 0;transition:color .4s}
.contact:hover{color:rgba(var(--cream),.92)}
.foot{font-size:10px;letter-spacing:.24em;line-height:2;color:rgba(var(--cream),.36)}
.foot .sep{margin:0 .7em}
.foot a{transition:color .4s}
.foot a:hover{color:rgba(var(--cream),.75)}
.nb{white-space:nowrap}
.foot .mbr{display:none}

/* one slow fade-in (only when JS is running; without JS the page simply shows) */
html.js .fade{opacity:0;transition:opacity 3.4s cubic-bezier(.33,0,.2,1) .25s}
html.js.in .fade{opacity:1}
@media (prefers-reduced-motion:reduce){
  html.js .fade{transition:opacity .01s linear}
}

/* phones / narrow portrait — same idea, tighter scale */
@media (max-width:640px) and (orientation:portrait){
  :root{--ms:30vw;--off:40vw;--cy:42%;
    --word-size:min(4.1vw,20px);--word-track:.3em;--word-y:calc(var(--off)*1.18)}
  .contact{font-size:12px;letter-spacing:.12em;margin-bottom:16px}
  .foot{font-size:9px;letter-spacing:.2em;line-height:2.1}
  .foot .sep.wrap{display:none}
  .foot .mbr{display:inline}
}

/* very short landscape windows: let the page scroll instead of colliding */
@media (max-height:520px) and (orientation:landscape){
  .page{min-height:520px}
}

/* legal page */
.legal{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center}
.legal .home img{width:64px;height:auto;display:block;margin:0 auto 44px}
.legal h1{font-size:14px;font-weight:500;letter-spacing:.42em;padding-left:.42em;color:rgba(var(--cream),.92);margin-bottom:36px}
.legal dl{font-size:13px;letter-spacing:.14em;line-height:2.2;color:rgba(var(--cream),.7)}
.legal dt{font-size:10px;letter-spacing:.24em;color:rgba(var(--cream),.38);margin-top:18px}
.legal dt:first-child{margin-top:0}
.legal dd a:hover{color:rgba(var(--cream),.95)}
.legal .back{margin-top:56px;font-size:10px;letter-spacing:.24em;color:rgba(var(--cream),.36)}
.legal .back:hover{color:rgba(var(--cream),.75)}