/* =========================================================
   Tema "Índice" — portfólio Bruno Guimarães
   Branco, tipografia grande (Bricolage Grotesque), lista de projetos
   como índice, detalhes em verde-menta.
   ========================================================= */
:root{
  --bg:#ffffff; --ink:#111111; --grey:#5f5f5f; --text2:#3a3a3a;
  --rule:#e2e2e0; --soft:#f3f3f1; --mint:#7ef0c4;
  --display:'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body:'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono:'Geist Mono', ui-monospace, Menlo, monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.7,0,.2,1);
  --wrap:1376px; --gut:32px;
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:ix-vt-out .35s var(--ease-in-out) both}
::view-transition-new(root){animation:ix-vt-in .55s var(--ease) both}
@keyframes ix-vt-out{to{opacity:0;transform:translateY(-24px)}}
@keyframes ix-vt-in{from{opacity:0;transform:translateY(32px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body.th-indice{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.th-indice a{color:inherit;text-decoration:none}
.th-indice img,.th-indice video{display:block;max-width:100%}
.th-indice ::selection{background:var(--mint);color:var(--ink)}
.th-indice :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff!important;padding:10px 14px}
.skip:focus{left:8px}

.ix-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.ix-label{margin:0;font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--grey)}

/* ---------- cabeçalho ---------- */
.ix-bar{position:sticky;top:0;z-index:40;max-width:none;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:20px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:transform .5s var(--ease), box-shadow .3s}
.ix-bar.is-scrolled{box-shadow:0 1px 0 var(--rule)}
.ix-bar.is-hidden{transform:translateY(-110%)}
.ix-role{font:500 13px/1.3 var(--mono);color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.ix-logo{font:800 22px/1 var(--display);letter-spacing:-.03em}
.ix-nav{display:flex;gap:28px;align-items:center;font-size:15px}
.ix-nav > a{position:relative;padding:2px 0}
.ix-nav > a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.ix-nav > a:hover::after,.ix-nav > a.on::after{transform:scaleX(1);transform-origin:left}
.ix-lang{font:400 13px/1 var(--mono);color:var(--grey);display:inline-flex;gap:4px}
.ix-lang a{transition:color .2s}
.ix-lang a:hover{color:var(--ink)}
.ix-lang a[aria-current]{color:var(--ink);font-weight:500}

/* ---------- letras animadas (nome e títulos) ---------- */
.ix-name,.ix-p-title,.ix-big{font-family:var(--display);font-weight:800;letter-spacing:-.055em;margin:0;font-optical-sizing:auto}
.ix-name .w,.ix-p-title .w,.ix-big .w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .12em .12em;margin:-.16em -.12em -.12em}
/* terminada a entrada, nada fica cortado (nem com o efeito do cursor) */
.letters-done .ch{overflow:visible}
.ch > span{display:inline-block;will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .ch > span{transform:translateY(112%);animation:ix-up 1s var(--ease) forwards;animation-delay:calc(var(--i) * 32ms + 120ms)}
}
@keyframes ix-up{to{transform:none}}

/* ---------- reveals ao rolar ---------- */
@media (prefers-reduced-motion:no-preference){
  .js:not(.ix-fail) .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease), transform 1s var(--ease)}
  .js:not(.ix-fail) .rv.in{opacity:1;transform:none}
  .js:not(.ix-fail) .rv-media{clip-path:inset(14% 0 0 0);transform:translateY(60px);opacity:0;transition:clip-path 1.2s var(--ease), transform 1.2s var(--ease), opacity .6s}
  .js:not(.ix-fail) .rv-media.in{clip-path:inset(0 0 0 0);transform:none;opacity:1}
  .js:not(.ix-fail) .rv-media img,.js:not(.ix-fail) .rv-media video{transform:scale(1.12);transition:transform 1.6s var(--ease)}
  .js:not(.ix-fail) .rv-media.in img,.js:not(.ix-fail) .rv-media.in video{transform:none}
}

