/* Noor Aslani, portfolio. v2 */

/* Fonts are served from this site, not Google, so no visitor data goes to a third party.
   Latin + Latin Extended subsets from Google Fonts (all OFL); Inter is one variable file. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#F4F1EA;
  --ink:#1A1815;
  --muted:#8C8577;
  --rule:#DED8CC;
  --gutter:48px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 15px/1.65 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{color:inherit;font:inherit;cursor:pointer;background:none;border:0;padding:0}
p{max-width:62ch;margin:0 0 24px}
p:last-child{margin-bottom:0}
h1,h2,h3{margin:0}
img,video{display:block;max-width:100%}

h1,.display,.pull,.contact-headline,.result-value,#project-title,.case h3{
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.08;
}

.label{
  font:400 10px/1.6 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.section{margin-top:160px}
.section-label{margin-bottom:64px;color:var(--muted)}

/* ---------- opening screen ---------- */

.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:140px 0 120px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.corner{position:absolute;color:var(--muted)}
.tl{top:var(--gutter);left:var(--gutter)}
.tr{top:var(--gutter);right:var(--gutter)}
.bl{bottom:var(--gutter);left:var(--gutter)}
.br{bottom:var(--gutter);right:var(--gutter)}
.corner a:hover{color:var(--ink)}

.intro h1{font-size:clamp(52px,10.5vw,164px);margin-bottom:28px}
.intro .label{max-width:46ch;line-height:1.9}

.hero-image{width:clamp(210px,21vw,310px);flex-shrink:0}
.hero-image img{width:100%;height:auto}

/* ---------- project cards ---------- */

.case{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  align-items:center;
}
/* The media block is 4 of 12 columns, roughly half the width it used to be,
   with the text opposite it and open paper in between. */
.case-media{grid-column:9/13;grid-row:1}
.case-text{grid-column:1/6;grid-row:1}
.case.flip .case-media{grid-column:1/5}
.case.flip .case-text{grid-column:8/13}

/* One shared frame so the five cards read as a set. */
.media{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden}
.media img,.media video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* The two school-project covers are posters with type running to both the top
   and the bottom edge, so a 3:4 crop of a 0.70 original always loses some of
   it. They sit inside the shared frame at their own ratio instead. The paper
   showing at the sides is the same cream as the page, so the frame still
   lines up with the others. */
#vicinavicina .media img,
#mantle .media img{object-fit:contain}

/* The video has no aspect-ratio of its own and covers the frame, so no edge of
   the still can ever show through, whatever the video's native shape. */
.media video{opacity:0;transition:opacity .4s}
.media.active video{opacity:1}

.case h3{font-size:clamp(28px,3.6vw,52px);margin:20px 0 14px}
.case-subtitle{color:var(--muted);margin-bottom:0}
.metadata{margin-top:36px}
.meta-row{
  display:grid;grid-template-columns:78px 1fr;gap:16px;
  border-top:1px solid var(--rule);padding:14px 0;
}
.meta-row dt{color:var(--muted)}
.meta-row dd{margin:0}

.view{display:inline-block;margin-top:32px;padding-bottom:8px;position:relative}
.view:after{content:'';position:absolute;bottom:0;left:0;width:32px;height:1px;background:var(--ink);transition:width .4s}
.case-link:hover .view:after,.case-link:focus-visible .view:after{width:100%}

/* ---------- experience ---------- */

