/* The look of the site's own pages: sign-in, access, the failure notices, admin and downloads.
   It carries the landing page's ink, paper and fonts, so a page the Worker writes sits beside index.html.
   A page links it as /site.css and needs no other style: plain elements are styled, and the classes below
   are the few it may add (.page, .wide, .site-head, .eyebrow, .panel, .notice, .actions, .row, .button,
   .quiet, .danger, .table-wrap, .downloads, .muted, .sr-only). */
@import url("https://fonts.googleapis.com/css2?family=Special+Elite&family=Cutive+Mono&family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap");

:root{
  --void:#080604;
  --char:#15100a;
  --paper:#d9cdb2;
  --ink:#2b2417;
  --stamp:#8f2116;
  --stamp-hi:#c0432f;
  --stamp-deep:#5e140c;
  --gold:#a8823c;
  --gold-hi:#d8b25e;
  --bone:#e8dfc8;
  --muted:#948868;
  --column:40rem;
  --gutter:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  font-family:'Cutive Mono',monospace;font-size:1rem;line-height:1.7;
  color:var(--bone);overflow-wrap:break-word;
  background-color:var(--void);
  background-image:radial-gradient(ellipse 90% 460px at 50% 0, rgba(90,25,15,.32), transparent);
  background-repeat:no-repeat;
}
::selection{background:var(--stamp);color:var(--bone)}
[hidden]{display:none !important}

/* ---- the column: 40 rem of text between two 16 px gutters ---- */
.page,body > header,body > main,body > footer{
  width:100%;max-width:calc(var(--column) + 2 * var(--gutter));
  margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);
}
.wide{max-width:calc(64rem + 2 * var(--gutter))}
main{padding-top:1.5rem;padding-bottom:3rem}