/* ---------- home: capa ---------- */
.ix-mast{padding-top:56px;padding-bottom:96px}
.ix-name{font-size:clamp(48px, 7.2vw, 104px);line-height:.88}
.ix-mast-foot{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:24px;margin-top:32px;align-items:end}
.ix-intro{grid-column:1 / 7;margin:0;font-size:24px;line-height:1.35;letter-spacing:-.01em}
.ix-intro a{background:linear-gradient(var(--mint), var(--mint)) no-repeat 0 100% / 100% 3px;transition:background-size .35s var(--ease)}
.ix-intro a:hover{background-size:100% 100%}
.ix-down{grid-column:10 / 13;justify-self:end;display:inline-flex;align-items:center;gap:14px;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--grey);transition-delay:.15s!important}
.ix-down-arrow{display:inline-grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;color:var(--ink);font-size:16px;transition:background .3s, transform .3s}
.ix-down:hover .ix-down-arrow{background:var(--mint);border-color:var(--mint)}
@media (prefers-reduced-motion:no-preference){.ix-down-arrow{animation:ix-bob 2.4s ease-in-out infinite 2s}}
@keyframes ix-bob{0%,100%{transform:none}50%{transform:translateY(6px)}}

/* ---------- índice (lista de projetos) ---------- */
.ix-index{padding-bottom:120px;position:relative}
.ix-head,.ix-row{display:grid;grid-template-columns:72px minmax(0, 6fr) minmax(0, 3fr);column-gap:24px}
/* home: Nº | Projeto | Cliente | Tipo */
.ix-index .ix-head,.ix-index .ix-row{grid-template-columns:72px minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr)}
.ix-type{font-size:16px;color:var(--text2);transition:color .3s, transform .6s var(--ease)}
.ix-row:hover .ix-type,.ix-row.is-active .ix-type{color:var(--ink)}
.js:not(.ix-fail) .ix-item .ix-row > .ix-type{transition-delay:.18s}
.ix-head{position:relative;padding:0 0 14px;font:500 12px/1.3 var(--mono);color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.ix-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform-origin:left}
.ix-list{list-style:none;margin:0;padding:0}
.ix-item{position:relative}
.ix-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transform-origin:left}
.ix-row{position:relative;isolation:isolate;align-items:baseline;padding:24px 0;transition:color .35s}
.ix-row::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-16px;right:-16px;background:var(--mint);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.ix-row:hover::before,.ix-row:focus-visible::before,.ix-row.is-active::before{transform:scaleY(1);transform-origin:top}
.ix-no{font:400 13px/1 var(--mono);color:var(--grey);transition:color .3s}
.ix-title{font:700 clamp(28px, 3.1vw, 44px)/1 var(--display);letter-spacing:-.035em;display:flex;align-items:baseline;gap:.25em;min-width:0}
.ix-title-in{display:inline-block;transition:transform .6s var(--ease)}
.ix-arrow{display:inline-block;font-weight:500;opacity:0;transform:translate(-10px, 10px) rotate(-45deg);transition:opacity .3s, transform .6s var(--ease)}
.ix-client{font-size:16px;color:var(--text2);transition:color .3s, transform .6s var(--ease)}
.ix-row:hover .ix-title-in,.ix-row:focus-visible .ix-title-in,.ix-row.is-active .ix-title-in{transform:translateX(14px)}
.ix-row:hover .ix-arrow,.ix-row:focus-visible .ix-arrow,.ix-row.is-active .ix-arrow{opacity:1;transform:translate(14px, 0) rotate(0)}
.ix-row:hover .ix-no,.ix-row:hover .ix-client,.ix-row.is-active .ix-no,.ix-row.is-active .ix-client{color:var(--ink)}
@media (hover:hover){
  .ix-list:hover .ix-row:not(:hover){color:#b9b9b6}
  .ix-list:hover .ix-row:not(:hover) .ix-client,.ix-list:hover .ix-row:not(:hover) .ix-type,.ix-list:hover .ix-row:not(:hover) .ix-no{color:#c9c9c6}
}
.ix-row-thumb{display:none}
.ix-count{margin:18px 0 0;font:500 12px/1 var(--mono);color:var(--grey);text-transform:uppercase;letter-spacing:.06em;text-align:right}

/* entrada da lista */
@media (prefers-reduced-motion:no-preference){
  .js:not(.ix-fail) .ix-head::after,.js:not(.ix-fail) .ix-item::after{transform:scaleX(0);transition:transform 1.2s var(--ease-in-out)}
  .js:not(.ix-fail) .ix-head.in::after,.js:not(.ix-fail) .ix-item.in::after{transform:scaleX(1)}
  .js:not(.ix-fail) .ix-head > span,.js:not(.ix-fail) .ix-item .ix-row > span:not(.ix-row-thumb){opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .9s var(--ease)}
  .js:not(.ix-fail) .ix-item .ix-row > .ix-title{transition-delay:.06s}
  .js:not(.ix-fail) .ix-item .ix-row > .ix-client{transition-delay:.12s}
  .js:not(.ix-fail) .ix-head.in > span,.js:not(.ix-fail) .ix-item.in .ix-row > span:not(.ix-row-thumb){opacity:1;transform:none}
  /* depois de aparecer, o deslocamento do hover volta a ser imediato */
  .js .ix-item.done .ix-row > span{transition-delay:0s!important}
}

/* imagem que segue o cursor */
.ix-float{position:fixed;left:0;top:0;z-index:30;width:400px;height:260px;pointer-events:none;will-change:transform}
.ix-float-in{position:relative;width:100%;height:100%;overflow:hidden;transform:scale(0);border-radius:2px;box-shadow:0 30px 60px rgba(0,0,0,.18);transition:transform .55s var(--ease)}
.ix-float.on .ix-float-in{transform:scale(1)}
.ix-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.25);transition:clip-path .6s var(--ease), transform 1s var(--ease)}
.ix-float img.on{clip-path:inset(0 0 0 0);transform:scale(1);z-index:2}
.ix-float img.was{z-index:1;clip-path:inset(0 0 0 0);transform:scale(1)}

