/* The shell shared by every page of the sketch: one column, one outer edge,
   the paired rule as footer. Page-specific pieces (the loop, the mock editor)
   stay inline on the page that owns them. */

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

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--janyl-color-paper);
  color:var(--janyl-color-ink);
  font-family:var(--janyl-font-body);
  font-size:clamp(1rem,0.4vw + 0.92rem,1.125rem);
  line-height:1.65;
}

/* One outer edge for every element on the page, so it reads as a single
   column rather than a stack of blocks. */
:root{ --edge:clamp(1.5rem,7vw,7.5rem); }

.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:clamp(3rem,9vh,7rem) var(--edge) 0;
}

/* Wordmark. Newsreader 300, lowercase. The optional signal rule beneath it
   is left off: the paired rule in the footer is the composition's one device,
   and a second stroke on a single-screen page is scattering it. */
.wordmark{
  font-family:var(--janyl-font-display);
  font-weight:300;
  font-size:1.5rem;
  letter-spacing:0.005em;
  margin:0;
}

/* The top band. The wordmark stays exactly where it has always sat on the
   front page, so the composition does not move; the standing links sit on the
   same baseline at the other edge. On a subpage the wordmark itself is the way
   home, which is why the footer no longer carries a back link: one route, not
   two, and the reader does not have to reach the bottom to find it. */
.topband{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--janyl-space-5);
}
/* The wordmark is the name, not a link, so it keeps ink and drops the signal
   underline every other anchor carries. Hover is the only affordance it needs. */
.topband .wordmark a{
  border-bottom:none;
  padding-bottom:0;
}
/* Same mono treatment as the contact line in the footer, so the band and the
   footer read as one pair of rails rather than two unrelated devices. */
.bandlinks{
  font-family:var(--janyl-font-mono);
  font-size:0.7rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.bandlinks a + a{margin-left:var(--janyl-space-4)}
/* Text and illustration are a pairing, which is the one case the charte allows
   two columns for. Below the breakpoint they collapse in reading order: the
   argument first, the illustration as the closing image before the footer. */
.spread{
  flex:1;
  display:grid;
  align-content:center;
  gap:var(--janyl-space-6);
  padding:clamp(3rem,11vh,8rem) 0 clamp(3rem,8vh,5rem);
}
main{max-width:34rem}        /* holds the measure near 60 characters */

@media (min-width:68rem){
  .spread{
    grid-template-columns:minmax(0,30rem) minmax(0,1fr);
    align-items:center;
    gap:var(--janyl-space-7);
  }
  main{max-width:none}       /* the column now holds the measure */
}

h1{
  font-family:var(--janyl-font-display);
  font-weight:300;
  font-size:clamp(2.1rem,5.2vw,3.25rem);
  line-height:1.1;
  letter-spacing:-0.015em;
  margin:0 0 var(--janyl-space-7);
}

p{margin:0 0 var(--janyl-space-5)}
p:last-child{margin-bottom:0}

/* Inline links. The charte assigns links to signal, but nine anchors in a
   hundred and fifty words would make signal the scenery rather than the
   accent. So the underline is signal and the word stays ink, and the whole
   link turns signal on hover and focus. No new value, and the page keeps its
   paper-to-signal ratio. */
a{
  color:inherit;
  text-decoration:none;
  border-bottom:var(--janyl-rule-thin) solid var(--janyl-color-signal);
  padding-bottom:0.06em;
  transition:color var(--janyl-motion-duration) var(--janyl-motion-easing);
}
a:hover{color:var(--janyl-color-signal)}
a:focus-visible{
  outline:2px solid var(--janyl-color-signal);
  outline-offset:2px;
  border-bottom-color:transparent;
}

/* Human emphasis. In body copy the italic has to switch face and pick up a
   little weight and size to hold its own against IBM Plex Sans. */
em{
  font-family:var(--janyl-font-display);
  font-style:italic;
  font-weight:400;
  font-size:1.06em;
}
/* The headline is already Newsreader 300, so the emphasis there is the slope
   and nothing else. Borrowing the body treatment would make one word of a
   52px line heavier and larger than the words beside it. */
h1 em{font-weight:inherit;font-size:1em}

/* Signature paired rule: long and dashed for what stays, short and certain
   for what janyl is answerable for. Used once, as the page footer. */
footer{
  padding:0 0 clamp(2.5rem,7vh,4rem);
}
.paired{margin:0 0 var(--janyl-space-4)}
.paired-dashed{
  height:0;
  border-top:var(--janyl-rule-thin) dashed var(--janyl-color-rule-moving);
}
.paired-solid{
  width:var(--janyl-rule-signature-length);
  height:var(--janyl-rule-strong);
  background:var(--janyl-color-ink);
  margin-top:calc(var(--janyl-rule-strong) * -1);
}
.contact{
  font-family:var(--janyl-font-mono);
  font-size:0.7rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin:0;
}
.contact a{border-bottom-width:var(--janyl-rule-thin);display:inline-block;
  min-height:44px;line-height:44px}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}