/* LA PLAGE · colour guide page */
body.guide { background: var(--white); color: var(--ink); }
.guide .portal__bar { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.guide__main { width: min(1180px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding-bottom: clamp(60px, 10vh, 120px); }

/* the frame from the printed guide: a thin sea-blue rule around each page */
.cg-hero, .cg-print, .cg-brand {
  border: 1px solid var(--sea); margin-top: clamp(28px, 6vh, 64px);
  padding: clamp(24px, 5vw, 64px);
  scroll-margin-top: 72px;
}

.cg-hero__title { font-family: "Playfair Display", var(--serif); font-size: clamp(56px, 9vw, 120px); line-height: .95; font-weight: 500; color: var(--sea-deep); letter-spacing: -.01em; }
.cg-hero__title em { display: block; color: var(--sea); font-style: italic; }
.cg-hero__tag { font-family: var(--serif); font-style: italic; color: var(--sand); font-size: clamp(16px, 1.6vw, 20px); margin-top: 14px; }
.cg-download {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
  padding: 12px 18px; border: 1px solid var(--sea-deep); color: var(--sea-deep);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out);
}
.cg-download::before { content: "↓"; font-size: 14px; letter-spacing: 0; }
.cg-download span { color: var(--sand-ink); letter-spacing: .08em; }
.cg-download:hover { background: var(--sea-deep); color: var(--white); }
.cg-download:hover span { color: var(--sand-light); }
.cg-index { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 220px)); justify-content: start; gap: clamp(18px, 3vw, 36px); margin-top: clamp(32px, 6vh, 64px); }
.cg-index a { display: grid; justify-items: center; text-align: center; gap: 6px; padding-bottom: 6px; }
.cg-index img { width: 100%; height: auto; transition: transform 500ms var(--ease-out); }
.cg-index a:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.cg-index__name { width: 100%; border-top: 1px solid var(--sea); padding-top: 14px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 20px; color: var(--sea-deep); }
.cg-index__kind, .cg-print__kind { font-size: 10.5px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sand); }

.cg-print__head { border-bottom: 1px solid var(--sea); padding-bottom: 18px; margin-bottom: clamp(20px, 4vh, 36px); display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: end; }
.cg-print__n { grid-row: span 2; font-family: var(--display); font-size: clamp(40px, 5vw, 64px); line-height: .9; color: var(--accent, var(--sea)); }
.cg-print__name { font-family: "Playfair Display", var(--serif); font-style: italic; font-weight: 500; font-size: clamp(36px, 5vw, 60px); line-height: 1; color: var(--sea-deep); }
.cg-print__body { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-areas: "shorts pattern" "colours pattern"; gap: clamp(20px, 3.5vw, 48px); align-items: start; }
.cg-print__shorts { grid-area: shorts; margin: 0; }
.cg-print__shorts img { width: 100%; height: auto; }
.cg-print__pattern { grid-area: pattern; margin: 0; position: sticky; top: 84px; }
.cg-print__pattern img { width: 100%; height: auto; max-height: 82vh; object-fit: cover; border: 1px solid var(--line); }
.cg-print__pattern figcaption, .cg-h { font-size: 10.5px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--sand); margin-top: 10px; font-weight: 400; }
.cg-print__colours { grid-area: colours; display: grid; gap: 14px; }
.cg-note { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-soft); }
.cg-bar { display: flex; height: 18px; border: 1px solid var(--line); }
.cg-bar span { flex-basis: 0; transform-origin: left; }
.cg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 14px; }
.cg-chips li { display: grid; gap: 3px; font-size: 12px; }
.cg-chips__sw { height: 44px; border: 1px solid var(--line); margin-bottom: 6px; }
.cg-chips b { font-weight: 500; color: var(--sea-deep); }
.cg-chips code { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--sea-deep); }
.cg-chips span { color: var(--ink-soft); font-size: 11px; }
.cg-patch { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 20px; align-items: center; border-top: 1px solid var(--sea); padding-top: 18px; margin-top: 6px; }
.cg-patch img { width: 100%; height: auto; }
.cg-cta { justify-self: start; margin-top: 8px; }

.cg-brand__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 24px 0 26px; }
.cg-brand__list li { display: grid; gap: 4px; font-size: 13px; }
.cg-brand__list span { height: clamp(70px, 10vw, 118px); border: 1px solid var(--line); margin-bottom: 6px; }
.cg-brand__list b { font-weight: 500; color: var(--sea-deep); }
.cg-brand__list code { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; }

/* each print rises in as it reaches the screen; the colour bar fills from the left */
.cg-rise { opacity: 0; transform: translateY(36px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
.cg-rise.is-in { opacity: 1; transform: none; }
.cg-rise .cg-bar span { transform: scaleX(0); transition: transform 1100ms var(--ease-out) 300ms; }
.cg-rise.is-in .cg-bar span { transform: none; }

@media (max-width: 900px) { .cg-index { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .cg-index { grid-template-columns: repeat(2, 1fr); }
  .cg-print__body { grid-template-columns: 1fr; grid-template-areas: "shorts" "pattern" "colours"; }
  .cg-print__pattern { position: static; }
  .cg-print__pattern img { max-height: 60vh; }
  .cg-brand__list { grid-template-columns: repeat(2, 1fr); }
  .cg-patch { grid-template-columns: 1fr; }
  .cg-patch img { max-width: 220px; }
}