.site-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;
  padding-top:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid rgba(120,90,45,.3);
  font-family:'Special Elite',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
}
.site-head a{color:var(--bone);text-decoration:none}
.site-head a:hover{color:#ffd7a8}
.site-foot,body > footer{padding-top:2rem;padding-bottom:2.5rem;text-align:center;color:var(--muted);font-family:'Special Elite',monospace;font-size:.66rem;letter-spacing:.16em;line-height:1.9}

/* ---- type ---- */
h1,h2,h3{font-family:'IM Fell English SC',serif;font-weight:400;color:var(--bone);margin:0 0 .6rem}
h1{font-size:clamp(2.2rem,9vw,3.4rem);line-height:.95;letter-spacing:.01em;text-shadow:0 0 40px rgba(120,40,110,.45),0 6px 30px rgba(0,0,0,.8);margin-top:.4rem}
h2{font-size:clamp(1.5rem,5vw,1.9rem);line-height:1.1;margin-top:2.4rem}
h3{font-size:1.25rem;line-height:1.2;margin-top:1.6rem}
p,ul,ol,dl{margin:0 0 1rem}
ul,ol{padding-left:1.4rem}
.eyebrow{display:block;margin:2rem 0 .8rem;font-family:'Special Elite',monospace;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-hi)}
.lede{font-family:'IM Fell English',serif;font-style:italic;font-size:1.25rem;line-height:1.5;color:#cabd9f}
.muted{color:var(--muted)}
small,.small{font-size:.85rem}
a{color:var(--gold-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:#ffd7a8}
hr{border:0;border-top:1px solid rgba(120,90,45,.3);margin:2rem 0}
code{font-family:'Cutive Mono',monospace;background:var(--char);border:1px solid rgba(120,90,45,.3);padding:.05em .4em}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* ---- a sheet of paper, as the case file on the landing page ---- */
.panel{
  margin:1.6rem 0;padding:clamp(20px,5vw,36px);
  background:linear-gradient(160deg,var(--paper),#c4b795);color:var(--ink);
  border-top:3px solid var(--stamp);box-shadow:0 24px 60px rgba(0,0,0,.65);
}
.panel > :first-child{margin-top:0}
.panel > :last-child{margin-bottom:0}
.panel h1,.panel h2,.panel h3{color:var(--ink);text-shadow:none}
.panel a:not(.button){color:var(--stamp-deep)}
.panel a:not(.button):hover{color:var(--stamp)}
.panel .muted{color:#5a4423}
.panel code{background:rgba(43,36,23,.08);border-color:rgba(43,36,23,.3)}
.panel :focus-visible{outline-color:var(--stamp)}

.notice{margin:1.2rem 0;padding:.8em 1.1em;border-left:4px solid var(--gold);background:rgba(168,130,60,.12)}
.notice.error{border-left-color:var(--stamp-hi);background:rgba(143,33,22,.2);color:#f1b3a6}
.panel .notice.error{background:rgba(143,33,22,.12);color:var(--stamp-deep)}

/* ---- forms ---- */
form{margin:0 0 1rem}
label{display:block;margin:1.2rem 0 .4rem;font-family:'Special Elite',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
input,select,textarea{
  display:block;width:100%;min-height:2.75rem;padding:.6em .8em;
  font:inherit;font-size:1rem;color:var(--ink);background:var(--bone);
  border:1px solid #7a5c2e;border-radius:2px;
}
textarea{min-height:6rem;resize:vertical}
input::placeholder,textarea::placeholder{color:#6a5c40}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;min-height:0;margin-right:.5em}
input:disabled,select:disabled,textarea:disabled{opacity:.6}
.row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.row > *{flex:1 1 12rem;min-width:0}
.row > button,.row > .button{flex:0 0 auto}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:1.4rem}
.actions form{display:flex;margin:0}

button,.button{
  display:inline-block;min-height:2.75rem;max-width:100%;padding:.8em 1.8em;
  font-family:'Special Elite',monospace;font-size:.85rem;letter-spacing:.2em;line-height:1.3;text-transform:uppercase;text-align:center;text-decoration:none;
  color:var(--bone);background:linear-gradient(180deg,var(--stamp),var(--stamp-deep));
  border:1px solid var(--stamp-hi);border-radius:0;cursor:pointer;
  box-shadow:0 8px 26px rgba(120,20,10,.5),inset 0 1px 0 rgba(255,150,120,.35);
  transition:transform .25s,box-shadow .25s;
}
button:hover,.button:hover{color:var(--bone);transform:translateY(-2px);box-shadow:0 12px 34px rgba(150,30,15,.6),inset 0 1px 0 rgba(255,150,120,.45)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
button.quiet,.button.quiet{color:var(--bone);background:transparent;border-color:rgba(168,130,60,.7);box-shadow:none}
button.quiet:hover,.button.quiet:hover{border-color:var(--gold-hi);box-shadow:none}
.panel button.quiet,.panel .button.quiet{color:var(--ink);border-color:rgba(43,36,23,.6)}
.panel button.quiet:hover,.panel .button.quiet:hover{color:var(--ink);border-color:var(--ink)}
button.danger,.button.danger{background:linear-gradient(180deg,var(--stamp-deep),#2d0a06)}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}button:hover,.button:hover{transform:none}}

/* ---- lists and tables (admin, downloads) ---- */
.table-wrap{margin:1rem 0;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{padding:.6em .8em;text-align:left;white-space:nowrap;font-family:'Special Elite',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--muted);border-bottom:1px solid rgba(120,90,45,.5)}
td{padding:.6em .8em;vertical-align:top;border-bottom:1px solid rgba(120,90,45,.22)}
td form{margin:0}
.panel th{color:#5a4423;border-bottom-color:rgba(43,36,23,.4)}
.panel td{border-bottom-color:rgba(43,36,23,.2)}
.downloads{list-style:none;margin:1rem 0;padding:0}
.downloads li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1rem;padding:.9rem 0;border-bottom:1px solid rgba(120,90,45,.28)}
.downloads .meta{font-size:.85rem;color:var(--muted)}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}