/* ============================================================
   michaelgeddis.com
   Warm paper. A Roman capriccio run through a line-engraving
   screen, cut into two plates that hold the bottom corners.
   ============================================================ */

:root{
  --paper:    #f4f1ea;
  --ink:      #17140f;
  --ink-2:    #45403a;
  --muted:    #8a8175;
  --line:     rgba(23,20,15,.13);

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1120px;
  --pad: 28px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:100svh;
}

a{ color:inherit; text-decoration:none; }
h1,p{ margin:0; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--ink); color:var(--paper); }

/* ============================================================
   THE PLATES
   Sized off viewport HEIGHT on anything desktop shaped, so the
   art keeps the same share of the screen on a 13in laptop and a
   32in monitor alike. Mobile falls back to width.
   ============================================================ */

/* The whole capriccio is laid in full bleed, then two masks are intersected to
   carve it back: the first dissolves the top into paper, the second hollows out
   the middle so the type never sits on the art. Wide scene, clear centre, and
   nothing that reads as wallpaper. */
.plate{
  position:fixed;
  bottom:0;
  width:auto;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .75s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

.plate picture{ display:block; height:100%; }
.plate img{
  display:block;
  height:100%;
  width:auto;
  max-width:none;
}

/* Each plate takes two masks, intersected: one dissolves the top and eases the
   heavy base, the other dissolves the inner edge so the crop has no hard seam. */
.plate--l{
  left:0;
  height:clamp(400px, max(78vh, 40vw), 1100px);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 7%, #000 19%, #000 90%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, #000 0%, #000 54%, transparent 94%);
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 7%, #000 19%, #000 90%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, #000 0%, #000 54%, transparent 94%);
}
.plate--l.in{ opacity:.88; transition-delay:0s; }

.plate--r{
  right:0;
  height:clamp(420px, max(84vh, 43vw), 1180px);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 18%, #000 92%, rgba(0,0,0,.66) 100%),
    linear-gradient(270deg, #000 0%, #000 22%, transparent 70%);
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 18%, #000 92%, rgba(0,0,0,.66) 100%),
    linear-gradient(270deg, #000 0%, #000 22%, transparent 70%);
}
.plate--r.in{ opacity:.92; transition-delay:.08s; }

/* clean paper under the footer so the links always read */
.scrim{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(0deg, var(--paper) 0px, rgba(244,241,234,.8) 44px, transparent 130px);
}

/* ============================================================
   SEAL
   ============================================================ */

.top{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:26px var(--pad) 0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  font-size:.64rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
/* the helmet is cropped in CSS so the source svg stays untouched */

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  z-index:3;
  flex:1;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(16px,4vh,54px) var(--pad) clamp(36px,6vh,64px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.title{
  display:flex;
  flex-direction:column;
  align-items:center;
}


.hero__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3.3rem,10vw,7.2rem);
  line-height:1.02;
  letter-spacing:-.012em;
  color:var(--ink);
}

.hero__line{
  margin-top:1.05em;
  font-size:clamp(.98rem,1.3vw,1.08rem);
  letter-spacing:.005em;
  color:var(--ink-2);
}


/* ---------------- the qr ---------------- */

.qr{
  position:relative;
  z-index:3;
  margin-top:clamp(40px,6vh,66px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
}
.qr img{
  display:block;
  width:clamp(104px, 8.6vw, 124px);
  height:auto;
  /* the code itself stays crisp: engraving it would break the scan */
  image-rendering:crisp-edges;
  opacity:.9;
  transition:opacity .3s ease;
}
.qr__cap{
  font-size:.56rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .3s ease;
}
@media (hover:hover){
  .qr:hover img{ opacity:1; }
  .qr:hover .qr__cap{ color:var(--ink-2); }
}

/* ---------------- currently building ---------------- */

.now{
  position:relative;
  margin-top:clamp(38px,6vh,72px);
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.now::before{
  content:"";
  position:absolute;
  left:50%;
  translate:-50% 0;
  top:-34px;
  width:min(1060px, 98vw);
  height:calc(100% + 68px);
  background:radial-gradient(56% 62% at 50% 46%, var(--paper) 0%, rgba(244,241,234,.94) 46%, rgba(244,241,234,.6) 74%, transparent 100%);
  pointer-events:none;
}
.now > *{ position:relative; }

.now__label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:840px;
  font-size:.64rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

.now__grid{
  display:grid;
  gap:14px 40px;
  width:100%;
  max-width:840px;
}
@media (min-width:720px){
  .now__grid{ grid-template-columns:1fr 1fr; gap:16px; }
}

.co{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:16px;
  row-gap:7px;
  padding:22px 4px 4px;
  text-align:left;
  transition:opacity .3s ease;
}
@media (hover:hover){
  .co:hover .co__name{ color:#000; }
  .co:hover .co__dom{ color:var(--ink); }
  .co:hover .co__go{ transform:translate(2px,-2px); }
}

.co__n{
  grid-row:1;
  font-family:var(--serif);
  font-size:.86rem;
  line-height:1.9;
  color:var(--muted);
  letter-spacing:.08em;
}
.co__name{
  grid-row:1;
  font-family:var(--serif);
  font-size:1.62rem;
  line-height:1.1;
  color:var(--ink);
  transition:color .3s ease;
}
.co__desc{
  grid-column:2;
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:pretty;
}
.co__dom{
  grid-column:2;
  margin-top:2px;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  transition:color .3s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.co__go{
  font-style:normal;
  transition:transform .3s ease;
}

/* ============================================================
   FOOTER
   ============================================================ */

.foot{
  position:relative;
  z-index:3;
  padding-top:8px;
  display:flex;
  justify-content:center;
  gap:26px;
  padding:0 var(--pad) 28px;
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--muted);
}
.foot a{ transition:color .25s ease; }
.foot a:hover{ color:var(--ink); }


/* ============================================================
   RESPONSIVE
   Last in the file so these win without specificity games.
   ============================================================ */

/* short and wide: stop the art eating the type */
/* short and wide: stop the art eating the type */
@media (min-width:761px) and (max-height:760px){
  .plate--l{ height:clamp(360px, max(76vh, 38vw), 820px); }
  .plate--r{ height:clamp(380px, max(82vh, 41vw), 880px); }
}

@media (max-width:760px){
  /* Mobile mirrors the card page: name, line, one central element, lots of air,
     and the engraving given room to actually show. The project blurbs are the
     thing that eats a phone screen, so they drop out here. */
  .title{ order:1; }
  .qr{ order:2; margin-top:clamp(30px,4.5vh,46px); }
  .now{ order:3; }
  .qr img{ width:clamp(112px, 30vw, 136px); }
  .co__desc{ display:none; }
  .now{ margin-top:clamp(34px,5vh,54px); gap:14px; }
  .now__grid{ gap:0; }
  .co{ padding:14px 4px 4px; row-gap:4px; }
  .co__name{ font-size:1.44rem; }
  .hero{ padding-bottom:clamp(28px,5vh,48px); }
}

@media (max-width:760px){
  .plate--l,
  .plate--r{ height:auto; }
  .plate--l picture,
  .plate--r picture,
  .plate--l img,
  .plate--r img{ height:auto; width:100%; }
  .plate--l{ width:min(66vw, 290px); left:-18px; }
  .plate--r{ width:min(58vw, 250px); right:-14px; }
  .plate--l.in{ opacity:.6; }
  .plate--r.in{ opacity:.64; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .plate--l{ opacity:.82; }
  .plate--r{ opacity:.88; }
}


/* ============================================================
   THE CARD PAGE  (/card, what the QR opens)
   ============================================================ */

.is-card{ justify-content:center; }

.vc{
  position:relative;
  z-index:3;
  width:100%;
  max-width:460px;
  margin:auto;
  padding:clamp(40px,8vh,72px) var(--pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.vc__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem,9vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.012em;
  color:var(--ink);
}

.vc__title{
  margin-top:.6em;
  font-size:.92rem;
  color:var(--ink-2);
}

.vc__save{
  margin-top:clamp(26px,4vh,34px);
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:46px;
  padding:0 22px;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font-size:.88rem;
  transition:background .25s ease, transform .2s cubic-bezier(.2,.7,.2,1);
}
.vc__save svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.vc__save:hover{ background:#000; }
.vc__save:active{ transform:translateY(1px); }

.vc__links{
  margin-top:clamp(30px,5vh,44px);
  width:100%;
  display:flex;
  flex-direction:column;
}
.vc__links a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:15px 2px;
  text-align:left;
  transition:padding-left .35s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){
  .vc__links a:hover{ padding-left:8px; }
  .vc__links a:hover .vc__v{ color:var(--ink); }
}
.vc__k{
  font-family:var(--serif);
  font-size:1.14rem;
  color:var(--ink);
  white-space:nowrap;
}
.vc__v{
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--muted);
  transition:color .3s ease;
  overflow-wrap:anywhere;
}

.vc__home{
  margin-top:clamp(26px,4vh,38px);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .25s ease;
}
.vc__home:hover{ color:var(--ink); }