.job{border-top:1px solid var(--rule);padding:32px 0}
.job-heading{display:grid;grid-template-columns:3fr 6fr 3fr;gap:24px;width:100%;text-align:left;align-items:baseline}
.job-role{font-family:'Instrument Serif',Georgia,serif;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.job.primary .job-role{font-size:clamp(26px,3vw,40px)}
.job-company,.job-date{color:var(--muted)}
.job-date{text-align:right}
.job-description{margin:24px 0 0 25.5%;max-width:62ch}
.job-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.job-collapse>div{overflow:hidden}
.job-collapse.open{grid-template-rows:1fr}
.job.secondary button .job-role:after{content:' +';font-family:'IBM Plex Mono',monospace;font-size:12px}
.job.secondary button[aria-expanded=true] .job-role:after{content:' \2212'}

/* ---------- background ---------- */

.background{padding-top:32px;position:relative}
.background:before{
  content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;
  background:var(--rule);transform:scaleX(0);transform-origin:left;transition:transform .8s;
}
.background.visible:before{transform:scaleX(1)}
.background-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
.background h3{margin-bottom:24px}
dl{margin:0}
.background dl>div{display:flex;gap:24px;justify-content:space-between;margin-bottom:8px}
.background dd{margin:0}

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

.contact-headline{font-size:clamp(32px,4.6vw,64px);max-width:16ch;margin-bottom:64px}
/* Half a project-card image: the card is 4 of 12 columns (24px gaps),
   in the same 3:4 frame. */
.contact-image{
  width:calc(((100% - 264px) / 3 + 72px) / 2);
  height:auto;aspect-ratio:3/4;object-fit:cover;margin-top:96px;
}
.contact dl>div{display:flex;border-top:1px solid var(--rule);padding:24px 0}
.contact dt{width:25%;color:var(--muted);flex-shrink:0}
.contact dd{margin:0}
.contact dd a{display:inline-block;transition:transform .2s}
.contact dd a:hover{transform:translateX(4px)}
footer{color:var(--muted);margin:96px 0 48px}
.contact-image+footer{margin-top:24px}

/* ---------- case panel ---------- */

dialog{
  position:fixed;inset:0;
  width:100%;max-width:none;height:100%;max-height:none;
  margin:0;padding:0;border:0;
  background:var(--paper);color:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(100%);transition:transform .5s cubic-bezier(.22,1,.36,1);
}
dialog.is-open{transform:translateY(0)}
dialog::backdrop{background:var(--paper)}

.close{
  position:sticky;top:24px;z-index:2;
  display:block;margin:24px var(--gutter) 0 auto;
  background:var(--paper);border:1px solid var(--rule);padding:12px 20px;
}
.close:hover{border-color:var(--ink)}

.panel{padding-top:48px;padding-bottom:120px}
#project-index{color:var(--muted);display:block;margin-bottom:20px}
#project-title{font-size:clamp(38px,6vw,92px);margin:0 0 16px}
#project-standfirst{color:var(--muted);margin:0 0 64px}

.panel-meta{margin-bottom:64px;max-width:640px}
/* Partner is the lead line now that Client is gone. */
.panel-meta .meta-row{grid-template-columns:110px 1fr}
/* Every metadata row is identical. No row is emphasised by size, weight or
   spacing; the first row leads simply by being first. */

.descriptions{max-width:62ch;margin-left:25%}

.results{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  border-top:1px solid var(--rule);
  padding:40px 0;margin-top:64px;
}
.result-value{display:block;font-size:clamp(34px,4.6vw,66px);margin-bottom:14px}
.result-label{color:var(--muted)}
.collaborators{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:24px 0;
}
.collaborators dt{color:var(--muted)}
.collaborators dd{margin:0}

/* ---------- gallery: scattered spread (Flowering, Sauna) ---------- */

.gallery{margin-top:120px}
.gallery img{width:100%;height:auto}
/* Width comes from the .spread-N rule below, so this must not set it. */
.gallery video{height:auto}

/* Small images with a lot of paper around them, and no two steps sitting in
   the same place. Widths run 19% to 36% of the content width; the alignment
   and the vertical offsets do the work, not the scale. */
.spread{display:flex;gap:40px;margin-bottom:80px;align-items:flex-start}
.spread>*{min-width:0}

/* right, held off the edge */
.spread-1{justify-content:flex-end;padding-inline-end:7%}
.spread-1>*{width:34%}

/* two from the left, the second dropped well below the first */
.spread-2{justify-content:flex-start}
.spread-2>:first-child{width:24%}
.spread-2>:nth-child(2){width:30%;margin-top:72px}

/* one small, hard right */
.spread-3{justify-content:flex-end}
.spread-3>*{width:22%}

/* two to the right, the larger one dropped */
.spread-5{justify-content:flex-end;gap:48px;padding-inline-end:4%}
.spread-5>:first-child{width:30%;margin-top:56px}
.spread-5>:nth-child(2){width:20%}

/* the one larger moment, indented from the left */
.spread-6{justify-content:flex-start;padding-inline-start:13%}
.spread-6>*{width:30%}

/* three small, stepping down */
.spread-7{justify-content:center;gap:32px}
.spread-7>*{width:19%}
.spread-7>:nth-child(2){margin-top:48px}
.spread-7>:nth-child(3){margin-top:96px}

/* ---------- gallery: even row (Costume) ---------- */

.row-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;align-items:start;
  padding-inline:24px;   /* same breathing room on the outer edges as between */
}
/* The three covers are 0.76, 0.80 and 0.75, so equal widths would give three
   different heights. A shared frame makes the row read as one set. */
