/* dqa.fromelelectronics.com. Fromel type (Peignot headings, never a serif; IBM Plex for text),
   the Lotus board palette, Fromel brass for the Q point. Fonts self-hosted. No third-party requests.
   A held object: nothing pinned, nothing moves. */
@font-face{font-family:'Peignot';font-weight:400;font-display:swap;size-adjust:112%;src:url(/assets/fonts/peignot.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');}

:root{
  --board:#16191a;
  --text:#e4e7e7;
  --muted:#9ea5a7;
  --brass:#c0a066;
  --display:'Peignot','Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(1rem,4vw,2.5rem);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--board);color:var(--text);font:1.0625rem/1.65 var(--body)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* The frame stays with the window; the drawing sits in it like art on a sleeve. */
.frame{position:fixed;inset:0;z-index:-1;overflow:hidden}
.frame img{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);width:min(58vw,86svh*1.43);height:auto}

.masthead{padding:var(--gutter)}
.masthead img{display:block;width:clamp(8rem,14vw,11rem);height:auto}
main{align-self:center;padding:0 var(--gutter)}
h1{margin:0;font:400 clamp(2.5rem,6vw,5rem)/1.12 var(--display)}
h1 span{display:block}
main p{margin:.75rem 0 0;color:var(--muted)}
.foot{padding:var(--gutter);display:flex;justify-content:flex-end;color:var(--muted)}
.cast{margin:0;font-size:.82rem}
.cast a{text-decoration:none;display:inline-flex;align-items:center;gap:.5em}
.cast a:hover{color:var(--text)}
.nf-mark{flex:none;width:1.4em;height:1.75em;background:currentColor;-webkit-mask:url(/assets/nf-mark.webp) center/contain no-repeat;mask:url(/assets/nf-mark.webp) center/contain no-repeat}

/* Narrow: the name above, the drawing below it. */
@media (max-width:48rem){
  main{align-self:start;padding-top:1.5rem}
  .frame img{top:auto;transform:none;bottom:4.5rem;left:var(--gutter);right:var(--gutter);width:calc(100% - 2*var(--gutter))}
}