:root{
    --paper:#F7F5F1;
    --band:#E6DFD4;
    --ink:#16150F;
    --muted:#6E695E;
    --rule:#C9C2B4;
    --redline:#8A2B20;
    --gap:#A8761F;
    --held:#4A6A45;
    --tier-banned:#8A2B20;
    --tier-generic:#B44A1C;
    --tier-future:#53487A;
    --tier-unsub:#A8761F;
    --display:'Playfair Display', Georgia, 'Times New Roman', serif;
    --body:'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  }

  *{box-sizing:border-box}

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-weight:300;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }

  .sheet{
    max-width:1080px;
    margin:0 auto;
    padding:0 28px 96px 28px;
    position:relative;
  }

  .band{
    position:fixed;
    left:0; top:0; bottom:0;
    width:34px;
    background:var(--band);
    z-index:0;
  }
  .band span{
    position:absolute;
    bottom:24px; left:50%;
    transform:translateX(-50%) rotate(180deg);
    writing-mode:vertical-rl;
    font-size:9px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
  }

  .sheet > *{position:relative; z-index:1}
  .sheet > footer{z-index:0}

  /* ---------- masthead ---------- */
  .masthead{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:32px;
    padding:38px 0 22px 0;
    border-bottom:1px solid var(--ink);
  }
  .eyebrow{
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 10px 0;
  }
  .eyebrow strong{font-weight:500; color:var(--ink)}
  .masthead h1{
    font-family:var(--display);
    font-weight:500;
    font-size:clamp(30px, 5vw, 46px);
    line-height:1.02;
    letter-spacing:-.015em;
    margin:0;
  }
  .credit{
    text-align:right;
    font-size:11px;
    line-height:1.5;
    color:var(--muted);
    letter-spacing:.02em;
    padding-top:6px;
    min-width:150px;
  }
  .credit b{
    display:block;
    font-family:var(--display);
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    letter-spacing:0;
  }

  .stepbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:14px 0 0 0;
  }
  .stepline{
    display:flex;
    gap:26px;
    flex-wrap:wrap;
    padding:0;
    margin:0;
    font-size:15px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--rule);
  }
  .stepline b{font-weight:400}
  .stepline .on{color:var(--ink)}
  .stepline .done{color:var(--muted)}
  .stepnav{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }
  .stepnav .quiet{
    padding:8px 14px;
  }

  /* ---------- generic ---------- */
  section{padding-top:35px}

  /* Register report: verdict sits tight under the stepline */
  #s-result{padding-top:14px}

  .verdict{
    font-family:var(--display);
    font-size:26px;
    line-height:1.3;
    max-width:none;
    margin:0 0 12px 0;
  }
  .verdict-summary{
    font-family:var(--display);
    font-size:19px;
    line-height:1.75;
    margin:0 0 22px 0;
  }
  .text-link{
    display:inline;
    margin:0;
    padding:0;
    border:none;
    border-radius:0;
    background:none;
    font:inherit;
    color:var(--redline);
    text-decoration:underline;
    cursor:pointer;
  }
  .text-link:hover{opacity:.82}
  .text-link:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
  .lede{
    font-family:var(--display);
    font-size:20px;
    line-height:1.38;
    max-width:34em;
    margin:0 0 20px 0;
  }
  .note{font-size:14px; color:var(--muted); max-width:38em}
  .label{
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    display:block;
    margin-bottom:8px;
  }

  textarea{
    width:100%;
    background:#FFFDFA;
    border:1px solid var(--rule);
    border-radius:0;
    padding:16px 18px;
    font-family:var(--body);
    font-weight:300;
    font-size:16px;
    line-height:1.6;
    color:var(--ink);
    resize:vertical;
  }
  textarea:focus{outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink)}

  .actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:16px}
  #copyCount{margin-left:auto; align-self:flex-start; line-height:1}

  button{
    font-family:var(--body);
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:400;
    padding:13px 22px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--paper);
    cursor:pointer;
    border-radius:0;
    transition:background .15s ease, color .15s ease;
  }
  button:hover{background:transparent; color:var(--ink)}
  button:focus-visible{outline:2px solid var(--redline); outline-offset:2px}
  button.ghost{background:transparent; color:var(--ink)}
  button.ghost:hover{background:var(--ink); color:var(--paper)}
  button.quiet{
    background:transparent;
    border-color:var(--rule);
    color:var(--muted);
    text-transform:none;
    letter-spacing:.02em;
    font-size:13px;
  }
  button.quiet:hover{border-color:var(--ink); color:var(--ink); background:transparent}
  button[disabled]{opacity:.35; cursor:not-allowed}
  button[disabled]:hover{background:var(--ink); color:var(--paper)}

  .hidden{display:none !important}

  /* ---------- marked-up copy + margin notes ---------- */
  /* Margin is out of flow so its height doesn't push the actions below. */
  .proof{
    position:relative;
    display:block;
    border-top:1px solid var(--ink);
    margin-top:22px;
    padding-right:282px;
  }
  .proof-copy{
    padding:26px 34px 30px 0;
    font-family:var(--display);
    font-size:19px;
    line-height:1.75;
    border-right:1px solid var(--rule);
  }
  .proof-margin{
    position:absolute;
    top:0;
    right:0;
    width:260px;
    padding:26px 0 30px 22px;
    box-sizing:border-box;
  }

  /* Register report: both columns in flow so stacked margin notes grow the page */
  .proof.proof--report{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 260px;
    gap:0;
    margin-top:0;
    padding-right:0;
    align-items:start;
  }
  .proof.proof--report .result-main{
    min-width:0;
    border-right:1px solid var(--rule);
    padding:26px 34px 30px 0;
  }
  /* Label uses .label (same as Your rewrite); no extra pad on the copy itself */
  .proof.proof--report .proof-copy{
    border-right:none;
    padding:0;
    margin:0;
  }
  .proof.proof--report .result-main > .tally{margin-top:22px}
  .proof.proof--report .proof-margin{
    position:static;
    width:auto;
    height:auto;
    padding:26px 0 30px 22px;
  }
  .proof.proof--report mark{
    cursor:default;
    pointer-events:none;
  }
  .proof.proof--report mark:hover{background:none}
  .proof.proof--report .marginnote h4{
    text-transform:none;
    letter-spacing:0;
    font-family:var(--display);
    font-size:14px;
    font-weight:600;
  }
  .proof.proof--report .marginnote .claim-type{
    display:block;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 8px 0;
  }

  mark{
    background:none;
    color:inherit;
    cursor:pointer;
    padding:0 1px;
    border-bottom:2px solid var(--tier-banned);
    position:relative;
    transition:background .15s ease;
  }
  mark[data-tier="banned"]{border-bottom-color:var(--tier-banned)}
  mark[data-tier="generic"]{border-bottom-color:var(--tier-generic)}
  mark[data-tier="future"]{border-bottom-color:var(--tier-future)}
  mark[data-tier="unsubstantiated"]{border-bottom-color:var(--tier-unsub)}
  mark:hover{background:rgba(22,21,15,.06)}
  mark[data-state="gap"]{border-bottom-style:dashed; background:rgba(168,118,31,.13)}
  mark[data-state="held"]{background:rgba(74,106,69,.11)}
  mark[aria-current="true"]{background:rgba(22,21,15,.1)}
  mark:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

  .tier-legend .label{margin-bottom:8px}
  .tier-legend ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .tier-legend li{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    line-height:1.3;
    color:var(--muted);
  }
  .tier-legend i{
    display:block;
    width:14px;
    height:0;
    border-bottom:3px solid var(--tier-banned);
    flex-shrink:0;
  }
  .tier-legend li[data-tier="banned"] i{border-bottom-color:var(--tier-banned)}
  .tier-legend li[data-tier="generic"] i{border-bottom-color:var(--tier-generic)}
  .tier-legend li[data-tier="future"] i{border-bottom-color:var(--tier-future)}
  .tier-legend li[data-tier="unsubstantiated"] i{border-bottom-color:var(--tier-unsub)}

  /* Inside the white box, above the section title */
  .tier-legend--row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 22px;
    margin:0 0 16px 0;
    padding-bottom:14px;
    border-bottom:1px solid var(--rule);
  }
  .tier-legend--row .label{margin:0}
  .tier-legend--row ul{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px 18px;
  }
  #s-questions .claimcard{
    max-width:none;
    overflow:visible;
  }
  #s-flags .claimcard{
    max-width:none;
    overflow:visible;
  }
  #s-flags .claimcard .actions{margin-top:22px}

  /* Flags: tier breakdown continues in the same tally line */
  .tally span[data-tier]{
    border-bottom:2px solid currentColor;
  }
  .tally span[data-tier="banned"]{color:var(--tier-banned); border-bottom-color:var(--tier-banned)}
  .tally span[data-tier="generic"]{color:var(--tier-generic); border-bottom-color:var(--tier-generic)}
  .tally span[data-tier="future"]{color:var(--tier-future); border-bottom-color:var(--tier-future)}
  .tally span[data-tier="unsubstantiated"]{color:var(--tier-unsub); border-bottom-color:var(--tier-unsub)}
  .tally span[data-tier] b{font-weight:500; font-family:inherit; font-size:inherit; color:inherit}
  .tier-tally-link{
    color:inherit;
    text-decoration:none;
  }
  .tier-tally-link:hover{opacity:.82}
  .tier-tally-link:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

  .tally{
    font-size:19px;
    color:var(--muted);
    margin:0 0 4px 0;
    line-height:1.45;
  }
  .tally > b{
    font-family:var(--display);
    font-size:32px;
    color:var(--redline);
    font-weight:600;
  }

  .marginnote{
    border-top:1px solid var(--ink);
    padding:12px 0 16px 0;
    font-size:13px;
    line-height:1.5;
  }
  .marginnote:first-child{border-top:none; padding-top:0}
  .marginnote h4{
    font-family:var(--body);
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin:0 0 6px 0;
    color:var(--redline);
    font-weight:500;
  }
  .marginnote p{margin:0 0 8px 0; color:var(--muted)}
  .marginnote .rule-ref{
    display:block;
    font-size:11px;
    color:var(--ink);
    border-left:2px solid var(--rule);
    padding-left:9px;
    margin-bottom:8px;
  }

  /* ---------- question sequence ---------- */
  .claimcard{
    border:1px solid var(--ink);
    background:#FFFDFA;
    padding:26px 28px 28px 28px;
    max-width:760px;
  }
  .claimquote{
    font-family:var(--display);
    font-size:19px;
    line-height:1.5;
    margin:0 0 4px 0;
  }
  .claimquote em{font-style:normal; border-bottom:2px solid var(--redline)}
  .claimquote mark{font-family:inherit; font-size:inherit; line-height:inherit; position:relative; cursor:help}

  /* Interrogate + Rewrite: regulatory blurb to the right of the hovered claim.
     Position is set in JS (placeClaimTip) from the mark's last line box. */
  .claimquote .claim-tip{
    display:none;
    position:fixed;
    left:0;
    top:0;
    width:320px;
    margin:0;
    padding:14px 16px 16px 16px;
    box-sizing:border-box;
    background:#FFFDFA;
    border:1px solid var(--ink);
    border-radius:0;
    box-shadow:0 6px 18px rgba(22,21,15,.14);
    z-index:6;
    pointer-events:none;
    font-family:var(--body);
    font-size:14px;
    font-weight:300;
    line-height:1.5;
    color:var(--ink);
    text-align:left;
    white-space:normal;
  }
  .claimquote .claim-tip.is-on{display:block}
  .claimquote .claim-tip::before{
    content:"";
    position:absolute;
    top:9px;
    left:-6px;
    width:10px;
    height:10px;
    background:#FFFDFA;
    border-left:1px solid var(--ink);
    border-bottom:1px solid var(--ink);
    transform:rotate(45deg);
  }
  .claimquote .claim-tip-head{
    display:block;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--redline);
    font-weight:500;
    margin:0 0 8px 0;
  }
  .claimquote .claim-tip-rule{
    display:block;
    font-size:13px;
    color:var(--ink);
    border-left:2px solid var(--rule);
    padding-left:9px;
    margin:0 0 10px 0;
  }
  .claimquote .claim-tip-why{
    display:block;
    color:var(--muted);
    margin:0 0 12px 0;
  }
  .claimquote .claim-tip .label{margin:0 0 6px 0}
  .claimquote .claim-tip-evidence{
    display:block;
    color:var(--muted);
    font-size:13px;
  }
  #s-flags .claimquote .claim-tip{
    width:420px;
    max-width:calc(100vw - 24px);
    padding:16px 18px 18px 18px;
  }
  #s-flags .claimquote .claim-tip::before{
    top:var(--arrow-top, 9px);
  }
  #s-flags .claimquote .claim-tip.claim-tip--flip::before{
    left:auto;
    right:-6px;
    border-left:none;
    border-bottom:none;
    border-right:1px solid var(--ink);
    border-top:1px solid var(--ink);
  }
  #s-flags .claim-tip-pill{
    display:inline-block;
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    border:1px solid var(--ink);
    color:var(--ink);
    padding:3px 7px;
    margin:0 0 10px 0;
  }
  #s-flags .claim-tip-pill[data-tier="banned"]{
    border-color:var(--tier-banned);
    color:var(--tier-banned);
  }
  #s-flags .claim-tip-pill[data-tier="generic"]{
    border-color:var(--tier-generic);
    color:var(--tier-generic);
  }
  #s-flags .claim-tip-pill[data-tier="future"]{
    border-color:var(--tier-future);
    color:var(--tier-future);
  }
  #s-flags .claim-tip-pill[data-tier="unsubstantiated"]{
    border-color:var(--tier-unsub);
    color:var(--tier-unsub);
  }
  #s-flags .claim-tip-banner{
    display:block;
    font-weight:500;
    margin:0 0 10px 0;
  }
  #s-flags .claim-tip-note{
    display:block;
    font-size:13px;
    color:var(--muted);
    margin:0 0 10px 0;
  }
  #s-flags .claim-tip-list{
    margin:0 0 12px 0;
    padding:0 0 0 1.1em;
    color:var(--muted);
    font-size:13px;
  }
  #s-flags .claim-tip-list li{margin:0 0 4px 0}
  #s-flags .claim-tip-list li:last-child{margin-bottom:0}
  #s-flags .claim-tip-model{
    display:block;
    margin:0 0 6px 0;
  }
  #s-flags .claim-tip-modelwhy{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin:0 0 12px 0;
  }
  #s-flags .claim-tip-ecolabel{
    display:block;
    font-size:13px;
    margin:0 0 12px 0;
  }
  #s-flags .claim-tip-cut{
    display:block;
    font-weight:500;
  }
  #s-rewrite .claimcard{
    max-width:none;
    overflow:visible;
  }

  .progress{
    display:flex;
    gap:5px;
    margin:22px 0 20px 0;
  }
  .pip{height:3px; flex:1; background:var(--rule)}
  .pip.on{background:var(--ink)}
  .pip.gap{background:var(--gap)}
  .pip.held{background:var(--held)}

  .question{
    font-family:var(--display);
    font-size:24px;
    line-height:1.28;
    margin:0 0 6px 0;
  }
  .qcount{
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 8px 0;
  }
  .qphrase{
    font-family:var(--display);
    font-size:20px;
    font-weight:500;
    font-style:italic;
    line-height:1.3;
    color:var(--redline);
    margin:0 0 10px 0;
  }
  .qhint{
    font-size:13.5px;
    color:var(--muted);
    margin:0 0 16px 0;
  }

  .anim{animation:rise .32s ease both}
  @keyframes rise{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}

  /* ---------- register + scores ---------- */
  .register{border-top:1px solid var(--ink); margin-top:8px}
  .regrow{
    padding:15px 0;
    border-bottom:1px solid var(--rule);
    font-size:14.5px;
  }
  .regrow p{margin:5px 0 0 0; font-size:13px; color:var(--muted)}
  .regrow strong{font-weight:500}

  .scores{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 220px;
    grid-template-rows:auto auto;
    gap:14px 28px;
    align-items:start;
    border-top:1px solid var(--ink);
    padding:20px 100px 0 100px;
    margin:0 0 28px 0;
  }
  .scores > .score:nth-child(1){grid-column:1; grid-row:1}
  .scores > .score:nth-child(2){grid-column:1; grid-row:2}
  .scores > .quadwrap{
    grid-column:2;
    grid-row:1 / span 2;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .score .num{
    font-family:var(--display);
    font-size:40px;
    line-height:.95;
    font-weight:500;
    display:block;
  }
  .score .num.risk{color:var(--redline)}
  .score p{font-size:12.5px; color:var(--muted); margin:6px 0 0 0; max-width:36em}
  .meter{height:3px; background:var(--rule); margin-top:8px; max-width:476px}
  .meter i{display:block; height:3px; background:var(--ink)}
  .meter i.risk{background:var(--redline)}

  .quad{width:100%; height:auto; display:block}
  .quadcap{
    font-size:11px;
    color:var(--muted);
    margin-top:8px;
    line-height:1.45;
  }

  .rewritebox{border-top:1px solid var(--ink); margin-top:40px; padding-top:26px}

  /* Escape hatch: appears after idle time on rewrite (same idea as app-OLD). */
  .escape-hatch{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
  }
  .escape-hatch.hidden{display:none}
  .model{
    border-left:2px solid var(--held);
    padding:2px 0 2px 18px;
    margin:18px 0 0 0;
    font-family:var(--display);
    font-size:18px;
    line-height:1.55;
    max-width:38em;
  }
  #compliantSuggestionsFirst .model + .note,
  #compliantSuggestionsRest .model + .note{margin-top:14px}
  #compliantSuggestionsFirst .note + .label,
  #compliantSuggestionsRest .note + .label{margin-top:28px}
  #compliantSuggestionsFirst .label + .model,
  #compliantSuggestionsRest .label + .model{margin-top:0}
  #compliantSuggestionsRest:not(:empty){margin-top:28px}

  /* Share email gate: one full-width overlay from the cut downward */
  .share-gated{
    margin-top:28px;
  }
  .share-gate{
    position:absolute;
    left:0;
    width:100%;
    z-index:40;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:24px 28px 64px;
    box-sizing:border-box;
    background:rgba(247, 245, 241, 0.8);
  }
  .share-gate.hidden{display:none}
  .share-gate-panel{
    background:var(--paper);
    border:1px solid var(--ink);
    width:calc(28em + 400px);
    max-width:90%;
    min-height:1200px;
    padding-top:96px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
  }
  .share-gate-panel-inner{
    padding:28px 32px;
    max-width:28em;
    width:100%;
  }
  .share-gate-panel h3{
    font-family:var(--display);
    font-size:22px;
    font-weight:500;
    margin:0 0 10px 0;
    line-height:1.3;
  }
  .share-gate-panel-inner > p{
    margin:0 0 20px 0;
    font-size:15px;
    line-height:1.5;
    color:var(--muted);
  }
  .share-gate-form input[type="text"],
  .share-gate-form input[type="email"]{
    width:100%;
    background:#FFFDFA;
    border:1px solid var(--rule);
    border-radius:0;
    padding:14px 16px;
    font-family:var(--body);
    font-weight:300;
    font-size:16px;
    color:var(--ink);
    margin:0 0 14px 0;
  }
  .share-gate-form input[type="text"]:focus,
  .share-gate-form input[type="email"]:focus{
    outline:2px solid var(--ink);
    outline-offset:1px;
    border-color:var(--ink);
  }
  .share-gate-consent{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:0 0 10px 0;
    font-size:14px;
    line-height:1.4;
    color:var(--ink);
    cursor:pointer;
  }
  .share-gate-consent input{margin:3px 0 0 0; flex-shrink:0}
  .share-gate-notice{
    margin:0 0 14px 0;
    font-size:12px;
    line-height:1.45;
    color:var(--muted);
  }
  .share-gate-notice a{color:var(--ink)}
  .share-gate-status{
    margin:0 0 12px 0;
    font-size:13px;
    line-height:1.4;
    color:var(--held);
  }
  .share-gate-status[data-kind="error"]{color:var(--redline)}
  .share-gate-status[data-kind="pending"]{color:var(--muted)}
  .hp-field{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
  }
  .yours{
    border-left:2px solid var(--rule);
    padding:2px 0 2px 18px;
    margin:0 0 26px 0;
    font-family:var(--display);
    font-size:18px;
    line-height:1.55;
    max-width:38em;
    color:var(--muted);
  }
  #yourRewrite .yours{margin-bottom:12px}
  #yourRewrite .yours:last-child{margin-bottom:26px}

  footer{
    border-top:1px solid var(--rule);
    margin-top:70px;
    padding-top:18px;
    font-size:11.5px;
    color:var(--muted);
    display:flex;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    line-height:1.5;
  }
  footer p{margin:0; max-width:60ch}
  .wordmark{font-size:14px; letter-spacing:-.01em; color:var(--ink); white-space:nowrap}
  .wordmark b{font-weight:500}
  .wordmark span{color:var(--muted)}

  @media (max-width:820px){
    .band{display:none}
    .proof{padding-right:0}
    .proof-copy{border-right:none; padding-right:0; border-bottom:1px solid var(--rule)}
    .proof-margin{
      position:static;
      width:auto;
      padding:22px 0 0 0;
    }
    .proof--report,
    .proof.proof--report{
      grid-template-columns:1fr;
    }
    .proof.proof--report .result-main{
      border-right:none;
      padding-right:0;
      border-bottom:1px solid var(--rule);
      padding-bottom:22px;
      margin-bottom:8px;
    }
    .proof.proof--report .proof-margin{padding:22px 0 0 0}
    .scores{
      grid-template-columns:1fr;
      grid-template-rows:auto;
      gap:20px;
      padding-left:0;
      padding-right:0;
    }
    .scores > .score:nth-child(1),
    .scores > .score:nth-child(2),
    .scores > .quadwrap{
      grid-column:1;
      grid-row:auto;
    }
    .masthead{flex-direction:column; gap:14px}
    .credit{text-align:left}
  }
  @media (prefers-reduced-motion:reduce){
    .anim{animation:none}
    *{transition:none !important}
  }