/* cursor personalizado */
.ix-cursor{display:none}
.has-cursor .ix-cursor{display:grid;place-items:center;position:fixed;left:0;top:0;z-index:90;width:88px;height:88px;margin:-44px 0 0 -44px;pointer-events:none;will-change:transform}
.has-cursor .ix-cursor::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ink);transform:scale(.11);transition:transform .45s var(--ease), background .3s, opacity .3s}
.has-cursor .ix-cursor.is-link::before{transform:scale(.42);background:var(--mint);mix-blend-mode:multiply}
.has-cursor .ix-cursor.is-label::before{transform:scale(1);background:var(--mint)}
.has-cursor .ix-cursor.is-down::before{transform:scale(.08)}
.has-cursor .ix-cursor.is-label.is-down::before{transform:scale(.88)}
.has-cursor .ix-cursor.is-out::before{opacity:0}
.ix-cursor-label{position:relative;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);opacity:0;transform:scale(.6);transition:opacity .25s, transform .45s var(--ease)}
.ix-cursor.is-label .ix-cursor-label{opacity:1;transform:none}
.has-cursor .th-indice, .has-cursor .th-indice a, .has-cursor .th-indice button{cursor:none}
.has-cursor .th-indice .pv-bar, .has-cursor .th-indice .pv-bar *{cursor:pointer}

