@font-face{font-family:"Syne";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Syne-700.woff2) format("woff2")}
@font-face{font-family:"Fragment Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/FragmentMono-400.woff2) format("woff2")}
@font-face{font-family:"Fragment Mono";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/FragmentMono-400-italic.woff2) format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
:root{
    color-scheme: light;
    --paper:#e9e4d9;
    --paper-hi:#f1ede4;
    --ink:#1b1b1b;
    --ink-soft:#3a3a38;
    --label:#5a6764;
    --rule:#b7afa0;
    --pop:#d45bb6;
    --pop-lite:#f386a1;
    --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --display:"Syne",Futura,"Trebuchet MS",system-ui,sans-serif;
  }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--mono);
    -webkit-font-smoothing:antialiased;
  }
  .sheet{
    max-width:56rem;
    margin:0 auto;
    padding-inline:clamp(1rem,5vw,4.5rem);
    padding-block:clamp(2.5rem,8vw,5.5rem);
    display:flex;
    flex-direction:column;
    gap:clamp(2rem,5vw,3.25rem);
  }

  /* ---- masthead ---- */
  .masthead{display:flex;flex-direction:column;gap:1.75rem}
  .mark{
    width:clamp(132px,22vw,188px);height:auto;display:block;overflow:visible;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .mark .offset{
    transform:translate(38px,38px);
    transform-box:view-box;
    transition:transform .5s cubic-bezier(.2,.85,.25,1);
  }
  .mark:hover .offset,
  .mark:focus-visible .offset,
  .mark.registered .offset{transform:translate(0,0)}
  .mark:focus-visible{outline:2px solid var(--pop);outline-offset:6px}
  @media (prefers-reduced-motion:reduce){.mark .offset{transition:none}}
  .eyebrow{
    font-size:.6875rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--label);
    display:flex;
    flex-wrap:wrap;
    gap:.45rem 1.15rem;
  }
  .eyebrow span{white-space:nowrap}

  /* ---- thesis ---- */
  .thesis{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(1.6rem,5.4vw,2.95rem);
    line-height:1.14;
    letter-spacing:-.016em;
    margin:0;
    max-width:30ch;
    text-wrap:balance;
  }

  /* ---- misregistered double rule ---- */
  .registration{display:flex;flex-direction:column;gap:3px}
  .registration i{display:block;height:2px;background:var(--ink);border:0}
  .registration i:last-child{background:var(--pop);margin-left:1.5rem}

  /* ---- record ---- */
  .record{
    margin:0;
    display:grid;
    grid-template-columns:11.5rem minmax(0,1fr);
    column-gap:1.75rem;
    row-gap:1.1rem;
    font-size:.8125rem;
    line-height:1.6;
  }
  .record dt{
    font-size:.625rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--label);
    padding-top:.28rem;
  }
  .record dd{
    margin:0;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .record dd .sub{display:block;color:var(--ink-soft);font-size:.75rem}
  .record dd .ja{font-family:system-ui,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
  .mail{
    border-bottom:2px solid var(--pop-lite);
    padding-bottom:1px;
    -webkit-user-select:all;
    user-select:all;
  }
  @media (max-width:560px){
    .record{grid-template-columns:1fr;row-gap:.3rem}
    .record dt{padding-top:1rem}
    .record dt:first-of-type{padding-top:0}
  }


  /* ---- Augment Verify (a parody; it decides nothing) ---- */
  .verify{
    display:flex;flex-direction:column;gap:.7rem;
    border:1.5px solid var(--ink);
    background:var(--paper-hi);
    padding:1rem 1.1rem;
    max-width:21rem;
  }
  .vbox{display:flex;align-items:center;gap:.8rem;cursor:pointer;font-size:.8125rem}
  .vbox input{
    appearance:none;-webkit-appearance:none;margin:0;
    width:1.4rem;height:1.4rem;flex:none;
    border:1.5px solid var(--ink);background:var(--paper);
    display:grid;place-content:center;cursor:pointer;
  }
  .vbox input:checked::before{content:"";width:.7rem;height:.7rem;background:var(--pop)}
  .vbox input:focus-visible{outline:2px solid var(--pop);outline-offset:3px}
  .vresult{
    margin:0;min-height:1.2em;
    font-size:.75rem;color:var(--ink-soft);
  }
  .vresult.pending{color:var(--label)}
  .vresult.quote{font-style:italic;color:var(--ink)}
  .vcite{margin:0;font-size:.625rem;line-height:1.5;color:var(--label)}
  .vnote{margin:0;font-size:.6875rem;line-height:1.5;color:var(--ink-soft)}
  .vnote:empty,.vcite:empty{display:none}
  .vbrand{
    margin:0;font-size:.5625rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--label);
  }

  footer{
    font-size:.625rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--label);
  }