/* =========================================================
   In the Brambles — Sandy Kahrod
   Direction C "Gingham Riot". Values come from the brand spec.
   Gingham is the frame, never the ground: pages are bone so
   photographs of the work are not fighting a check.
   ========================================================= */

:root {
  --orange:   #FF6B1A;   /* gingham light square              */
  --coral:    #FF4C44;   /* gingham mid square, nowhere else  */
  --pink:     #FF2D6F;   /* gingham dark square, rules        */
  --bone:     #F5EFE3;   /* page ground                       */
  --ink:      #0B0B0C;   /* display type, bars                */
  --yellow:   #FFE44D;   /* the bar                           */
  --deep:     #C0185A;   /* pink text under 24px              */
  --muted:    #5A544A;   /* secondary text on bone            */
  --hairline: #D8D0BF;

  --gingham: conic-gradient(
    var(--coral)  0deg  90deg,
    var(--pink)  90deg 180deg,
    var(--coral) 180deg 270deg,
    var(--orange) 270deg 360deg);

  --gutter: 34px;
  --max: 1180px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

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

a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--yellow); padding: 12px 18px; z-index: 50;
}
.skip:focus { left: 0; }

/* ---------- the gingham band: the frame ---------- */

.band {
  height: 28px;
  background-image: var(--gingham);
  background-size: 56px 56px;
}
.band--thin { height: 16px; background-size: 32px 32px; }

/* ---------- header ---------- */

.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: var(--bone);
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: nowrap;
  min-height: 76px;   /* == the wordmark block, so hiding it cannot move the burger */
}

/* Descriptor as the eyebrow — the spec's rule for wide formats. */
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  margin: 0 0 0 0.4em;
  color: var(--deep);
  text-transform: uppercase;
}

.wordmark {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 27px;
  line-height: 0.94;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 8px 0 0;
  text-transform: uppercase;
}
.wordmark a { color: inherit; text-decoration: none; }
.wordmark a:hover { color: var(--deep); }

/* ---------- burger and the menu panel ---------- */

.burger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 11px 6px;
  margin: 0 -6px 0 0;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  min-width: 44px;
  min-height: 44px;
}
.burger__bars { display: block; width: 30px; }
.burger__bars i {
  display: block;
  height: 3px;
  background: var(--ink);
  margin: 6px 0;
}
.burger:hover .burger__bars i { background: var(--pink); }
.burger:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* No JavaScript: the nav simply sits there, a plain row of links. */
.site-nav__inner { display: flex; flex-wrap: wrap; gap: 22px; padding-bottom: 18px; }

.has-js .site-nav { display: none; border-top: 2px solid var(--pink); margin-top: 16px; }
.has-js .site-nav.is-open { display: block; }
.has-js .site-nav__inner { flex-direction: column; gap: 0; padding-top: 6px; padding-bottom: 26px; }

.site-nav a {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  padding-bottom: 3px;
}
.has-js .site-nav a {
  font-size: 22px;          /* below the 27px wordmark: the nav is not the brand */
  letter-spacing: 0.02em;
  border-bottom: 0;
  padding: 15px 0;          /* the tap target lives here, not in the font size */
  border-top: 1px solid var(--hairline);
}
.has-js .site-nav__inner a:first-child { border-top: 0; }
.site-nav a:hover { color: var(--deep); border-bottom-color: var(--pink); }
.has-js .site-nav a:hover { border-bottom: 0; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--yellow); }
.has-js .site-nav a[aria-current="page"] { color: var(--deep); border-bottom: 0; }

/* ---------- the yellow bar ---------- */

.bar { height: 14px; background: var(--yellow); margin: 22px 0 0; }
.bar--slim { height: 10px; }

/* ---------- work grid ---------- */

main { padding-top: 128px; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px 34px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.tile a { display: block; text-decoration: none; color: inherit; }
.tile__shot {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--hairline);
}
.tile__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tile a:hover .tile__shot img { transform: scale(1.03); }

.tile__title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 14px 0 0;
  text-transform: uppercase;
}
.tile a:hover .tile__title { color: var(--deep); }

