/* ===========================================================
   Make My Mahj
   Sibling to silverthread.studio: name-first, one quiet
   signature, nothing that needs artwork.

   Signature: a hairline running the length of the page, broken
   into segments. On load the gaps close and it becomes whole.
   The in between, filling in.

   Reskin: change the :root tokens and the two font families.
   =========================================================== */

:root{
  --paper:      #F7F3E8;
  --paper-warm: #F1EBDB;
  --ink:        #26241F;
  --ink-soft:   #6F6A5F;
  --ink-faint:  #A29B8C;
  --accent:     #E8737F;   /* the coral off the tiles */
  --hush:       #A9C3C8;   /* the sage off the tile backs */
  --rule:       #E2DAC7;

  --measure:    33rem;
  --gutter:     clamp(22px, 6vw, 40px);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* ---------- the thread ----------
   A single filament that wanders down the page and loops once,
   drawing itself on load. Same idea as the studio mark, looser.   */
.thread{
  position:fixed;
  top:0; bottom:0;
  left:max(calc(var(--gutter) - 74px), calc(50% - 33rem));
  width:180px;
  z-index:0; pointer-events:none;
  display:flex;
}
.thread svg{width:100%; height:100%;}
.thread path{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:.5;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:draw 3.6s cubic-bezier(.32,.5,.2,1) .3s forwards;
}
.knot{
  fill:var(--accent);
  opacity:0;
  animation:bloom .9s ease 3.4s forwards;
}
@keyframes draw{ to{stroke-dashoffset:0;} }
@keyframes bloom{ to{opacity:.9;} }

@media (prefers-reduced-motion: reduce){
  .thread path{animation:none; stroke-dashoffset:0;}
  .knot{animation:none; opacity:.9;}
}
@media (max-width:900px){
  .thread{left:-56px; width:150px; opacity:.62;}
}
@media (max-width:560px){
  .thread{left:-72px; width:132px; opacity:.42;}
}

/* ---------- shell ---------- */
.shell{
  position:relative; z-index:2;
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--gutter);
}
.eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- masthead ---------- */
.masthead{padding:34px 0 0;}
.masthead a{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
}
.masthead a:hover{color:var(--accent);}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:12vh 0;
}
.wordmark{
  font-family:"Fraunces", Georgia, serif;
  font-optical-sizing:auto;
  font-weight:300;
  font-size:clamp(2.9rem, 12vw, 4.5rem);
  line-height:1.0; letter-spacing:-.025em;
  margin:0; color:var(--ink);
}
.wordmark em{
  font-style:italic; font-weight:300;
  color:var(--accent); display:block;
}
.lede{margin:32px 0 0; font-size:1.06rem; color:var(--ink-soft); max-width:28rem;}
.nowrap{white-space:nowrap;}
.coda{
  margin:30px 0 0; max-width:26rem;
  padding-left:20px; border-left:1px solid var(--rule);
  font-family:"Fraunces", Georgia, serif;
  font-weight:300; font-style:italic;
  font-size:1.18rem; line-height:1.45; letter-spacing:-.012em;
  color:var(--ink);
}
.status{
  margin:52px 0 0;
  padding-top:20px;
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; align-items:center; gap:11px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint);
  max-width:28rem;
}
.status .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--accent); flex:none;
}
.status .sep{
  width:1px; height:11px; background:var(--rule); flex:none;
}
.status a{
  color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
}
.status a:hover{color:var(--accent); border-color:var(--accent);}

/* ---------- interior pages ---------- */
.page{padding:16vh 0 0;}
.page h1{
  font-family:"Fraunces", Georgia, serif;
  font-weight:300; letter-spacing:-.025em;
  font-size:clamp(2.3rem, 9vw, 3.1rem);
  line-height:1.05; margin:0 0 10px; color:var(--ink);
}
.page .stamp{margin:0 0 11vh;}
.page h2{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  margin:54px 0 14px; padding-top:14px;
  border-top:1px solid var(--rule);
}
.page h3{
  font-family:"Fraunces", Georgia, serif;
  font-weight:400; font-size:1.12rem; letter-spacing:-.01em;
  margin:30px 0 6px; color:var(--ink);
}
.page p, .page li{font-size:.98rem; color:var(--ink-soft);}
.page ul{padding-left:1.1rem; margin:12px 0;}
.page li{margin-bottom:8px;}
.page li::marker{color:var(--hush);}
.page a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule);}
.page a:hover{color:var(--accent); border-color:var(--accent);}
.page strong{color:var(--ink); font-weight:600;}
.page hr{border:none; border-top:1px solid var(--rule); margin:54px 0 0;}

.page .stamp + .mailto{margin-top:-8vh;}
.mailto{
  display:block;
  font-family:"Fraunces", Georgia, serif;
  font-weight:300; font-size:clamp(1.25rem,5.5vw,1.8rem);
  letter-spacing:-.02em;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:6px; margin:6px 0 14px;
  word-break:break-word;
}
.mailto:hover{color:var(--accent); border-color:var(--accent);}

/* ---------- footer ---------- */
.foot{position:relative; z-index:2; margin-top:0; padding:26px 0 9vh;}
.foot--interior{margin-top:18vh;}
.foot .shell{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:baseline;}
.foot a{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
}
.foot a:hover{color:var(--accent);}
.foot a:focus-visible, .status a:focus-visible, .page a:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}
.foot small{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10.5px; letter-spacing:.08em;
  color:var(--ink-faint); width:100%; margin-top:6px;
}

.skip{position:absolute; left:-9999px; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:99;}
.skip:focus{left:0; top:0;}