/* Ikonra Studio — concept case studies. Builds on ../styles.css. */

/* Hero: the brand on its own colour */
.cs-hero { background: var(--h-bg); color: var(--h-fg); padding-top: calc(var(--head) + 20px); min-height: min(100svh, 980px); display: flex; flex-direction: column; }
.cs-hero__meta { font-size: 13px; line-height: 1.4; row-gap: 12px; }
.cs-hero__meta p { grid-column: span 3; border-top: 1px solid currentColor; padding-top: 10px; }
.cs-hero__meta span { display: block; opacity: .62; margin-bottom: 2px; }
.cs-hero__mark { flex: 1; display: grid; place-items: center; padding: clamp(64px, 12vh, 160px) var(--pad); }
.cs-hero__mark svg { width: min(58vw, 780px); }
.cs--fenlow .cs-hero__mark svg, .cs--halvard .cs-hero__mark svg { width: min(64vw, 860px); }

/* Intro */
.cs-intro { padding-block: clamp(56px, 7vw, 120px) clamp(64px, 8vw, 140px); align-items: start; }
.cs-intro__title { grid-column: 2 / span 6; font-size: clamp(56px, 8.4vw, 148px); font-weight: 500; letter-spacing: -.06em; line-height: .88; }
.cs-intro__title em { display: block; margin-top: .22em; font-size: .42em; line-height: 1.02; letter-spacing: -.02em; color: var(--grey); max-width: 12em; }
.cs-intro__side { grid-column: 9 / span 4; padding-top: .6em; }
.cs-intro__one { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.36; letter-spacing: -.012em; max-width: 22em; }
.cs-intro__note { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.5; color: var(--grey); max-width: 28em; }
.cs-intro__note strong { color: var(--ink); font-weight: 500; }

