/* portfolio.html */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

html.portfolio-page *, html.portfolio-page *::before, html.portfolio-page *::after{ box-sizing: border-box; }

html.portfolio-page{
    overflow-x: hidden;
    max-width: 100%;
    --bg: #f6efe7;
    --bg-soft: #fbf7f2;
    --surface: rgba(255, 255, 255, 0.7);
    --surface-strong: #fffaf4;
    --text: #1f1713;
    --text-strong: #140f0c;
    --muted: #66554b;
    --border: rgba(84, 60, 47, 0.14);
    --accent: #b55f43;
    --accent-deep: #7e402e;
    --accent-soft: rgba(181, 95, 67, 0.12);
    --shadow: 0 24px 70px rgba(69, 40, 26, 0.08);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --content-width: 1120px;
  }

html.portfolio-page{ scroll-behavior: smooth; }

html.portfolio-page main{
    overflow-x: hidden;
    max-width: 100%;
  }

html.portfolio-page body{
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
    background:
      radial-gradient(circle at top left, rgba(225, 177, 146, 0.32), transparent 34%),
      radial-gradient(circle at 85% 12%, rgba(214, 187, 165, 0.36), transparent 28%),
      linear-gradient(180deg, #fcf8f3 0%, #f6ede2 52%, #f2e7dc 100%);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
  }

html.portfolio-page body::before{
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.1;
    background-image:
      linear-gradient(rgba(126, 64, 46, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(126, 64, 46, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
  }

html.portfolio-page body::after{
    content: "";
    position: fixed;
    inset: auto auto 10% -8%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181, 95, 67, 0.08) 0%, rgba(181, 95, 67, 0) 70%);
    pointer-events: none;
    filter: blur(8px);
  }

html.portfolio-page img{
    max-width: 100%;
    display: block;
  }

html.portfolio-page video{
    max-width: 100%;
    height: auto;
    display: block;
  }

html.portfolio-page a{
    color: inherit;
  }

html.portfolio-page .shell{
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
  }

html.portfolio-page .topbar{
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(18px);
    background: rgba(246, 239, 231, 0.76);
    border-bottom: 1px solid rgba(84, 60, 47, 0.08);
  }

html.portfolio-page .topbar-inner{
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

html.portfolio-page .progress-bar{
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: var(--scroll-progress, 0%);
    background: linear-gradient(90deg, var(--accent-deep), var(--accent));
    z-index: 30;
    transition: width 0.12s linear;
  }

html.portfolio-page .brand{
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

html.portfolio-page .menu{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }

html.portfolio-page .menu a{
    position: relative;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.92rem;
    padding-bottom: 6px;
    transition: color 0.2s ease;
  }

html.portfolio-page .menu a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: var(--accent-deep);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
  }

html.portfolio-page .menu a:hover,
html.portfolio-page .menu a:focus-visible,
html.portfolio-page .menu a.is-active{
    color: var(--accent-deep);
  }

html.portfolio-page .menu a:hover::after,
html.portfolio-page .menu a:focus-visible::after,
html.portfolio-page .menu a.is-active::after{
    transform: scaleX(1);
  }

html.portfolio-page .hero{
    padding: 92px 0 96px;
    position: relative;
  }

html.portfolio-page .hero::after{
    content: "";
    position: absolute;
    top: 48px;
    right: 6%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181, 95, 67, 0.11) 0%, rgba(181, 95, 67, 0) 70%);
    filter: blur(14px);
    pointer-events: none;
  }

html.portfolio-page .hero-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.75fr);
    gap: 48px;
    align-items: start;
  }

html.portfolio-page .eyebrow,
html.portfolio-page .section-kicker,
html.portfolio-page .project-type,
html.portfolio-page .meta-label{
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-deep);
  }

html.portfolio-page .hero-copy{
    position: relative;
    padding-top: 8px;
    max-width: 640px;
  }

html.portfolio-page .hero-copy .eyebrow{
    margin: 0 0 20px;
  }

html.portfolio-page h1,
html.portfolio-page h2,
html.portfolio-page h3,
html.portfolio-page .signature{
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0;
  }

html.portfolio-page .hero h1{
    max-width: min(22rem, 100%);
    font-size: clamp(2.35rem, 4.8vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    color: var(--text-strong);
  }

html.portfolio-page .hero-lead{
    max-width: 52ch;
    font-size: 1rem;
    color: var(--muted);
    margin: 0 0 16px;
    line-height: 1.65;
  }

html.portfolio-page .hero-lead-sub{
    max-width: 50ch;
    margin-bottom: 22px;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--muted);
  }

html.portfolio-page .hero-tags{
    margin-bottom: 28px;
  }

html.portfolio-page .hero-actions{
    display: flex;
    align-items: center;
    gap: 6px 14px;
    flex-wrap: wrap;
  }

html.portfolio-page .hero-cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

html.portfolio-page .hero-cta--primary{
    color: var(--text-strong);
    border-bottom-color: rgba(181, 95, 67, 0.4);
  }

html.portfolio-page .hero-cta--primary:hover,
html.portfolio-page .hero-cta--primary:focus-visible{
    color: var(--accent-deep);
    border-bottom-color: var(--accent);
    outline: none;
  }

html.portfolio-page .hero-cta:not(.hero-cta--primary):hover,
html.portfolio-page .hero-cta:not(.hero-cta--primary):focus-visible{
    color: var(--accent-deep);
    border-bottom-color: rgba(126, 64, 46, 0.22);
    outline: none;
  }

html.portfolio-page .hero-cta-arrow{
    display: inline-block;
    transition: transform 0.22s ease;
  }

html.portfolio-page .hero-cta--primary:hover .hero-cta-arrow,
html.portfolio-page .hero-cta--primary:focus-visible .hero-cta-arrow{
    transform: translateX(4px);
  }

html.portfolio-page .hero-actions-dot{
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(126, 64, 46, 0.3);
    flex-shrink: 0;
  }

html.portfolio-page .button,
html.portfolio-page .ghost-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

