/* ---------------------------------------------------------------------------
   tykelewis.com
   Palette: warm paper, ink, a single terracotta accent.
   Structure: alternating bands, hairline rules, no boxes.
--------------------------------------------------------------------------- */

:root{
  --ink:#221f1c;
  --muted:#5b564f;
  /* Dark enough to clear WCAG AA (4.5:1) against both paper and white at the
     11-12.5px sizes it is used for: role labels and the contact links. */
  --faint:#726d66;
  --paper:#f6f1e9;
  --white:#fffdfa;
  --rule:#e3dbcd;
  --accent:#a3552e;
  --accent-soft:rgba(163,85,46,.32);
}

*{box-sizing:border-box;margin:0;padding:0}
img{display:block}

body{
  background:var(--white);
  color:var(--ink);
  font:400 16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.serif{
  font-family:"Source Serif 4","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-weight:400;
}

.wrap{max-width:1040px;margin:0 auto;padding:0 40px}
.band{background:var(--paper)}

a{color:inherit}

/* Company marks. Each source PNG carries a different amount of internal
   padding, so the frame heights are tuned to match optical sizes. Saturation
   is knocked back so the terracotta stays the only saturated colour. */
.mk{display:flex;align-items:center;gap:10px}
.mk img,.zy img,.workhead img{width:auto;filter:saturate(.7)}
.lg-slack{height:30px}
.lg-nw{height:41px}
.lg-vanna{height:42px}
/* Two Chairs ships as a full-bleed tile rather than a free-standing mark, so it
   is rounded slightly and set a touch smaller: a solid block of colour reads
   heavier than the open marks at the same height. */
.lg-tc{height:30px;border-radius:6px}

/* Zynga's logo file includes a wordmark rotated 90deg, so it is cropped to
   the dog and the company name is set in type alongside it. */
.zy{position:relative;width:26px;height:34px;overflow:hidden;flex:none}
.zy img{position:absolute;left:-5px;top:-8px;width:47px;max-width:none;height:auto}

/* --- hero ---------------------------------------------------------------- */
.hero .wrap{
  display:grid;grid-template-columns:1.25fr .8fr;gap:64px;align-items:center;
  padding-top:72px;padding-bottom:76px;
}
.ident{margin-bottom:26px}
.ident .nm{font-size:19px;letter-spacing:-.01em}
.ident .ttl{font-size:14.5px;color:var(--muted);margin-top:2px}

h1{font-size:45px;line-height:1.15;letter-spacing:-.016em;margin-bottom:22px;font-weight:400}
h1 em{font-style:italic;color:var(--accent)}
.sub{font-size:18px;color:var(--muted);max-width:44ch;line-height:1.6}

.heromail{margin-top:32px;font-size:22px}
.heromail a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
.heromail a:hover{color:var(--accent)}

/* warm grade so the foliage sits with the paper rather than fighting it */
.photo{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:16px;
  filter:saturate(.82) sepia(.14) contrast(1.03) brightness(1.02);
}

/* --- logo band ----------------------------------------------------------- */
.logoband{border-top:1px solid var(--rule)}
.logoband .wrap{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px 30px;
  padding-top:30px;padding-bottom:30px;
}
.mk .nm{font-size:17px;color:#2f2b27}
.mk .rl{
  display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin-top:2px;
}

/* --- sections ------------------------------------------------------------ */
section{padding:82px 0}
h2{font-size:33px;letter-spacing:-.018em;font-weight:400}

.about{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:30px}
.about p{font-size:18px;line-height:1.72;color:#33302b}
.about p + p{margin-top:18px}

/* --- ways I can help ----------------------------------------------------- */
.groupname{font-size:24px;letter-spacing:-.012em;margin:48px 0 4px}
.groupname:first-of-type{margin-top:38px}
.groupnote{color:var(--muted);font-size:15.5px;margin-bottom:14px}

.grid{
  display:grid;grid-template-columns:1fr 1fr;column-gap:56px;row-gap:0;
  border-bottom:1px solid var(--rule);
}
.item{padding:22px 0 26px;border-top:1px solid var(--rule)}
.item h3{font-size:19px;letter-spacing:-.01em;margin-bottom:7px;font-weight:400}
.item p{font-size:15.5px;color:var(--muted);line-height:1.55}

.good{
  display:block;margin-top:13px;padding-left:14px;
  border-left:2px solid var(--accent-soft);
  font-size:14px;color:var(--accent);font-style:italic;line-height:1.5;
}
.closer{margin-top:30px;font-size:15.5px;color:var(--muted);font-style:italic}
.closer a{text-decoration:none;border-bottom:1px solid var(--rule)}
.closer a:hover{color:var(--accent)}

/* --- selected work ------------------------------------------------------- */
.work{
  display:grid;grid-template-columns:280px 1fr;gap:40px;
  padding:26px 0;border-top:1px solid var(--rule);
}
.work:first-of-type{margin-top:30px}
.workhead{display:flex;align-items:center;gap:12px}
.work .co{font-size:20px;line-height:1.2}
.work .role{
  font-size:12.5px;color:var(--faint);letter-spacing:.05em;
  text-transform:uppercase;margin-top:3px;
}
.work p{font-size:16.5px;color:var(--muted);line-height:1.62}

/* --- contact ------------------------------------------------------------- */
.contact{text-align:center}
.contact p.lead{font-size:17px;color:var(--muted);max-width:58ch;margin:16px auto 34px}
.bigmail{font-size:30px}
.bigmail a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
.bigmail a:hover{color:var(--accent)}
.links{margin-top:22px;font-size:15px;color:var(--faint)}
.links a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.links a:hover{color:var(--accent)}

/* --- mobile -------------------------------------------------------------- */
@media (max-width:860px){
  .wrap{padding:0 22px}

  .hero .wrap{grid-template-columns:1fr;gap:30px;padding-top:44px;padding-bottom:44px}
  .photo{width:130px;order:-1;border-radius:12px}
  .ident{margin-bottom:20px}
  h1{font-size:33px}
  .sub{font-size:17px}
  .heromail{font-size:19px}

  section{padding:54px 0}
  h2{font-size:26px}

  .about,.work{grid-template-columns:1fr;gap:14px}
  .about{gap:18px;margin-top:22px}
  .about p{font-size:17px}
  .grid{grid-template-columns:1fr}
  .work{gap:10px}

  .logoband .wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}

  .bigmail{font-size:24px}
}