/* Text sections */
.cs-text, .cs-deliv { align-items: start; padding-block: 16px clamp(72px, 8vw, 128px); margin-inline: var(--pad); padding-inline: 0; border-top: 1px solid var(--ink); }
.cs-text__h { grid-column: 2 / span 4; font-size: clamp(26px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.cs-text__body { grid-column: 7 / span 5; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.48; letter-spacing: -.01em; max-width: 33em; }
.cs-text__body p + p { margin-top: 1em; }
.cs-text__body p:first-child::first-line { font-weight: 500; }

/* Construction */
.cs-build, .cs-sys, .cs-apps { padding-bottom: clamp(96px, 11vw, 180px); }
.cs-build__row { margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.cs-build__fig { grid-column: 1 / span 8; }
.cs-build__side { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: clamp(36px, 4vw, 64px); }
.cs figcaption { display: grid; grid-template-columns: 4.5em 1fr; font-size: 13px; color: var(--grey); padding-top: 10px; }
.cs-notes li { display: grid; grid-template-columns: 2em 1fr; border-top: 1px solid var(--rule); padding: 12px 0; font-size: 16px; line-height: 1.35; }
.cs-notes li:last-child { border-bottom: 1px solid var(--rule); }
.cs-notes span { color: var(--grey); font-size: 13px; padding-top: .15em; }
.cs-clear svg { box-shadow: inset 0 0 0 1px var(--rule); }
.cs-min__h { font-size: 13px; color: var(--grey); padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.min { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 26px; padding-top: 18px; }
.min li { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--grey); }
.min svg { display: block; }
.min__lock { flex-basis: 100%; }

/* Colour and type */
.sw-row { margin-top: clamp(40px, 5vw, 72px); row-gap: 28px; }
.sw { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; font-size: 14px; }
.sw--ink { grid-column: span 5; } .sw--paper { grid-column: span 3; } .sw--accent, .sw--mid { grid-column: span 2; }
.sw__chip { grid-column: 1 / -1; display: block; height: clamp(180px, 22vw, 340px); background: var(--c); margin-bottom: 10px; box-shadow: inset 0 0 0 1px rgba(17,17,16,.08); }
.sw__name { font-weight: 500; }
.sw__hex { font-variant-numeric: tabular-nums; color: var(--grey); text-align: right; }
.sw__role { grid-column: 1 / -1; color: var(--grey); font-size: 13px; }
.type-row { margin-top: clamp(64px, 7vw, 120px); align-items: start; row-gap: 56px; }
.type { border-top: 1px solid var(--ink); padding-top: 12px; }
.type--disp { grid-column: 1 / span 7; }
.type--sec { grid-column: 9 / span 4; }
.type__meta { display: flex; justify-content: space-between; font-size: 13px; }
.type__meta span { color: var(--grey); }
.type__aa { font-family: var(--b-disp); font-weight: 650; font-size: clamp(140px, 19vw, 320px); line-height: .9; letter-spacing: -.045em; margin-top: 24px; }
.type--sec .type__aa { font-family: var(--b-sec); font-weight: 400; font-size: clamp(110px, 12vw, 200px); letter-spacing: -.02em; }
.type__line { font-family: var(--b-disp); font-weight: 600; font-size: clamp(26px, 2.8vw, 44px); line-height: 1.04; letter-spacing: -.03em; margin-top: 28px; max-width: 16em; }
.type__line--sec { font-family: var(--b-sec); font-weight: 400; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; letter-spacing: 0; max-width: 24em; }
.type__set { font-family: var(--b-disp); margin-top: 28px; font-size: 15px; line-height: 1.5; color: var(--grey); overflow-wrap: anywhere; }
.type--sec .type__set { font-family: var(--b-sec); font-size: 13px; }
.cs--fenlow .type--disp .type__aa, .cs--fenlow .type--disp .type__line { font-stretch: 118%; }
.cs--halvard .type--disp .type__line, .cs--fenlow .type--disp .type__line { text-transform: none; }

/* Applications */
.apps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(48px, 6vw, 104px); padding-inline: var(--pad); margin-top: clamp(40px, 5vw, 72px); align-items: end; }
.app--1 { grid-column: 1 / -1; }
.app--2 { grid-column: 1 / span 7; }
.app--3 { grid-column: 9 / span 4; }
.app--4 { grid-column: 2 / span 5; align-self: start; }
.app--5 { grid-column: 8 / span 5; align-self: start; margin-top: clamp(40px, 10vw, 180px); }
.app__art { overflow: hidden; }
.app--dashboard .app__art, .app--web .app__art { background: var(--b-mid); padding: clamp(16px, 4.5%, 72px); }
.cs--isarith .app--dashboard .app__art, .cs--isarith .app--web .app__art { background: #D7CCBB; }
.cs--kerrow .app--dashboard .app__art, .cs--kerrow .app--web .app__art { background: var(--b-acc); }
.app__art svg { transition: transform 1.2s var(--ease); }

/* Deliverables */
.cs-deliv { padding-bottom: clamp(96px, 11vw, 180px); }
.deliv { grid-column: 7 / span 5; counter-reset: d; }
.deliv li { display: grid; grid-template-columns: 3em 1fr; padding: 12px 0; border-top: 1px solid var(--rule); font-size: clamp(17px, 1.3vw, 19px); }
.deliv li:last-child { border-bottom: 1px solid var(--rule); }
.deliv span { color: var(--grey); font-size: 13px; padding-top: .25em; }
.cs-deliv__cta { grid-column: 7 / span 5; margin-top: clamp(40px, 5vw, 72px); }
.cs-deliv__cta p { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.14; letter-spacing: -.015em; max-width: 18em; }
.btn-line { display: inline-flex; gap: 12px; margin-top: 24px; font-size: 17px; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid currentColor; }
.btn-line span { transition: transform .6s var(--ease); }
.btn-line:hover span { transform: translateX(6px); }

/* Next project */
.cs-next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding: 20px var(--pad) clamp(56px, 7vw, 112px); background: var(--n-bg); color: var(--n-fg); }
.cs-next__k { grid-column: 1 / span 4; font-size: 13px; border-top: 1px solid currentColor; padding-top: 10px; align-self: start; }
.cs-next__d { grid-column: 9 / span 4; font-size: 13px; border-top: 1px solid currentColor; padding-top: 10px; align-self: start; opacity: .85; }
.cs-next__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cs-next__mark { grid-column: 1 / span 7; margin-top: clamp(96px, 14vw, 240px); }
.cs-next__go { grid-column: 12 / span 1; justify-self: end; font-size: clamp(56px, 7vw, 120px); line-height: .8; transition: transform .8s var(--ease); }
.cs-next:hover .cs-next__go { transform: translateX(-14px); }

@media (max-width: 1100px) {
  .cs-hero__meta p { grid-column: span 6; }
  .cs-intro__title { grid-column: 2 / span 7; }
  .cs-intro__side { grid-column: 2 / span 7; margin-top: 40px; }
  .cs-build__fig { grid-column: 1 / -1; }
  .cs-build__side { grid-column: 1 / -1; margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .cs-hero { min-height: 0; }
  .cs-hero__meta p { grid-column: span 2; }
  .cs-hero__mark svg, .cs--fenlow .cs-hero__mark svg, .cs--halvard .cs-hero__mark svg { width: 80vw; }
  .cs-intro .idx { grid-column: 1 / -1; margin-bottom: 20px; }
  .cs-intro__title, .cs-intro__side { grid-column: 1 / -1; }
  .cs-text__h { grid-column: 2 / span 3; }
  .cs-text__body, .deliv, .cs-deliv__cta { grid-column: 1 / -1; margin-top: 28px; }
  .cs-build__side { grid-template-columns: 1fr; }
  .sw--ink, .sw--paper { grid-column: 1 / -1; } .sw--accent, .sw--mid { grid-column: span 2; }
  .sw__chip { height: 140px; }
  .type--disp, .type--sec { grid-column: 1 / -1; }
  .app--1, .app--2, .app--3, .app--4, .app--5 { grid-column: 1 / -1; margin-top: 0; }
  .cs-next__k, .cs-next__d { grid-column: 1 / -1; margin-top: 8px; }
  .cs-next__mark { grid-column: 1 / -1; margin-top: 72px; max-width: 86%; }
  .cs-next__go { grid-column: 1 / -1; justify-self: start; margin-top: 28px; font-size: 48px; }
}

/* Brand fonts: tabular figures would also widen punctuation in some families */
.cs .type, .cs .app__art, .cs .cs-build__fig { font-variant-numeric: normal; }

/* ------------------------------------------------------------------ client case studies (work/<client>.html) */
.cl-hero__mark img { width: min(var(--w, 640px), 72vw); height: auto; }
.cl-hero__banner { flex: 1; display: grid; place-items: center; padding: clamp(40px, 8vh, 120px) 0; }
.cl-hero__banner img { width: 100%; height: auto; }
.cl-hero .cs-hero__meta a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.cl-visit { margin-top: 28px; }
.cl-sec { padding-bottom: clamp(96px, 11vw, 180px); }
.cl-row { margin-top: 28px; }
.cl-row .todo { grid-column: 2 / span 7; }
.todo { border: 1px dashed currentColor; padding: 14px 18px 16px; font-size: 16px; line-height: 1.45; max-width: 36em; }
.todo__k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; margin-bottom: 6px; color: #B3261E; }
.cs-text__body .todo p:first-child::first-line { font-weight: 500; }

.cl-logos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 5vw, 72px); padding-inline: var(--pad); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.cl-logo { grid-column: 1 / span 8; }
.cl-logo--small { grid-column: span 4; }
.cl-logo--full { grid-column: 1 / -1; }
.cl-logo--full + .cl-logo--small { grid-column: 1 / span 4; }
.cl-logo__board { background: var(--bg); display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 10%; box-shadow: inset 0 0 0 1px rgba(17,17,16,.08); }
.cl-logo--small .cl-logo__board { aspect-ratio: 1; padding: 18%; }
.cl-logo--full .cl-logo__board { aspect-ratio: auto; padding: 0; }
.cl-logo__img { width: min(var(--w, 100%), 100%); height: auto; }
.cl-logo--full .cl-logo__img { width: 100%; }
.cl-logo:not(.cl-logo--small):not(.cl-logo--full) .cl-logo__img { width: 72%; }
.cl-logo__img.is-round { border-radius: 50%; }
.cl figcaption { display: grid; grid-template-columns: 4.5em 1fr; font-size: 13px; line-height: 1.4; color: var(--grey); padding-top: 10px; overflow-wrap: anywhere; }

.cl-sws { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px var(--gap); padding-inline: var(--pad); margin-top: clamp(40px, 5vw, 72px); }
.cl-sw { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; font-size: 14px; }
.cl-sw__chip { grid-column: 1 / -1; display: block; height: clamp(150px, 16vw, 260px); background: var(--c); margin-bottom: 10px; box-shadow: inset 0 0 0 1px rgba(17,17,16,.12); }
.cl-sw__name { font-weight: 500; }
.cl-sw__hex { font-variant-numeric: tabular-nums; color: var(--grey); }
.cl-sw__where { grid-column: 1 / -1; color: var(--grey); font-size: 13px; line-height: 1.4; }
.cl-fonts { margin-top: clamp(64px, 7vw, 112px); align-items: start; }
.cl-fonts__h { grid-column: 2 / span 4; font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.03em; border-top: 1px solid var(--ink); padding-top: 12px; }
.cl-fonts__body { grid-column: 7 / span 6; border-top: 1px solid var(--ink); padding-top: 12px; }
.cl-fonts__list li { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.4; }
.cl-fonts__list li span:not(.cl-font__n) { color: var(--grey); }
.cl-font__n { font-weight: 500; }
.cl-fonts__note { font-size: 15px; line-height: 1.45; color: var(--grey); margin: 14px 0; max-width: 34em; }

.cl-shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(48px, 6vw, 104px); padding-inline: var(--pad); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.cl-shot--d1 { grid-column: 1 / -1; }
.cl-shot--d2 { grid-column: 1 / span 8; }
.cl-shot--d3 { grid-column: 4 / span 8; }
.cl-shot--mobile { grid-column: 10 / span 3; }
.cl-shot--d1 + .cl-shot--mobile { grid-column: 2 / span 3; }
.cl-shot__frame { box-shadow: 0 0 0 1px rgba(17,17,16,.14); background: #FFF; }
.cl-shot--mobile .cl-shot__frame { border-radius: 22px; overflow: hidden; }
.cl-shot img { width: 100%; height: auto; }
.cl-next__mark img { width: min(var(--w, 560px), 70vw); height: auto; }
.cl-next__text { font-size: clamp(56px, 8vw, 140px); font-weight: 500; letter-spacing: -.06em; line-height: .9; }

@media (max-width: 760px) {
  .cl-logo, .cl-logo--full { grid-column: 1 / -1; }
  .cl-logo--small, .cl-logo--full + .cl-logo--small { grid-column: span 6; }
  .cl-fonts__h, .cl-fonts__body, .cl-row .todo { grid-column: 1 / -1; }
  .cl-fonts__list li { grid-template-columns: 1fr; gap: 2px; }
  .cl-shot--d1, .cl-shot--d2, .cl-shot--d3 { grid-column: 1 / -1; }
  .cl-shot--mobile, .cl-shot--d1 + .cl-shot--mobile { grid-column: 2 / span 10; }
}

/* client hero image and identity gallery (the studio's own case-study images, shown uncropped) */
.cl-hero__visual { flex: 1; display: grid; align-items: center; padding: clamp(32px, 6vh, 96px) var(--pad) clamp(40px, 7vh, 112px); }
.cl-hero__visual img { width: 100%; height: auto; }
.cl-visit { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.cl-gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 5vw, 88px); padding-inline: var(--pad); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.cl-g--full { grid-column: 1 / -1; }
.cl-g--half { grid-column: span 6; }
.cl-g img { width: 100%; height: auto; }
@media (max-width: 760px) { .cl-g--full, .cl-g--half { grid-column: 1 / -1 !important; } }

/* client testimonial on its case study */
.cl-quote { padding-block: 0 clamp(80px, 9vw, 144px); }
.cl-quote__fig { grid-column: 2 / span 9; border-top: 1px solid var(--rule); padding-top: 18px; }
.cl-quote blockquote { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.9vw, 46px); line-height: 1.16; letter-spacing: -.015em; max-width: 26em; }
.cl-quote figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; margin-top: 28px; font-size: 14px; color: var(--ink); padding: 0; }
.cl-quote__photo { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.cl-quote__name { font-weight: 500; }
.cl-quote__co { color: var(--grey); }
@media (max-width: 760px) { .cl-quote__fig { grid-column: 1 / -1; } }