/* Big Drift Editor: direction B, "Glacier" (DESIGN.md). */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/big-shoulders-800.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-600.woff2) format("woff2")}

:root{--gutter:clamp(20px,4vw,48px);--pine:#1E3B2F;--forest:#2F5A47;--parch:#EFE6D2;--sage:#9CC9A8;--muted:#C9C2AE;--rust:#B9552F}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--pine);color:var(--parch);font:400 17px/1.55 "Barlow",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2{margin:0;font-family:"Big Shoulders Display","Arial Narrow",sans-serif;font-weight:800;line-height:.9;text-transform:uppercase;text-wrap:pretty}
h1{font-size:clamp(64px,8.6vw,132px)}
h2{font-size:clamp(32px,3.6vw,46px);margin:0 0 20px}
p{margin:0 0 24px;text-wrap:pretty}
a{color:var(--sage);font-weight:600}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* Forms */
form{margin:0}
label{display:block;margin:20px 0 8px;font-weight:600;font-size:15px}
label:first-of-type{margin-top:0}
input{display:block;width:100%;height:52px;padding:0 16px;border:0;border-radius:6px;background:var(--parch);color:var(--pine);font:500 17px "Barlow",system-ui,sans-serif}
input.code{font-size:26px;letter-spacing:.3em;text-align:center}
button{display:block;width:100%;height:52px;margin-top:20px;border:0;border-radius:6px;background:var(--sage);color:var(--pine);font:600 17px "Barlow",system-ui,sans-serif;cursor:pointer}
button:hover{background:#B4D8BD}
button.quiet{width:auto;height:44px;margin:0;padding:0 16px;background:transparent;color:var(--sage)}
button.quiet:hover{background:var(--forest)}
button.alt{margin-top:12px}
[role=alert]{margin:0 0 24px;padding:12px 16px;border-radius:6px;background:var(--rust);color:var(--parch);font-weight:600;font-size:19px}
[data-status]{margin:0;color:var(--muted)}
[data-status]:not(:empty){margin-top:16px}
.small{margin:24px 0 0;font-size:15px;color:var(--muted)}

/* Sign-in screens: the photo on the left, the form on the right. */
.screen{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.scene{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:40px clamp(24px,4vw,64px) clamp(40px,5vw,64px)}
.photo{position:absolute;inset:0;background:url(/assets/glacier.jpg) center 60%/cover;filter:grayscale(1) contrast(1.15);mix-blend-mode:luminosity;opacity:.6}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(30 59 47/.45) 0%,rgb(30 59 47/0) 35%,rgb(30 59 47/.25) 65%,var(--pine) 100%)}
.scene>*:not(.photo){position:relative;z-index:1}
.logo{display:block;width:72px;height:72px}
.panel{display:grid;place-items:center;padding:48px clamp(24px,5vw,72px)}
.col{width:100%;max-width:400px}

/* Signed-in pages: a slim top row, then the page. */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:960px;margin:0 auto;padding:20px var(--gutter)}
.top .logo{width:48px;height:48px}
.top .quiet{margin-right:-16px}
.page{max-width:960px;margin:0 auto;padding:24px var(--gutter) 96px}
.page h1{font-size:clamp(44px,7vw,96px);margin:0 0 32px}
.page section{margin-top:64px}
.page form{max-width:520px}
.path{color:var(--muted)}
.qr{max-width:300px;margin:0 0 24px;padding:12px;border-radius:6px;background:#fff}
.qr svg{display:block;width:100%;height:auto}
.rows li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;min-height:56px;margin-bottom:8px;padding:6px 6px 6px 16px;border-radius:6px;background:var(--forest)}
.rows span{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere;color:var(--muted);font-size:15px}
.rows b{display:block;color:var(--parch);font-size:17px;font-weight:600}
.rows form{flex:none}
.rows .actions{display:flex;flex:none;gap:4px;margin-left:auto}
.rows em{display:block;font-style:normal;font-weight:600;color:var(--parch)}
.rows+form{margin-top:24px}
.sites a{display:block;margin-bottom:8px;padding:18px 20px;border-radius:6px;background:var(--forest);color:var(--parch);font-size:19px;text-decoration:none}
.sites a:hover{background:var(--sage);color:var(--pine)}
table{width:100%;border-collapse:collapse;font-size:15px}
th{padding:8px 16px 8px 0;color:var(--muted);font-weight:600;text-align:left}
td{padding:10px 16px 10px 0;vertical-align:top}
tbody tr:nth-child(odd){background:rgb(47 90 71/.55)}
td:first-child,th:first-child{padding-left:12px}

@media (max-width:820px){
  .screen{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .scene{min-height:44vh;min-height:44svh;padding:24px var(--gutter) 28px}
  .scene .logo{width:56px;height:56px}
  .scene h1{font-size:clamp(56px,16vw,96px)}
  .panel{place-items:start;padding:32px var(--gutter) 48px}
}
@media (max-width:820px){
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table,tbody,tr,td{display:block}
  tr{margin-bottom:8px;padding:12px 16px;border-radius:6px;background:var(--forest)}
  tbody tr:nth-child(odd){background:var(--forest)}
  td,td:first-child{padding:0}
  td:first-child{color:var(--muted);font-size:14px}
  td:nth-child(2){font-weight:600}
}