/* ============================================
   P01 My Profile
   PERFECT MATCH VERSION
   90s Swiss Typography × Personal ZINE
   ============================================ */

/* ---------- Reset & Base ---------- */

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

:root{

  --color-bg:#F4F1EA;
  --color-bg-alt:#EDE9E0;

  --color-ink:#1A1A1A;
  --color-ink-sub:#4A4A46;

  --color-accent:#C8412C;

  --color-rule:#1A1A1A;
  --color-rule-lt:#C8C3B8;

  --font-display:"Fraunces","Shippori Mincho",serif;
  --font-body:"IBM Plex Sans","Shippori Mincho",sans-serif;
  --font-jp:"Shippori Mincho",serif;

  --grid-max:960px;
  --grid-pad:32px;

  --transition:0.25s ease;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.75;

  color:var(--color-ink);

  background-color:var(--color-bg);

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:var(--color-ink);

  text-decoration:none;

  transition:
    color var(--transition),
    border-color var(--transition),
    opacity var(--transition);
}

a:hover{
  color:var(--color-accent);
}

ul{
  list-style:none;
}

/* ---------- Utilities ---------- */

.section-number{
  font-family:var(--font-display);

  font-size:120px;

  font-weight:900;

  line-height:1;

  letter-spacing:-0.04em;

  color:var(--color-rule-lt);

  user-select:none;
}

.section-heading{
  display:inline-block;

  font-family:var(--font-display);

  font-size:11px;

  font-weight:500;

  letter-spacing:0.2em;

  text-transform:uppercase;

  color:var(--color-accent);

  border-bottom:1px solid var(--color-accent);

  padding-bottom:4px;

  margin-bottom:40px;
}

/* ---------- Header ---------- */

.header{
  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:100;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px var(--grid-pad);

  mix-blend-mode:difference;
}

.header__number{
  font-family:var(--font-display);

  font-size:14px;

  font-weight:700;

  color:#fff;
}

.header__nav{
  display:flex;

  gap:28px;
}

.header__link{
  font-size:11px;

  font-weight:500;

  letter-spacing:0.12em;

  text-transform:uppercase;

  color:#fff;
}

.header__link:hover{
  opacity:0.5;

  color:#fff;
}

/* ---------- Hero ---------- */

.hero{
  padding:140px var(--grid-pad) 0;

  max-width:var(--grid-max);

  margin:0 auto;
}

.hero__grid{
  display:grid;

  grid-template-columns:1fr 280px;

  grid-template-rows:auto auto;

  gap:0 48px;
}

.hero__title-block{
  grid-column:1;

  align-self:end;
}

.hero__issue{
  font-size:11px;

  letter-spacing:0.15em;

  text-transform:uppercase;

  color:var(--color-ink-sub);

  margin-bottom:16px;
}

.hero__name{
  font-family:var(--font-display);

  font-size:clamp(56px,10vw,96px);

  font-weight:900;

  line-height:0.92;

  letter-spacing:-0.03em;

  margin-bottom:24px;
}

.hero__name-line{
  display:block;
}

.hero__name-line--indent{
  padding-left:80px;

  color:var(--color-accent);
}

.hero__role{
  font-family:var(--font-display);

  font-size:18px;

  font-weight:300;

  font-style:italic;

  line-height:1.5;

  color:var(--color-ink-sub);
}

.hero__photo{
  grid-column:2;

  grid-row:1 / 3;
}

.hero__photo img{
  width:100%;

  height:420px;

  object-fit:cover;

  filter:grayscale(100%) contrast(1.1);
}

.hero__meta{
  grid-column:1;

  padding-top:40px;
}

.hero__facts{
  display:flex;

  gap:48px;
}

.hero__fact dt{
  font-size:10px;

  letter-spacing:0.15em;

  text-transform:uppercase;

  color:var(--color-ink-sub);

  margin-bottom:4px;
}

.hero__fact dd{
  font-family:var(--font-display);

  font-size:16px;

  font-weight:500;
}

.hero__rule{
  margin-top:48px;

  border:none;

  border-top:2px solid var(--color-rule);
}

/* ---------- About ---------- */

.about{
  max-width:var(--grid-max);

  margin:0 auto;

  padding:80px var(--grid-pad);
}

.about__grid{
  display:grid;

  grid-template-columns:160px 1fr;

  gap:0 48px;

  align-items:start;
}

.about__number{
  text-align:right;
}

.about__lead{
  font-family:var(--font-jp);

  font-size:18px;

  line-height:2;

  margin-bottom:24px;
}

.about__text{
  color:var(--color-ink-sub);

  line-height:1.9;
}

/* ---------- Skills ---------- */

.skills{
  max-width:var(--grid-max);

  margin:0 auto;

  padding:80px var(--grid-pad);

  border-top:1px solid var(--color-rule-lt);
}

.skills__grid{
  display:grid;

  grid-template-columns:160px 1fr;

  gap:0 48px;

  align-items:start;
}

