@import url("reset.css");
@import url("variables.css");

/*
-----------------------------------------
CSS PROPERTIES & VALUES - QUICK REFERENCE
-----------------------------------------

CSS comments use /* and * / (without the space).

UNITS
px    = Pixels. Fixed CSS measurement.
%     = Percentage relative to another value,
        often the parent element.
em    = Relative to the element's font size
        (or parent's font size for font-size).
rem   = Relative to the root HTML font size.
vw    = 1% of the viewport width.
vh    = 1% of the viewport height.
ch    = Approximate width of the "0" character.

TYPOGRAPHY
font-family: Arial, sans-serif;
  Sets the typeface and fallback fonts.

font-size: 16px;
  Sets the size of the text.

font-weight: 400;
  Controls text weight.
  400 = Normal, 700 = Bold.
  Variable fonts may support values 100-900.

line-height: 1.5;
  Controls spacing between lines.
  1.5 means 1.5 times the font size.

letter-spacing: 2px;
  Controls spacing between characters.
  Negative values tighten spacing.

text-align: left;
  Aligns text: left, right, center, justify.

text-transform: uppercase;
  Changes appearance of text:
  uppercase, lowercase, capitalize, none.

COLOUR
color: #222222;
  Sets text colour.

background-color: #ffffff;
  Sets the background colour.

SPACING
margin: 20px;
  Space outside an element.

padding: 20px;
  Space inside an element.

margin-bottom: 20px;
  Adds space below an element.

WIDTH
width: 100%;
  Sets an element's width.

max-width: 800px;
  Limits how wide an element can become.

-----------------------------------------
*/


/*
03 — APPLYING VARIABLES / BASELINE BRIDGE
Numbering update: examples 01 and 02 have since been swapped at your request.
The original-number references below describe the files before that swap:
old 01 is now 02 (styled), and old 02 is now 01 (reset/reference).

The supplied example 02 has a reset and reference notes, but no typography
rules. Both originals are protected. Here we explicitly restore example 01's
basic typography and spacing, substituting variables for reusable values.
This necessary bridge is the only extra change in the colour lesson.
No grid, animation or experimental layout is introduced yet.
Try changing --font-size-h1 or --spacing-large in variables.css.
*/
body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  line-height: 1.6;
  padding: var(--spacing-large);
}
h1 {
  color: var(--color-primary);
  font-size: var(--font-size-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: var(--spacing-medium);
}
h2 {
  color: var(--color-secondary);
  font-size: var(--font-size-h2);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: var(--spacing-heading);
}
p {
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0px;
  max-width: 650px;
  margin-bottom: var(--spacing-medium);
}
/* A long word can wrap on a narrow screen without introducing fluid sizing. */
h1, h2, p { overflow-wrap: break-word; }

/*
04 — EDITORIAL GRID
width: auto fills available space after padding. max-width caps the container
at 1280px. margin: 0 auto centres it using equal automatic side margins.
display: grid arranges direct children into tracks. repeat(3, ...) creates
three equal columns. 1fr means one share of free space; minmax(0, 1fr)
lets a column shrink below its content width. gap adds space BETWEEN tracks.
grid-column: 1 / -1 spans from the first to the last grid line.
align-items: start aligns the tops without stretching short paragraphs.
Try two columns or a larger gap. The single-column mobile lesson follows in 06.
*/
.editorial {
  width: auto;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-large);
  align-items: start;
}
.edition, .editorial h1, .editorial h2 { grid-column: 1 / -1; }
.edition {
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-top: 2px solid var(--color-primary);
  padding-top: var(--spacing-small);
}
.editorial > p { border-top: 1px solid var(--color-primary); padding-top: var(--spacing-medium); }

/*
05 — EXPERIMENTAL TYPE
The grid stays in place. Later rules deliberately override earlier values;
keeping earlier rules and comments makes the progression visible.
font-size increases the headline to 112px. text-shadow draws an offset copy:
3px right, 3px down, 0 blur. Try a larger offset.
-webkit-text-stroke draws a 1px outline. It is an enhancement: the green fill
remains readable without it, rather than relying on transparent letters.
transform rotates, scales and translates without moving neighbouring boxes.
rotate(-3deg) is anticlockwise; scale(1.02) is 102% of the original size;
translate(8px, -8px) moves right and up. The order of transforms matters.
transform-origin chooses the pivot. Try center instead of left center.
A negative margin creates a small overlap. position: relative allows z-index
(the stacking order) to place the chapter above the headline's shadow.
*/
h1 { font-size: 112px; text-shadow: 3px 3px 0 var(--color-secondary); }
h2 {
  transform: translate(8px, -8px) rotate(-3deg) scale(1.02);
  transform-origin: left center;
  -webkit-text-stroke: 1px var(--color-secondary);
  margin-top: -24px;
  position: relative;
  z-index: 1;
}

/*
06 — RESPONSIVE TYPOGRAPHY
1rem is the root font size (usually 16px); em follows this element's font size.
Using em for letter spacing keeps it proportional when the headline grows.
1vw / 1vh are 1% of viewport width / height. min-height: 100vh gives the page
at least a screen of height, but still allows long text to scroll.
clamp(minimum, preferred, maximum) limits fluid values. The headline uses
9vw + 1rem between 2.5rem and 9rem. Resize the browser to see it respond.
width: 100% fills the container. The inherited max-width still caps its size.
@media applies overrides only when its condition is true. At 700px and below,
three columns become one; reducing the tilt avoids clipping on small screens.
Try changing the breakpoint to 800px, or the preferred headline size to 11vw.
*/
body { padding: clamp(20px, 4vw, 64px); min-height: 100vh; }
.editorial { width: 100%; gap: clamp(20px, 3vw, 40px); }
h1 { font-size: clamp(2.5rem, 9vw + 1rem, 9rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(1.5rem, 4vw, 3rem); }
p { font-size: 1rem; }
@media (max-width: 700px) {
  .editorial { grid-template-columns: minmax(0, 1fr); }
  h2 { transform: translate(0, 0) rotate(-1deg) scale(1); margin-top: 0; }
}

/*
WORKSHOP NAVIGATION — shared across the ten examples
These ordinary links open the neighbouring folder without JavaScript.
inline-block keeps the arrows beside the example number. Padding gives each
arrow a comfortable click area; currentColor follows this page's text colour.
The navigation stays in normal flow above the content, so it cannot cover it.
An outline makes keyboard focus visible. Unavailable directions are plain
spans, not links, so they cannot accidentally navigate or receive focus.
*/
.example-navigation {
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 20px;
}
.example-navigation a,
.example-navigation .unavailable {
  display: inline-block;
  padding: 12px;
  font-size: 20px;
  color: inherit;
  text-decoration: none;
}
.example-navigation a:hover { text-decoration: underline; }
.example-navigation a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.example-navigation .unavailable { opacity: .35; }
.example-navigation .example-number { font-size: 12px; }