/* Kaitu 開途 — About: the company page with founder and team teasers (profiles: team.css) */

/* hero chop */
.about-chop { position: relative; aspect-ratio: 1 / .92; display: grid; place-items: center; }
.about-chop__sheet { position: absolute; inset: 10% 12%; border-radius: 8px; background: var(--card); box-shadow: var(--shadow-paper), 0 30px 60px -30px rgba(26,23,18,.45); }
.about-chop__sheet--a { transform: rotate(-6deg); background: var(--paper-2); }
.about-chop__sheet--b { transform: rotate(3deg); background-image: linear-gradient(transparent 31px, rgba(26,23,18,.05) 32px); background-size: 100% 32px; }
.about-chop__seal { position: relative; width: 46%; filter: drop-shadow(0 18px 26px rgba(158,42,34,.35)); transform: rotate(-4deg); }
.about-chop__gloss { position: absolute; left: 16%; right: 16%; bottom: 15%; display: flex; justify-content: space-between; gap: 12px; }
.about-chop__gloss span { display: grid; gap: 4px; }
.about-chop__gloss b { font-family: var(--f-cjk); font-size: 1.5rem; font-weight: 500; color: var(--seal); line-height: 1; }
.about-chop__gloss small { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .about-chop { max-width: 460px; width: 100%; margin: 12px auto 0; } }

/* name */
.about-name { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 6vw, 100px); align-items: center; }
.about-name__glyphs { display: flex; gap: .05em; font-family: var(--f-cjk); font-weight: 500; font-size: clamp(6rem, 3rem + 12vw, 16rem); line-height: 1; color: var(--seal); }
.about-name__glyphs span { display: inline-block; text-shadow: 0 2px 0 rgba(255,255,255,.4), 0 14px 30px rgba(158,42,34,.18); }
.about-name__glyphs span + span { color: var(--ink); }
.about-p { margin-top: 18px; color: var(--ink-2); line-height: 1.7; max-width: 60ch; }
@media (max-width: 860px) { .about-name { grid-template-columns: 1fr; } }

/* founder teaser (the full profile lives at /team/connor-mcknight) */
.fteaser { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(28px, 6vw, 90px); align-items: center; color: inherit; }
.fteaser__art { position: relative; display: block; max-width: 320px; width: 100%; }
.fteaser__sheet { position: absolute; inset: 6% -6% 4% 8%; border-radius: var(--r-xl); background: #2A2620; border: 1px solid var(--night-line); transform: rotate(6deg); transition: transform .8s var(--ease-out); }
.fteaser__frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(160deg, #2A2620, #171410); border: 1px solid var(--night-line); display: grid; place-items: center; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); transform: rotate(-2deg); transition: transform .8s var(--ease-out); }
.fteaser__frame::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(244,238,227,.14); border-radius: calc(var(--r-xl) - 10px); pointer-events: none; }
.fteaser__seal { width: 36%; transform: rotate(-6deg); filter: drop-shadow(0 16px 26px rgba(0,0,0,.5)); transition: transform .8s var(--ease-spring); }
.fteaser__mono { position: absolute; bottom: 26px; font: 500 12px/1 var(--f-mono); letter-spacing: .5em; color: rgba(244,238,227,.4); }
.fteaser__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.fteaser__frame.has-photo .fteaser__seal, .fteaser__frame.has-photo .fteaser__mono { display: none; }
.fteaser__body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.fteaser__lede { font-size: var(--fs-lg); line-height: 1.5; color: rgba(244,238,227,.82); max-width: 40ch; }
.fteaser__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fteaser__facts span { font-size: 13px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--night-line); color: rgba(244,238,227,.7); }
.fteaser__facts b { font-family: var(--f-display); font-weight: 400; color: var(--paper); margin-right: 4px; }
.fteaser__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #E5604F; }
.fteaser__go svg { width: 18px; height: 18px; transition: transform .5s var(--ease-out); }
.fteaser:hover .fteaser__go svg, .fteaser:focus-visible .fteaser__go svg { transform: translateX(8px); }
.fteaser:hover .fteaser__sheet { transform: rotate(10deg) translateX(4%); }
.fteaser:hover .fteaser__frame { transform: rotate(0deg) translateY(-6px); }
.fteaser:hover .fteaser__seal { transform: rotate(4deg) scale(1.06); }
@media (max-width: 760px) { .fteaser { grid-template-columns: minmax(0, 1fr); } .fteaser__art { max-width: 220px; } }

