@import url("base-TLbALmX.css");

/* Shared tokens/reset/header/footer moved to base.css:
   root, html, body, img, a, button-input, site-header, header-inner, logo, main-nav, header-actions, site-footer, footer-inner, footer-brand, footer-logo, footer-column, footer-bottom
*/

/* ========================================================
   NORDISKA — DESIGNER PAGE
======================================================== */


/* ========================================================
   RESET
======================================================== */

* {
  box-sizing: border-box;
}


/* ========================================================
   HEADER
======================================================== */


.main-nav a,
.header-actions a {

  position: relative;

}


.main-nav a.active::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: -8px;

  height: 1px;

  background: var(--dark);

}


/* ========================================================
   HERO
======================================================== */

.designer-hero {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  min-height: 720px;

  margin: auto;

  padding: 70px 0 30px;

  display: flex;

  flex-direction: column;

}


.hero-meta {

  display: flex;

  justify-content: space-between;

  padding-bottom: 20px;

  border-bottom:
    1px solid var(--border);

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.hero-title {

  flex: 1;

  display: flex;

  align-items: center;

}


.hero-title h1 {

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(
    110px,
    17vw,
    250px
  );

  font-weight: 400;

  line-height: .68;

  letter-spacing: -.075em;

}


.hero-title em {

  display: block;

  margin-left: 15vw;

  color: #88877f;

}


.hero-bottom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 30px;

}


.hero-bottom p {

  margin: 0;

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .13em;

  text-transform: uppercase;

}


.hero-bottom a {

  display: flex;

  align-items: center;

  gap: 25px;

  padding-bottom: 5px;

  border-bottom:
    1px solid var(--dark);

  font-size: 8px;

  letter-spacing: .13em;

  text-transform: uppercase;

}


.hero-bottom a span {

  font-size: 15px;

}


/* ========================================================
   HERO IMAGE
======================================================== */

.hero-image {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin:
    0 auto 180px;

}


.hero-image img {

  height: 800px;

  object-fit: cover;

}


.image-caption,
.large-image-caption {

  display: flex;

  justify-content: space-between;

  padding-top: 13px;

  color: var(--muted);

  font-size: 8px;

  letter-spacing: .12em;

  text-transform: uppercase;

}


/* ========================================================
   INTRO
======================================================== */

.designer-intro {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin: auto;

  padding:
    100px 0
    180px;

  border-top:
    1px solid var(--border);

  display: grid;

  grid-template-columns:
    1fr 3fr;

}


