/* the.garage — landing v6. One screen, no scroll.
   Design system from the Vanderbilt CTTC pre-read: Inter Tight display, warm monochrome ground. */

:root{
  --ground:#F3F2EE; --surface:#FAF9F6;
  --ink:#1A1917; --ink-strong:#0A0A0A; --ink-muted:#525252; --ink-faint:#8A8985; --ink-soft:#6E6D69;
  --rule:#DAD9D5; --rule-strong:#C4C3BE;
  --display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --page:1080px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.55;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;
  min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--surface);
  padding:13px 20px;font-size:14px;font-weight:500;text-decoration:none}
.skip:focus{left:0}

.hdr{padding:32px 34px 20px;border-bottom:1px solid var(--rule);flex:none}
.mark{font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:-0.02em;
  text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:12px;line-height:1}
.mark-glyph{height:24px;width:auto;display:block;flex:none}
.mg-back{fill:var(--rule)}
.mg-front{fill:var(--ink)}
.mark-glyph rect{transition:fill .2s ease}
.mark:hover .mg-back{fill:var(--rule-strong)}
.mark--sm{gap:10px;font-size:13px}
.mark--sm .mark-glyph{height:18px}

main{flex:1;display:flex;align-items:center;padding:56px 34px}
.inner{width:100%;max-width:var(--page);margin:0 auto}

/* Three groups. Proximity does the grouping, so the gaps inside a group are
   small and the gaps between groups are large. Scale: 78 / 21 / 15.5 / 12.5. */

/* 1 — headline. The two lines differ in colour, not in weight or size, so they
   still read as one block. */
h1{font-family:var(--display);font-weight:300;font-size:clamp(38px,6.4vw,78px);line-height:1.0;
  letter-spacing:-0.038em;text-wrap:balance;margin:0 0 34px;max-width:24ch}
h1 .second{color:var(--ink-faint)}

/* 2 — body. Both sentences the same size and the same colour, 7px apart, so the
   pair reads as a single paragraph block rather than a statement and a caption. */
.say{font-size:clamp(17px,2vw,21px);line-height:1.5;letter-spacing:-0.012em;
  color:var(--ink-muted);max-width:54ch;margin:0 0 7px}
.say--wide{max-width:none}
/* Echoes the hero's second line. Not the same hex: #8A8985 is 3.13:1 on this
   ground, which clears the 3:1 bar for the 78px headline but fails the 4.5:1
   bar at 21px. #6E6D69 is 4.62:1 and reads as the same tone. */
.say--soft{color:var(--ink-soft)}
.say:last-of-type{margin-bottom:0}

.follow-group{margin-top:46px}
.follow-group .say--soft{margin-bottom:10px}
.follow-group .follow{margin-top:0}

/* 3 — the action. Dropped a step in size and set well clear of the body. */
/* No rule under it. On a narrow screen the underline ran the width of the
   column and read as a horizontal divider. Weight carries the link instead. */
/* Inline, not flex. As a flex row the icon pushed the whole text block right and
   its left edge no longer lined up with the paragraph above. Inline puts the mark
   in the text flow at the end of the sentence and the left edge stays true. */
.follow{display:inline;margin:0;font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--ink-muted);
  font-weight:500;text-decoration:none;transition:color .2s ease}
.follow-wrap{margin:40px 0 0;padding:4px 0}
.follow:hover,.follow:focus-visible{color:var(--ink)}
.follow:hover .li{opacity:1}
/* The icon sits inside the anchor, so the whole line including the mark is one
   tap target. 44px minimum height is the iOS guideline. */
.li{width:17px;height:17px;fill:currentColor;display:inline-block;vertical-align:-3px;
  margin-left:9px;opacity:.82;transition:opacity .2s ease}

/* Two sets of hard breaks. .mbr only on narrow screens, .dbr only on wide ones,
   so each layout gets a wrap that was chosen rather than one the browser picked.
   Every break carries a leading space: a display:none <br> leaves none behind. */
.mbr{display:none}
.dbr{display:inline}
@media(max-width:700px){
  .mbr{display:inline}
  .dbr{display:none}
  h1{text-wrap:normal}
  .say{text-wrap:normal}
}
/* Belt and braces: if a break ever releases, kill last-line orphans. */
h1,.say{text-wrap:pretty}

footer{flex:none;border-top:1px solid var(--rule);padding:22px 34px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-faint)}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.foot-nav{display:flex;gap:24px;align-items:center}

@media(max-width:860px){
  .hdr{padding:24px 20px 16px}
  main{padding:44px 20px}
  h1{max-width:none}
  footer{padding:20px;gap:10px}
}
@media(max-height:620px){
  main{padding:32px 34px}
  h1{font-size:clamp(32px,5vw,52px);margin-bottom:24px}
  .follow{margin-top:32px}
}