html.portfolio-page .button{
    background: var(--text);
    color: #fff;
    border: 1px solid var(--text);
    box-shadow: 0 14px 30px rgba(20, 15, 12, 0.12);
  }

html.portfolio-page .ghost-link{
    border: 1px solid var(--border);
    color: var(--text);
    background: rgba(255, 255, 255, 0.45);
  }

html.portfolio-page .button:hover,
html.portfolio-page .ghost-link:hover,
html.portfolio-page .button:focus-visible,
html.portfolio-page .ghost-link:focus-visible{
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(20, 15, 12, 0.1);
  }

html.portfolio-page .portrait-stack{
    position: relative;
    margin: 0 auto 28px;
    padding: 16px 0 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: min(58vw, 340px);
  }

html.portfolio-page .portrait-bloom{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(280px, 94%);
    aspect-ratio: 4 / 5;
    border-radius: 14px;
    background: radial-gradient(ellipse 85% 75% at 45% 32%, rgba(181, 95, 67, 0.36) 0%, rgba(181, 95, 67, 0.11) 52%, transparent 74%);
    filter: blur(38px);
    pointer-events: none;
    z-index: 0;
  }

html.portfolio-page .portrait-frame{
    position: relative;
    z-index: 1;
    width: min(100%, 260px);
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
      0 28px 56px rgba(69, 40, 26, 0.18),
      0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    background: linear-gradient(180deg, #ebd5c4 0%, #d6b39e 100%);
  }

html.portfolio-page .portrait-frame img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    filter: saturate(0.98);
  }

html.portfolio-page .about-facts{
    margin: 0;
    margin-top: 14px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(84, 60, 47, 0.1);
    width: 100%;
    max-width: min(240px, 100%);
  }

html.portfolio-page .about-facts dt{
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(126, 64, 46, 0.75);
    margin: 14px 0 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(84, 60, 47, 0.1);
  }

html.portfolio-page .about-facts dt:first-of-type{
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

html.portfolio-page .about-facts dd{
    margin: 0 0 2px;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.45;
  }

html.portfolio-page .about-facts-dd-contact{
    font-size: 0.86rem;
  }

html.portfolio-page .about-facts a{
    color: var(--accent-deep);
    font-weight: 600;
    text-decoration: none;
  }

html.portfolio-page .about-facts a:hover,
html.portfolio-page .about-facts a:focus-visible{
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

html.portfolio-page .about-facts-sep{
    margin: 0 6px;
    color: rgba(102, 85, 75, 0.45);
  }

html.portfolio-page .signature{ display: none; }

html.portfolio-page main{
    padding-bottom: 140px;
  }

html.portfolio-page .section{
    padding: 92px 0;
  }

html.portfolio-page [data-panel]{
    scroll-margin-top: 96px;
  }

html.portfolio-page .section-heading{
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-bottom: 50px;
    padding-top: 34px;
    border-top: 1px solid rgba(84, 60, 47, 0.12);
    position: relative;
  }

html.portfolio-page .section-heading::before{
    content: attr(data-index);
    position: absolute;
    right: 0;
    top: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(126, 64, 46, 0.42);
  }

html.portfolio-page .section-heading h2{
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    font-weight: 700;
  }

html.portfolio-page .section-heading p{
    margin: 0;
    color: var(--muted);
    max-width: 720px;
  }

html.portfolio-page .featured-stack{
    display: grid;
    gap: 52px;
  }

html.portfolio-page .featured-project{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 0;
    position: relative;
  }

html.portfolio-page .featured-project-card{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 44px;
    align-items: stretch;
    padding: 40px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(251,247,242,0.96) 100%);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    --mx: 50%;
    --my: 50%;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    width: min(100%, 1040px);
  }

html.portfolio-page .project-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(84, 60, 47, 0.08);
    color: var(--accent-deep);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    width: fit-content;
    margin-bottom: 18px;
  }

html.portfolio-page .featured-project-card::before{
    content: "";
    position: absolute;
    inset: auto auto -80px -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181, 95, 67, 0.08) 0%, rgba(181, 95, 67, 0) 72%);
    pointer-events: none;
  }

html.portfolio-page .featured-project-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.44) 0%, rgba(255,255,255,0) 34%);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
  }

html.portfolio-page .featured-project-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 34px 84px rgba(69, 40, 26, 0.14);
    border-color: rgba(126, 64, 46, 0.18);
  }

html.portfolio-page .featured-project-card:hover::after{
    opacity: 1;
  }

html.portfolio-page .featured-project:nth-child(even) .featured-project-card{
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  }

html.portfolio-page .project-visual{
    display: grid;
    gap: 24px;
    min-width: 0;
  }

