/* The guide, in the homepage's own system.
   
   The first version borrowed from about.html - a rounded card floating on the
   background - and that is the wrong reference: about is a small legal page,
   and the HOMEPAGE is what the site looks like. Full bleed on the linen, the
   eyebrow letterspaced in wine, Cormorant at display size with italic accents,
   pill CTAs, footer nav in caps. No card.
   
   Sized to fit a laptop screen without scrolling wherever the content allows,
   which is why the spacing is tight and the type scale is restrained. */

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

body {
  background: #f5f0e8 url('../background.jpg') center center / cover fixed;
  color: #2a1018;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2rem 4rem 1.5rem;
}

/* Header: the wordmark left, guide nav right - the homepage's own arrangement. */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-shrink: 0;
}
/* The title of the whole guide, and on the index the ONLY title - an eyebrow
   reading "Fashion Studio Guide" above a heading reading "Guide" beneath a
   wordmark reading "Fashion Studio Guide" was the same words three times.
   
   The logo sits beside it at the same optical weight, the way the homepage
   opens: mix-blend-mode multiply so it sits ON the linen rather than in a
   white box of its own. */
.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.brand img { height: 62px; width: auto; display: block; mix-blend-mode: multiply; }
.wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: #2a1018;
  text-decoration: none;
}
.wordmark em { font-style: italic; color: #8c1f52; }


main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.75rem 0 1.25rem; }


h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 900px;
  margin-bottom: 0.55rem;
}
h1 em { font-style: italic; color: #8c1f52; }

.divider { width: 32px; height: 0.5px; background: #8c1f52; opacity: 0.6; margin-bottom: 1.1rem; }

.standfirst {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.18rem;
  line-height: 1.4;
  color: #5a3535;
  max-width: 46rem;
  margin-bottom: 1.5rem;
}
/* The index's opening line runs the full width so it holds on one line. It is
   allowed to wrap below a laptop, because a line that fits by shrinking is
   worse than one that wraps. */
main > .standfirst:first-of-type { max-width: none; }

h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.2;
  margin: 1.5rem 0 0.4rem;
}
h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.06rem; margin: 0.9rem 0 0.2rem; }

p { max-width: 62rem; margin-bottom: 0.7rem; font-size: 0.925rem; line-height: 1.6; }
ul { margin: 0 0 0.8rem 1.1rem; }
li { max-width: 62rem; margin-bottom: 0.3rem; font-size: 0.925rem; line-height: 1.55; }
strong { font-weight: 400; color: #2a1018; }
em { font-style: italic; }
a { color: #8c1f52; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 1px solid #8c1f52; outline-offset: 3px; }

/* The key idea of a page, marked the way the homepage marks its accent - a
   hairline and the wine, not a filled box. */
.key {
  border-left: 0.5px solid #8c1f52;
  padding: 0.15rem 0 0.15rem 1rem;
  margin: 0.9rem 0;
  max-width: 58rem;
}
.key p { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 1.12rem; line-height: 1.35; color: #2a1018; }

/* The four artifacts, as the homepage's divided descriptor row. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 0.5px solid rgba(42, 16, 24, 0.2);
  margin: 0.9rem 0 1.1rem;
}
.steps div { padding: 0.9rem 1rem 0.9rem 0; border-right: 0.5px solid rgba(42, 16, 24, 0.2); }
.steps div:last-child { border-right: none; }
.steps div:not(:first-child) { padding-left: 1rem; }
.steps .n { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8c1f52; display: block; margin-bottom: 0.3rem; }
.steps .what { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; display: block; line-height: 1.1; }
.steps .is { font-size: 0.8rem; color: #5a3535; line-height: 1.4; display: block; margin-top: 0.15rem; }

/* Contents, as the same divided grid rather than cards. */
.contents { list-style: none; margin: 1.1rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0.5px solid rgba(42, 16, 24, 0.2); }
.contents li { margin: 0; border-right: 0.5px solid rgba(42, 16, 24, 0.2); border-bottom: 0.5px solid rgba(42, 16, 24, 0.2); }
.contents li:nth-child(4n) { border-right: none; }
.contents a { display: block; padding: 1.7rem 1.4rem 1.9rem 0; height: 100%; }
.contents li:not(:nth-child(4n+1)) a { padding-left: 1.4rem; }
.contents a:hover { background: rgba(140, 31, 82, 0.055); text-decoration: none; }
.contents .n { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8c1f52; display: block; margin-bottom: 0.45rem; }
.contents .t { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; display: block; line-height: 1.1; color: #2a1018; }
.contents .d { font-size: 0.84rem; color: #5a3535; display: block; margin-top: 0.35rem; line-height: 1.45; }

.scroll { overflow-x: auto; margin-bottom: 0.9rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th, td { text-align: left; padding: 0.5rem 1rem 0.5rem 0; border-bottom: 0.5px solid rgba(42, 16, 24, 0.16); vertical-align: top; line-height: 1.45; }
th { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: #8c1f52; font-weight: 400; border-bottom: 0.5px solid rgba(42, 16, 24, 0.3); white-space: nowrap; }

/* Footer: the pager left, site links right, on one line. */
/* The homepage's footer, same structure and same type: links left, the mark
   right, on one line. */
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-shrink: 0;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a3535;
}
.footer-nav a { color: #5a3535; text-decoration: none; }
.footer-nav a:hover { color: #8c1f52; }
.footer-nav .sep { opacity: 0.3; }
.footer-mark { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #6b4040; opacity: 0.75; }

@media (max-width: 900px) {
  body { padding: 1.5rem 1.5rem 1.25rem; }
  .steps, .contents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contents li:nth-child(4n) { border-right: 0.5px solid rgba(42, 16, 24, 0.2); }
  .contents li:nth-child(2n) { border-right: none; }
}