.skills__number{
  text-align:right;
}

.skills__columns{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:32px;
}

.skills__category{
  font-family:var(--font-display);

  font-size:13px;

  font-weight:700;

  letter-spacing:0.06em;

  text-transform:uppercase;

  margin-bottom:16px;

  padding-bottom:8px;

  border-bottom:1px solid var(--color-rule);
}

.skills__list li{
  font-size:14px;

  color:var(--color-ink-sub);

  padding:8px 0;

  border-bottom:1px solid var(--color-rule-lt);
}

/* ---------- Works ---------- */

.works{
  max-width:var(--grid-max);

  margin:0 auto;

  padding:80px var(--grid-pad);

  border-top:1px solid var(--color-rule-lt);
}

.works__grid{
  display:grid;

  grid-template-columns:160px 1fr;

  gap:0 48px;

  align-items:start;
}

.works__number{
  text-align:right;
}

.works__item{
  display:grid;

  grid-template-columns:48px 1fr auto;

  gap:0 24px;

  align-items:baseline;

  padding:24px 0;

  border-bottom:1px solid var(--color-rule-lt);

  transition:background-color var(--transition);
}

.works__item:first-child{
  border-top:2px solid var(--color-rule);
}

.works__item:hover{
  background-color:var(--color-bg-alt);
}

.works__index{
  font-family:var(--font-display);

  font-size:12px;

  font-weight:700;

  color:var(--color-accent);
}

.works__title{
  font-family:var(--font-display);

  font-size:20px;

  font-weight:500;

  letter-spacing:-0.01em;
}

.works__desc{
  grid-column:2;

  font-size:13px;

  color:var(--color-ink-sub);

  margin-top:4px;
}

.works__year{
  grid-column:3;

  grid-row:1;

  font-family:var(--font-display);

  font-size:13px;

  color:var(--color-ink-sub);
}

/* ---------- Contact ---------- */

.contact{
  max-width:var(--grid-max);

  margin:0 auto;

  padding:80px var(--grid-pad);

  border-top:1px solid var(--color-rule-lt);
}

.contact__grid{
  display:grid;

  grid-template-columns:160px 1fr;

  gap:0 48px;

  align-items:start;
}

.contact__number{
  text-align:right;
}

.contact__text{
  font-family:var(--font-jp);

  color:var(--color-ink-sub);

  margin-bottom:32px;
}

.contact__links{
  display:flex;

  gap:32px;
}

.contact__link{
  font-size:14px;

  font-weight:500;

  letter-spacing:0.02em;

  padding-bottom:2px;

  border-bottom:1px solid var(--color-rule);
}

.contact__link:hover{
  border-bottom-color:var(--color-accent);
}

/* ---------- Footer ---------- */

.footer{
  border-top:2px solid var(--color-rule);

  padding:24px var(--grid-pad);

  max-width:var(--grid-max);

  margin:0 auto;
}

.footer__inner{
  display:flex;

  justify-content:space-between;

  align-items:center;
}

.footer__colophon{
  font-size:11px;

  letter-spacing:0.1em;

  text-transform:uppercase;

  color:var(--color-ink-sub);
}

.footer__copy{
  font-family:var(--font-display);

  font-size:13px;

  color:var(--color-ink-sub);
}

/* ============================================
   Responsive
   ============================================ */

@media(max-width:768px){

  :root{
    --grid-pad:20px;
  }

  .section-number{
    font-size:72px;
  }

  .hero{
    padding-top:100px;
  }

  .hero__grid{
    grid-template-columns:1fr;
  }

  .hero__photo{
    grid-column:1;

    grid-row:auto;

    margin-top:32px;
  }

  .hero__photo img{
    height:300px;
  }

  .hero__name{
    font-size:clamp(42px,12vw,64px);
  }

  .hero__name-line--indent{
    padding-left:40px;
  }

  .hero__meta{
    padding-top:24px;
  }

  .hero__facts{
    gap:32px;
  }

  .about__grid,
  .skills__grid,
  .works__grid,
  .contact__grid{
    grid-template-columns:1fr;

    gap:16px;
  }

  .about__number,
  .skills__number,
  .works__number,
  .contact__number{
    text-align:left;
  }

  .skills__columns{
    grid-template-columns:1fr;

    gap:40px;
  }

  .works__item{
    grid-template-columns:36px 1fr;
  }

  .works__year{
    grid-column:2;

    grid-row:auto;

    margin-top:4px;
  }

  .contact__links{
    flex-direction:column;

    gap:16px;
  }

}

@media(max-width:480px){

  .header__nav{
    gap:16px;
  }

  .header__link{
    font-size:10px;
  }

  .hero__name{
    font-size:38px;
  }

  .hero__name-line--indent{
    padding-left:24px;
  }

  .hero__facts{
    flex-direction:column;

    gap:16px;
  }

  .footer__inner{
    flex-direction:column;

    gap:8px;

    text-align:center;
  }

}