html.portfolio-page .mockup-card{
    background: linear-gradient(180deg, #f2e5da 0%, #ead7c9 100%);
    border-radius: 24px;
    padding: 28px;
    min-height: 100%;
    position: relative;
    transition: transform 0.32s ease;
  }

html.portfolio-page .featured-project-card:hover .mockup-card{
    transform: translateY(-2px);
  }

html.portfolio-page .featured-project:nth-child(1) .mockup-card{ background: linear-gradient(180deg, #f0ddd0 0%, #e6cabc 100%); }
html.portfolio-page .featured-project:nth-child(2) .mockup-card{ background: linear-gradient(180deg, #ead9cf 0%, #e4c7bc 100%); }
html.portfolio-page .featured-project:nth-child(3) .mockup-card{ background: linear-gradient(180deg, #dfe7df 0%, #cad7c6 100%); }
html.portfolio-page .featured-project:nth-child(4) .mockup-card{ background: linear-gradient(180deg, #e5ddd5 0%, #d5c7ba 100%); }
html.portfolio-page .featured-project:nth-child(5) .mockup-card{ background: linear-gradient(180deg, #dde1e8 0%, #c5cdd8 100%); }

html.portfolio-page .mockup-card::after{
    content: "";
    position: absolute;
    right: 18px;
    top: 18px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
  }

html.portfolio-page .visual-split{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 18px;
    align-items: end;
    height: 100%;
  }

html.portfolio-page .visual-double{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    height: 100%;
  }

html.portfolio-page .screen,
html.portfolio-page .phone-shell{
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(66, 44, 30, 0.10);
    transition: transform 0.32s ease, box-shadow 0.32s ease;
  }

html.portfolio-page .screen{
    border-radius: 10px;
    border: 1.5px solid rgba(64, 43, 32, 0.10);
    display: flex;
    flex-direction: column;
    transform: none;
  }

html.portfolio-page .screen::before{
    content: "";
    display: block;
    height: 26px;
    flex-shrink: 0;
    background-color: #eae5df;
    background-image:
      radial-gradient(circle, #ff5f57 3px, transparent 3px),
      radial-gradient(circle, #febc2e 3px, transparent 3px),
      radial-gradient(circle, #28c840 3px, transparent 3px);
    background-size: 7px 7px, 7px 7px, 7px 7px;
    background-position: 10px center, 24px center, 38px center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(64, 43, 32, 0.06);
  }

html.portfolio-page .screen img,
html.portfolio-page .screen video{
    width: 100%;
    display: block;
  }

html.portfolio-page .phone-shell{
    padding: 4px;
    background: #1d1d1f;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(20, 15, 12, 0.14);
    transform: none;
  }

html.portfolio-page .phone-notch{
    display: none;
  }

html.portfolio-page .phone-shell img{
    width: 100%;
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    display: block;
    border-radius: 6px;
  }

html.portfolio-page .phone-home{
    display: none;
  }

html.portfolio-page .project-copy{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
    min-width: 0;
  }

html.portfolio-page .featured-project-card > *,
html.portfolio-page .detail-grid > *,
html.portfolio-page .visual-split > *,
html.portfolio-page .visual-double > *{
    min-width: 0;
  }

html.portfolio-page .project-copy h3{
    font-family: 'Fraunces', serif;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 12px 0 16px;
  }

html.portfolio-page .project-index{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 800;
    line-height: 0.85;
    color: rgba(126, 64, 46, 0.14);
    margin-bottom: 8px;
  }

html.portfolio-page .project-summary{
    font-size: 0.96rem;
    color: var(--muted);
    margin-bottom: 26px;
    overflow-wrap: anywhere;
  }

html.portfolio-page .project-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--accent-deep);
    font-weight: 700;
    margin-bottom: 24px;
    width: fit-content;
    position: relative;
  }

html.portfolio-page .project-link:hover,
html.portfolio-page .project-link:focus-visible{
    color: var(--accent);
  }

html.portfolio-page .project-link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
  }

html.portfolio-page .project-link:hover::after,
html.portfolio-page .project-link:focus-visible::after{
    transform: scaleX(1);
  }

html.portfolio-page .tag-row{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
  }

html.portfolio-page .tag-row span,
html.portfolio-page .skill-chip,
html.portfolio-page .mini-card .year{
    border-radius: 999px;
  }

html.portfolio-page .tag-row span{
    padding: 7px 12px;
    font-size: 0.72rem;
    background: rgba(181, 95, 67, 0.08);
    color: var(--accent-deep);
    border: 1px solid rgba(181, 95, 67, 0.12);
  }

html.portfolio-page .detail-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

html.portfolio-page .detail-card{
    padding: 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(84, 60, 47, 0.1);
    backdrop-filter: blur(4px);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  }

html.portfolio-page .detail-card:hover{
    transform: translateY(-3px);
    border-color: rgba(126, 64, 46, 0.16);
    background: rgba(255, 255, 255, 0.9);
  }

html.portfolio-page .detail-card h4{
    margin: 0 0 8px;
    font-size: 0.9rem;
  }

html.portfolio-page .detail-card p{
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
  }

html.portfolio-page .mini-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

html.portfolio-page .editorial-list{
    border-top: 1px solid rgba(84, 60, 47, 0.12);
  }

html.portfolio-page .list-row{
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 36px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(84, 60, 47, 0.12);
    align-items: start;
    transition: transform 0.22s ease, border-color 0.22s ease;
  }

html.portfolio-page .list-row:hover{
    transform: translateX(6px);
    border-color: rgba(126, 64, 46, 0.2);
  }

html.portfolio-page .list-meta{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

html.portfolio-page .list-year{
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-deep);
  }

html.portfolio-page .list-kind{
    font-size: 0.84rem;
    color: var(--muted);
  }

html.portfolio-page .list-content h3{
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 700;
    margin-bottom: 10px;
  }

html.portfolio-page .list-content h3::after{
    content: "↗";
    margin-left: 10px;
    color: rgba(126, 64, 46, 0.35);
    font-size: 0.92em;
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-block;
  }

html.portfolio-page .list-row:hover .list-content h3::after{
    transform: translate(3px, -2px);
    color: var(--accent-deep);
  }

html.portfolio-page .list-content p{
    margin: 0;
    max-width: 760px;
    color: var(--muted);
    font-size: 0.94rem;
  }

html.portfolio-page .mini-card,
html.portfolio-page .research-card{
    padding: 32px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(251,247,242,0.94) 100%);
    box-shadow: var(--shadow);
    transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
  }

html.portfolio-page .contact-card{
    transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
  }

html.portfolio-page .research-card:hover,
html.portfolio-page .contact-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 28px 72px rgba(69, 40, 26, 0.12);
    border-color: rgba(126, 64, 46, 0.16);
  }

html.portfolio-page .mini-grid .mini-card:nth-child(1){ background: linear-gradient(180deg, rgba(255,248,243,0.92) 0%, rgba(247,234,225,0.96) 100%); }
html.portfolio-page .mini-grid .mini-card:nth-child(2){ background: linear-gradient(180deg, rgba(249,246,241,0.92) 0%, rgba(239,230,221,0.96) 100%); }
html.portfolio-page .mini-grid .mini-card:nth-child(3){ background: linear-gradient(180deg, rgba(247,249,244,0.92) 0%, rgba(233,238,229,0.96) 100%); }

html.portfolio-page .mini-card h3,
html.portfolio-page .research-card h3{
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 16px;
  }

html.portfolio-page .mini-card .year{
    display: inline-flex;
    padding: 6px 12px;
    background: rgba(31, 23, 19, 0.06);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }

html.portfolio-page .mini-card p,
html.portfolio-page .research-card p{
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
  }

html.portfolio-page .research-layout{
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
  }

html.portfolio-page .research-visual{
    min-height: 100%;
    border-radius: 26px;
    background:
      radial-gradient(circle at 30% 24%, rgba(255,255,255,0.48), transparent 24%),
      linear-gradient(180deg, #c27052 0%, #8c4c37 100%);
    color: #fff;
    padding: 38px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

html.portfolio-page .research-visual .robot{
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: auto;
  }

html.portfolio-page .award{
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    font-weight: 600;
  }

html.portfolio-page .skill-cloud{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

html.portfolio-page .skills-layout{
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }

html.portfolio-page .skills-note{
    color: var(--muted);
    padding-top: 6px;
  }

html.portfolio-page .skill-chip{
    padding: 11px 14px;
    background: rgba(255, 250, 245, 0.9);
    border: 1px solid rgba(84, 60, 47, 0.08);
    font-size: 0.8rem;
    color: var(--text);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }

html.portfolio-page .skill-chip span{
    color: var(--muted);
  }

html.portfolio-page .skill-chip:hover{
    transform: translateY(-2px);
    border-color: rgba(126, 64, 46, 0.16);
    background: rgba(255, 255, 255, 0.98);
  }

html.portfolio-page .reveal{
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

html.portfolio-page .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

html.portfolio-page .featured-project-card .screen,
html.portfolio-page .featured-project-card .phone-shell{
    will-change: transform;
  }

html.portfolio-page .featured-project-card:hover .screen{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(66, 44, 30, 0.14);
  }

html.portfolio-page .featured-project-card:hover .phone-shell{
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(20, 15, 12, 0.2);
  }

html.portfolio-page #projects .featured-project-card .project-summary{
    font-size: 0.82rem;
    margin-bottom: 10px;
  }

html.portfolio-page #projects .featured-project-card .project-link{
    margin-bottom: 10px;
  }

html.portfolio-page #projects .featured-project-card .tag-row{
    gap: 6px;
    margin-bottom: 10px;
  }

html.portfolio-page #projects .featured-project-card .tag-row span{
    padding: 5px 8px;
    font-size: 0.58rem;
  }

html.portfolio-page #projects .featured-project-card .detail-grid{
    gap: 8px;
  }

html.portfolio-page #projects .featured-project-card .detail-card{
    padding: 10px;
  }

html.portfolio-page #projects .featured-project-card .detail-card p{
    font-size: 0.72rem;
  }

html.portfolio-page #projects .featured-project-card .project-visual{
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    align-self: stretch;
  }

html.portfolio-page #projects .featured-project-card .mockup-card{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

html.portfolio-page #projects .featured-project-card .visual-split{
    flex: 1 1 auto;
    min-height: 0;
    align-items: end;
    height: 100%;
  }

html.portfolio-page #projects .featured-project-card .visual-split .screen{
    min-height: 0;
    height: 100%;
    align-self: stretch;
  }

html.portfolio-page #projects .featured-project-card .visual-split .screen > img,
html.portfolio-page #projects .featured-project-card .visual-split .screen > video{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    object-fit: cover;
    object-position: top center;
  }

html.portfolio-page #projects .featured-project-card .visual-split .phone-shell{
    align-self: end;
    height: auto;
    width: 100%;
  }

html.portfolio-page #projects .featured-project-card .visual-split .phone-shell img{
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
  }