.intro-label {

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.intro-content {

  display: grid;

  grid-template-columns:
    1.3fr 1fr;

  gap: 100px;

}


.intro-content h2 {

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(
    70px,
    8vw,
    120px
  );

  font-weight: 400;

  line-height: .8;

  letter-spacing: -.06em;

}


.intro-content h2 em {

  color: #88877f;

}


.intro-text {

  padding-top: 5px;

}


/* Makieta zakładała zwykły tekst dzielony na <p> (docs/design/mockups/designer.html) -- od
   momentu podpięcia edytora WYSIWYG (Trix, EasyAdmin TextEditorField) pod Designer.bio/
   Manufacturer.description treść przychodzi już jako gotowe HTML, a Trix owija każdy akapit
   w <div>, nie w <p> (sprawdzone na realnej treści w bazie). Selektor rozszerzony, żeby objąć
   oba przypadki -- ten sam plik obsługuje stronę projektanta i producenta. */
.intro-text p,
.intro-text div {

  margin: 0 0 25px;

  color: #62645f;

  font-size: 12px;

  line-height: 1.8;

}


/* ========================================================
   TIMELINE
======================================================== */

.timeline-section {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin: auto;

  padding-bottom: 180px;

}


.timeline-header {

  display: flex;

  justify-content: space-between;

  padding:
    18px 0;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.timeline-item {

  display: grid;

  grid-template-columns:
    1fr 3fr;

  padding: 65px 0;

  border-bottom:
    1px solid var(--border);

}


.timeline-year {

  color: var(--muted);

  font-family: var(--serif);

  font-size: 27px;

}


.timeline-description {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 80px;

}


.timeline-description h3 {

  margin: 0;

  font-family: var(--serif);

  font-size: 37px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: -.025em;

}


.timeline-description p {

  max-width: 400px;

  margin: 0;

  color: #62645f;

  font-size: 11px;

  line-height: 1.8;

}


/* ========================================================
   LARGE IMAGE
======================================================== */

.large-image {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin:
    0 auto 180px;

}


.large-image img {

  height: 850px;

  object-fit: cover;

}


/* ========================================================
   QUOTE
======================================================== */

.designer-quote {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin: auto;

  padding:
    100px 0
    180px;

  border-top:
    1px solid var(--border);

  display: grid;

  grid-template-columns:
    1fr 3fr;

}


.quote-number {

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .14em;

}


.designer-quote blockquote {

  max-width: 1000px;

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(
    70px,
    9vw,
    140px
  );

  font-weight: 400;

  line-height: .78;

  letter-spacing: -.065em;

}


.designer-quote blockquote em {

  color: #88877f;

}


.quote-source {

  grid-column: 2;

  margin-top: 45px;

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .13em;

  text-transform: uppercase;

}


/* ========================================================
   OBJECTS
======================================================== */

.designer-objects {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin: auto;

  padding-bottom: 180px;

}


.objects-header {

  display: flex;

  justify-content: space-between;

  align-items: end;

  padding-bottom: 20px;

  border-bottom:
    1px solid var(--border);

}


.section-label {

  display: block;

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.objects-header h2 {

  margin:
    45px 0 0;

  font-family: var(--serif);

  font-size: clamp(
    65px,
    7vw,
    105px
  );

  font-weight: 400;

  line-height: .8;

  letter-spacing: -.055em;

}


.objects-header > a {

  display: flex;

  gap: 20px;

  align-items: center;

  padding-bottom: 5px;

  border-bottom:
    1px solid var(--dark);

  font-size: 8px;

  letter-spacing: .12em;

  text-transform: uppercase;

}


.objects-header > a span {

  font-size: 15px;

}


/* ========================================================
   PRODUCT GRID
======================================================== */

.objects-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    90px 25px;

  margin-top: 55px;

}


.product-image {

  position: relative;

  overflow: hidden;

  background: var(--soft);

}


.product-image img {

  aspect-ratio: 1 / 1.08;

  object-fit: cover;

  transition:
    transform .8s
    cubic-bezier(.2,.65,.2,1);

}


.product-card:hover
.product-image img {

  transform: scale(1.035);

}


.product-number {

  position: absolute;

  top: 18px;

  left: 18px;

  color: var(--muted);

  font-size: 9px;

}


.product-info {

  display: flex;

  justify-content: space-between;

  align-items: end;

  padding-top: 17px;

}


.product-category {

  color: var(--muted);

  font-size: 8px;

  letter-spacing: .12em;

  text-transform: uppercase;

}


.product-info h3 {

  margin: 8px 0 0;

  font-family: var(--serif);

  font-size: 32px;

  font-weight: 400;

  line-height: 1;

}


.product-arrow {

  color: var(--muted);

  font-size: 18px;

}


/* ========================================================
   PHILOSOPHY
======================================================== */

.philosophy {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin: auto;

  padding:
    110px 0
    180px;

  border-top:
    1px solid var(--border);

  display: grid;

  grid-template-columns:
    1fr 3fr;

}


.philosophy-label {

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.philosophy-content {

  max-width: 950px;

}


.philosophy-content h2 {

  max-width: 900px;

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(
    75px,
    9vw,
    135px
  );

  font-weight: 400;

  line-height: .77;

  letter-spacing: -.065em;

}


.philosophy-content h2 em {

  color: #88877f;

}


.philosophy-content p {

  max-width: 450px;

  margin:
    55px 0 0;

  color: #62645f;

  font-size: 12px;

  line-height: 1.8;

}


.philosophy-content p + p {

  margin-top: 20px;

}


/* ========================================================
   JOURNAL
======================================================== */

.designer-journal {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin: auto;

  padding-bottom: 180px;

}


.journal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 20px;

  border-bottom:
    1px solid var(--border);

}


.journal-header a {

  display: flex;

  align-items: center;

  gap: 20px;

  padding-bottom: 4px;

  border-bottom:
    1px solid var(--dark);

  font-size: 8px;

  letter-spacing: .12em;

  text-transform: uppercase;

}


.journal-header a span {

  font-size: 15px;

}


.journal-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 25px;

  margin-top: 45px;

}


.journal-image {

  overflow: hidden;

  background: var(--soft);

}


.journal-image img {

  aspect-ratio: 1.35 / 1;

  object-fit: cover;

  transition:
    transform .8s
    cubic-bezier(.2,.65,.2,1);

}


.journal-card:hover
.journal-image img {

  transform: scale(1.035);

}


.journal-meta {

  display: flex;

  justify-content: space-between;

  padding-top: 15px;

  color: var(--muted);

  font-size: 8px;

  letter-spacing: .1em;

  text-transform: uppercase;

}


.journal-card h3 {

  max-width: 600px;

  margin:
    18px 0 25px;

  font-family: var(--serif);

  font-size: 38px;

  font-weight: 400;

  line-height: .95;

  letter-spacing: -.025em;

}


.read-more {

  padding-bottom: 4px;

  border-bottom:
    1px solid var(--dark);

  font-size: 8px;

  letter-spacing: .12em;

  text-transform: uppercase;

}


/* ========================================================
   OTHER DESIGNERS
======================================================== */

.other-designers {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin: auto;

  padding-bottom: 180px;

}


.other-header {

  padding:
    18px 0;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

  color: var(--muted);

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.other-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

}


.other-designer {

  min-height: 260px;

  padding:
    30px 0;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border-bottom:
    1px solid var(--border);

}


.other-designer + .other-designer {

  padding-left: 45px;

  border-left:
    1px solid var(--border);

}


.other-designer > span {

  color: var(--muted);

  font-size: 8px;

  letter-spacing: .12em;

  text-transform: uppercase;

}


.other-designer strong {

  font-family: var(--serif);

  font-size: clamp(
    35px,
    4vw,
    60px
  );

  font-weight: 400;

  line-height: .9;

  letter-spacing: -.035em;

}


.other-designer:last-child {

  text-align: right;

  align-items: flex-end;

}


/* ========================================================
   NEWSLETTER
======================================================== */

.newsletter {

  padding:
    140px 0;

  background: var(--dark);

  color: var(--ivory);

}


.newsletter-label {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin: auto;

  color: var(--muted-on-dark);

  font-size: 9px;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.newsletter-content {

  width:
    min(
      calc(100% - 80px),
      900px
    );

  margin:
    65px auto 0;

  text-align: center;

}


.newsletter-content h2 {

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(
    65px,
    9vw,
    125px
  );

  font-weight: 400;

  line-height: .8;

  letter-spacing: -.055em;

}


.newsletter-content h2 em {

  color: #85867f;

}


.newsletter-content p {

  max-width: 420px;

  margin:
    45px auto;

  color: #92938e;

  font-size: 12px;

  line-height: 1.7;

}


.newsletter-form {

  display: flex;

  max-width: 500px;

  margin: auto;

  border-bottom:
    1px solid #656660;

}


.newsletter-form input {

  flex: 1;

  min-width: 0;

  padding: 18px 0;

  border: 0;

  outline: none;

  background: transparent;

  color: var(--ivory);

  font-size: 11px;

}


.newsletter-form input::placeholder {

  color: var(--muted-on-dark);

}


.newsletter-form button {

  border: 0;

  background: transparent;

  color: var(--ivory);

  cursor: pointer;

  font-size: 9px;

  letter-spacing: .12em;

  text-transform: uppercase;

}


.newsletter-form button span {

  margin-left: 20px;

  font-size: 15px;

}


/* ========================================================
   FOOTER
======================================================== */


.footer-brand p {

  margin-top: 20px;

  color: #92938e;

  font-family: var(--serif);

  font-size: 22px;

  line-height: 1.05;

}


.footer-column h3 {

  margin:
    0 0 12px;

  color: var(--muted-on-dark);

  font-size: 9px;

  font-weight: 400;

  letter-spacing: .14em;

  text-transform: uppercase;

}


.footer-column a {

  font-size: 12px;

}


/* ========================================================
   MOBILE
======================================================== */

@media (max-width: 700px) {


  .header-inner,
  .designer-hero,
  .hero-image,
  .designer-intro,
  .timeline-section,
  .large-image,
  .designer-quote,
  .designer-objects,
  .philosophy,
  .designer-journal,
  .other-designers,
  .newsletter-label,
  .newsletter-content,
  .footer-inner,
  .footer-bottom {

    width:
      calc(100% - 32px);

  }


  /* HEADER */


  /* HERO */

  .designer-hero {

    min-height: 600px;

    padding:
      55px 0 25px;

  }


  .hero-title h1 {

    font-size: 25vw;

    line-height: .7;

  }


  .hero-title em {

    margin-left: 8vw;

  }


  .hero-bottom {

    display: block;

  }


  .hero-bottom a {

    margin-top: 30px;

    width: max-content;

  }


  /* IMAGE */

  .hero-image {

    margin-bottom: 100px;

  }


  .hero-image img {

    height: 520px;

  }


  .image-caption {

    display: block;

    line-height: 1.8;

  }


  /* INTRO */

  .designer-intro {

    display: block;

    padding:
      75px 0
      100px;

  }


  .intro-content {

    display: block;

    margin-top: 50px;

  }


  .intro-content h2 {

    font-size: 19vw;

  }


  .intro-text {

    margin-top: 55px;

  }


  /* TIMELINE */

  .timeline-section {

    padding-bottom: 110px;

  }


  .timeline-item {

    grid-template-columns:
      1fr;

    gap: 30px;

    padding:
      40px 0;

  }


  .timeline-description {

    display: block;

  }


  .timeline-description h3 {

    font-size: 31px;

  }


  .timeline-description p {

    margin-top: 20px;

  }


  /* IMAGE */

  .large-image {

    margin-bottom: 100px;

  }


  .large-image img {

    height: 520px;

  }


  .large-image-caption {

    display: block;

    line-height: 1.8;

  }


  /* QUOTE */

  .designer-quote {

    display: block;

    padding:
      75px 0
      110px;

  }


  .designer-quote blockquote {

    margin-top: 50px;

    font-size: 19vw;

  }


  .quote-source {

    margin-top: 35px;

  }


  /* OBJECTS */

  .designer-objects {

    padding-bottom: 110px;

  }


  .objects-header {

    display: block;

  }


  .objects-header > a {

    width: max-content;

    margin-top: 35px;

  }


  .objects-header h2 {

    font-size: 18vw;

  }


  .objects-grid {

    grid-template-columns:
      1fr;

    gap: 65px;

  }


  .product-info h3 {

    font-size: 28px;

  }


  /* PHILOSOPHY */

  .philosophy {

    display: block;

    padding:
      75px 0
      110px;

  }


  .philosophy-content {

    margin-top: 50px;

  }


  .philosophy-content h2 {

    font-size: 18vw;

  }


  /* JOURNAL */

  .designer-journal {

    padding-bottom: 110px;

  }


  .journal-grid {

    grid-template-columns:
      1fr;

    gap: 65px;

  }


  .journal-card h3 {

    font-size: 32px;

  }


  /* OTHER DESIGNERS */

  .other-designers {

    padding-bottom: 110px;

  }


  .other-grid {

    grid-template-columns:
      1fr;

  }


  .other-designer {

    min-height: 210px;

  }


  .other-designer + .other-designer {

    padding-left: 0;

    border-left: 0;

  }


  .other-designer:last-child {

    text-align: left;

    align-items: flex-start;

  }


  /* NEWSLETTER */

  .newsletter {

    padding: 100px 0;

  }


  .newsletter-content h2 {

    font-size: 19vw;

  }


  .newsletter-form {

    display: block;

  }


  .newsletter-form input {

    width: 100%;

  }


  .newsletter-form button {

    width: 100%;

    padding: 15px 0;

    text-align: left;

  }


  /* FOOTER */


}