/*
 * Production UI layer.
 *
 * The reference-authored source intentionally contains pixel-alignment rules,
 * including text scale transforms and a 709px mobile reference coordinate
 * system. Those rules are useful for visual regression work, but they make
 * real browser viewports unnecessarily small and brittle. This final layer
 * preserves the composition while restoring readable type, fluid content
 * grids and a usable tablet mode.
 */

/* --------------------------------------------------------------------------
   Desktop / tablet typography and content rhythm
   -------------------------------------------------------------------------- */
@media screen and (min-width: 761px) {
  .nav a,
  .desktop-tag,
  .desktop-traits,
  .principle span,
  .section-head h2,
  .section-head a,
  .card h3,
  .meta,
  .meta-text,
  .card p,
  .way h2,
  .rules,
  .newsletter h3,
  .newsletter p,
  .story-head h2,
  .story-head a,
  .story div,
  .footer-desc,
  .footer-col {
    transform: none !important;
  }

  .nav a {
    font-size: 16px;
  }

  .desktop-tag {
    font-size: 23px;
  }

  .desktop-traits {
    font-size: 19px;
  }

  .principle span {
    display: inline-block;
    font-size: 12px !important;
    line-height: 1.2;
  }

  .values {
    height: auto !important;
    min-height: 154px;
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .value {
    align-items: flex-start;
  }

  .value h3 {
    font-size: 23px;
    line-height: 1;
    margin-bottom: 8px;
  }

  .value p {
    font-size: 12.5px;
    line-height: 1.5 !important;
    letter-spacing: -0.01em;
  }

  .events {
    height: auto !important;
    padding-top: 26px;
    padding-bottom: 28px;
  }

  .section-head h2 {
    font-size: 32px !important;
  }

  .section-head a {
    font-size: 16px;
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 23px;
  }

  .card,
  .card:nth-child(1),
  .card:nth-child(2),
  .card:nth-child(3) {
    width: auto;
    min-width: 0;
    height: 342px;
    flex: none;
  }

  .card h3 {
    font-size: 25px !important;
  }

  .meta {
    font-size: 13.5px !important;
  }

  .meta-text {
    font-size: 13.5px !important;
  }

  .card p {
    font-size: 12.5px;
    line-height: 1.48 !important;
    letter-spacing: -0.01em;
  }

  .more {
    font-size: 16px;
  }

  .way {
    height: auto !important;
    min-height: 212px;
    padding-top: 23px;
    padding-bottom: 22px;
  }

  .way h2 {
    font-size: 26px !important;
  }

  .rules {
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: -0.01em;
  }

  .newsletter h3 {
    font-size: 23px !important;
  }

  .newsletter p {
    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: -0.01em;
  }

  .join input,
  .join button {
    height: 42px;
  }

  .join input {
    font-size: 13px;
  }

  .join button {
    font-size: 15px;
  }

  .stories {
    height: auto !important;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .story-head h2 {
    font-size: 26px !important;
  }

  .story-head a {
    font-size: 15px !important;
  }

  .story-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .story,
  .story:nth-child(1),
  .story:nth-child(2),
  .story:nth-child(3),
  .story:nth-child(4) {
    width: auto;
    min-width: 0;
  }

  .story div {
    font-size: 14px !important;
    line-height: 1.15;
  }

  .footer {
    height: auto !important;
    min-height: 116px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  .footer h4 {
    font-size: 11.5px;
    margin-bottom: 5px;
  }
}

/* Keep the 1024px reference composition centred instead of pinning it to the
   left edge on larger screens. Content sections below remain fluid. */
@media screen and (min-width: 1025px) {
  .hero {
    width: 1024px;
    margin-inline: auto;
  }

  .values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .value,
  .value:nth-child(1),
  .value:nth-child(2),
  .value:nth-child(3),
  .value:nth-child(4) {
    width: auto !important;
    padding-left: 24px;
    padding-right: 22px;
  }

  .value:first-child {
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Tablet mode: avoid the 1024px desktop artboard clipping at 761–1023px.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 761px) and (max-width: 1023px) {
  .header {
    height: 96px;
    padding-inline: 32px;
  }

  .logo-space,
  .nav {
    display: none !important;
  }

  .hamb {
    display: block !important;
    position: relative;
    width: 44px;
    height: 40px;
    margin-left: auto;
    transform: none !important;
  }

  .hamb i {
    position: absolute;
    right: 0;
    width: 38px;
    height: 4px;
    border-radius: 3px;
    background: #f6f3ed;
  }

  .hamb i:nth-child(1) { top: 2px; }
  .hamb i:nth-child(2) { top: 16px; }
  .hamb i:nth-child(3) { top: 30px; }

  .header-grind-desktop {
    display: none !important;
  }

  .hero {
    width: 100%;
    height: 42vw;
    min-height: 320px;
    max-height: 430px;
  }

  .hero-photo {
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill;
  }

  .hero-headline-desktop {
    left: 3.42vw;
    top: 5.37vw;
    width: 37.8vw;
    height: 16.8vw;
  }

  .desktop-tag {
    left: 3.9vw;
    top: 23.15vw;
    font-size: clamp(18px, 2.25vw, 23px);
  }

  .desktop-traits {
    left: 3.9vw;
    top: 26.95vw;
    gap: 10px;
    font-size: clamp(16px, 1.86vw, 19px);
  }

  .desktop-principles {
    width: 42vw;
    height: 100%;
  }

  .principle {
    top: 73.25%;
    font-size: 10.5px;
  }

  .principle.p1 { left: 9.1%; width: 20.7%; }
  .principle.p2 { left: 30.7%; width: 19.1%; }
  .principle.p3 { left: 50.7%; width: 18.4%; }
  .principle.p4 { left: 69.8%; width: 23.3%; }

  .principle span {
    font-size: 10.5px !important;
  }

  .principle img {
    height: clamp(30px, 3.9vw, 40px);
    margin-bottom: 5px;
  }

  .values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    padding: 24px 32px;
  }

  .value,
  .value:nth-child(1),
  .value:nth-child(2),
  .value:nth-child(3),
  .value:nth-child(4) {
    width: auto !important;
    min-height: 124px;
    padding: 20px !important;
    border-right: 0;
    border-bottom: 0;
  }

  .value:nth-child(1),
  .value:nth-child(3) {
    border-right: 1px solid #4b4a49;
  }

  .value:nth-child(1),
  .value:nth-child(2) {
    border-bottom: 1px solid #4b4a49;
  }

  .value-icon-img {
    margin-right: 18px;
  }

  .events {
    padding-inline: 32px;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .card:nth-child(3) .card-photo {
    height: 200px;
  }

  .way {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    padding: 28px 32px 30px;
  }

  .way-left,
  .stamp-wrap,
  .newsletter {
    width: auto;
    max-width: none;
  }

  .newsletter {
    grid-column: 1 / -1;
  }

  .stories {
    padding-inline: 32px;
  }

  .story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }

  .story img {
    height: 150px;
  }

  .footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
    padding: 24px 32px 28px;
  }

  .footer-logo-space {
    display: none;
  }

  .footer-desc,
  .footer-grind {
    grid-column: 1 / -1;
  }

  .footer-desc,
  .footer-col {
    width: auto;
  }

  .footer-grind {
    margin-left: 0;
    justify-self: end;
  }
}

/* --------------------------------------------------------------------------
   Real-phone readability.

   max(px floor, reference rem) preserves the exact 709px reference sizing but
   prevents type and controls from collapsing to ~8–11px on 390–430px phones.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 760px) {
  .mf b {
    font-size: max(14px, 23.5rem) !important;
  }

  .value h3 {
    font-size: max(22px, 37rem) !important;
  }

  .value p {
    font-size: max(14px, 19.5rem) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em;
  }

  .value:nth-child(1) {
    height: max(108px, 147rem) !important;
  }

  .value:nth-child(2),
  .value:nth-child(3),
  .value:nth-child(4) {
    height: max(96px, 126rem) !important;
  }

  .section-head {
    gap: 12px;
  }

  .section-head h2 {
    font-size: max(22px, 34rem) !important;
  }

  .section-head a {
    font-size: max(13px, 18rem) !important;
  }

  .card,
  .card:nth-child(1),
  .card:nth-child(2),
  .card:nth-child(3) {
    height: max(330px, 510rem) !important;
  }

  .card-body {
    padding: max(14px, 16rem) max(14px, 18rem) !important;
  }

  .date {
    width: max(58px, 82rem) !important;
    height: max(84px, 116rem) !important;
    padding-top: max(8px, 10rem) !important;
  }

  .date .mon {
    font-size: max(12px, 20rem) !important;
  }

  .date .day {
    font-size: max(28px, 43rem) !important;
  }

  .date .span {
    font-size: max(12px, 18rem) !important;
  }

  .card h3 {
    font-size: max(22px, 31rem) !important;
    margin-bottom: max(10px, 12rem) !important;
  }

  .meta {
    gap: max(12px, 20rem) !important;
    margin-bottom: max(12px, 14rem) !important;
    font-size: max(14px, 16rem) !important;
  }

  .meta span {
    gap: max(5px, 6rem) !important;
  }

  .meta img {
    width: max(16px, 18rem) !important;
    height: max(16px, 18rem) !important;
  }

  .meta-text {
    font-size: max(14px, 16rem) !important;
  }

  .card p {
    font-size: max(14px, 16rem) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em;
  }

  .more {
    left: max(14px, 18rem) !important;
    bottom: max(14px, 17rem) !important;
    font-size: max(15px, 19rem) !important;
  }

  .way h2,
  .newsletter h3 {
    font-size: max(22px, 34rem) !important;
  }

  .rules {
    font-size: max(14px, 17rem) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em;
  }

  .newsletter p {
    font-size: max(14px, 16rem) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em;
  }

  .join input,
  .join button {
    height: max(48px, 48rem) !important;
  }

  .join input {
    font-size: max(16px, 15rem) !important;
  }

  .join button {
    font-size: max(16px, 18rem) !important;
  }

  .socials img {
    width: max(28px, 32rem) !important;
    height: max(28px, 32rem) !important;
  }

  .story-head h2 {
    font-size: max(22px, 32rem) !important;
  }

  .story-head a {
    font-size: max(13px, 17rem) !important;
  }

  .story div {
    font-size: max(14px, 17rem) !important;
    line-height: 1.2 !important;
  }

  .footer,
  .footer-desc {
    font-size: max(12px, 14rem) !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em;
  }

  .footer h4 {
    font-size: max(14px, 17rem) !important;
  }
}

@media screen and (max-width: 480px) {
  .footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-desc,
  .footer-grind {
    grid-column: 1 / -1;
  }
}