html.portfolio-page .about-layout{
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }

html.portfolio-page .about-photo{
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

html.portfolio-page .about-photo .portrait-stack{
    min-height: min(50vw, 300px);
    margin-bottom: 4px;
    padding-top: 4px;
    width: 100%;
    max-width: min(240px, 100%);
    margin-left: 0;
    margin-right: auto;
    justify-content: flex-start;
    align-items: flex-start;
  }

html.portfolio-page .about-photo .portrait-frame{
    width: 100%;
    max-width: min(240px, 100%);
    margin-left: 0;
    margin-right: 0;
  }

html.portfolio-page .about-photo .portrait-bloom{
    width: min(258px, 108%);
  }

html.portfolio-page .about-name{
    font-family: 'Fraunces', serif;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--accent);
    text-align: left;
    margin: 0 0 6px;
    max-width: min(240px, 100%);
    width: 100%;
  }

html.portfolio-page .about-body{
    display: grid;
    gap: 32px;
  }

html.portfolio-page .about-block h3{
    font-family: 'Fraunces', serif;
    font-size: clamp(1.22rem, 1.9vw, 1.42rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 10px;
  }

html.portfolio-page .about-block p{
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.7;
    max-width: 58ch;
  }

html.portfolio-page .about-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }

html.portfolio-page .about-chips span{
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(84, 60, 47, 0.1);
    color: var(--text);
  }

html.portfolio-page .contact-card{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(126, 64, 46, 0.12);
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(181, 95, 67, 0.09) 0%, transparent 55%),
      linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(251, 247, 242, 0.98) 100%);
    box-shadow: 0 20px 60px rgba(69, 40, 26, 0.08);
  }

html.portfolio-page .contact-card > .contact-layout{
    grid-column: 1 / -1;
  }

html.portfolio-page .contact-layout{
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: center;
  }

html.portfolio-page .contact-intro .section-kicker{
    margin-bottom: 12px;
  }

html.portfolio-page .contact-card h2{
    font-family: 'Fraunces', serif;
    font-size: clamp(1.65rem, 3.2vw, 2.35rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--text-strong);
    max-width: 18ch;
    margin-bottom: 16px;
  }

html.portfolio-page .contact-lead{
    margin: 0;
    max-width: 38ch;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.65;
  }