/* team teaser (the cards live at /team) */
.tteaser { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; padding: clamp(20px, 3vw, 32px); background: var(--card); border: 1px solid rgba(26,23,18,.06); border-radius: var(--r-lg); box-shadow: var(--shadow-1); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.tteaser:hover, .tteaser:focus-visible { transform: translateY(-6px) rotate(-.3deg); box-shadow: var(--shadow-3); }
.tteaser__chops { display: flex; min-height: 64px; }
.tteaser__chop { position: relative; width: 64px; height: 64px; margin-left: -8px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 20%, #D8483C, var(--seal) 55%, var(--seal-deep)); color: var(--paper); border: 3px solid var(--card); box-shadow: 0 10px 20px -10px rgba(158,42,34,.6); transform: rotate(calc((var(--i) - 2) * 4deg)); transition: transform .6s var(--ease-spring); z-index: calc(10 - var(--i)); }
.tteaser__chop:first-child { margin-left: 0; }
.tteaser__chop:nth-child(even) { background: var(--ink); }
.tteaser__chop--more { background: var(--paper-2) !important; color: var(--ink); }
.tteaser__chop img { width: 100%; height: 100%; object-fit: cover; }
.tteaser__chop b { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -.02em; }
.tteaser:hover .tteaser__chop { transform: rotate(calc((var(--i) - 2) * -3deg)) translateY(-4px); }
.tteaser__body { flex: 1 1 220px; min-width: 0; display: grid; gap: 4px; }
.tteaser__body b { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.02em; }
.tteaser__body span { color: var(--ink-2); font-size: var(--fs-sm); }
.tteaser__go { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--seal); color: var(--paper); transition: transform .6s var(--ease-out); }
.tteaser__go svg { width: 20px; height: 20px; }
.tteaser:hover .tteaser__go { transform: rotate(-45deg) scale(1.06); }
@media (max-width: 420px) { .tteaser__chop { width: 52px; height: 52px; margin-left: -12px; } .tteaser__go { display: none; } }

/* values */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.value { position: relative; overflow: hidden; background: var(--card); border: 1px solid rgba(26,23,18,.06); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 30px); min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--shadow-1); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.value:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow-paper); }
.value__k { position: absolute; top: 14px; right: 18px; font-family: var(--f-cjk); font-size: 5.5rem; line-height: 1; color: var(--seal); opacity: .14; transition: opacity .5s, transform .8s var(--ease-out); }
.value:hover .value__k { opacity: .3; transform: rotate(-6deg) scale(1.06); }
.value h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; letter-spacing: -.02em; line-height: 1.1; }
.value p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; margin-top: 10px; }
@media (max-width: 1000px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .values { grid-template-columns: minmax(0, 1fr); } .value { min-height: 0; } }

/* join */
.team-join { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; padding: 22px 24px; border-radius: var(--r-lg); border: 1px dashed var(--line-strong); }
.team-join img { width: 44px; height: 44px; }
.team-join div { flex: 1 1 260px; }
.team-join b { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; }
.team-join p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 4px; }

.home-journal .section-head > .btn { justify-self: end; align-self: end; }
@media (max-width: 860px) { .home-journal .section-head > .btn { justify-self: start; } }
@media (max-width: 560px) {
  .about-chop__seal { width: 40%; margin-bottom: 14%; }
  .about-chop__gloss { left: 14%; right: 14%; bottom: 13%; }
  .about-chop__gloss b { font-size: 1.2rem; }
  .about-chop__gloss small { font-size: 9.5px; letter-spacing: .08em; }
}