.tile__meta {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 6px 0 0;
}

/* A piece with no photograph yet — a project still in development. Applies
   the site's own rule at tile scale: gingham as a band top and bottom, bone
   in between, never gingham as the ground. When there is a photograph,
   replace the whole <div> with a plain .tile__shot holding an <img>. */
.shot--soon {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--bone);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.shot--soon::before,
.shot--soon::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 16px;
  background-image: var(--gingham);
  background-size: 32px 32px;
}
.shot--soon::before { top: 0; }
.shot--soon::after  { bottom: 0; }
.shot--soon span {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
  padding: 0 24px;
}
/* ---------- piece pages ---------- */

.piece { margin: 0; }

.piece__hero { margin: 34px 0 0; background: var(--hairline); }
.piece__hero img { width: 100%; }

.piece__title {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(46px, 8vw, 86px);
  line-height: 0.94;
  letter-spacing: -0.005em;
  margin: 28px 0 0;
  text-transform: uppercase;
  max-width: 14ch;
}

.piece__body { max-width: 62ch; margin: 30px 0 0; }
.piece__body p { margin: 0 0 1.1em; }

.facts {
  margin: 34px 0 0;
  border-top: 2px solid var(--pink);
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 30px;
}
.facts div { margin: 0; }
.facts dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--deep);
}
.facts dd { margin: 5px 0 0; font-size: 15px; }

.plates {
  margin: 44px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 22px;
  align-items: start;
}
.plates figure { margin: 0; }
.plates figcaption { font-size: 13px; color: var(--muted); margin-top: 9px; }

.pager {
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pager a { color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--yellow); padding-bottom: 3px; }
.pager a:hover { color: var(--deep); border-bottom-color: var(--pink); }
.pager span { color: var(--hairline); }

/* ---------- contact ---------- */

.lede {
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.42;
  max-width: 34ch;
  margin: 0;
}

.columns {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 54px;
  margin: 40px 0 0;
  align-items: start;
}

/* The only photograph on the site sits on a gingham block, offset so an L of
   check shows behind it. Still the frame rule: gingham around the picture,
   never under it. The figure's own padding holds the offset, so the block
   cannot push past the column at narrow widths. */
.portrait { position: relative; padding: 0 24px 24px 0; }
.portrait::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 24px;
  width: calc(100% - 24px);
  aspect-ratio: 1 / 1;
  background-image: var(--gingham);
  background-size: 34px 34px;
  z-index: 0;
}
.portrait img { width: 100%; position: relative; z-index: 1; }
.portrait figcaption {
  font-size: 12px; color: var(--muted); letter-spacing: 0.04em;
  position: relative; z-index: 1; margin-top: 36px;
}

.prose { max-width: 64ch; }
.prose p { margin: 0 0 1.15em; }

/* Credentials sit under the statement, not inside it — training and
   publications are a record, not what the work is about. */
.credits {
  margin: 30px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
}

h2 {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 52px 0 0;
}
h2 + * { margin-top: 16px; }

.listing { list-style: none; padding: 0; margin: 16px 0 0; }
.listing li {
  display: flex;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}
.listing li:first-child { border-top: 1px solid var(--hairline); }
.listing time, .listing .when {
  flex: 0 0 132px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 13px;
  padding-top: 2px;
}
.listing .where { color: var(--muted); }

.contact-lines { margin: 16px 0 0; font-size: 18px; }
.contact-lines p { margin: 0 0 8px; }

.empty {
  background: #EFE8DA;
  border-left: 5px solid var(--pink);
  padding: 15px 18px;
  font-size: 14px;
  color: var(--muted);
  margin: 16px 0 0;
}

/* ---------- footer ---------- */

/* Deliberately slight: a name, what she does, where to find her. The gingham
   band closes the page instead of a slab of footer. */
.site-foot { margin-top: 78px; border-top: 1px solid var(--hairline); }
.site-foot .wrap { padding-top: 24px; padding-bottom: 24px; }

.nb { white-space: nowrap; }

