/* =====================================================================
   ART SIDE — a thin layer over the SHARED design stylesheets
   (../design/css/foundation.css + ../design/css/style.css).
   Reuses the same header, type, grid, buttons and footer; this file only
   swaps the accent colour and adds the art-only pieces (tall painting
   hero, splits, discipline cards, painting gallery, CTA band).
   ===================================================================== */

/* The one swap: cinnabar red instead of the design side's purple. */
:root{ --accent:#B23A28; }

/* Small red section label (eyebrow). */
.eyebrow{ display:none; font-family:din-condensed, sans-serif; text-transform:uppercase;
  letter-spacing:.18em; font-size:.9rem; font-weight:400; color:var(--accent); margin-bottom:.7em; }

/* ---- tall, immersive painting hero (responsive height, content lower-left) ---- */
.art-banner{ position:relative; min-height:90vh; display:flex; align-items:flex-end;
  background:#0f0c0a center 40% / cover no-repeat; padding:0; }
.art-banner::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(15,12,10,.34) 0%, rgba(15,12,10,.08) 42%, rgba(15,12,10,.80) 100%); }
.art-banner .row{ position:relative; z-index:2; width:100%; padding:12em 0 7vh; }
.art-banner h1.site-title{ color:#fff; margin-bottom:1.2rem; }
/* no headline on the art home — the intro carries the hero as large copy */
.art-banner .sub-par{ color:rgba(255,255,255,.95); max-width:900px; margin-bottom:2.2rem;
  font-size:clamp(24px,3vw,42px); line-height:1.28; font-weight:400;
  text-shadow:0 1px 24px rgba(0,0,0,.5); }
.art-banner .button.button-trans{ color:#fff; }
/* over the dark home hero: 岩田 stays bright white (its own rule), the wordmark rides at 80% for the
   same two-tone effect as the design home. Reverts to grey/accent once the nav goes fixed on scroll. */
#home-page #nav-wrap:not(.fixed-nav) #logo-box .logo-word{ color:rgba(255,255,255,.8); }
@media(max-width:740px){ .art-banner{ min-height:82vh; } .art-banner .row{ padding-top:9em; } }

/* ---- image + text split (Foundation columns) ---- */
.split-media img{ width:100%; box-shadow:13px 15px 24px rgba(0,0,0,.18); }
.split-text{ padding:1.2em 0; }
.split-text .lead{ font-size:1.3em; line-height:1.5; color:#46595e; margin:0 0 1em; }
@media(min-width:741px){ .pad-left{ padding-left:3em; } .pad-right{ padding-right:3em; } }

/* ---- three disciplines ---- */
.disc{ display:block; }
.disc .ph{ aspect-ratio:4/5; overflow:hidden; background:#eae2d4; margin-bottom:1rem; }
.disc .ph img{ width:100%; height:100%; object-fit:cover; transition:.5s ease; }
.disc:hover .ph img{ transform:scale(1.04); }
.disc h4{ margin:0 0 2px; }
.disc .caption{ margin:0; }

/* ---- painting gallery — masonry, in the template's visual language ---- */
ul.art-grid{ columns:3; column-gap:20px; list-style:none; margin:0; padding:0; }
ul.art-grid li{ break-inside:avoid; margin:0 0 20px; }
ul.art-grid a{ display:block; overflow:hidden; box-shadow:10px 10px 25px rgba(0,0,0,.1); transition:.3s; }
ul.art-grid a:hover{ box-shadow:15px 15px 20px rgba(0,0,0,.2); }
ul.art-grid img{ width:100%; display:block; transition:.45s ease; }
ul.art-grid a:hover img{ transform:scale(1.04); }
@media(max-width:1030px){ ul.art-grid{ columns:2; } }
@media(max-width:640px){ ul.art-grid{ columns:1; } }

/* ---- lightbox (Work page) ---- */
.art-lb{ position:fixed; inset:0; z-index:2000; background:rgba(16,12,7,.95);
  display:none; align-items:center; justify-content:center; }
.art-lb.on{ display:flex; }
.art-lb img{ max-width:92vw; max-height:88vh; width:auto; height:auto;
  box-shadow:0 40px 90px -24px rgba(0,0,0,.7); }
.art-lb-close{ position:absolute; top:14px; right:26px; color:#e9e0cf; font-size:44px;
  line-height:1; cursor:pointer; opacity:.85; }
.art-lb-close:hover{ opacity:1; }
.art-lb-nav{ position:absolute; top:50%; transform:translateY(-50%); color:#e9e0cf;
  font-size:56px; cursor:pointer; padding:0 22px; user-select:none; text-decoration:none; opacity:.8; }
.art-lb-nav:hover{ opacity:1; color:#e9e0cf; }
.art-lb-prev{ left:1%; } .art-lb-next{ right:1%; }
.art-lb-count{ position:absolute; bottom:22px; left:0; right:0; text-align:center;
  color:#b6ab97; font-family:din-condensed, sans-serif; letter-spacing:.2em; font-size:.9rem; }

/* ---- page intro banner (light interior pages) ---- */
/* top padding matches the design side's shared .banner (14em) so the header/nav
   breathing room is identical across both portfolios. */
.banner{ padding:14em 0 0; }
.page-head{ padding:0 0 1.5em; }
.page-head .sub-par{ max-width:640px; }
/* On phones the shared interior heading (6em ≈ 96px) is fine for the design side's
   short titles, but art titles have longer single words ("Community", "Statement.",
   "Selected") that can't wrap and overflow the column, causing side-scroll and a
   cut-off look. Scale the banner heading with the viewport so it stays large and
   dramatic yet always fits — capped at the shared 6rem on wider screens. */
@media(max-width:740px){ .banner h1{ font-size:clamp(3rem, 20vw, 6rem); line-height:1.03; } }

/* ---- dark CTA band ---- */
.cta-band{ background:#111; text-align:center; }
.cta-band h2{ color:#fbf6ec; }
.cta-band .eyebrow{ color:var(--accent); }
.cta-band .sub-par{ color:rgba(255,255,255,.72); max-width:620px; margin:1.2rem auto 2rem; }

/* ---- projects: alternating splits + fade carousel ---- */
.proj-row{ padding:5.5em 0; border-top:1px solid #e4ded1; }
.proj-row:first-of-type{ border-top:0; }
/* projects.html nests <div class="proj-row row"> inside a bare <div class="row">.
   Foundation gives a nested .row negative side margins (-15px) to cancel a parent
   COLUMN's padding — but the parent here is a plain .row with no padding, so on
   mobile (where .row spans the full viewport) those margins pushed the content
   ~30px past the edge, causing horizontal scroll. Zero them out at small widths. */
@media(max-width:740px){ .proj-row.row{ margin-left:0; margin-right:0; } }
.proj-no{ font-family:din-condensed, sans-serif; color:var(--accent); font-size:1.4rem; }
.proj-role{ font-family:din-condensed, sans-serif; text-transform:uppercase; letter-spacing:.14em;
  color:#8a8070; font-size:.85rem; display:block; margin:.2em 0 1em; }
.proj-text{ padding:1.2em 0; }
@media(min-width:741px){
  .proj-text{ padding-left:3.2em; padding-right:3.2em; }
  .proj-row .large-6.columns:not(.proj-text){ padding-top:.4em; padding-bottom:.4em; }
}
.art-car{ position:relative; overflow:hidden; background:#eae2d4; box-shadow:10px 10px 25px rgba(0,0,0,.1); }
.art-car .slide{ display:none; } .art-car .slide.on{ display:block; }
.art-car .slide img{ width:100%; display:block; }
.art-car .slide.contain{ background:#fbf8f2; }
.art-car .slide.contain img{ padding:9% 12%; }
.car-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; box-sizing:border-box; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  -webkit-appearance:none; appearance:none; box-shadow:none;
  background:rgba(255,255,255,.85); color:#111; font-size:22px; line-height:1;
  opacity:0; transition:opacity .3s; }
.art-car:hover .car-arrow{ opacity:1; }
.car-arrow:hover,.car-arrow:focus{ background:#fff; box-shadow:none; outline:none; }
.car-prev{ left:12px; } .car-next{ right:12px; }
.car-dots{ position:absolute; bottom:12px; left:0; right:0; text-align:center; z-index:3; }
.car-dots .dot{ display:inline-block; width:8px; height:8px; margin:0 4px; border-radius:50%;
  background:rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(0,0,0,.2); cursor:pointer; }
.car-dots .dot.on{ background:#fff; }

/* ---- about ---- */
.statement{ font-size:1.35rem; line-height:1.55; color:#3f392f; }
.practice .n{ font-family:din-condensed, sans-serif; color:var(--accent); font-size:1.3rem;
  display:block; margin-bottom:.15em; }
.about-media img{ width:100%; box-shadow:13px 15px 24px rgba(0,0,0,.18); }
.about-media figcaption{ font-size:.85rem; color:#8a8070; margin-top:.6em; }
@media(min-width:741px){ .about-media{ padding-right:2.6em; } #about-page .large-7.columns{ padding-left:1em; } }

/* =====================================================================
   MOBILE REFINEMENTS  (phones ≤ 740px)
   Real-device pass: display type was oversized, headline line-heights too
   loose, side gutters tight/uneven, and stacked image+text pairs ran
   together with no separation. Scoped to the art side only — this file
   loads after the shared sheets and only on /art pages.
   ===================================================================== */
@media(max-width:740px){

  /* roomier, consistent side gutters on every section (was the 15px Foundation gutter) */
  .column, .columns{ padding-left:22px; padding-right:22px; }

  /* tighter vertical rhythm so each section reads as one group, not endless scroll */
  section{ padding:4.5em 0; }
  section.small-padding{ padding:3em 0; }
  .banner{ padding:8.5em 0 .5em; }
  .proj-row{ padding:3em 0; }

  /* clear gap between stacked image + text (and between stacked cards) so it's
     obvious which copy belongs to which image; section padding still separates
     one pair from the next */
  section .row > .columns + .columns{ margin-top:1.7em; }
  .split-text, .proj-text{ padding-top:0; }

  /* display type: still bold, no longer overwhelming — and no more loose leading */
  h1{ font-size:2.9rem; line-height:1.04; margin-bottom:1rem; }
  h1.site-title{ font-size:3.4rem; }
  .banner h1{ font-size:clamp(2.6rem,12vw,3.6rem); line-height:1.02; }
  h2{ font-size:2.35rem; line-height:1.07; }
  h3{ font-size:1.9rem; line-height:1.08; }

  /* body copy: calmer line-height and sizes */
  p{ line-height:1.6; margin:15px 0; }
  p.sub-par{ font-size:1.1rem; line-height:1.5; margin-bottom:1.8em; }
  .split-text .lead, .statement{ font-size:1.15rem; line-height:1.55; }
  .art-banner .sub-par{ font-size:clamp(20px,5.2vw,26px); line-height:1.32; margin-bottom:1.6rem; }

  /* comfortable tap targets without crowding the row */
  .button{ padding:15px 28px; }
}