/* ---------- projeto ---------- */
.ix-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;pointer-events:none}
.ix-progress span{display:block;height:100%;background:var(--mint);transform:scaleX(0);transform-origin:left}
.ix-draft{max-width:var(--wrap);margin:16px auto 0;padding:10px var(--gut);font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;background:#fff6d6}
.ix-p-head{padding-top:48px;padding-bottom:40px}
.ix-back{display:inline-flex;gap:8px;font:500 13px/1 var(--mono);color:var(--grey);text-transform:uppercase;letter-spacing:.06em;transition:color .2s, gap .4s var(--ease)}
.ix-back:hover{color:var(--ink);gap:14px}
.ix-p-title{margin-top:28px;font-size:clamp(52px, 11.7vw, 168px);line-height:.86}
.ix-p-title .ln{display:block}
.ix-meta{margin:48px 0 0;display:grid;grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr));column-gap:24px;row-gap:20px;border-top:1.5px solid var(--ink);padding-top:16px}
.ix-meta dt{font:500 12px/1.3 var(--mono);color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.ix-meta dd{margin:6px 0 0;font-size:17px}
.ix-meta-role{grid-column:-2 / -1;text-align:left}
.ix-meta > div:nth-child(2){transition-delay:.08s!important}
.ix-meta > div:nth-child(3){transition-delay:.16s!important}
.ix-meta > div:nth-child(4){transition-delay:.24s!important}

.ix-hero{margin:0;height:clamp(300px, 50vw, 720px);overflow:hidden;background:var(--soft)}
.ix-hero-img{width:100%;height:100%;object-fit:cover;scale:1.12;will-change:translate}
@media (prefers-reduced-motion:no-preference){
  .ix-hero{animation:ix-clip 1.4s var(--ease-in-out) .35s both}
  .ix-hero-img{animation:ix-zoom 2.2s var(--ease) .35s both}
}
@keyframes ix-clip{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ix-zoom{from{scale:1.4}to{scale:1.12}}

.ix-about-p{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:24px;padding-top:96px;padding-bottom:96px}
.ix-about-p > .ix-label{grid-column:1 / 4;margin-top:8px}
.ix-text{grid-column:4 / 11;display:flex;flex-direction:column;gap:22px}
.ix-text p{margin:0;font-size:20px;line-height:1.55;color:var(--text2)}
.ix-text p.ix-first{font-size:30px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.ix-awards{list-style:none;margin:20px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.ix-awards li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px;display:flex;gap:12px;align-items:baseline}
.ix-awards li::before{content:"✦";color:var(--ink);font-size:12px;transform:translateY(-1px)}

.ix-media{display:flex;flex-direction:column;gap:24px}
/* sem texto de descrição: espaço entre a imagem do topo e o primeiro vídeo/imagem */
.ix-hero + .ix-media{padding-top:96px}
.ix-film{position:relative;aspect-ratio:16 / 9;background:var(--ink);overflow:hidden}
.ix-film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:transform 1.2s var(--ease), filter .5s, opacity .6s}
.ix-film:hover .ix-film-poster{filter:brightness(.6)}
.js:not(.ix-fail) .rv-media.in .ix-film-poster{transform:scale(1.001)}
.ix-film:hover .ix-film-poster{transform:scale(1.04)!important}
.ix-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:inline-flex;align-items:center;gap:12px;padding:18px 26px;background:var(--mint);color:var(--ink);font-weight:500;font-size:16px;z-index:2;transition:padding .4s var(--ease), background .3s}
.ix-play:hover{padding:18px 32px}
.ix-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.ix-film.is-playing .ix-play,.ix-film.is-playing .ix-film-poster{opacity:0;pointer-events:none}
.ix-film.is-bg iframe{pointer-events:none}
.ix-grid{display:grid;gap:24px;align-items:start}
.ix-grid.is-duo{grid-template-columns:repeat(2, minmax(0, 1fr))}
.ix-grid.is-trip{grid-template-columns:repeat(3, minmax(0, 1fr))}
.ix-cell,.ix-full{margin:0;overflow:hidden;background:var(--soft)}
.ix-cell img,.ix-full img,.ix-cell video,.ix-full video{width:100%;height:auto}
.ix-grid.is-trip .ix-cell:nth-child(3n+2){transition-delay:.1s}
.ix-grid.is-trip .ix-cell:nth-child(3n){transition-delay:.2s}
.ix-grid.is-duo .ix-cell:nth-child(2n){transition-delay:.1s}

.ix-next{padding-top:120px;padding-bottom:24px}
.ix-next .ix-label{margin-bottom:14px}
.ix-next .ix-list{border-top:1.5px solid var(--ink)}
.ix-next .ix-row{grid-template-columns:72px minmax(0, 6fr) minmax(0, 3fr) 240px;align-items:center}
.ix-side-thumb{width:240px;height:120px;overflow:hidden;background:var(--soft)}
.ix-side-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ix-row:hover .ix-side-thumb img{transform:scale(1.08)}

/* ---------- sobre ---------- */
.ix-a-intro{padding-top:48px;padding-bottom:96px}
.ix-big{font-size:clamp(44px, 7.2vw, 104px);line-height:.88}
.ix-a-grid{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:24px;margin-top:56px;align-items:end}
.ix-a-photo{grid-column:1 / 5;margin:0;overflow:hidden;background:var(--soft)}
.ix-a-photo img{width:100%;height:auto;filter:grayscale(1);transition:filter .7s var(--ease), transform 1.6s var(--ease)!important}
.ix-a-photo:hover img{filter:none}
.ix-a-text{grid-column:6 / 12;display:flex;flex-direction:column;gap:18px}
.ix-a-lead{margin:0;font-size:20px;line-height:1.5;letter-spacing:-.005em}
.ix-table{padding-bottom:96px}
.ix-table > .ix-label{margin-bottom:22px}
.ix-t4{display:grid;grid-template-columns:150px minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr);column-gap:24px;align-items:baseline}
.ix-table .ix-head{border-bottom:0}
.ix-trows{list-style:none;margin:0;padding:0}
.ix-trows li{padding:18px 0;border-bottom:1px solid var(--rule);font-size:16px;color:var(--text2);transition:background .3s, padding .4s var(--ease)}
.ix-trows li:hover{background:var(--soft)}
.ix-t-y{font:400 13px/1 var(--mono);color:var(--grey)}
.ix-t-main{font:700 22px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.ix-t-main em{font:500 13px/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;background:var(--mint);padding:4px 6px;margin-left:6px;vertical-align:4px}
.ix-t-dim{color:var(--grey)}
.ix-t-wide{grid-column:3 / 5}
.js:not(.ix-fail) .ix-trows li.rv{transition-delay:calc(min(var(--d), 8) * 40ms)}

/* ---------- 404 ---------- */
.ix-nf{padding-top:64px;padding-bottom:120px}
.ix-nf .ix-big{margin-top:20px}
.ix-lead{font-size:24px;margin:32px 0}

/* ---------- rodapé ---------- */
.ix-foot{max-width:var(--wrap);margin:0 auto;padding:120px var(--gut) 40px}
.ix-foot .ix-label{margin-bottom:18px}
.ix-mail{display:inline-block;font:700 clamp(20px, 2vw, 28px)/1.2 var(--display);letter-spacing:-.02em;background:linear-gradient(var(--mint), var(--mint)) no-repeat 0 100% / 100% 3px;padding:0 .04em;transition:background-size .5s var(--ease);overflow-wrap:anywhere}
.ix-mail:hover{background-size:100% 100%}
.ix-foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:20px;border-top:1px solid var(--rule);font-size:14px;color:var(--grey)}
.ix-foot-row a:hover{color:var(--ink)}
.ix-top{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* entrada geral da página (navegadores sem view transitions) */
@media (prefers-reduced-motion:no-preference){
  .ix-bar{animation:ix-fade .8s var(--ease) both}
}
@keyframes ix-fade{from{opacity:0}}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .ix-next .ix-row{grid-template-columns:56px minmax(0, 1fr) 160px}
  .ix-next .ix-client{display:none}
  .ix-side-thumb{width:160px;height:90px}
  .ix-text{grid-column:4 / 13}
  .ix-t4{grid-template-columns:110px minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr)}
}