html.portfolio-page .contact-channels{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

html.portfolio-page .contact-channel{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(84, 60, 47, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

html.portfolio-page .contact-channel:hover,
html.portfolio-page .contact-channel:focus-visible{
    transform: translateY(-2px);
    border-color: rgba(126, 64, 46, 0.22);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(69, 40, 26, 0.08);
    outline: none;
  }

html.portfolio-page .contact-channel-icon{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(181, 95, 67, 0.18) 0%, rgba(181, 95, 67, 0.06) 100%);
    border: 1px solid rgba(181, 95, 67, 0.2);
    position: relative;
  }

html.portfolio-page .contact-channel-icon::after{
    content: "@";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-deep);
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

html.portfolio-page .contact-channel-icon--phone{
    background: linear-gradient(145deg, rgba(126, 64, 46, 0.14) 0%, rgba(126, 64, 46, 0.05) 100%);
    border-color: rgba(126, 64, 46, 0.18);
  }

html.portfolio-page .contact-channel-icon--phone::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 20px;
    margin: -10px 0 0 -7px;
    border-radius: 4px;
    border: 2px solid var(--accent-deep);
    display: block;
  }

html.portfolio-page .contact-channel-icon--in{
    background: linear-gradient(145deg, rgba(84, 60, 47, 0.12) 0%, rgba(84, 60, 47, 0.04) 100%);
  }

html.portfolio-page .contact-channel-icon--in::after{
    content: "in";
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: -0.04em;
  }

html.portfolio-page .contact-channel-body{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

html.portfolio-page .contact-channel-label{
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(102, 85, 75, 0.75);
  }

html.portfolio-page .contact-channel-value{
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-deep);
    word-break: break-word;
  }

html.portfolio-page .footer-note{
    padding: 12px 0 82px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
  }

/* flower-app.html */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

html.flower-app-page *, html.flower-app-page *::before, html.flower-app-page *::after{ box-sizing: border-box; }

html.flower-app-page{
    --bg: #f6efe7;
    --bg-soft: #fbf7f2;
    --surface: rgba(255, 255, 255, 0.7);
    --surface-strong: #fffaf4;
    --text: #1f1713;
    --text-strong: #140f0c;
    --muted: #66554b;
    --border: rgba(84, 60, 47, 0.14);
    --accent: #b55f43;
    --accent-deep: #7e402e;
    --accent-soft: rgba(181, 95, 67, 0.12);
    --shadow: 0 24px 70px rgba(69, 40, 26, 0.08);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --content-width: 1040px;
  }

html.flower-app-page{ scroll-behavior: smooth; }

html.flower-app-page body{
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
    background:
      radial-gradient(circle at top left, rgba(225, 177, 146, 0.32), transparent 34%),
      radial-gradient(circle at 85% 12%, rgba(214, 187, 165, 0.36), transparent 28%),
      linear-gradient(180deg, #fcf8f3 0%, #f6ede2 52%, #f2e7dc 100%);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

html.flower-app-page img{ max-width: 100%; display: block; }
html.flower-app-page video{ max-width: 100%; height: auto; display: block; }
html.flower-app-page a{ color: inherit; }

html.flower-app-page .shell{
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
  }

html.flower-app-page .topbar{
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(18px);
    background: rgba(246, 239, 231, 0.76);
    border-bottom: 1px solid rgba(84, 60, 47, 0.08);
  }

html.flower-app-page .topbar-inner{
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

html.flower-app-page .brand{
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

html.flower-app-page .back-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    transition: color 0.2s ease;
  }

html.flower-app-page .back-link:hover{ color: var(--accent-deep); }

html.flower-app-page .back-link,
html.flower-app-page .case-lead,
html.flower-app-page .meta-item .value{
    overflow-wrap: anywhere;
  }

  /* Hero */

html.flower-app-page .case-hero{
    padding: 72px 0 56px;
  }

html.flower-app-page .hero-grid{
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 48px;
    align-items: center;
  }

html.flower-app-page .case-hero .eyebrow{
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 16px;
  }

html.flower-app-page .case-hero h1{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--text-strong);
  }

html.flower-app-page .case-lead{
    max-width: 720px;
    font-size: 1.02rem;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 0;
  }

html.flower-app-page .hero-phone{
    padding: 4px;
    background: #1d1d1f;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(20, 15, 12, 0.18);
  }

html.flower-app-page .hero-phone img{
    width: 100%;
    border-radius: 10px;
    display: block;
  }

  /* Meta row */

html.flower-app-page .meta-row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 40px 0 0;
  }

html.flower-app-page .meta-item{
    padding: 20px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(84, 60, 47, 0.08);
  }

html.flower-app-page .meta-item .label{
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 6px;
  }

html.flower-app-page .meta-item .value{
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
  }

  /* Sections */

html.flower-app-page .case-section{
    padding: 64px 0;
  }

html.flower-app-page .case-section + .case-section{
    border-top: 1px solid rgba(84, 60, 47, 0.1);
  }

html.flower-app-page .case-section h2{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
  }

html.flower-app-page .case-section h3{
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 14px;
  }

html.flower-app-page .case-section p{
    max-width: 720px;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.7;
    margin: 0 0 20px;
  }

html.flower-app-page .case-section p strong{
    color: var(--text);
    font-weight: 600;
  }

html.flower-app-page .case-section ul{
    max-width: 720px;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.8;
    padding-left: 20px;
    margin: 0 0 20px;
  }

html.flower-app-page .case-section ul li::marker{
    color: var(--accent);
  }

  /* Two-column layout */

html.flower-app-page .two-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 20px;
  }

  /* Cards */

html.flower-app-page .achievements{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
  }

html.flower-app-page .achievement-card{
    padding: 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(251,247,242,0.94) 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform 0.22s ease, border-color 0.22s ease;
  }

html.flower-app-page .achievement-card:hover{
    transform: translateY(-3px);
    border-color: rgba(126, 64, 46, 0.16);
  }

html.flower-app-page .achievement-card h3{
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
  }

html.flower-app-page .achievement-card p{
    margin: 0;
    font-size: 0.88rem;
    max-width: none;
  }

  /* Tablet gallery */

html.flower-app-page .tablet-gallery{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
  }

html.flower-app-page .tablet-frame{
    background: #1d1d1f;
    padding: 8px;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(20, 15, 12, 0.14);
    transition: transform 0.28s ease;
  }

html.flower-app-page .tablet-frame:hover{
    transform: translateY(-4px);
  }

html.flower-app-page .tablet-frame img{
    width: 100%;
    display: block;
    border-radius: 8px;
  }

  /* Image with text side by side */

html.flower-app-page .media-text{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 40px;
  }

html.flower-app-page .media-text.reverse{
    direction: rtl;
  }

html.flower-app-page .media-text.reverse > *{
    direction: ltr;
  }

html.flower-app-page .media-text img{
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(69, 40, 26, 0.1);
  }

  /* Slider (personas) */

html.flower-app-page .image-slider{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px;
  }

html.flower-app-page .slider-img{
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(69, 40, 26, 0.1);
  }

  /* Browser frame gallery */

html.flower-app-page .browser-gallery{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
  }

html.flower-app-page .browser-frame{
    border-radius: 10px;
    border: 1.5px solid rgba(64, 43, 32, 0.10);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(69, 40, 26, 0.1);
    transition: transform 0.28s ease;
  }

html.flower-app-page .browser-frame:hover{
    transform: translateY(-4px);
  }

html.flower-app-page .browser-toolbar{
    height: 26px;
    flex-shrink: 0;
    background-color: #eae5df;
    background-image:
      radial-gradient(circle, #ff5f57 3px, transparent 3px),
      radial-gradient(circle, #febc2e 3px, transparent 3px),
      radial-gradient(circle, #28c840 3px, transparent 3px);
    background-size: 7px 7px, 7px 7px, 7px 7px;
    background-position: 10px center, 24px center, 38px center;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgba(64, 43, 32, 0.06);
  }

html.flower-app-page .browser-frame img{
    width: 100%;
    display: block;
  }

  /* Phone showcase */

html.flower-app-page .phone-showcase{
    display: flex;
    gap: 28px;
    justify-content: center;
    align-items: flex-end;
    margin-top: 40px;
    padding: 48px 32px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ede4db 0%, #e2d4c7 100%);
  }

html.flower-app-page .phone-frame{
    flex: 0 0 180px;
    padding: 4px;
    background: #1d1d1f;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20, 15, 12, 0.16);
    transition: transform 0.28s ease;
  }

html.flower-app-page .phone-frame:hover{
    transform: translateY(-6px);
  }

html.flower-app-page .phone-frame img{
    width: 100%;
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    display: block;
    border-radius: 6px;
  }

  /* Single wide image */

html.flower-app-page .wide-image{
    margin-top: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(69, 40, 26, 0.1);
    overflow: hidden;
  }

html.flower-app-page .wide-image img{
    width: 100%;
    display: block;
  }

  /* Footer */

html.flower-app-page .case-footer{
    padding: 48px 0 100px;
    text-align: center;
  }

html.flower-app-page .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

html.flower-app-page .btn-primary{
    background: var(--text);
    color: #fff;
    border: 1px solid var(--text);
    box-shadow: 0 14px 30px rgba(20, 15, 12, 0.12);
  }

html.flower-app-page .btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(20, 15, 12, 0.1);
  }

html.flower-app-page .footer-note{
    padding: 12px 0 40px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
  }

  /* Reveal animation */

html.flower-app-page .reveal{
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

html.flower-app-page .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  /* Responsive */

/* praxisautomat.html */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

html.praxisautomat-page *, html.praxisautomat-page *::before, html.praxisautomat-page *::after{ box-sizing: border-box; }

html.praxisautomat-page{
    --bg: #f6efe7;
    --bg-soft: #fbf7f2;
    --surface: rgba(255, 255, 255, 0.7);
    --surface-strong: #fffaf4;
    --text: #1f1713;
    --text-strong: #140f0c;
    --muted: #66554b;
    --border: rgba(84, 60, 47, 0.14);
    --accent: #b55f43;
    --accent-deep: #7e402e;
    --accent-soft: rgba(181, 95, 67, 0.12);
    --shadow: 0 24px 70px rgba(69, 40, 26, 0.08);
    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --content-width: 1040px;
  }

html.praxisautomat-page{ scroll-behavior: smooth; }

html.praxisautomat-page body{
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
    background:
      radial-gradient(circle at top left, rgba(225, 177, 146, 0.32), transparent 34%),
      radial-gradient(circle at 85% 12%, rgba(214, 187, 165, 0.36), transparent 28%),
      linear-gradient(180deg, #fcf8f3 0%, #f6ede2 52%, #f2e7dc 100%);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

html.praxisautomat-page img{ max-width: 100%; display: block; }
html.praxisautomat-page video{ max-width: 100%; height: auto; display: block; }
html.praxisautomat-page a{ color: inherit; }

html.praxisautomat-page .shell{
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
  }

html.praxisautomat-page .topbar{
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(18px);
    background: rgba(246, 239, 231, 0.76);
    border-bottom: 1px solid rgba(84, 60, 47, 0.08);
  }

html.praxisautomat-page .topbar-inner{
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

html.praxisautomat-page .brand{
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

html.praxisautomat-page .back-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
    transition: color 0.2s ease;
  }

html.praxisautomat-page .back-link:hover{ color: var(--accent-deep); }

html.praxisautomat-page .back-link,
html.praxisautomat-page .case-lead,
html.praxisautomat-page .meta-item .value{
    overflow-wrap: anywhere;
  }

html.praxisautomat-page .case-hero{
    padding: 72px 0 56px;
  }

html.praxisautomat-page .case-hero .eyebrow{
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 16px;
  }

html.praxisautomat-page .case-hero h1{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--text-strong);
  }

html.praxisautomat-page .case-lead{
    max-width: 720px;
    font-size: 1.02rem;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 40px;
  }

html.praxisautomat-page .meta-row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

html.praxisautomat-page .meta-item{
    padding: 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(84, 60, 47, 0.08);
  }

html.praxisautomat-page .meta-item .label{
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 6px;
  }

html.praxisautomat-page .meta-item .value{
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
  }

html.praxisautomat-page .case-section{
    padding: 64px 0;
  }

html.praxisautomat-page .case-section + .case-section{
    border-top: 1px solid rgba(84, 60, 47, 0.1);
  }

html.praxisautomat-page .case-section h2{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
  }

html.praxisautomat-page .case-section p{
    max-width: 720px;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.7;
    margin: 0 0 20px;
  }

html.praxisautomat-page .case-section p strong{
    color: var(--text);
    font-weight: 600;
  }

html.praxisautomat-page .achievements{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
  }

html.praxisautomat-page .achievement-card{
    padding: 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(251,247,242,0.94) 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform 0.22s ease, border-color 0.22s ease;
  }

html.praxisautomat-page .achievement-card:hover{
    transform: translateY(-3px);
    border-color: rgba(126, 64, 46, 0.16);
  }

html.praxisautomat-page .achievement-card h3{
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
  }

html.praxisautomat-page .achievement-card p{
    margin: 0;
    font-size: 0.88rem;
    max-width: none;
  }

html.praxisautomat-page .mockup-gallery{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
  }

html.praxisautomat-page .mockup-gallery.triple{
    grid-template-columns: repeat(3, 1fr);
  }

html.praxisautomat-page .mockup-gallery.single{
    grid-template-columns: 1fr;
    max-width: 800px;
  }

html.praxisautomat-page .mockup-frame{
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #f0e3d6 0%, #e6d1c2 100%);
    padding: 20px;
    transition: transform 0.24s ease;
  }

html.praxisautomat-page .mockup-frame:hover{
    transform: translateY(-3px);
  }

html.praxisautomat-page .mockup-frame img{
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(66, 44, 30, 0.10);
  }

html.praxisautomat-page .mockup-frame.desktop{
    background: linear-gradient(180deg, #e8ddd2 0%, #dccfc2 100%);
  }

html.praxisautomat-page .mockup-frame.phone{
    background: linear-gradient(180deg, #ead7cb 0%, #dfc8b8 100%);
    max-width: 200px;
  }

html.praxisautomat-page .phone-row{
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 32px;
  }

html.praxisautomat-page .phone-row .mockup-frame.phone{
    flex: 0 0 180px;
  }

html.praxisautomat-page .case-footer{
    padding: 48px 0 100px;
    text-align: center;
  }

html.praxisautomat-page .case-footer a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--text);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--text);
    box-shadow: 0 14px 30px rgba(20, 15, 12, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

html.praxisautomat-page .case-footer a:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(20, 15, 12, 0.1);
  }

html.praxisautomat-page .footer-note{
    padding: 12px 0 40px;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
  }

html.praxisautomat-page .reveal{
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

html.praxisautomat-page .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

/* index.html */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html.cv-page *, html.cv-page *::before, html.cv-page *::after{ margin: 0; padding: 0; box-sizing: border-box; }

html.cv-page{
    --primary: #2D2D2D;
    --accent: #6B4C6E;
    --accent-light: #8B6A8E;
    --text: #333;
    --text-light: #666;
    --bg: #fff;
    --sidebar-bg: #2D2D2D;
    --sidebar-text: #E8E0E9;
    --sidebar-heading: #D4B8D6;
    --border: #E0D6E1;
    --tag-bg: #F3EDF4;
  }

html.cv-page{ font-size: 14px; }

html.cv-page body{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    background: #E8E0E9;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

html.cv-page .page{
    width: min(calc(100% - 24px), 210mm);
    min-height: 297mm;
    margin: 20px auto;
    background: var(--bg);
    display: grid;
    grid-template-columns: 230px 1fr;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    overflow: hidden;
  }

html.cv-page .sidebar{
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 36px 24px 30px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

html.cv-page .photo-wrapper{
    width: 160px;
    height: 160px;
    margin: 0 auto 4px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent-light);
  }

html.cv-page .photo-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

html.cv-page .sidebar h2{
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--sidebar-heading);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 6px;
    margin-bottom: 8px;
  }

html.cv-page .contact-list{ list-style: none; }
html.cv-page .contact-list li{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    line-height: 1.45;
    word-break: break-all;
  }
html.cv-page .contact-list li .icon{
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    margin-top: 1px;
    opacity: 0.7;
  }

html.cv-page .skill-tags{ display: flex; flex-wrap: wrap; gap: 5px; }
html.cv-page .skill-tags span{
    background: rgba(255,255,255,0.1);
    color: var(--sidebar-text);
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
  }

html.cv-page .lang-item{ margin-bottom: 8px; }
html.cv-page .lang-item .lang-name{
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 3px;
  }
html.cv-page .lang-bar-bg{
    height: 5px;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
    overflow: hidden;
  }
html.cv-page .lang-bar-fill{
    height: 100%;
    background: var(--accent-light);
    border-radius: 3px;
  }
html.cv-page .lang-level{
    font-size: 0.7rem;
    opacity: 0.65;
    margin-top: 2px;
  }

html.cv-page .cert-item{
    margin-bottom: 8px;
    font-size: 0.8rem;
  }
html.cv-page .cert-item strong{ font-weight: 500; display: block; }
html.cv-page .cert-item span{ font-size: 0.72rem; opacity: 0.6; }

html.cv-page .main{
    padding: 36px 34px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

html.cv-page .header h1{
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.5px;
    line-height: 1.15;
  }
html.cv-page .header .subtitle{
    font-size: 1rem;
    color: var(--accent);
    font-weight: 500;
    margin-top: 3px;
  }
html.cv-page .header .tagline{
    font-size: 0.82rem;
    color: var(--text-light);
    margin-top: 8px;
    line-height: 1.55;
  }

html.cv-page .section-title{
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 4px;
    margin-bottom: 12px;
  }

html.cv-page .exp-item{ margin-bottom: 14px; }
html.cv-page .exp-header{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
  }
html.cv-page .exp-role{
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary);
  }
html.cv-page .exp-date{
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
  }
html.cv-page .exp-company{
    font-size: 0.8rem;
    color: var(--accent-light);
    font-weight: 500;
    margin-top: 1px;
  }
html.cv-page .exp-location{
    font-size: 0.72rem;
    color: var(--text-light);
    font-style: italic;
  }
html.cv-page .exp-desc{
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 4px;
    line-height: 1.5;
  }
html.cv-page .exp-desc ul{
    margin-top: 3px;
    padding-left: 16px;
  }
html.cv-page .exp-desc li{ margin-bottom: 2px; }

html.cv-page .edu-item{ margin-bottom: 12px; }
html.cv-page .edu-degree{
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
  }
html.cv-page .edu-school{
    font-size: 0.78rem;
    color: var(--accent-light);
    font-weight: 500;
  }
html.cv-page .edu-date{
    font-size: 0.72rem;
    color: var(--text-light);
  }
html.cv-page .edu-desc{
    font-size: 0.76rem;
    color: var(--text-light);
    margin-top: 3px;
    line-height: 1.5;
  }

html.cv-page .project-item{ margin-bottom: 12px; }
html.cv-page .project-name{
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--primary);
  }
html.cv-page .project-meta{
    font-size: 0.72rem;
    color: var(--text-light);
  }
html.cv-page .project-desc{
    font-size: 0.76rem;
    color: var(--text-light);
    margin-top: 3px;
    line-height: 1.5;
  }

html.cv-page .award-item{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
    font-size: 0.78rem;
    gap: 10px;
  }
html.cv-page .award-name{ color: var(--text); font-weight: 500; }
html.cv-page .award-date{ color: var(--text-light); font-size: 0.72rem; white-space: nowrap; flex-shrink: 0; }

html.cv-page .project-link{
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-light);
  }
html.cv-page .project-link:hover{ border-bottom-style: solid; }

/* Design system layout layer */
html.portfolio-page,
html.flower-app-page,
html.praxisautomat-page{
    --page-gutter: clamp(16px, 3vw, 32px);
    --grid-gap: clamp(18px, 2.4vw, 32px);
    --grid-gap-lg: clamp(24px, 4vw, 56px);
    --section-space: clamp(48px, 7vw, 92px);
  }

html.cv-page{
    --page-gutter: clamp(12px, 3vw, 24px);
  }

html.portfolio-page .shell,
html.portfolio-page .topbar-inner,
html.flower-app-page .shell,
html.flower-app-page .topbar-inner,
html.praxisautomat-page .shell,
html.praxisautomat-page .topbar-inner{
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-width));
  }

html.portfolio-page .hero,
html.portfolio-page .section,
html.flower-app-page .case-hero,
html.flower-app-page .case-section,
html.praxisautomat-page .case-hero,
html.praxisautomat-page .case-section{
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

html.portfolio-page .hero-grid,
html.portfolio-page .section-heading,
html.portfolio-page .featured-project-card,
html.portfolio-page .research-layout,
html.portfolio-page .skills-layout,
html.portfolio-page .about-layout,
html.portfolio-page .contact-card,
html.portfolio-page .list-row,
html.flower-app-page .hero-grid,
html.flower-app-page .two-col,
html.flower-app-page .media-text{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap-lg);
  }

html.portfolio-page .hero-copy{
    grid-column: 1 / -1;
  }

html.flower-app-page .hero-grid > :first-child{
    grid-column: span 7;
  }

html.flower-app-page .hero-grid > :last-child{
    grid-column: span 5;
  }

html.portfolio-page .section-heading{
    gap: var(--grid-gap);
  }

html.portfolio-page .section-heading > :first-child{
    grid-column: span 4;
  }

html.portfolio-page .section-heading > p{
    grid-column: span 8;
  }

html.portfolio-page .project-visual{
    grid-column: span 7;
  }

html.portfolio-page .project-copy{
    grid-column: span 5;
  }

html.portfolio-page .research-layout > :first-child,
html.portfolio-page .skills-layout > :first-child,
html.portfolio-page .about-photo{
    grid-column: span 4;
  }

html.portfolio-page .research-layout > :last-child,
html.portfolio-page .skills-layout > :not(:first-child),
html.portfolio-page .about-body{
    grid-column: span 8;
  }

html.portfolio-page .contact-card > .contact-layout{
    grid-column: 1 / -1;
  }

html.portfolio-page .list-meta{
    grid-column: span 3;
  }

html.portfolio-page .list-content{
    grid-column: span 9;
  }

html.portfolio-page .detail-grid,
html.flower-app-page .meta-row,
html.praxisautomat-page .meta-row{
    display: grid;
    gap: var(--grid-gap);
  }

html.portfolio-page .detail-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

html.flower-app-page .meta-row{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

html.praxisautomat-page .meta-row{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

html.flower-app-page .two-col > *,
html.flower-app-page .media-text > *{
    grid-column: span 6;
  }

html.portfolio-page .mini-grid{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

html.cv-page .page{
    width: min(calc(100% - (var(--page-gutter) * 2)), 210mm);
  }

/* Project layout restore */
html.portfolio-page .featured-project-card{
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: stretch;
  }

html.portfolio-page .project-visual,
html.portfolio-page .project-copy{
    grid-column: auto;
  }

html.portfolio-page .section-heading{
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 40px;
  }

html.portfolio-page .section-heading > :first-child,
html.portfolio-page .section-heading > p{
    grid-column: auto;
  }

html.portfolio-page .research-layout{
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 34px;
  }

html.portfolio-page .research-layout > :first-child,
html.portfolio-page .research-layout > :last-child{
    grid-column: auto;
  }

html.portfolio-page .skills-layout{
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
  }

html.portfolio-page .skills-layout > :first-child,
html.portfolio-page .skills-layout > :not(:first-child){
    grid-column: auto;
  }

html.portfolio-page .about-layout{
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
  }

html.portfolio-page .about-photo,
html.portfolio-page .about-body{
    grid-column: auto;
  }

html.portfolio-page .contact-card{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
  }

html.portfolio-page .list-row{
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 36px;
  }

html.portfolio-page .list-meta,
html.portfolio-page .list-content{
    grid-column: auto;
  }