/* ==========================================================================
   A to Z Legal Services PLLC — holding page
   Ivory stock, navy ink, burnished gold.
   Ornament sits at the page edge; the centre is left to the mark.
   ========================================================================== */

:root{
  --paper:#FAF8F3;
  --paper-2:#F2EEE5;
  --ink:#0E1D38;
  --ink-soft:#5A6472;
  --gold:#B78F32;
  --gold-hi:#D9B75F;

  --display:"Libre Caslon Display",Georgia,serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --inset:clamp(14px,2.6vw,30px);   /* frame margin */
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:
    radial-gradient(1100px 760px at 50% 26%,#FFFFFF,transparent 62%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ==========================================================================
   The frame — four hairlines drawn from their centres, with gold corners
   ========================================================================== */
.frame{position:fixed;inset:0;pointer-events:none;z-index:2}

.frame__rule{
  position:absolute;
  background:var(--ink);
  opacity:.16;
}
.frame__rule--top,
.frame__rule--bottom{
  left:var(--inset);right:var(--inset);
  height:1px;
}
.frame__rule--top{top:var(--inset)}
.frame__rule--bottom{bottom:var(--inset)}

.frame__rule--left,
.frame__rule--right{
  top:var(--inset);bottom:var(--inset);
  width:1px;
}
.frame__rule--left{left:var(--inset)}
.frame__rule--right{right:var(--inset)}

.corner{
  position:absolute;
  width:clamp(22px,3.4vw,34px);
  height:auto;
  color:var(--gold);
}
.corner--tl{top:var(--inset);left:var(--inset);transform:translate(-.5px,-.5px)}
.corner--tr{top:var(--inset);right:var(--inset);transform:translate(.5px,-.5px) scaleX(-1)}
.corner--bl{bottom:var(--inset);left:var(--inset);transform:translate(-.5px,.5px) scaleY(-1)}
.corner--br{bottom:var(--inset);right:var(--inset);transform:translate(.5px,.5px) scale(-1)}

/* ==========================================================================
   Layout
   ========================================================================== */
.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(var(--inset) + 44px) 26px calc(var(--inset) + 26px);
  position:relative;
}

.plate{
  text-align:center;
  max-width:640px;
  margin:auto;
}

/* the transparent PNG rests directly on the paper */
.mark{
  width:min(80vw,450px);
  margin:0 auto 34px;
}

.place{
  margin:0;
  font-family:var(--mono);
  font-size:.71rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
}

/* a single ruled break, drawn from the centre out */
.divider{
  display:block;
  width:100%;max-width:340px;
  height:1px;
  margin:24px auto;
  background:linear-gradient(90deg,transparent,rgba(14,29,56,.28) 30%,rgba(14,29,56,.28) 70%,transparent);
}

.statement{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.55rem,4.4vw,2.45rem);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* ---------- Optional contact block (commented out in the HTML) ---------- */
.contact{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:10px 34px;
  justify-content:center;
  margin:34px 0 0;padding:0;
}
.contact a{
  color:var(--ink);
  text-decoration:none;
  font-size:.98rem;
  border-bottom:1px solid var(--gold);
  padding-bottom:2px;
}
.contact a:hover{color:var(--gold)}

/* ---------- Footer ---------- */
.foot{
  margin-top:auto;
  padding-top:48px;
  text-align:center;
  color:var(--ink-soft);
}
.foot p{margin:0 0 8px;font-size:.81rem}
.notice{
  max-width:46ch;
  margin-inline:auto;
  font-size:.73rem;
  line-height:1.55;
  color:#8A93A1;
}

/* ==========================================================================
   Load sequence: rules open, corners settle, then the plate rises
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .frame__rule--top,.frame__rule--bottom{transform:scaleX(0)}
  .frame__rule--left,.frame__rule--right{transform:scaleY(0)}
  .frame__rule{animation:open 1.15s cubic-bezier(.22,.7,.2,1) forwards}
  .frame__rule--left,.frame__rule--right{animation-delay:.18s}

  .corner{opacity:0;animation:settle .8s 1.05s ease forwards}

  .mark,.place,.divider,.statement,.foot{opacity:0;animation:rise .9s ease forwards}
  .mark{animation-delay:.25s}
  .place{animation-delay:.55s}
  .divider{animation-delay:.68s}
  .statement{animation-delay:.8s}
  .foot{animation-delay:1.15s}
}

@keyframes open{to{transform:scale(1)}}
@keyframes settle{to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:600px){
  .page{padding:calc(var(--inset) + 30px) 24px calc(var(--inset) + 20px)}
  .mark{margin-bottom:28px}
  .divider{margin:20px auto;max-width:240px}
  .place{letter-spacing:.2em;font-size:.66rem}
}

@media (max-height:560px){
  .divider{margin:16px auto}
  .foot{padding-top:28px}
}