/* ---------- celular ---------- */
@media (max-width:720px){
  :root{--gut:20px}
  .ix-bar{padding:14px var(--gut);gap:12px}
  .ix-role{font-size:11px}
  .ix-logo{font-size:19px}
  .ix-nav{gap:16px;font-size:14px}
  .ix-mast{padding-top:24px;padding-bottom:56px}
  .ix-name{font-size:clamp(44px, 15vw, 72px)}
  .ix-name .w{display:block}
  .ix-mast-foot{display:block;margin-top:24px}
  .ix-intro{font-size:18px;line-height:1.4}
  .ix-down{display:none}

  .ix-head{display:none}
  .ix-list{border-top:1.5px solid var(--ink)}
  .ix-row,.ix-index .ix-row{grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"title no" "client type" "thumb thumb";row-gap:6px;padding:18px 0}
  .ix-type{grid-area:type;font-size:13px;text-align:right}
  .ix-row::before{left:-12px;right:-12px}
  .ix-no{grid-area:no;font-size:12px}
  .ix-title{grid-area:title;font-size:28px;letter-spacing:-.03em}
  .ix-client{grid-area:client;font-size:13px}
  .ix-arrow{display:none}
  .ix-row:hover .ix-title-in,.ix-row.is-active .ix-title-in{transform:none}
  .ix-row-thumb{grid-area:thumb;display:block;height:0;overflow:hidden;transition:height .6s var(--ease), margin .6s var(--ease)}
  .ix-row-thumb img{width:100%;height:190px;object-fit:cover;transform:scale(1.15);transition:transform 1.2s var(--ease)}
  .ix-row.is-active .ix-row-thumb{height:190px;margin-top:10px}
  .ix-row.is-active .ix-row-thumb img{transform:none}
  .ix-count{text-align:left}
  .ix-index{padding-bottom:72px}

  .ix-p-head{padding-top:28px;padding-bottom:28px}
  .ix-p-title{margin-top:20px;font-size:clamp(44px, 14vw, 88px)}
  .ix-meta{grid-template-columns:repeat(2, minmax(0, 1fr));margin-top:32px}
  .ix-meta-role{grid-column:1 / -1;text-align:left}
  .ix-hero{height:56vw;min-height:220px}
  .ix-about-p{display:block;padding-top:56px;padding-bottom:56px}
  .ix-about-p > .ix-label{margin:0 0 18px}
  .ix-text p{font-size:17px}
  .ix-text p.ix-first{font-size:23px}
  .ix-media{gap:12px}
  .ix-hero + .ix-media{padding-top:48px}
  .ix-grid{gap:12px}
  .ix-grid.is-trip{grid-template-columns:minmax(0, 1fr)}
  .ix-play{padding:14px 20px;font-size:15px}
  .ix-next{padding-top:72px}
  .ix-next .ix-row{grid-template-columns:minmax(0, 1fr) 96px;grid-template-areas:none;column-gap:14px}
  .ix-next .ix-no{display:none}
  .ix-next .ix-title{font-size:22px}
  .ix-side-thumb{width:96px;height:64px}

  .ix-a-intro{padding-top:28px;padding-bottom:56px}
  .ix-big{font-size:clamp(40px, 13vw, 64px)}
  .ix-big .w{display:block}
  .ix-a-grid{display:block;margin-top:32px}
  .ix-a-photo{max-width:320px;margin-bottom:28px}
  .ix-a-lead{font-size:17px}
  .ix-table{padding-bottom:56px}
  .ix-table .ix-head{display:none}
  .ix-t4{grid-template-columns:64px minmax(0, 1fr);row-gap:4px}
  .ix-t4 > span:nth-child(n+3){grid-column:2}
  .ix-t-wide{grid-column:2}
  .ix-t-main{font-size:19px}
  .ix-trows li{font-size:14px;padding:14px 0}

  .ix-foot{padding-top:72px;padding-bottom:28px}
  .ix-mail{font-size:20px}
  .ix-foot-row{margin-top:36px}
}
@media (max-width:420px){
  .ix-nav-contact{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}