:root { --text:#252525; --muted:#6f6f6f; --page:#fff; --cell:25vw; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--page); color:var(--text); font-family:"Open Sans",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button { color:inherit; font:inherit; }
.portfolio-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:var(--cell); width:100%; }
.intro-card { position:relative; grid-column:span 2; grid-row:span 2; min-width:0; overflow:hidden; background:#fff; }
.brand { position:absolute; top:clamp(24px,2.15vw,42px); left:clamp(24px,3.2vw,62px); }
.logo { display:flex; align-items:center; gap:clamp(10px,.95vw,18px); white-space:nowrap; font-size:clamp(14px,1.42vw,27px); font-weight:300; }
.logo img { width:clamp(38px,3.85vw,74px); height:auto; }
.logo strong { font-weight:650; }
.intro-copy { position:absolute; top:47.5%; left:clamp(48px,7.7vw,148px); transform:translateY(-25%); }
.intro-copy h1 { margin:0; font-family:"Open Sans",Arial,sans-serif; font-size:clamp(25px,2.42vw,47px); line-height:1.3; font-weight:400; letter-spacing:0; }
.text-button { display:block; margin:clamp(58px,6vw,116px) auto 0; padding:7px 10px 6px; border:1px solid currentColor; border-radius:0; background:#fff; font-size:clamp(11px,1vw,19px); font-weight:400; cursor:pointer; transition:background-color 160ms ease,color 160ms ease; }
.text-button:hover,.text-button:focus-visible { background:#252525; color:#fff; outline:0; }
.project-cards { display:contents; }
.project-card { position:relative; width:100%; height:100%; padding:0; overflow:hidden; border:0; background:#eee; cursor:pointer; }
.project-card img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 260ms ease,filter 260ms ease; }
.project-label { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(14px,1.6vw,26px); color:#fff; background:linear-gradient(to top,rgba(0,0,0,.56),transparent 58%); opacity:0; text-align:left; transition:opacity 180ms ease; }
.project-label strong { font-size:clamp(14px,1.2vw,21px); font-weight:600; }
.project-label span { margin-top:5px; font-size:clamp(10px,.78vw,13px); opacity:.9; }
.project-card:hover img,.project-card:focus-visible img { transform:scale(1.018); filter:brightness(.88); }
.project-card:hover .project-label,.project-card:focus-visible .project-label { opacity:1; }
.project-card:focus-visible { outline:3px solid #111; outline-offset:-3px; }
.site-footer { min-height:112px; padding:38px clamp(24px,3.2vw,62px); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.site-footer p { margin:0; }
.modal { width:fit-content; max-width:calc(100vw - 40px); max-height:calc(100vh - 40px); padding:0; overflow:auto; border:0; background:#fff; color:var(--text); box-shadow:0 18px 70px rgba(0,0,0,.22); }
.modal::backdrop { background:rgba(20,20,20,.6); backdrop-filter:blur(2px); }
.modal-close { position:fixed; z-index:5; top:28px; right:28px; width:40px; height:40px; padding:0; border:0; background:rgba(255,255,255,.88); font-size:32px; line-height:1; cursor:pointer; }
.modal-close:focus-visible { outline:2px solid #111; outline-offset:-3px; }
.modal-body { display:grid; grid-template-columns:auto 270px; width:max-content; max-width:100%; }
.modal-visual { display:grid; place-items:center; min-width:0; background:transparent; }
.modal-visual img { display:block; width:auto; height:auto; max-width:calc(100vw - 350px); max-height:calc(100vh - 40px); object-fit:contain; }
.modal-copy { position:sticky; top:0; align-self:start; padding:72px 34px 42px; }
.modal-copy p#modal-category { display: none; }
.modal-eyebrow { margin:0 0 14px; color:var(--muted); font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.modal-copy h2 { margin:0 0 10px; font-size:clamp(22px,1.8vw,26px); line-height:1.18; font-weight:500; }
.modal-copy h4 {font-style: italic; font-size: 15px; font-family: "Open Sans", Arial, sans-serif; font-weight: 500; margin: 0 0 15px 0; }
.about-content h2 { margin:0 0 22px; font-size:clamp(30px,3vw,48px); line-height:1.08; font-weight:500; }
#modal-branding { font-size: 10pt; margin-bottom: 15px; }
.modal-copy p#modal-description { padding-top: 10px; border-top: 1px solid #eee; }
.modal-copy p,.about-content p { margin:0; font-size:15px; line-height:1.4; margin-bottom:20px; }
.about-modal { width:min(800px,calc(100vw - 40px)); }
.about-container { display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: stretch; }
.about-content { padding:86px 76px 76px; }
.about-content .about-note { margin-top:24px; color:var(--muted); font-size:13px; }
.about-image {background-image: url('images/profile/chloel_profile.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; }
@media (max-width:767px) {
  :root { --cell:50vw; }
  .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .intro-card { grid-column:1/-1; grid-row:span 2; }
  .brand { top:24px; left:24px; }
  .logo { font-size:13px; gap:9px; }
  .logo img { width:38px; }
  .intro-copy { top:49%; left:34px; right:25px; transform:translateY(-28%); }
  .intro-copy h1 { font-size:clamp(21px,6vw,29px); line-height:1.42; }
  .text-button { margin-top:38px; font-size:10px; }
  .project-label { display:none; }
  .project-card:hover img { transform:none; filter:none; }
  .site-footer { min-height:96px; padding:32px 24px; align-items:flex-start; flex-direction:column; justify-content:center; gap:8px; font-size:10px; }
  .modal { width:calc(100vw - 24px); max-height:calc(100vh - 24px); }
  .modal-close { top:18px; right:18px; }
  .modal-body { display:flex; flex-direction:column; width:auto; min-height:0; }
  .modal-visual { order:2; }
  .modal-visual img { width:100%; max-width:100%; max-height:none; }
  .modal-copy { position:static; order:1; padding:60px 26px 28px; }
  .modal-copy h2 { font-size:24px; }
  .about-content h2 { font-size:30px; }
  .about-content { padding:70px 28px 38px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media (max-width: 768px) {
    .about-container {
        grid-template-columns: 1fr;
    }

    .about-image {
        min-height: 320px;
    }
}