/* FaceErase site. Fonts are self-hosted (SIL Open Font License, see fonts/),
   so visiting the site sends nothing to Google or any other third party. */
@font-face{font-family:"Courier Prime";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/courier-prime-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/courier-prime-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --paper:#E8E4DC; --ink:#0A0A0A; --bone:#F5F5F5; --gray:#4A4A4A;
  --red:#CC0000; --blue:#0000FF; --yellow:#FFD60A; --kraft:#C49A63;
  --rule:rgba(10,10,10,.22); --measure:36rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--red)}
a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.5rem}

/* masthead */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;gap:.8rem;padding-top:1.1rem;padding-bottom:1.1rem}
.masthead img{width:36px;height:36px;border-radius:22%}
.wordmark{font-family:"Courier Prime",monospace;font-weight:700;font-size:1rem;letter-spacing:.16em;margin:0;text-decoration:none}
.by{margin:0 0 0 auto;font-size:.75rem;color:var(--gray);letter-spacing:.08em}
.by a{color:var(--gray)}

/* type */
h1{font-family:"Courier Prime",monospace;font-weight:700;font-size:clamp(2rem,5.6vw,3.4rem);line-height:1.14;margin:0 0 1.4rem;max-width:20ch}
h2{font-family:"Courier Prime",monospace;font-weight:700;font-size:1.5rem;margin:0 0 1.25rem}
h3{font-family:"Courier Prime",monospace;font-weight:700;font-size:1.0625rem;margin:0 0 .45rem;letter-spacing:.04em}
p{max-width:var(--measure);margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
.standfirst{margin:0 0 2rem;font-size:1.0625rem;color:var(--gray)}
.muted{color:var(--gray)}
.small{font-size:.8125rem}

/* hero */
.hero .wrap{padding-top:4.5rem;padding-bottom:4rem}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.btn{display:inline-block;font-family:"Courier Prime",monospace;font-weight:700;font-size:.9375rem;letter-spacing:.12em;
  padding:.85rem 1.6rem;background:var(--ink);color:var(--bone);border:2px solid var(--ink);text-decoration:none}
.btn:hover{background:var(--paper);color:var(--ink)}
.cta-note{font-size:.8125rem;color:var(--gray);margin:0}

/* figures used in the illustrations */
.scene{margin-top:3.5rem;border:2px solid var(--ink);background:rgba(10,10,10,.04);padding:2.25rem 1.5rem 1.25rem}
.crowd{display:flex;gap:clamp(.4rem,2.2vw,1.1rem);align-items:flex-end;justify-content:center;flex-wrap:nowrap}
.figure{flex:0 1 54px;min-width:30px}
.head-slot{position:relative;width:100%;aspect-ratio:1;margin-bottom:.4rem}
.head{position:absolute;inset:14%;border:2px solid var(--ink);border-radius:50%}
.torso{height:clamp(26px,6vw,40px);border:2px solid var(--ink);border-bottom:0;border-radius:40% 40% 0 0}
.head-slot::after{content:"";position:absolute}
/* SHADOW: solid circle */
.shadow::after{inset:4%;border-radius:50%;background:var(--ink)}
/* BAR: solid block over the whole face */
.bar::after{inset:6%;background:var(--ink)}
/* BLUR: coarse pixels */
.blur::after{inset:8%;border-radius:18%;
  background:repeating-conic-gradient(#8d877c 0 25%,#b9b2a6 0 50%) 0 0/34% 34%}
/* MASK: paper bag */
.bag::after{inset:-2% 4% 0;border-radius:4px;background:var(--kraft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='14' cy='15' r='2.6'/%3E%3Ccircle cx='26' cy='15' r='2.6'/%3E%3Cpath d='M11 24 Q20 32 29 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/80% no-repeat}
/* SHIELD */
.shield::after{inset:-4% 2% -2%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='70 55 120 165'%3E%3Cpath d='M130 60 L85 75 L78 105 Q78 145 92 175 Q108 200 130 215 Q152 200 168 175 Q182 145 182 105 L175 75Z' fill='%230A0A0A' stroke='%23999' stroke-width='5'/%3E%3Ccircle cx='130' cy='125' r='26' fill='none' stroke='%23FFD60A' stroke-width='7'/%3E%3Ccircle cx='130' cy='125' r='11' fill='%23FFD60A'/%3E%3C/svg%3E") center/contain no-repeat}
/* a face left visible on purpose */
.kept .head{border-style:dashed;border-color:var(--red)}
.kept::after{content:"VISIBLE";left:50%;top:-1.25rem;transform:translateX(-50%);
  font-size:.5rem;letter-spacing:.1em;color:var(--bone);background:var(--red);padding:.05rem .3rem;white-space:nowrap}
.scene-caption{margin:1.5rem auto 0;font-size:.8125rem;color:var(--gray);text-align:center}

/* sections */
section{border-top:1px solid var(--rule)}
section .wrap{padding-top:4rem;padding-bottom:4rem}

.modes{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.mode-demo{border:2px solid var(--ink);padding:1.5rem 1rem 1rem;display:flex;justify-content:center;margin-bottom:1rem}
.mode-demo .figure{flex:0 0 60px}
.modes p{font-size:.875rem;color:var(--gray)}
.tag{display:inline-block;font-size:.625rem;letter-spacing:.1em;background:var(--ink);color:var(--bone);padding:.05rem .4rem;margin-left:.4rem;vertical-align:2px}

.note{font-size:.8125rem;letter-spacing:.04em;color:var(--gray);border-left:3px solid var(--red);padding-left:.9rem;margin-top:1.75rem;max-width:var(--measure)}
.warn{border:2px solid var(--red);padding:1rem 1.2rem;margin:2rem 0 0;max-width:var(--measure);font-size:.9375rem}
.warn strong{color:var(--red);letter-spacing:.06em}

.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.steps li{counter-increment:s}
.steps h3::before{content:counter(s,decimal-leading-zero) " ";color:var(--gray)}
.steps p{font-size:.9375rem;color:var(--gray)}

/* phone mock-ups */
.screens{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2.5rem}
.screen-item{flex:1 1 15rem;max-width:18rem}
.phone{border:3px solid var(--ink);aspect-ratio:9/17;display:flex;flex-direction:column;overflow:hidden;background:var(--ink)}
.screen-label{margin:.85rem 0 0;font-size:.8125rem;color:var(--gray)}
.lock{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:1rem;color:var(--bone)}
.lock svg{width:64px;height:64px}
.lock .t{font-family:"Courier Prime",monospace;font-weight:700;font-size:1.05rem;letter-spacing:.1em}
.lock .t span{color:var(--ink);-webkit-text-stroke:1px var(--blue)}
.lock .s{font-size:.5rem;color:#9a9a9a;letter-spacing:.14em}
.lock .f{margin-top:.8rem;border:1.5px solid var(--bone);width:72%;padding:.45rem 0;text-align:center;
  font-family:"Courier Prime",monospace;font-weight:700;font-size:.55rem;letter-spacing:.14em;color:#9a9a9a}
.camera{flex:1;display:flex;flex-direction:column}
.cam-bar{color:var(--bone);font-family:"Courier Prime",monospace;font-weight:700;font-size:.55rem;letter-spacing:.14em;padding:.6rem .7rem}
.cam-view{flex:1;position:relative;background:repeating-linear-gradient(135deg,#2a2a2a 0 10px,#323232 10px 20px);
  display:flex;align-items:flex-end;justify-content:center;gap:.5rem;padding:0 .6rem 1.4rem}
.cam-view .figure{flex:0 0 28px}
.cam-view .head,.cam-view .torso{border-color:#8a8a8a}
.cam-controls{height:3.4rem;display:flex;align-items:center;justify-content:center}
.cam-controls svg{width:30px;height:36px}

.principles{list-style:none;padding:0;margin:0;display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.principles p{font-size:.9375rem;color:var(--gray)}

.closing{border-top:2px solid var(--ink)}
.closing .wrap{padding-top:3.5rem;padding-bottom:3.5rem}

footer{border-top:1px solid var(--rule);font-size:.8125rem;color:var(--gray)}
footer .wrap{padding-top:2rem;padding-bottom:3rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
footer p{margin:0}
footer a{color:var(--gray)}

/* privacy policy page */
.policy .wrap{padding-top:3.5rem;padding-bottom:4rem}
.policy h2{margin-top:2.6rem;font-size:1.25rem}
.policy ul{max-width:var(--measure);padding-left:1.2rem}
.policy li{margin-bottom:.5rem}

@media (max-width:34rem){
  .hero .wrap{padding-top:3rem;padding-bottom:3rem}
  section .wrap{padding-top:3rem;padding-bottom:3rem}
  .scene{padding:1.75rem .75rem 1rem}
}