.foot__line {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Instagram sits here alone, as a tile rather than a repeated handle. It is
   an "IG" lockup in the site's own type, not Instagram's glyph — that mark is
   theirs. Swap in their official asset from instagram.com/brand if you prefer
   the familiar camera. */
.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: nowrap;   /* the name wraps internally; the tile stays beside it */
}
.foot__social {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;         /* an invisible 44px tap target around a 24px glyph */
  height: 44px;
  margin-right: -10px; /* so the glyph, not its box, lines up with the gutter */
  color: var(--ink);
  text-decoration: none;
}
.foot__social:hover { color: var(--deep); }
.foot__social:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
/* Instagram's official glyph, from their brand assets, inlined so it follows
   the link's colour: black normally, Deep Thorn on hover, matching the menu
   links. The source file is kept at assets/images/instagram-glyph.svg. */
.foot__social svg { display: block; width: 24px; height: 24px; fill: currentColor; }

/* ---------- 404 ---------- */

.lost { text-align: center; padding: 84px 0 60px; }
.lost h1 {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(54px, 11vw, 116px);
  line-height: 0.94;
  margin: 0;
  text-transform: uppercase;
}
.lost p { max-width: 42ch; margin: 22px auto 0; }

/* ---------- phone ---------- */

@media (max-width: 860px) {
  .columns { grid-template-columns: 1fr; gap: 34px; }
  .portrait { max-width: 300px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; }
}

@media (max-width: 620px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }
  .grid { grid-template-columns: 1fr; gap: 40px; margin: 34px 0 54px; }
  .wordmark { font-size: 24px; }
  .site-head__inner { gap: 14px; min-height: 70px; }
  .burger { flex-shrink: 0; }
  .has-js .site-nav a { font-size: 20px; }
  .listing li { flex-direction: column; gap: 4px; }
  .listing time, .listing .when { flex: none; }
  .plates { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================================================
   Homepage poster — the site opens on it, you scroll for work
   ========================================================= */

.poster {
  min-height: 100vh;
  min-height: 100svh;
  background-image: var(--gingham);
  background-size: 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 92px var(--gutter) 108px;
}

.poster__inner { max-width: var(--max); margin: 0 auto; width: 100%; }

.poster__panel {
  background: var(--bone);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 3.4vw, 46px) clamp(26px, 3vw, 40px);
  max-width: 880px;
}

.poster__eyebrow {
  font-size: clamp(11px, 1.5vw, 15px);
  font-weight: 700;
  letter-spacing: 0.42em;
  margin: 0 0 0 0.42em;
  color: var(--deep);
  text-transform: uppercase;
}

.poster__mark {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(58px, 12vw, 148px);
  line-height: 0.94;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: clamp(10px, 1.4vw, 18px) 0 0;
}

.poster__bar { height: clamp(10px, 1.3vw, 16px); background: var(--yellow); margin-top: clamp(16px, 2vw, 26px); }

.poster__credit {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  text-transform: uppercase;
}
.poster__credit span:first-child { font-size: clamp(14px, 1.7vw, 19px); font-weight: 700; letter-spacing: 0.12em; }
.poster__credit span:last-child { font-size: clamp(11px, 1.3vw, 14px); font-weight: 500; letter-spacing: 0.16em; color: var(--deep); }

.poster__cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: var(--ink);
  color: var(--yellow);
  text-decoration: none;
}
.poster__cue:hover { background: var(--deep); color: var(--bone); }
.poster__cue svg { animation: nudge 2.4s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* Over the poster the same header simply goes see-through. Its geometry is
   untouched, so the burger does not move. */

.home .site-head.is-over {
  background: transparent;
  border-bottom: 0;
}
.home .site-head.is-over .wordmark,
.home .site-head.is-over .eyebrow { display: none; }
.home .site-head.is-over .site-head__inner { justify-content: flex-end; }

.home #main { scroll-margin-top: 0; }

@media (max-width: 620px) {
  main { padding-top: 110px; }
  .poster { padding: 78px var(--gutter) 96px; }
  .poster__cue { bottom: 22px; width: 52px; height: 52px; }
}