.row-gallery picture{display:block;aspect-ratio:3/4;overflow:hidden}
.row-gallery img{width:100%;height:100%;object-fit:cover;object-position:center}

/* ---------- gallery: story sequence (school projects) ---------- */

.story{margin-top:96px}
.descriptions+.story{margin-top:40px}   /* VicinaVicina: first figure closer to the intro text */
.story-text{max-width:62ch;margin:0 auto 40px}
.story-text.two-up{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  max-width:900px;
}
.story-text.two-up p{margin:0}
.story-figure{margin:0 0 120px}
/* Transparent PNG mockups: they sit straight on the paper, no frame, no fill. */
.story-figure.slide{width:88%;margin-inline:auto}
.story-figure.portrait{width:44.8%;margin-inline:auto}   /* MANTLE 02-03, 20% under the original 56% */
.story-figure img{width:100%;height:auto}

.next{display:block;border-top:1px solid var(--rule);padding-top:32px;margin-top:32px;text-align:right}

/* ---------- motion ---------- */

.reveal{opacity:1}
.motion .reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.motion .reveal.visible{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:6px}

/* ---------- responsive ---------- */

@media(max-width:1024px){
  :root{--gutter:32px}
  .hero{padding:120px 0 100px}
  .hero-image{width:clamp(180px,20vw,240px)}
  .background-grid{gap:32px}
  .case-text{grid-column:1/7}
  .case-media{grid-column:8/13}
  .contact-image{width:calc(((100% - 264px) / 12 * 5 + 96px) / 2)}
  .case.flip .case-text{grid-column:7/13}
  .case.flip .case-media{grid-column:1/6}
  .descriptions{margin-left:0}
  .story-figure.slide{width:100%}
  .story-figure.portrait{width:56%}
}

@media(max-width:768px){
  :root{--gutter:20px}
  .section{margin-top:96px}
  .section-label{margin-bottom:40px}
  .tl,.tr{top:24px}
  .bl,.br{bottom:24px}
  /* Single column, with the portrait below the name rather than hidden. */
  .hero{padding:104px 0 112px}
  .hero .wrap{grid-template-columns:1fr;gap:36px;justify-items:start}
  .hero-image{width:58%;max-width:240px}
  /* align-items:center would collapse the card to zero width in a column
     flex container, because the media has no intrinsic width of its own. */
  .case{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .case-media{order:-1}
  .case h3{margin-top:24px}
  .metadata{margin-top:24px}
  .job-heading{grid-template-columns:1fr 2fr}
  .job-date{grid-column:2;text-align:left}
  .job-description{margin-left:0}
  .background-grid{grid-template-columns:1fr;gap:40px}
  .contact-headline{margin-bottom:40px}
  .contact-image{width:50%;margin-top:64px}
  .panel{padding-top:32px}
  .panel-meta{margin-bottom:40px}
  .results{grid-template-columns:1fr;gap:32px}
  .result-value{font-size:44px}
  .collaborators{display:block}
  .collaborators dt{margin-bottom:12px}
  .collaborators dd{display:inline-block;margin-right:20px}
  .gallery{margin-top:64px}
  .spread{flex-direction:column;gap:48px;margin-bottom:48px;padding-inline:0!important}
  .spread>*{width:100%!important;margin-top:0!important}
  .row-gallery{grid-template-columns:1fr;gap:48px;padding-inline:0}
  .story{margin-top:56px}
  .story-text.two-up{grid-template-columns:1fr;gap:24px}
  .story-figure{margin-bottom:64px}
  .story-figure.slide{width:100%}
  .story-figure.portrait{width:80%}
  .close{margin-right:var(--gutter)}
}

@media(max-width:480px){
  .hero .corner{font-size:9px}
  .job-heading{grid-template-columns:1fr;gap:8px}
  .job-date{grid-column:1}
  .contact dl>div{display:block}
  .contact dt{width:auto;margin-bottom:8px}
  .contact dd{overflow-wrap:anywhere}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
  .motion .reveal{opacity:1;transform:none}
  .background:before{transform:none}
  dialog{transition:none}
}