@font-face{
    font-family:"PP Eiko";
    src:url("assets/fonts/PPEiko-Light.woff2") format("woff2"),
        url("assets/fonts/PPEiko-Light.woff") format("woff");
    font-weight:300;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:"PP Eiko";
    src:url("assets/fonts/PPEiko-Medium.woff2") format("woff2"),
        url("assets/fonts/PPEiko-Medium.woff") format("woff");
    font-weight:500;
    font-style:normal;
    font-display:swap;
  }
  :root{
    --bone:#E8E7E3;
    --ink:#14140F;
    --ash:#6E6D66;
    --blue:#2152FF;
    --serif:"EB Garamond",Garamond,"Times New Roman",serif;
    --display:"PP Eiko",Georgia,"Times New Roman",serif;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;min-height:100vh;background:var(--bone);color:var(--ink);
    font-family:var(--serif);font-weight:400;text-align:center;
    display:flex;flex-direction:column;align-items:center;
    padding:clamp(52px,9vh,92px) 24px clamp(44px,7vh,72px);
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--blue);text-decoration:none;
    border-bottom:1px solid rgba(33,82,255,.28);transition:border-color .25s}
  a:hover{border-bottom-color:var(--blue)}
  a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

  .mark{width:46px;height:auto;display:block}

  h1{
    font-family:var(--display);font-weight:300;margin:clamp(56px,9vh,104px) 0 0;
    font-size:clamp(2.15rem,6.7vw,4rem);
    line-height:1.08;letter-spacing:-.021em;max-width:19ch;
  }

  /* framed mandate ------------------------------------------------ */
  figure{margin:clamp(54px,8.5vh,96px) 0 0;width:min(548px,92vw)}
  .plate{position:relative;container-type:inline-size}
  .plate::before{
    content:"";position:absolute;z-index:0;
    top:15.8%;right:17.6%;bottom:16%;left:17.4%;
    background-color:#FCFBF7;
    background-image:
      linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.2)),
      url("assets/canvas-paper-texture.png");
    background-position:center;
    background-size:cover;
    box-shadow:inset 0 0 32px rgba(91,75,48,.08);
  }
  .plate img{
    position:relative;z-index:1;display:block;width:100%;height:auto;
    /* shadow cast in CSS from the frame's own silhouette, so it can
       never be clipped by the image bounds */
    filter:
      drop-shadow(0 6px 12px rgba(22,20,14,.14))
      drop-shadow(0 22px 34px rgba(22,20,14,.15))
      drop-shadow(0 44px 76px rgba(22,20,14,.11));
  }
  .plate .mandate{
    position:absolute;z-index:2;top:19.5%;right:20.5%;bottom:21%;left:20%;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;font-family:var(--serif);font-weight:400;
    font-size:clamp(14px,3.9cqw,19px);line-height:1.58;letter-spacing:.01em;
  }
  .plate p{margin:0;max-width:32ch}
  .plate p+p{margin-top:1.25em}

  figcaption{
    margin-top:8%;font-size:10px;font-weight:600;letter-spacing:.34em;
    text-transform:uppercase;color:var(--ash);
  }

  .contact{margin:clamp(46px,7.5vh,78px) 0 0;font-size:.9rem;font-style:italic}

  /* wordmark lockup ----------------------------------------------- */
  footer{margin-top:auto;padding-top:clamp(60px,10vh,112px)}
  .lockup{
    display:flex;align-items:center;justify-content:center;
    gap:clamp(12px,2.6vw,30px);
  }
  .lockup img{
    flex:none;width:clamp(48px,7vw,78px);height:auto;opacity:.92;
  }
  .lockup span{
    font-size:clamp(11.5px,2.1vw,20px);font-weight:400;
    letter-spacing:.26em;text-transform:uppercase;
    white-space:nowrap;margin-right:-.26em;  /* cancel trailing track */
  }

  body>*{opacity:0;animation:in 1.1s cubic-bezier(.2,.6,.2,1) forwards}
  .mark{animation-delay:.1s}
  h1{animation-delay:.3s}
  figure{animation-delay:.55s}
  .contact{animation-delay:.8s}
  footer{animation-delay:.95s}
  @keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @media (max-width:560px){
    .plate img{filter:
      drop-shadow(0 4px 8px rgba(22,20,14,.14))
      drop-shadow(0 13px 20px rgba(22,20,14,.15))
      drop-shadow(0 26px 44px rgba(22,20,14,.11));}
  }
  @media (prefers-reduced-motion:reduce){body>*{opacity:1;transform:none;animation:none}}